テーマ仕様書
shop
セレクション画面
詳細

セレクション画面

「商品管理 > セレクション管理 (opens in a new tab)」で作成したセレクションを表示する画面です。 セレクション機能では、特定のテーマやトピック(父の日、バレンタイン、◯◯コラボなど)に焦点を当て、それに関する情報を1つのページにまとめて表示するセレクションページ(https://ドメイン/shop/selections/XXX)を作成できます。

ページネーションについて

デフォルトでは商品を10件ずつ表示しています。
1ページあたりの商品の表示数を変更したい場合は {% paginate products_all by 10 %} の数字を変更してください。(複数箇所ある場合は、すべて同じ数字にしてください)

ショップのパス

ドメイン/shop/selections/XXXX
※XXXXの部分は「商品管理 > セレクション管理 (opens in a new tab)」で設定したスラッグです。

テーマ管理のファイルパス

ec_force/shop/selections/show.html.liquid
ec_force/shop/selections/show.html+smartphone.liquid

JS タグ

{{ 'shop/selections' | javascript_include_tag }}

必要なコンポーネント

※コメントアウトで任意とあるもの以外はシステム上必要なコンポーネントとなります。

{{ 'shop/selections' | javascript_include_tag }}
 
<!-- セレクション画面 -->
<div id="selection-show-view">
 
  <!-- アイキャッチ画像(任意) -->
  {% if eye_catch %}
    <img src="{{ eye_catch }}">
  {% endif %}
 
  <!-- タイトル(任意) -->
  {{ selection.title }}
 
  <!-- セレクションの説明(任意) -->
  {{ selection.parsed_content }}
 
  <!-- 全件数表示(任意) -->
  {% paginate products_all by 10 %}
    {{ paginate.items }}
  {% endpaginate %}
  件該当しました
 
  <!-- ソート機能(任意) -->
  <select id="select_sort">
    {{ recommend_sort | append: ' desc' | ransack_sort_link: 'おすすめ順' }}
    {{ 'master_sales_price desc' | ransack_sort_link: '価格の高い順' }}
    {{ 'master_sales_price asc' | ransack_sort_link: '価格の安い順' }}
    {{ 'released_at desc' | ransack_sort_link: '発売日降順' }}
    {{ 'released_at asc' | ransack_sort_link: '発売日昇順' }}
    {{ 'product_reviews_average_score desc' | ransack_sort_link: 'レビュー評価順' }}
    {{ 'product_sale_summaries_total_sale desc' | ransack_sort_link: '人気順' }}
  </select>
 
  <div>
    <!-- セレクション 商品一覧 -->
    {% for product in products %}
      <!-- 商品画像(任意) -->
      {% if product.thumbnail.url %}
        {% assign thumbnail_url = product.thumbnail.url %}
      {% else %}
        {% assign thumbnail_url = 'missing' | image_url  %}
      {% endif %}
      <a href="/shop/products/{{ product.master.sku }}">
        <img src="{{ thumbnail_url }}">
      </a>
 
      <!-- 商品名 -->
      <a href="/shop/products/{{ product.master.sku }}">{{ product.name }}</a>
 
      <!-- 予約マーク(任意) -->
      {% if enabled_pre_order and product.master.pre_order.is_pre_order? and pre_order_settings.display_mark %}
        予約商品
      {% endif %}
      
      <!-- 商品バッジ(任意) -->
      {% if concurrent_purchase_group_badge_flg_hash[product.id] or campaign_badge_flg_hash[product.id] %}
        <!-- 同時購入グループバッジ(任意) -->
        {% if concurrent_purchase_group_badge_flg_hash[product.id] %}
          <!-- 「バッジ表示名」を表示したい場合、product.concurrent_purchase_group_names を product.concurrent_purchase_badge_names に修正してください。 -->
          {% for concurrent_purchase_group_name in product.concurrent_purchase_group_names %}
            {{ concurrent_purchase_group_name }}
          {% endfor %}
        {% endif %}
 
        <!-- キャンペーンバッジ(任意) -->
        {% assign badges = campaign_badge_flg_hash[product.id] | liquid_render_badges %}
        {% for render_badge in badges %}
          {{ render_badge | hash: 'value' }}
        {% endfor %}
      {% endif %}
 
      <!-- 販売価格(任意) -->
      {{ product.first_price | number_to_currency: format: '%n %u' }}
 
      <!-- レビュー平均点(任意) -->
      {% if product.average_star > 0 %}
        レビュー平均点は {{ product.average_star }} です。
      {% endif %}
 
      <!-- 本文 (PC) -->
      {{ product.parsed_description | simple_format }}
 
      <!-- 本文(モバイル) -->
      {{ product.parsed_description_mobile | simple_format }}
 
    {% endfor %}
  </div>
 
  <!-- ページネーション -->
  {% paginate products_all by 10 %}
 
  <!-- 件数表示(任意) -->
  {% if paginate.items == 0 %}
    0 件表示中です
  {% else %}
    {{ paginate.items }} 件中
    {% assign per_page = paginate.page_size | times: paginate.current_page %}
    {{ per_page | minus: paginate.page_size | plus: 1 }} - {% if paginate.items < per_page %}{{ paginate.items }}{% else %}{{ per_page }}{% endif %} 件を表示しています
  {% endif %}
 
  <!-- ページネーションリンク -->
  {% if paginate.previous %}
    <a href="{{ paginate.previous.url }}">前へ</a>
  {% endif %}
  {% for page in paginate.parts %}
    {% if paginate.current_page == page.title %}
      <a>{{ page.title }}</a>
    {% elsif page.is_link %}
      <a href="{{ page.url }}">{{ page.title }}</a>
    {% else %}
      <a>{{ page.title }}</a>
    {% endif %}
  {% endfor %}
  {% if paginate.next %}
    <a href="{{ paginate.next.url }}">次へ</a>
  {% endif %}
 
  {% endpaginate %}
 
</div>
 
<!-- メタタイトル(任意) -->
{% if selection.meta_title %}
  {{ selection.meta_title }}
{% else %}
  {{ selection.title }}
{% endif %}
 
<!-- メタディスクリプション(任意) -->
{{ selection.meta_description }}
 
<!-- メタキーワード(任意) -->
{{ selection.meta_keywords }}
 
<!-- OG画像(任意) -->
{{ og_image }}