[Shopify]ギフト用ページに熨斗を選択できるセクションを追加!メタフィールドで表示・非表示切り替え(Dawn)81/100
こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。
今日はギフト用ページに熨斗の選択ができるようなセクションを作ってみました。propertyを使って熨斗の別途料金を請求しない場合に有効的なセクションになってます。熨斗の別途料金が追加される仕様ではないです。
さらに商品ごとで表示、非表示を切り替えられるようにメタフィールドのTrue/Falseと連携してみました。
今回はフルコードは載せてないです。
✔︎今回のゴール
========
熨斗エリア
========
========
選んだ熨斗の種類によって出しわけ
========
◆CMSの特徴
========
熨斗種類
========
========
名入れ表示・非表示
========
========
メモエリア
========
========
手提げ
========
◆カート&注文管理画面の見え方
========
カート
========
========
注文管理画面
========
◆メタフィールドと連動
メタフィールドと連動しているので追加しTrueを選択しないと表示されません。
✔︎設置方法
Step1 既存のProductリキッドファイルを開く
①管理画面>テーマ>コードを編集>セクション>main-product.liquid
②まずはSchemaに追記
Schemaの"blocks"の中ならどこでもOK。
{
"type": "noshi",
"name": "熨斗",
"limit": 1,
"settings": [
{
"type": "header",
"content": "熨斗種類"
},
{
"type": "text",
"id": "title1",
"label": "ラベル",
"default": "熨斗"
},
{
"type": "html",
"id": "select",
"label": "熨斗の種類",
"default": "熨斗不要,短冊熨斗(名入れ不可),掛け熨斗【内祝い】,その他",
"info": "半角カンマで区切ってください"
},
{
"type": "header",
"content": "名入れ有無"
},
{
"type": "checkbox",
"id": "naire-enable",
"label": "名入れエリア表示/非表示",
"default": true
},
{
"type": "text",
"id": "title2",
"label": "ラベル",
"default": "名入れ"
},
{
"type": "html",
"id": "except",
"label": "名入れ非表示",
"default": "熨斗不要,短冊熨斗(名入れ不可)",
"info": "選択した種類の時に名入れエリアを非表示にする。半角カンマで区切ってください。"
},
{
"type": "header",
"content": "メモ"
},
{
"type": "checkbox",
"id": "memo-enable",
"label": "メモエリア表示/非表示",
"default": true
},
{
"type": "text",
"id": "title3",
"label": "ラベル",
"default": "その他を選択した場合"
},
{
"type": "html",
"id": "memo",
"label": "メモ欄表示",
"default": "その他",
"info": "選択した種類の時にメモエリアを表示にする。半角カンマで区切ってください。"
},
{
"type": "header",
"content": "手提げ"
},
{
"type": "checkbox",
"id": "tesage-enable",
"label": "手提げエリア表示/非表示",
"default": true
},
{
"type": "text",
"id": "title4",
"label": "ラベル",
"default": "手提げ袋"
},
{
"type": "html",
"id": "select2",
"label": "手提げ有無",
"default": "不要,要",
"info": "半角カンマで区切ってください。"
}
]
}
③HTML内にnoshiのブロックを追加
{%- case -%}{%- endcase -%}内ならどこでもOK
{%- when 'noshi' -%}
{% assign types = block.settings.select | split: "," %}
{% if product.metafields.custom.noshi == true %}
<div class="noshi__contents">
<div class="noshi__select-feild">
<label for="type">{{ block.settings.title1 }}</label>
<select id="type" name="properties[種類]" form="product-form-{{ section.id }}">
{% for type in types limit:1 %}
<option value="{{ type }}" selected="selected">{{ type }}</option>
{% endfor %}
{% for type in types offset:1 %}
<option value="{{ type }}">{{ type }}</option>
{% endfor %}
</select>
</div>
{% if block.settings.naire-enable %}
<input type="hidden" id="js-except" value="{{ block.settings.except }}">
<div id="js-nairi" class="noshi__select-feild">
<label for="naire">{{ block.settings.title2 }}</label>
<input id="naire" type="text" name="properties[名入れ]" form="product-form-{{ section.id }}">
</div>
{% endif %}
{% if block.settings.memo-enable %}
<input type="hidden" id="js-memo-val" value="{{ block.settings.memo }}">
<div id="js-memo" class="noshi__select-feild">
<label for="memo">{{ block.settings.title3 }}</label>
<input id="memo" type="text" name="properties[メモ]" form="product-form-{{ section.id }}">
</div>
{% endif %}
{% if block.settings.tesage-enable %}
{% assign tesages = block.settings.select2 | split: "," %}
<div class="noshi__select-feild">
<label for="tesage">{{ block.settings.title4 }}</label>
<select id="tesage" name="properties[手提げ]" form="product-form-{{ section.id }}">
{% for tesage in tesages limit:1 %}
<option value="{{ tesage }}" selected="selected">{{ tesage }}</option>
{% endfor %}
{% for tesage in tesages offset:1 %}
<option value="{{ tesage }}">{{ tesage }}</option>
{% endfor %}
</select>
</div>
{% endif %}
</div>
{% endif %}
一度CMSでブロックを追加してみます。
商品のブロック追加で「熨斗」が追加されています。
お好みの位置に挿入。
私は数量セレクターの上に置いてみました♪
Step2 商品のメタフィールドを作成
商品によって表示、非表示にしたいので、メタフィールドでON \OFF切り替えられるようにします。
①設定>カスタムフィールド>商品
下記のタグができました。
product.metafields.custom.noshi
リキッドの方では下記のようにTureの時に表示されるようにしています。
あとは、商品ページで熨斗エリアを設定するだけ。
うまく表示できていますね♪
最後にレイアウトを整えます。
ここから先は
この記事が気に入ったらサポートをしてみませんか?