Liquid、JavaScriptなどに関する質問
【実現したい事】
国によって販売可能な商品が違うため国選択のセレクトボックスを設置し、
ユーザーの選択した国によって表示する商品を切り替えたい
(例:商品A → 日本では表示するが、中国では表示しない)
【試した事】
❶あらかじめ商品毎に販売可能国のタグを登録(japan、chinaなど)
❷国選択ができるセレクトボックスを用意し、選択された値をlocalStorageに保存
<script type="text/javascript"> jQuery(function($){ $("#select-country").change(function(){ /* 選択値取得 */ var val = $('[name=country]').val(); /* localStorageに格納 */ localStorage.setItem('country', val); country = localStorage.getItem('country'); /* ページリロード */ location.reload(); }); }); </script> <select name="country" id="select-country"> <option value="japan">日本</option> <option value="usa">アメリカ</option> <option value="china">中国</option> </select>
❷localStorageの値によって商品の表示非表示切り替え(ここがうまく出来ませんでした・・・)
{% for product in collections.all.products %}
<!-- 特定のタグを持っているかで分岐 --> {% if product.tags contains '★' %} {{ product.title }} {% endif %} {% endfor %}
★の部分にユーザーが選択した国情報のlocalStorage値を代入したいのですが可能でしょうか?
(javascripからLiquidに変数を渡すことが出来ればいいのですが、無理でした)
※機能が実装できるなら、localStorage・sessionStorageなどのWEBSTORAGEの種類は問いません。
またWEBSTORAGEでなくても別で実装できる方法があれば是非ご教授いただきたいです。
解決済! ベストソリューションを見る。
成功
発想を逆にして、liiquidのtagをJSに格納して、選択した国によって、商品情報を表示しているエレメント(divなど)のvisiblityを変えるなど、コントロールを全てJSにしてみてはどうでしょうか?
ちなみに先日行われたreuniteというオンラインイベントで国ごとのマルチドメイン機能の追加が発表されました。これを使うとご希望の動作がShopifyの機能として実現できるかもしれません。
https://www.shopify.jp/blog/shopify-reunite#2-4
成功
発想を逆にして、liiquidのtagをJSに格納して、選択した国によって、商品情報を表示しているエレメント(divなど)のvisiblityを変えるなど、コントロールを全てJSにしてみてはどうでしょうか?
ちなみに先日行われたreuniteというオンラインイベントで国ごとのマルチドメイン機能の追加が発表されました。これを使うとご希望の動作がShopifyの機能として実現できるかもしれません。
https://www.shopify.jp/blog/shopify-reunite#2-4
ご教示ありがとうございます!
商品情報のエレメントに国のタグを付与し、JSで表示・非表示を処理して解決いたしました。
(ただliquedで商品一覧表示した後にJSで非表示処理をするので、一瞬全商品が表示されますが、こちらの対処法を考えてみます)
国ごとのマルチドメイン機能の追加、楽しみです。
Shopifyのチェックアウトは世界一コンバージョン率が高いチェックアウトです。2023年4月に実施された世界3大手マネジメントコンサルティング会社の共同調査によると、Sho...
By Minami_ Apr 11, 2024Shopifyのルーツ Shopifyは、スノーボードをオンラインで販売したいという夢を叶えるために2004年に誕生しました。当時は大企業だけがインターネットで販売す...
By JapanGuru Apr 7, 2024リエンゲージメントの自動化で売り上げ向上へ!素敵なオンラインストアを作成し、見込み顧客の携帯へ広告を直接に送信する、またはSNSなどで宣伝すると、お客様がストアに行き着...
By Mirai Mar 24, 2024