テーマ仕様書
shop
商品カテゴリー画面
一覧

商品カテゴリー一覧画面

商品カテゴリー一覧を表示する画面です。

ショップのパス

ドメイン/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であてたイメージになります。コンポーネントのコードのみだと、このような表示にはなりませんのでご注意ください。