Shopifyストアの全商品を対象にするのではなく、同じ商品カテゴリーの「売れ筋ランキング」の設置について考察します。順位付けはforloop.indexが使えないのｄ、別の方法を紹介します。
ECサイトにおいて、ユーザーの購買意欲向上はもちろん、サイト回遊の促進、コンバージョン率の向上やSEO効果など、様々なメリットがあると言われる「売れ筋ランキング」。
先日、forloop.indexを使って「売れ筋ランキング (セクション)」を作るという記事にて設置する方法などを紹介しました。
今回は、ストアの全商品を対象にするのではなく、同じ商品カテゴリーの「売れ筋ランキング」の設置について考察してみたいと思います。
設置案としては、同じ「商品タイプ」を持つ商品の「売れ筋ランキング」をセクションとして作成する方法になります。
こんなイメージ
女性用の化粧品を販売するストアのクレンジングオイル製品を例に挙げます。
その属性としては、例えば「クレンジング」「韓国コスメ」「自然由来成分」「コスパ抜群」「送料無料」「返品保証」などがあるとしたら、最上位分類は「クレンジング」になります。
この最上位分類を「商品タイプ」でカテゴライズし、さらに最も売れているラインナップを紹介するのが、本記事で紹介する実装イメージになります。
商品タイプとは
まず「商品タイプ」についておさえておきましょう。
「商品タイプ」とは、商品のカテゴリーを定義・使用する事が可能な機能です。
詳しい説明は、Shopify公式サイトの商品タイプをご確認ください。
なぜ「商品タイプ」を用いるのか
「商品タイプ」は「1商品＝１カテゴリー」しか定義ができない仕様になっているため、(個人的な偏見かもしれません)コレクションやタグよりは、商品の最上位分類に適しているのかと思います。
前出の記事「forloop.indexを使って「売れ筋ランキング (セクション)」を作る」でも紹介しましたが、「売れ筋ランキング」というコレクションをベースにしています。
※【注意】本記事で説明する内容を理解するためには、まずforloop.indexを使って「売れ筋ランキング (セクション)」を作る （前の記事）をご確認いただく必要があります。
この「売れ筋ランキング」というコレクションに、共通の属性を持つ「売れ筋ランキング」を作るのが今回の課題です。
共通の属性を持たせる方法として最も一般的なのが「タグ」です。が、タグは1商品に対して複数付ける事ができるため、商品カテゴリーにするには作成面でも、運営面でもやや複雑な感じがします。
そこで、「1商品＝１カテゴリー」の「商品タイプ」を商品の代表カテゴリーに位置付けし、今回紹介する方法にたどり着きました。
セクションを作成
では、商品ページにて商品タイプが一致する商品の「売れ筋ランキング」を表示させるためのセクションを作成します。
以下は、サンプルコードです。
{%- assign type = product.type -%} //表示中の商品の「商品タイプ」を変数「type」に格納
<div id="section-collection-products" data-aos="fade-up" data-aos-duration="1100">
<div class="container productBox">
<div class="collection-products-heading">
<h2>{{ type }}人気ランキング</h2>
</div>
<ul class="collection-products">
{%- for product in collections[section.settings.collection_handle].all_products limit:5 -%} //ループ
{% if product.type == type %} //商品タイプが位置すれば、以下を表示
<li class="collection-product-item">
<a href="{{ product.url }}">
<div class="collection-product-image">
<img src="{{ product.featured_image.src | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}">
</div>
<div class="collection-product-info">
<div class="collection-product-title"><p>{{ product.title }}</p></div>
</div>
</a>
</li>
{% endif %}
{%- endfor -%}
</ul>
</div>
</div>
{% schema %}
{
"name": "商品タイプ売れ筋ランキング",
"settings": [
{
"id": "collection_handle",
"type": "collection",
"label": "表示するコレクションを選択"
},
]
}
{% endschema %}コードは至ってシンプルです。
見てのとおり、商品タイプを取得に用いるオブジェクト{{ product.type }}。これが一致する商品のみを表示させる仕組みです。
順位を付ける
では、「No1」「No2」と、順位を付ける方法について見てみましょう。
前の記事では、forloop.indexを用いて、以下のような実装方法を紹介しました。
{%- case forloop.index -%}
{%- when 1 -%} <span class="rank">No1</span>
{%- when 2 -%} <span class="rank">No2</span>
{%- when 3 -%} <span class="rank">No3</span>
{%- endcase -%}しかし、forloop.indexは、「for文」全体のインデックスを返すため、条件({% if product.type == type %})で除外されたアイテム(商品)もカウントされてしまいます。
そのため、以下のような工夫が必要になります。
<ul class="collection-products">
{%- assign rank_counter = 0 -%} //任意のカウンター変数を設定し初期化
{%- for product in collections[section.settings.collection_handle].all_products limit:5 -%}
{% if product.type == type %}
{%- assign rank_counter = rank_counter | plus: 1 -%} //カウンター変数をインクリメント
<li class="collection-product-item">
{%- case rank_counter -%}
{%- when 1 -%} <span class="rank">No1</span>
{%- when 2 -%} <span class="rank">No2</span>
{%- when 3 -%} <span class="rank">No3</span>
{%- endcase -%}
<a href="{{ product.url }}">
<div class="collection-product-image">
<img src="{{ product.featured_image.src | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}">
</div>
<div class="collection-product-info">
<div class="collection-product-title"><p>{{ product.title }}</p></div>
</div>
</a>
</li>
{% endif %}
{%- endfor -%}
</ul>ループが開始する前に、任意のカウンター変数rank_counterを「0」に初期化します。
ループが開始し、条件({% if product.type == type %})が一致したら、カウンター変数が「+1」ずつインクリメントする･･各アイデムに番号札が付けられるとイメージしてください。
その後、「case」と「when」の構文を使って、
・番号札「１」の場合は「No1」
・番号札「２」の場合は「No2」
・番号札「３」の場合は「N3」
と、表示させるのです。
※「case」と「when」の構文についてもっと知りたい方は、以下の記事をご確認ください。
Shopify Liquid 通知設置によく登場する「case」と「when」の使い方
以上、同じ「商品タイプ」を持つ商品の「売れ筋ランキング」をセクションとして作成する方法について紹介しました。
もちろん、最上位分類の商品カテゴリーが「商品タイプ」ではなくても大丈夫です。「コレクション」や「タグ」を用いても構わないですが、１つの商品に対して複数設定が可能なため、色々工夫は必要だと思います。
他にも、ユーザービリティや回遊率向上に役立つ「関連商品リスト」を実装するための、記事をご用意しておりますので、ご興味のある方はぜひご一読ください。
【Shopify小技】商品ページごとに違う関連商品リスト(コレクション)を表示させたい
