EC-CUBE4では管理画面のコンテンツ管理機能を応用するとカテゴリページごとにコンテンツを追加できる。
説明は後で追加します。
category_contents.twig
{% if Category %}
{% set category_block_name = 'Block/category_'~Category.id~'.twig' %}
{{ include(category_block_name) }}
{% endif %}
ジェラートカテゴリのブロック
category_1.twig
<div class="ec-sliderRole"><img src="{{ asset('assets/img/top/img_hero_pc02.jpg') }}"></div>
category_1.twig
<div class="ec-pickupRole">
<h2 class="ec-pickupRole__title">
<picture>
<source media="(max-width:768px)" srcset="/html/user_data/pickup_gelato_sp.png">
<img src="/html/user_data/pickup_gelato_pc.png" alt="ジェラート特集">
</picture>
</h2>
<p class="ec-pickupRole__description">
カテゴリ一覧に静的HTMLを追加し、特集ページを作る方法です<br>
picuture要素を使うことで、特集タイトル画像をPCとスマホで切り替えることができます。
</p>
</div>
customize.css
img{
max-width: 100%;
height: auto;
}
.ec-pickupRole{
width: 100%;
max-width: 1130px;
margin: 10px auto 30px;
}
.ec-pickupRole__title{
margin-bottom: 20px;
}
.ec-pickupRole__description{
text-align: center;
font-size: 18px;
font-weight: bold;
}
アイスカテゴリのブロック
category_5.twig
<div class="ec-sliderRole"><img src="{{ asset('assets/img/top/img_hero_pc05.jpg') }}"></div>