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

Shopify

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

更新履歴

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

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

[追記: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では動作しない

手順

  1. Line Item Property用のinputタグを記述したセクションを作る
    参考:[Shopify]名入り商品用に商品ページにテキスト記入設置して注文管理/カート/メールに反映させる(Dawn)15/100|まりん | Shopifyフロントエンジニア+SNSマーケティング|note
  2. 作成したinputタグにはform属性を追加せずに、特定のクラスを追加する(例:.my_input)
  3. 商品詳細用の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タグを取得
  • 新たにhiddeninputタグを生成し、取得した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>

結び

今後Shopify側で動的チェックアウト利用時にLine Item Propertyの値を取得するようになれば、当記事のJSを使った手法は不用になります。

仮に今後のアップデートで対応された場合でも、当記事の手法であれば、form属性を設定していないので誤動作のリスクはないはずです(という想定です)。

それにしてもOS2.0も動的チェックアウトも昨日今日できた仕組みではないので、現在に至るまでに対応されていないという点は気になります。
今後も対応するつもりがないのか、技術的な問題で対応できないのか。

どちらにせよ現時点で対応できていないので、独自にどうにかするしかないという困った状況です。

ブロック

Line Item Propertyを多少は扱いやすくするブロックを作りました。
試しに有料noteを使っているので無料の情報ではありませんが、設定さえ済んでしまえばテーマエディタでLine Item Property用のinputタグなどを設置できるようになります。

0人がこの記事を評価

役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。

連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。