セレクション画面
「商品管理 > セレクション管理 (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 }}