商品カテゴリー一覧画面
商品カテゴリー一覧を表示する画面です。
ショップのパス
ドメイン/shop/product_categories
テーマ管理のファイルパス
ec_force/shop/product_categories/index.html.liquid
ec_force/shop/product_categories/index.html+smartphone.liquid
JS タグ
{{ 'shop/product_categories' | javascript_include_tag }}
必要なコンポーネント
※任意とあるもの以外はシステム上必要なコンポーネントとなりますので、必ず使用するようにしてください。
{{ 'shop/product_categories' | javascript_include_tag }}
<!-- 商品カテゴリー一覧(全て任意) -->
{% for product_category in product_categories %}
{% if product_category.product_category_visibility %}
<!-- 商品カテゴリー画像(任意) -->
<a href="/shop/product_category/{{ product_category.slug }}">
{% if product_category.thumbnail.url %}
{% assign src = product_category.thumbnail.url %}
{% else %}
{% assign src = 'missing' | image_url %}
{% endif %}
<img src="{{ src }}">
</a>
<!-- 商品カテゴリー名(任意) -->
<a href="/shop/product_category/{{ product_category.slug }}">{{ product_category.name }}</a>
<!-- 親カテゴリー名(任意) -->
{% if product_category.parent %}
<a href="/shop/information_categories/{{ product_category.parent.slug }}">{{ product_category.parent.name }}</a>
{% endif %}
{% endif %}
{% endfor %}
画面イメージ
※こちらは、上記で紹介しているコンポーネントのコードにデフォルトデザインをCSSであてたイメージになります。コンポーネントのコードのみだと、このような表示にはなりませんのでご注意ください。