{% extends 'default_frame.twig' %}
{# 投稿リストの取得 #}
{% set post_list = TabaCMSPostList({ page_count: 10, type_data_key: 'news', category_data_key: app.request.query.get('category_data_key') }) %}
{% set category_list = TabaCMSCategoryList({type_data_key:'news'}) %}
{% block javascript %}
{{ TabaCMSAsset('script.js','script')|raw }}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('.category-button').on('click', function() {
var categoryKey = $(this).data('category-key');
var url = new URL(window.location.href);
url.searchParams.set('category_data_key', categoryKey);
window.location.href = url.href;
});
});
</script>
{% endblock javascript %}
{% block stylesheet %}
{{ TabaCMSAsset('style.css','style')|raw }}
<style>
@media (min-width: 769px) {
.content-container.sp {
display: none;
}
}
</style>
{% endblock stylesheet %}
{% set breadcrumbs = [{'name': 'ニュース'}] %}
{% block main %}
<div class="flex w-[990px] justify-between mx-auto lg:w-full lg:flex-col lg:items-center lg:px-4">
<div class="w-[720px] text-[#000000] md:w-full mt-[40px] lg:mt-6">
<p class="flex justify-center text-[34px] md:text-2xl font-extralight">お知らせ</p>
<p class="text-[16px] font-[250] items-center mt-6 md:mt-4 mb-10 md:mb-8 md:text-[14px]">
商品についての情報、お得な情報などをお届けします。
</p>
{% for post in post_list %}
<a href="{{ post.getURI }}" class="hover flex gap-2.5 justify-between my-14 md:my-10 md:w-full h-[210px] md:mx-auto md:flex-col md:h-[auto]">
<div class="w-[320px] md:w-full">
<img src="{{ asset(post.thumbnail|no_image_product, 'save_image') }}" class="w-[320px] h-full md:w-full md:h-[225px] object-cover">
</div>
<div class="w-[364px] font-[250px] flex flex-col gap-2 md:w-full">
<h2 class="text-2xl text-[#000000] md:text-lg font-extralight">{{ post.getTitle }}</h2>
{% if post.category %}
<time datetime={{ post.getPublicDate|date('Y-m-d') }} class="text-[13px] text-[#666666]">
<span>{{ post.getPublicDate|date('Y.m.d') }}更新<span>
<span class="pl-2">{{ post.category.categoryName }}<span>
</time>
{% endif %}
{% set stripped_body = post.body|striptags %}
<p class="text-[14px] text-[#666666]">
{{ stripped_body|length > 90 ? stripped_body|slice(0, 90) ~ '...' : stripped_body|raw }}
</p>
</div>
</a>
{% endfor %}
{% if post_list.totalItemCount > 0 %}
{% include "pager.twig" with {'pages':post_list.paginationData} %}
{% endif %}
</div>
<div class="w-[200px] md:w-full flex flex-col mt-1 md:mt-0">
<div class="text-sm text-[250] text-[#000000] md:p-[30px] md:mt-6 md:bg-[#F6F6F6]">
<p>Category :</p>
<div class="mt-[10px] text-[#000000] md:font-[400]">
{% for category in category_list %}
<p>
<button class="category-button w-full text-left my-[2px] underline" data-category-key="{{ category.dataKey }}">
{{ category.categoryName }} ({{ category.postCount }})
</button>
</p>
{% endfor %}
</div>
</div>
</div>
</div>
{% set breadcrumbs = [{'name': 'お知らせ・読み物'}] %}
{% include('Block/breadcrumbs.twig') %}
{% endblock %}