ランキング画面
ショップの売上ランキングを一覧で表示する画面です。
ランキング集計・表示対象設定などの機能詳細については FAQ (opens in a new tab) をご確認ください。
ショップのパス
ドメイン/shop/sale_ranking
テーマ管理のファイルパス
ec_force/shop/sale_rankings/show.html.liquid
ec_force/shop/sale_rankings/show.html+smartphone.liquid
JS タグ
{{ 'shop/sale_rankings' | javascript_include_tag }}
必要なコンポーネント
任意とあるもの以外はシステム上必要なコンポーネントとなりますので、必ず使用するようにしてください。
{{ 'shop/sale_rankings' | javascript_include_tag }}
<!-- ランキング画面 -->
{% for sale_ranking in sale_rankings %}
<!-- ランキング商品画像(任意) -->
<a href="/shop/products/{{ sale_ranking.product.master.sku }}">
{% if sale_ranking.product.thumbnail.url %}
{% assign src = sale_ranking.product.thumbnail.url %}
{% else %}
{% assign src = 'missing' | image_url %}
{% endif %}
<img src="{{ src }}">
</a>
<!-- ランキング順位(任意) -->
{{ sale_ranking.rank }}位
<!-- ランキング商品名(任意) -->
<a href="/shop/products/{{ sale_ranking.product.master.sku }}">{{ sale_ranking.product.name }}</a>
<!-- 商品バッジ(任意) -->
{% if pre_order_badge_flg_hash[sale_ranking.product.master.id] or delivery_group_badge_flg_hash[sale_ranking.product.id] or concurrent_purchase_group_badge_flg_hash[sale_ranking.product.id] or campaign_badge_flg_hash[sale_ranking.product.id] %}
<!-- ランキング商品予約マーク(任意) -->
{% if pre_order_badge_flg_hash[sale_ranking.product.master.id] %}
予約商品
{% endif %}
<!-- ランキング商品配送温度帯ラベル(任意) -->
{% for delivery_group_name in sale_ranking.product.delivery_group_names %}
{{ delivery_group_name }}
{% endfor %}
<!-- ランキング商品同時購入グループバッジ(任意) -->
<!-- 「バッジ表示名」を表示したい場合、sale_ranking.product.concurrent_purchase_group_names を sale_ranking.product.concurrent_purchase_badge_names に修正してください。 -->
{% for concurrent_purchase_group_name in sale_ranking.product.concurrent_purchase_group_names %}
{{ concurrent_purchase_group_name }}
{% endfor %}
<!-- キャンペーンバッジ(任意) -->
{% assign badges = campaign_badge_flg_hash[sale_ranking.product.id] | liquid_render_badges %}
{% for render_badge in badges %}
{{ render_badge | hash: 'value' }}
{% endfor %}
{% endif %}
<!-- ランキング商品説明(任意) -->
{{ sale_ranking.product.description | simple_format }}
<!-- ランキング商品販売価格(任意) -->
{{ sale_ranking.product.first_price | number_to_currency: format: '%n %u' }}
{% endfor %}
画面イメージ
※こちらは、上記で紹介しているコンポーネントのコードにデフォルトデザインをCSSであてたイメージになります。コンポーネントのコードのみだと、このような表示にはなりませんのでご注意ください。