化粧品サイトの商品ページで、カラーごとのラジオボタンをクリックした際に、商品画像とカラー説明を動的に切り替えたいという相談。
現在の状態:
提案された解決策:
質問者は、アプリを使わずJavaScriptで実装する方法を求めているが、使用中のテーマが不明なため具体的なコード提示は難しい状況。
化粧品のサイトを制作しています。商品ページで、カラーごとにラジオボタンがあり、クリックするとその商品の画像とカラー説明が表示させるようにしたいのですが、リロードしないと切り替わらない状態です。
これを動的に切り替わるようにJSで設定したいのですが、うまくいかず困っています。
アプリなしのJSで実装された方がいればコードを教えていただきたいです。
現状、
・カラーごとの画像設定は代替テキストで設定済み
・カラー説明は、メタで設定済みで表示はされるが、リロードをしないとその前に選んだカラー説明のまま
・カラー名とメインの画像1枚だけは動的に切り替わる
以上です。
何かわかる方がいれば教えていただきたいです。
@CFI1 様
ご利用中のテーマが不明なため具体的なアドバイスはできませんが、
(テーマが分かっても具体的なコードをご提示するのは難しいのですが)
一番簡単なのは、
ラジオボタン操作時に、そのvariantのページに遷移させてしまうことかと思います。
また、もしそこまでカスタマイズが進んでいないようでしたら、
テーマストアでそういった機能を持つテーマを購入してしまうのも良いです。
例えば、下記のテーマはかなり近いことができます。
https://themes.shopify.com/themes/enterprise/styles/active
Can variant metafields be used in the specification tab?
Yes, versions of the Enterprise theme after 1.6.0 support the use of variant metafields in the specification tab.
ご参考まで。
(キュー田辺)