ShopifyのOS2.0対応のLine Item Property実装方法:メモ

OS2.0が前提ですが、商品詳細ページの各項目がセクションで構築されているテーマにてLine Item Propertyをセクションで実装する際のメモです。
個人的なメモため詳細は色々省いています。

更新履歴

[追記:2022.6.26]
開発ストアで動的チェックアウト実行時、当記事の方法やform内に直書きする方法でもLine Item Propertyの値を渡せないことを確認しました。
動的チュックアウト以外であれば問題なく動きますが、その場合は単にform属性をつければ良いので、当記事のJSは不要となります。

[追記:2022.7.23]
以下のフォーラムの投稿が関連しそうです。開発ストアでだけ動かないのか、本番ストアでも動かないのかは確認できていません。

Dynamic checkout buttons no longer support line item properties – Shopify Community

[追記:2022.8.2]
開発ストアにて、当記事のJSが正常に動作することを確認しました。
現時点でも理由は不明です。

[追記:2023.4.28]
noteにてLine Item Property用のブロック作成に関する記事を書きましたので、当記事末尾にリンクを設定しました。

実現したいこと

Shopifyのセクションで名入れなどのLine Item Propertyをつける
カート追加ボタンと動的チェックアウトボタンの双方で動くようにする

セクションで作っただけだと動的チェックアウト(Dynamic checkout / 今すぐ購入)ボタン使用時にLine Item Propertyが反映されないため、その点への対策がメインです。

動的チェックアウトとinputタグ

おそらく多くのOS2.0対応テーマでセクションで実装する場合、購入ボタンを囲むformタグの外にinputタグを設置する形になります。

form内にinputタグが存在しない状態なので本来なら動作しませんが、inputタグにform属性を付与することでformと関連づけられて動作可能となります。

カートに追加するボタンであればLine Item Property用のinputタグのvalueが反映されます。
しかし動的チェックアウト利用時には反映されません。

購入ボタンを囲むformタグの中にinputタグを書けば動作はしますが、セクションを使う場合は対応困難な可能性が高く問題になり得ます。

動的チェックアウトとinputタグの紐付け

調査したところ状況としては以下の模様でした。

quantityで試したところ、form属性と特定のname属性で動作している
form属性をつけても、properties[]のように対応していないnameでは動作しない

手順

Line Item Property用のinputタグを記述したセクションを作る
参考:[Shopify]名入り商品用に商品ページにテキスト記入設置して注文管理/カート/メールに反映させる（Dawn）15/100｜まりん | Shopifyフロントエンジニア+SNSマーケティング｜note
作成したinputタグにはform属性を追加せずに、特定のクラスを追加する(例:.my_input)
商品詳細用のliquidファイルにJSを追加する

サンプルコード

前述の参考サイトとは違いますが、セクションには単に下記のinputタグを追加したとします。


<p class="line-item-property__field">
  <label for="your-name">Your name</label>
  <input id="your-name" type="text" class="my_input" name="properties[Your name]">
</p>

商品詳細用のliquidファイルに以下のJSを記述します(動けば良い程度の適当さで書いているのでその点留意ください)。


<script>
  window.addEventListener('load', function() {
    //{{ product_form_id }}は適宜変更
    const wrap = document.getElementById("{{ product_form_id }}");
    const targets = document.querySelectorAll(".my_input");
    if(targets.length !== 0){
      targets.forEach(elem => {
        const input = document.createElement("input");
        input.type = "hidden";
        input.value = elem.value;
        input.setAttribute("name", elem.getAttribute("name"));
        wrap.appendChild(input);
        elem.addEventListener('change', (e) => {
          input.value = e.target.value;
        });
      });
    }
  }, false);
</script>

概要

querySelectorAll()で対象のinputタグを取得
新たにhiddenでinputタグを生成し、取得したinputタグのvalueを設定する
購入ボタンを囲むformの中に生成したinputタグを挿入する
本来のinputタグにchangeイベントを設定し、valueの変化を検知して生成したinputタグに同じ値を反映する

購入ボタンを囲むformタグの中に書けば動作するのであれば、JSを使って入れてしまえば良いという発想です。

class指定で動作する形で作っているため、inputタグが増えてもclassを付与するだけで対応可能です。

なお、今回の基本的な仕組みはDawnテーマに実装されていたIE用コードと同じ方針です。

Dawnテーマに実装されていたIE用のコードを見る


<script>
  document.addEventListener('DOMContentLoaded', function() {
    function isIE() {
      const ua = window.navigator.userAgent;
      const msie = ua.indexOf('MSIE ');
      const trident = ua.indexOf('Trident/');
      return (msie > 0 || trident > 0);
    }
    if (!isIE()) return;
    const cartSubmitInput = document.createElement('input');
    cartSubmitInput.setAttribute('name', 'checkout');
    cartSubmitInput.setAttribute('type', 'hidden');
    document.querySelector('#cart').appendChild(cartSubmitInput);
    document.querySelector('#checkout').addEventListener('click', function(event) {
      document.querySelector('#cart').submit();
    });
  });
</script>