言語ファイルを編集 「locales/en.default.json」を開き、products内に以下を追記します。 "option": { "title": "Gift options", "wrapping": "Wrapping", "noshi": "Noshi", "noshi_type": "Noshi type", "noshi_title": "Noshi title", "noshi_name": "Sender name", "please_select": "Please select", "placeholder": { "noshi_title": "Celebration", "noshi_name": "Taro Yamada" } } 続けて「locales/ja.json」を開き、products内に以下を追記します。 "option": { "title": "ギフトオプション", "wrapping": "ラッピング", "noshi": "のし", "noshi_type": "のしの種類", "noshi_title": "表書き", "noshi_name": "送り主名", "please_select": "選択してください", "placeholder": { "noshi_title": "例）お祝い", "noshi_name": "例）山田 太郎" } } テキストは言語エディターで編集できるようになっておりますので、必要に応じて行って下さい。 スニペットファイルを作成 「新しいスニペットを追加する」より「product-options.liquid」を作成し、以下のコードをコピペします。 <details class="product-options"> <summary class="options-title"> <span>{{ 'products.option.title' | t }}</span> </summary> <div class="options"> {%- if gift_option_wrapping -%} <fieldset class="field-group option-wrapping"> <div class="field"> <label for="wrapping">{{ 'products.option.wrapping' | t }}</label> <div class="select"> <select id="wrapping" class="select__select" name="properties[{{ 'products.option.wrapping' | t }}]"> <option value="">{{ 'products.option.please_select' | t }}</option> {%- for option in wrapping_options -%} <option value="{{ option }}">{{ option }}</option> {%- endfor -%} </select> </div> </div> </fieldset> {%- endif -%} {%- if gift_option_noshi -%} <fieldset class="field-group option-noshi"> <div class="field"> <label for="noshi">{{ 'products.option.noshi'| t }}</label> <div class="select"> <select id="noshi" class="select__select" name="properties[{{ 'products.option.noshi' | t }}]"> <option value="">{{ 'products.option.please_select' | t }}</option> {%- for option in noshi_options -%} <option value="{{ option }}">{{ option }}</option> {%- endfor -%} </select> </div> </div> <div class="field"> <label for="noshi_type">{{ 'products.option.noshi_type' | t }}</label> <div class="select"> <select id="noshi_type" class="select__select" name="properties[{{ 'products.option.noshi_type' | t }}]"> <option value="">{{ 'products.option.please_select' | t }}</option> {%- for option in noshi_type_options -%} <option value="{{ option }}">{{ option }}</option> {%- endfor -%} </select> </div> </div> <div class="field"> <label for="noshi_title">{{ 'products.option.noshi_title' | t }}</label> <input id="noshi_title" class="field__input" type="text" name="properties[{{ 'products.option.noshi_title' | t }}]" placeholder="{{ 'products.option.placeholder.noshi_title' | t }}"> </div> <div class="field"> <label for="noshi_name">{{ 'products.option.noshi_name' | t }}</label> <input id="noshi_name" class="field__input" type="text" name="properties[{{ 'products.option.noshi_name' | t }}]" placeholder="{{ 'products.option.placeholder.noshi_name' | t }}"> </div> </fieldset> {%- endif -%} </div> </details> セクションファイルを編集 sections内より商品ページを出力するファイルを開きます。Dawnの場合は「main-product.liquid」が該当します。 {% schema %}内にあるカートボタンのブロック設定を探し、以下のブロック設定を追記して下さい。 { "type": "header", "content": "ギフトオプション" }, { "type": "text", "id": "gift_option_tag", "label": "適用するタグ", "default": "ギフト" }, { "type": "checkbox", "id": "gift_option_wrapping", "label": "ラッピングオプションを有効化", "default": true }, { "type": "textarea", "id": "wrapping_options", "label": "ラッピングオプションの選択肢", "default": "慶事用\n弔事用\n不要" }, { "type": "checkbox", "id": "gift_option_noshi", "label": "のしオプションを有効化", "default": true }, { "type": "textarea", "id": "noshi_options", "label": "のしオプションの選択肢", "default": "内のし\n外のし\n不要" }, { "type": "textarea", "id": "noshi_type_options", "label": "のしの種類オプションの選択肢", "default": "蝶結び\n結び切り\n結び切り（弔事用）" } 次にカートボタンを出力するコードを探して、以下のliquidコードを追記します。Dawnの場合は{%- when 'buy_buttons' -%}のすぐ下に挿入してください。 {%- liquid assign gift_option_wrapping = block.settings.gift_option_wrapping assign wrapping_options = block.settings.wrapping_options | newline_to_br | split: '<br />' assign gift_option_noshi = block.settings.gift_option_noshi assign noshi_options = block.settings.noshi_options | newline_to_br | split: '<br />' assign noshi_type_options = block.settings.noshi_type_options | newline_to_br | split: '<br />' if product.tags contains block.settings.gift_option_tag render 'product-options', gift_option_wrapping: gift_option_wrapping, wrapping_options: wrapping_options, gift_option_noshi: gift_option_noshi, noshi_options: noshi_options, noshi_type_options: noshi_type_options endif -%} 以上でテーマ編集は完了です。必要に応じてCSSを追記してください。 {{ 'product-options.css' | asset_url | stylesheet_tag }} 使い方 カスタマイザー 「オンラインストア→カスタマイズ」より商品ページを開き、「購入ボタン」ブロックを選択すると、ブロク設定に「ギフトオプション」が増えているのを確認して下さい。 適用するタグ デフォルトでは「ギフト」となっております。 これは商品管理にて、ギフトオプションを表示させたい商品に対し商品タグ「ギフト」を追加することで、ギフトオプション表示されます。 必要に応じてテキストを変更してください。 また、「空欄」にすれば全ページにギフトオプションが表示されます。 ラップングオプション 「ラッピングオプションを有効化」にチェックを入れることでラッピングオプションが有効になります。熨斗オプションのみの場合はチェックを外して下さい。 オプション項目を編集したい場合は「ラッピングオプションの選択肢」に改行区切りで項目を入力して下さい。 のしオプション 「のしオプションを有効化」にチェックを入れることでラッピングオプションが有効になります。熨斗オプションのみの場合はチェックを外して下さい。 オプション項目を編集したい場合は「のしオプションの選択肢」と「のしの種類オプションの選択肢」に改行区切りで項目を入力して下さい。 有料オプションにしたい場合 有料オプションにしたい場合は難易度が一気に高くなりますので、カスタマイズ代行では「有料オプション」の設定までは行いません。 どうしてもという場合は、JSを使って商品価格に追加する方法もありますが、この機能を活かし「ギフトラッピング」という商品を設けるのが簡単です。 例えばギフトラッピングが300円なら、商品価格が300円の商品ページを作成し商品タグに「適用するタグ」を追加して登録して下さい。 後は各商品ページやカート画面にギフトラッピングページへのリンクを設けたり、アップセルアプリを使ったりしてみて下さい。 機能的に不満な場合は、諦めてアプリを使うのを推奨します。
