Shopifyのオプション選択時のイベント用JSに関して

自作しようかと思っていたところShopify側で用意されていることを知ったのでメモとして。ただし、テーマのJSと干渉する可能性が高いようなので実用には使えないと思われます。

前提

• Shopify使用
• オプション選択時時に価格を変更するような動作のJSが必要
• テーマのJSとは独立した状態のJSにしたい

テーマのアップデートやアプリによるソースコード改変などを考えると、自作したコードはなるべくテーマから独立していた方が良いのではと考えており、そのために関連するJSも自作という選択肢が有力でした。

参考情報

• product.liquid
• Use products with multiple options
• Re: trigger function on a variant selection change – Shopify Community

簡単に書きますと、Shopify側でoption_selection.jsが用意されていて、これを使えばイベントに対応したコールバックを簡単に作成し実行できます。

variantとselectorには関連する情報が詰まっているためいろいろな場面で対応できそうです。反面シンプルな情報のみで良い場合は過剰かもしれません。

なお、公式のドキュメントではコードが不完全で以下のようになってしまいます(理由があると思うのですが見つけられず)。

// 基本はこの形
// <domid of select>と<callback>はわかるが、<product>にはどういう状態で値をいれればよいかわからない
new Shopify.OptionSelectors(<domid of select>, { product: <product>, onVariantSelected: <callback>});

// "Here's a complete jQuery script that calls the Shopify JavaScript helper to enabled multiple options for a product"と書かれているが、キーのproductに対する値がない
jQuery(function($) {
  new Shopify.OptionSelectors("product-select", { product: , onVariantSelected: selectCallback });
});

// そのため下記のエラーが出る
// Uncaught SyntaxError: Unexpected token ','

結果として3つ目のリンク先の書き込みのように、productオブジェクトをJSON形式で出力して渡す以下の状態にする必要がありました。

//<product>にはJSON形式で値を渡す
new Shopify.OptionSelectors(<domid of select>, { product: {{ product | json }} >, onVariantSelected: <callback>});

そういえばテーマ内のJSでもJSONを取得して使っていましたし、JSなのでこういうデータはJSONだよなという事にも思い至り…。理解の悪さを感じた結果となりました。

テーマのJSとの干渉

Debutの17.4.0で確認したところ、オプション変更に連動した価格変更が行われなくなりました。
内部を調査したものの具体的な箇所までは特定できていませんが、theme.jsの_onSelectChangeが動作しなくなったことは確認できました。

他のテーマでも同じかどうかはわかりませんが、option_selection.jsを使用するのは避けるか、干渉しないように作り替えるかした方が良い模様です。

結び

前出のフォーラムの中で書かれていましたが、現在は各テーマ内にこの処理を行うJSが内蔵されているため、option_selection.jsが使われることはまずなさそうです。

不要と考えられれば削除される可能性も0ではないでしょうし、テーマ内に落とすか自作するかという選択肢は残るかもしれません。