FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

Re: 個数制限の実装方法につきまして

解決済

個数制限の実装方法につきまして

るん
Shopify Partner
89 4 12

いつもお世話になっております。

こちらの過去の質問を参考に個数制限を実装したいと考えています。

 

https://community.shopify.com/c/%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AAq-a/%E3%82%A2%E3%83%97%E3%83%AA%...

 

処理の流れはわかるのですが、勉強不足のため実際に書くべきコードがよくわかりません。

 

1.カートに追加する処理を止めるというのは、submitボタンにonclickイベントを記述し、

呼び出した関数内で商品が制限数を超えていたら、returnして処理を止めれば良いでしょうか?

 

2.数量制限商品がカートに何個投入されているかは、cartAPIを利用して取得するのでしょうか?

その場合のコードがよくわからず、教えていただけると大変助かります。

 

よろしくお願いいたします。

1 件の受理された解決策

株式会社フルバランス
Shopify Partner
1623 576 750

成功

るん 様

 

はじめまして。

株式会社フルバランスのドウケと申します。

 

一案ですが、ご参考になれば幸いです。

 

1.カートに追加する処理を止めるというのは、submitボタンにonclickイベントを記述し、呼び出した関数内で商品が制限数を超えていたら、returnして処理を止めれば良いでしょうか?

→商品が制限数に達していれば、カート追加ボタンにdisabled属性を付与する or カート追加ボタンを非表示にする、というのはいかがでしょうか。

 

2.数量制限商品がカートに何個投入されているかは、cartAPIを利用して取得するのでしょうか?

→以下のURLに記載の「GET /{locale}/cart.js」でカート情報を取得できます。

https://shopify.dev/api/ajax/reference/cart#get-locale-cart-js

コードは以下をjsファイルに記述してみてためしてください。

(async() => {
    const response = await fetch('https://ご自身のshop名.myshopify.com/cart.js');
    const {items} = await response.json();
    // カート商品
    console.log(items)
})()

 

どうぞよろしくお願いいたします。

株式会社フルバランス
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『つくる人、売る人の成長と成功を最大化する。』 株式会社フルバランス

元の投稿で解決策を見る

2件の返信2

株式会社フルバランス
Shopify Partner
1623 576 750

成功

るん 様

 

はじめまして。

株式会社フルバランスのドウケと申します。

 

一案ですが、ご参考になれば幸いです。

 

1.カートに追加する処理を止めるというのは、submitボタンにonclickイベントを記述し、呼び出した関数内で商品が制限数を超えていたら、returnして処理を止めれば良いでしょうか?

→商品が制限数に達していれば、カート追加ボタンにdisabled属性を付与する or カート追加ボタンを非表示にする、というのはいかがでしょうか。

 

2.数量制限商品がカートに何個投入されているかは、cartAPIを利用して取得するのでしょうか?

→以下のURLに記載の「GET /{locale}/cart.js」でカート情報を取得できます。

https://shopify.dev/api/ajax/reference/cart#get-locale-cart-js

コードは以下をjsファイルに記述してみてためしてください。

(async() => {
    const response = await fetch('https://ご自身のshop名.myshopify.com/cart.js');
    const {items} = await response.json();
    // カート商品
    console.log(items)
})()

 

どうぞよろしくお願いいたします。

株式会社フルバランス
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『つくる人、売る人の成長と成功を最大化する。』 株式会社フルバランス
るん
Shopify Partner
89 4 12

株式会社フルバランス

ドウケ様

 

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

 

 

1.確かにボタンにdisabled属性をつけるのでも良いですね。

数量セレクターにmax属性を併用すれば、個数制限を実装できそうです。

試してみます。

 

2.コードを教えていただき、ありがとうございます。

リファレンスにAPIコールの例が載っていなかったため、よくわからなかったのですが、教えていただいたコードでカートの商品情報を取得できました。

こちらを使用すれば、カートの商品数量を取得できそうです。

こちらを使用して、実装してみようと思います。

 

ありがとうございました。