テーマ仕様書
shop
ランキング画面
ランキング画面

ランキング画面

ショップの売上ランキングを一覧で表示する画面です。
ランキング集計・表示対象設定などの機能詳細については 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であてたイメージになります。コンポーネントのコードのみだと、このような表示にはなりませんのでご注意ください。