ブログ記事に同じタグをを持つ「商品一覧」を実装する方法ついて紹介します。簡単なサンプルコード紹介、コレクション指定、商品表示件数を順に見ていきます。
ECサイトにおいてブログ記事作成は、SEO効果やエンゲージメントの向上など、メリットが多いとされます。
Shopifyは、ブログ記事作成のための様々な機能が揃っており、ブログ集客も容易にできる環境が整っていると言っても過言ではないと思います。
ユーザーは、ストアのブログ記事を通じて商品に興味を持ちやすくなるため、いくつか工夫する事によってコンバージョン率アップが期待できます。
今回は、ブログ記事に同じタグをを持つ「商品一覧」を実装する方法ついてサンプルコードを交えて紹介・考察してみたいと思います。
前提
今回紹介するコードを活用するための前提です。
ブログのタグは1つだけ
以前、【Shopify小技】商品ページに同じタグを持つ「ブログ記事一覧」を実装したいという記事でも紹介しましたが、商品とブログが共通で持ち、関連付けできるものは「タグ(tag)」しかありません。
タグが複数ある場合、「どのタグでマッチさせるか」という問題点が出てきます。
そのため、この記事で紹介する手法を活用するためには、ブログに付けるタグの数を1つに制限する必要があります。（※商品のタグは複数でも大丈夫です）
セクションを作る
実装方法としては、セクションを作成、ビジュアルエディタで実装します。
サンプルコード
では、作成するセクションのサンプルコードです。
{% schema %}
{
"name": "tag-related-product",
"presets": [
{
"name": "同一タグ商品一覧"
}
]
}
{% endschema %}
{% assign article_tag = article.tags[0] %}
<ul class="news-list">
{% for product in collections['all'].products %}
{% for tag in product.tags %}
{% if tag == article_tag %}
<li class="collection-product-item">
<a href="{{ product.url }}">
<p>{{ product.title }}</p>
</a>
</li>
{% endif %}
{% endfor %}
{% endfor %}
</ul>①コレクションを指定せず、全商品(all)を対象にしています。
②ブログのタグは、1番目のタグ(article.tags[0])を取得している。タグは任意で順番調整が簡単ではないため、タグは１つだけにする事を推奨するわけです。
コレクションを指定
全商品を対象にせず、コレクションを指定したい場合は、スキーマ設定を追加と、商品ループを修正してください。
"id": "collection_handle",
"type": "collection",
"label": "表示するコレクションを選択"{% for product in collections[section.settings.collection_handle].products %}商品表示数指定
商品一覧の表示数の指定ですが、コレクションが指定されていると、
{% for product in collections[section.settings.collection_handle].products limit: 6 %}という指定ができますが、全商品(all)の場合は、なぜかうまくいきませんでした。
その時は、カウンタ(回数を数える変数)を用いて表示数を制限します。
{% assign article_tag = article.tags[0] %}
{% assign counter = 0 %}
<ul class="news-list">
{% for product in collections['all'].products %}
{% if counter < 2 %}
{% for tag in product.tags %}
{% if tag == article_tag %}
<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>
{% assign counter = counter | plus: 1 %}
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
</ul>ここでは、{% assign counter = 0 %}にしておき、{% if counter < 2 %}と{% assign counter = counter | plus: 1 %}で、記事表示件数は2件になります。
以上、ブログ記事に同じタグをを持つ「商品一覧」を実装する方法ついて紹介いたしました。ぜひご活用ください！
