[Shopify]ギフト用ページに熨斗を選択できるセクションを追加！メタフィールドで表示・非表示切り替え（Dawn）81/100

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。

今日はギフト用ページに熨斗の選択ができるようなセクションを作ってみました。propertyを使って熨斗の別途料金を請求しない場合に有効的なセクションになってます。熨斗の別途料金が追加される仕様ではないです。

さらに商品ごとで表示、非表示を切り替えられるようにメタフィールドのTrue／Falseと連携してみました。

対象テーマ：Dawn

今回はフルコードは載せてないです。

✔︎今回のゴール

＝＝＝＝＝＝＝＝
熨斗エリア
＝＝＝＝＝＝＝＝

＝＝＝＝＝＝＝＝
選んだ熨斗の種類によって出しわけ
＝＝＝＝＝＝＝＝

例えば、掛け熨斗を選んだ時は名入れを出す場合

例えば、その他を選んだ時は名入れとメモ欄を出す場合

◆CMSの特徴

熨斗のブロックを追加

＝＝＝＝＝＝＝＝
熨斗種類
＝＝＝＝＝＝＝＝

熨斗の種類で半角カンマ区切りで入れる

＝＝＝＝＝＝＝＝
名入れ表示・非表示
＝＝＝＝＝＝＝＝

・名入れON/OFF
・タイトル
・名入れ非表示
　→非表示にしたい種類を入れる。
※熨斗の種類で入れた文言と照合するので半角・全角が異なっていたら動かないのでご注意。

＝＝＝＝＝＝＝＝
メモエリア
＝＝＝＝＝＝＝＝

・メモエリアON /OFF
・タイトル
・メモ欄表示種類
　→表示にしたい種類を入れる。
※熨斗の種類で入れた文言と照合するので半角・全角が異なっていたら動かないのでご注意。
※名入れと異なり「表示」したい種類になります。

＝＝＝＝＝＝＝＝
手提げ
＝＝＝＝＝＝＝＝

・手提げON /OFF
・タイトル
・手提げ有無→選択項目
※手提げ以外でも別の選択肢としても使用していただけると思います。

◆カート＆注文管理画面の見え方

＝＝＝＝＝＝＝＝
カート
＝＝＝＝＝＝＝＝

＝＝＝＝＝＝＝＝
注文管理画面
＝＝＝＝＝＝＝＝

◆メタフィールドと連動

メタフィールドと連動しているので追加しTrueを選択しないと表示されません。

◆商品ページでのON ・OFF
表示→True
非表示→Falseまたは何も選択してない場合

✔︎設置方法

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切り替えられるようにします。

①設定＞カスタムフィールド＞商品

・名前：何でもOK
→熨斗にしてみました
・ネームスペースとキー：noshi
・コンテンツタイプ：true/false

下記のタグができました。

product.metafields.custom.noshi

リキッドの方では下記のようにTureの時に表示されるようにしています。

あとは、商品ページで熨斗エリアを設定するだけ。

うまく表示できていますね♪

最後にレイアウトを整えます。

【ご購入前の注意】
※返金&サポートはしておりません。
※最新のDawnテーマ対象です。他のテーマでも使いまわせると思いますが検証はしていません。
※コードのみのご紹介で解説などはしておりません。
※2023.2.19時点のコードです。メンテナンスは今後する予定はありません。
※環境やバージョンによりレイアウト崩れることもありますので適当にCSSで調整していただければと思います。