[Shopify]特集コレクションを顧客タグごとで出し分けるセクションテンプレート(Dawn) #132
こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。
今日は顧客タグで特集コレクションで表示する商品を出し分けるセクションを作ってみました🎶ログインしていない顧客と特定顧客タグを持っている顧客へのアプローチを変えられるので便利。
レイアウトはDawnの既存のレイアウト使っています。なのでCSSはなし。Dawn使ってる人はそのままコピペで使えます。
✔️今回のゴール
顧客タグAのお客さんには商品一覧Bの商品を表示、
ログインしていないお客さんにはAの商品一覧を表示したり、顧客タグごとで表示する商品を出しわけ。
🔸CMSの特徴
================
ログインしていない時または
ログイン中で対象顧客タグを持っていない顧客への表示
================
※ここは既存の機能そのまま。
================
ログイン中で
特定の顧客タグごとに表示したい商品一覧を設定
================
1️⃣Block「Product Lists」を追加
2️⃣顧客タグ&コレクションを選択
✔️設定手順
📌Step1 新規セクション作成
管理画面>テーマ>コード編集>セクション>新規追加
上記の動画のように既存のfeatured-collectionファイルを複製して該当箇所のコードを編集すると簡単。
📌Step2 コード追加
1️⃣Schemaにブロック追加
"blocks": [
{
"type": "collection",
"name": "Product Lists",
"settings": [
{
"type": "text",
"id": "customertag",
"default": "gold",
"label": "顧客タグ"
},
{
"type": "collection",
"id": "collection",
"label": "t:sections.featured-collection.settings.collection.label"
}
]
}
],
2️⃣「{%- liquid」に下記のコードを追加
assign collection_to_show = section.settings.collection
if customer
assign customer_tags = customer.tags | join: ','
for block in section.blocks
if customer_tags contains block.settings.customertag
assign collection_to_show = block.settings.collection
break
endif
endfor
endif
3️⃣下記3箇所を「collection_to_show」に書き換え
ここのコードを
section.settings.collection
下記に書き換え
collection_to_show.products
collection_to_show.url
collection_to_show.title
以上で完了です!
✔️フルバージョンのコード
上記の通りに変更すれば使用できますがフルバージョンのコードも記載しておきます。コードの確認やコピペですぐに使用したい場合にご活用ください。
ここから先は
16,764字
この記事が気に入ったらサポートをしてみませんか?