# ユーザーが選択した国によって商品の表示・非表示を切り替えたい

**URL:** <https://community.shopify.com/t/topic/12846>\
**Category:** 技術的なQ＆A\
**Created:** [May 14, 2020, 3:18am UTC](https://community.shopify.com/t/topic/12846 "2020-05-14T03:18:09Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

国ごとに販売可能な商品だけを表示したいという相談。ShopifyのLiquidで商品タグを見て出し分けたいが、ユーザーがセレクトボックスで選んだ国をlocalStorageに保存しても、その値をJavaScriptからLiquidへ渡せず、条件分岐に使えない点が課題だった。\n\n提案された対応は、Liquid側では商品ごとの国タグ情報をHTML要素へ持たせ、表示制御はすべてJavaScriptで行う方法。選択した国に応じて、商品要素のvisibilityや表示・非表示を切り替える方針が示された。\n\n結果として、商品情報の要素に国タグを付与し、JavaScriptで表示・非表示を制御する形で解決した。ただし、一覧をLiquidで先に出力してからJSで隠すため、一瞬全商品が表示される問題が残っており、これは未解決。\n\n補足として、Shopifyの国別マルチドメイン機能の追加情報も紹介され、将来的には標準機能で近い要件を実現できる可能性がある。

<div class="post-metadata">

**Author:** ![akatuki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/akatuki/32/199931_2.png) [@akatuki](https://community.shopify.com/u/akatuki)\
**Post date:** [May 14, 2020, 3:18am UTC](https://community.shopify.com/t/topic/12846/1 "2020-05-14T03:18:09Z")

</div>

【実現したい事】  
国によって販売可能な商品が違うため国選択のセレクトボックスを設置し、  
ユーザーの選択した国によって表示する商品を切り替えたい  
（例：商品A → 日本では表示するが、中国では表示しない）

【試した事】

❶あらかじめ商品毎に販売可能国のタグを登録（japan、chinaなど）

❷国選択ができるセレクトボックスを用意し、選択された値をlocalStorageに保存

```auto
<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の値によって商品の表示非表示切り替え（ここがうまく出来ませんでした･･･）

```auto
{% for product in collections.all.products %}

<!-- 特定のタグを持っているかで分岐 -->
{% if product.tags contains '★' %} 
{{ product.title }} 
{% endif %}

{% endfor %}

```

★の部分にユーザーが選択した国情報のlocalStorage値を代入したいのですが可能でしょうか？

（javascripからLiquidに変数を渡すことが出来ればいいのですが、無理でした）

※機能が実装できるなら、localStorage・sessionStorageなどのWEBSTORAGEの種類は問いません。  
またWEBSTORAGEでなくても別で実装できる方法があれば是非ご教授いただきたいです。

---

<div class="post-metadata">

**Author:** ![junichiokamura](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/junichiokamura/32/299737_2.png) [@junichiokamura](https://community.shopify.com/u/junichiokamura)\
**Post date:** [May 21, 2020, 12:09pm UTC](https://community.shopify.com/t/topic/12846/2 "2020-05-21T12:09:54Z")

</div>

発想を逆にして、liiquidのtagをJSに格納して、選択した国によって、商品情報を表示しているエレメント（divなど）のvisiblityを変えるなど、コントロールを全てJSにしてみてはどうでしょうか？

ちなみに先日行われたreuniteというオンラインイベントで国ごとのマルチドメイン機能の追加が発表されました。これを使うとご希望の動作がShopifyの機能として実現できるかもしれません。

[https://www.shopify.jp/blog/shopify-reunite#2-4](https://www.shopify.jp/blog/shopify-reunite#2-4)

---

<div class="post-metadata">

**Author:** ![akatuki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/akatuki/32/199931_2.png) [@akatuki](https://community.shopify.com/u/akatuki)\
**Post date:** [May 26, 2020, 6:47am UTC](https://community.shopify.com/t/topic/12846/3 "2020-05-26T06:47:16Z")

</div>

ご教示ありがとうございます！

商品情報のエレメントに国のタグを付与し、JSで表示・非表示を処理して解決いたしました。

（ただliquedで商品一覧表示した後にJSで非表示処理をするので、一瞬全商品が表示されますが、こちらの対処法を考えてみます）

国ごとのマルチドメイン機能の追加、楽しみです。