表示されている商品詳細ページがどの商品なのかをScriptTag APIで設定したJavaScriptで判別したい

[nowheresville]

ScriptTag APIで設定したJavaScriptにて、商品ごとに挙動を変える といったことを実現したいと考えています。

そこで、JavaScriptの処理内で 表示されている商品詳細ページがどの商品なのか を判別するのにどういったアプローチが有効なのかを悩んでおります・・

現状、下記のようなアイデアはあります。

• URLから判別し、末尾の文字列を商品名として判別
  • 例えば、https://{SHOP_NAME}.myshopify.com/products/白tシャツ
• ページのHTMLから判別し、classに「product-single__title」が設定されたタグ要素で商品名を判別
  • 例えば 、<h1 class="product-single__title">白Tシャツ</h1>

なのですが、オンラインストアのテーマが「Debut」以外である場合や、有料テーマを利用している場合でも有効なのか分からず・・

もし他に何か良い方法があればご教示いただければ幸いです。

[nowheresville]

可能であれば、「商品名」ではなく「Variant ID」や「Product ID」の値が取得できれば扱いやすいのかなと考えています・・

[junichiokamura · Accepted solution]

JSだけで完結するなら、ご指摘の方法になると思います。なお、テーマを変えてもShopifyのオンラインストアのURLの構成は一緒ですので、URLから判別はどのテーマでも有効かと思います。

[nowheresville]

@junichiokamura 

ご回答ありがとうございます！

テーマを変えてもShopifyのオンラインストアのURLの構成は一緒ですので、URLから判別はどのテーマでも有効かと思います。

そうなのですね、安心しました。

ちなみなのですが・・

試しに（実際にはあり得ないかもしれませんが）商品名を「012345 TEST %$#@!&*()_+」と入力した商品を登録してオンラインストアでURLを確認してみたところ、

https://{SHOP_NAME}.myshopify.com/products/012345-test-_

となっていました。（エンコードされているのかと思います）

こうなってくるとURLから正しく商品名を判別するのは難しいのかなと思ってしまいましたが、

何か良い解決策などあれば、教えていただきたいです。

[junichiokamura]

日本語のハンドルも、JSで取得したときにはデコードされたものになっていると思うので、そういう記号もデコードされて取得できるのではと思います。

もし、エンコードされたままのものである場合、デコード処理をかければいいと思います。

[nowheresville]

@junichiokamura 

ご回答ありがとうございます！

ちょっと勘違いしていました・・

よくよく確認してみたところ、オンラインストアの商品ページのURL末尾の値は、商品名がエンコードされた値ではなく、商品の handle値 だったんですね！

これでなんとか処理できそうです。助かりました！