FROM CACHE - jp_header
解決済

アプリを使わずに一部の商品だけ会員限定+個数制限がある商品を作りたい

maki26
Shopify Partner
4 0 0

表題の通り、アプリを使わずに指定した商品のみ会員限定かつ個数制限がある商品を作りたいと考えています。管理画面から会員限定にすることは可能ですが、全ての商品会員限定になってしまいます。

 

テーマDawn4.0.0をカスタマイズして作成しています。

購入制限はカートに入れる際に上限個数をオーバーする場合にのみポップアップを表示させたいと考えいてます。

カートに入っている商品の個数を引っ張ってきて条件分岐すれば意外と簡単にできるのかなぁとも思っているのですが情報を持ってくることはできても、どのような条件分岐で記述したらいいの分かりません。

アドバイス頂けますと幸いです。

1 件の受理された解決策

Qcoltd
Shopify Partner
1051 429 417

成功

部分的な回答になってしまいますが、ご容赦ください。

 

まず、アプリを使わずに、会員にだけ販売したい、という部分ですが、

{% if customer %} ... {% endif %}

で、会員だけの処理・表示を作ることができます。

 

ですので、下記のようにされてはいかがでしょうか?

{% if customer %}
    {% comment %}
    会員の場合の処理: カートに追加ボタンや購入ボタンを表示する
    {% endcomment %}
{% else %}
    {% comment %}
    会員ではない場合の処理: 会員限定であることを伝え、会員登録を促す内容を表示する
    {% endcomment %}
{% endif %}

 

 

次に、購入制限についてですが、

下記のようなフローを組んでみてはいかがでしょうか?

 

  1. ユーザーが「カートに追加」ボタンをクリック時、「カートに追加」する処理を止めて、以下の処理を行う。
  2. 数量制限商品が何個カート投入されているかを取得する
  3. その数と、今回カートに追加しようとしている数を、足し合わせた結果が、制限個数内であれば、「カートに追加」する処理を走らせる。
  4. そうでなければ、ポップアップを表示し、「お一人様何個までしか購入できない」ことを伝える。

しかし、この方法ですと、一度チェックアウトをしてしまうと、カートもリセットされるので、

1つずつ購入していくと、結局、何個でも購入できてしまいそうです。

 

今回は、会員限定ということで、

customer.ordersが使用できます。

https://shopify.dev/api/liquid/objects/customer#customer-orders

 

こちらで、当該商品をすでにいくつ購入しているかを取得すると良いかと思います。

 

しかし、「カートに追加」する時の処理はJavaScriptで、

すでに、いくつ購入しているかを数え上げるのはliquidになりますので、

どうにかして、JavaScriptに、購入済み個数を伝える必要があります。

 

<script>
  const purchasedNumber = {{ purchased_number }};
</script>

 

※purchased_numberがliquidで数え上げた購入済み個数です。

※purchased_numberは必ず整数になるようにします。空の値になるとJavaScriptエラーになりますので、空の場合は、0を代入すると良いでしょう。

 

以上です。

大雑把な流れだけの説明になりますが、

参考になれば幸いです。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/

元の投稿で解決策を見る

2件の返信2

Qcoltd
Shopify Partner
1051 429 417

成功

部分的な回答になってしまいますが、ご容赦ください。

 

まず、アプリを使わずに、会員にだけ販売したい、という部分ですが、

{% if customer %} ... {% endif %}

で、会員だけの処理・表示を作ることができます。

 

ですので、下記のようにされてはいかがでしょうか?

{% if customer %}
    {% comment %}
    会員の場合の処理: カートに追加ボタンや購入ボタンを表示する
    {% endcomment %}
{% else %}
    {% comment %}
    会員ではない場合の処理: 会員限定であることを伝え、会員登録を促す内容を表示する
    {% endcomment %}
{% endif %}

 

 

次に、購入制限についてですが、

下記のようなフローを組んでみてはいかがでしょうか?

 

  1. ユーザーが「カートに追加」ボタンをクリック時、「カートに追加」する処理を止めて、以下の処理を行う。
  2. 数量制限商品が何個カート投入されているかを取得する
  3. その数と、今回カートに追加しようとしている数を、足し合わせた結果が、制限個数内であれば、「カートに追加」する処理を走らせる。
  4. そうでなければ、ポップアップを表示し、「お一人様何個までしか購入できない」ことを伝える。

しかし、この方法ですと、一度チェックアウトをしてしまうと、カートもリセットされるので、

1つずつ購入していくと、結局、何個でも購入できてしまいそうです。

 

今回は、会員限定ということで、

customer.ordersが使用できます。

https://shopify.dev/api/liquid/objects/customer#customer-orders

 

こちらで、当該商品をすでにいくつ購入しているかを取得すると良いかと思います。

 

しかし、「カートに追加」する時の処理はJavaScriptで、

すでに、いくつ購入しているかを数え上げるのはliquidになりますので、

どうにかして、JavaScriptに、購入済み個数を伝える必要があります。

 

<script>
  const purchasedNumber = {{ purchased_number }};
</script>

 

※purchased_numberがliquidで数え上げた購入済み個数です。

※purchased_numberは必ず整数になるようにします。空の値になるとJavaScriptエラーになりますので、空の場合は、0を代入すると良いでしょう。

 

以上です。

大雑把な流れだけの説明になりますが、

参考になれば幸いです。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
maki26
Shopify Partner
4 0 0

めちゃくちゃ参考になりました!ご回答ありがとうございます