😊

【Shopify オリジナル構築⑥】バリエーションのオプション名の横にオプション値を切り替え表示

2023/10/31に公開

Shopify

Liquid

tech

はじめに

この記事では、オプション名の横に選択したバリエーションのオプション値を表示(アマゾンみたいに)する方法について解説します。
こちらが完成図です。赤枠のような表示をさせます。

ファイルについて

新規作成ファイル：product-variant-selected-value.js(assetsフォルダ内に作成)
編集ファイル：product-variant-picker.liquid(既存ファイル)

コードの作成

まずは、バリエーションのボタンのコードが記載されているproduct-variant-picker.liquidのコードを編集します。
一番上からたどって、<legend>タグを編集します。

対象コード

{%- unless product.has_only_default_variant -%}
  {%- if block.settings.picker_type == 'button' -%}
    <variant-radios
      id="variant-radios-{{ section.id }}"
      class="no-js-hidden"
      data-section="{{ section.id }}"
      data-url="{{ product.url }}"
      {% if update_url == false %}
        data-update-url="false"
      {% endif %}
      {{ block.shopify_attributes }}
    >
      {%- for option in product.options_with_values -%}
        <fieldset class="js product-form__input">
          <legend class="form__label">{{ option.name }}</legend> /* 対象タグ */
          {% render 'product-variant-options', product: product, option: option, block: block %}
        </fieldset>
      {%- endfor -%}

対象の<legend>タグを以下のように書き換えます。

修正後のコード

<legend class="form__label">{{ option.name }}：<span class="selected-value"></span></legend>

この<span>タグがオプション値となります。

次にJSコードを記載します。作成したファイルに以下のコードを記載します。

const Inputs = document.querySelectorAll("fieldset.product-form__input input");
/* バリエーションボタンの<input>タグをすべて取得 */
const insertHTML = document.querySelector(".selected-value");
/* 先ほど作成した<span>タグを取得 */
insertHTML.textContent = Inputs[0].value;
/* 初期状態の<span>タグには一番最初のオプション値をテキスト挿入させる */
Inputs.forEach((input) => {
  input.addEventListener("change", () => {
　/* <input>タグの選択が変更されたときのイベントリスナー */
    insertHTML.textContent = input.value;
　　/* 選択した<input>タグのvalue値を<span>タグのテキストを挿入する */
  });
});

動作確認

うまく動作が確認できますね！

注意

今回の仕様は、「バリエーションピッカー」ブロックでビルボタンに設定しなければ実装できません。あらかじめご注意ください。

Shopifyの構築を承ります！

Shopifyで実装したいデザインなどがござましたら、お気軽にご相談、お問い合わせくださいませ！