FROM CACHE - jp_header
解決済

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

るん
Shopify Partner
79 3 10

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

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

 

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
1513 544 681

成功

るん 様

 

はじめまして。

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

 

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

 

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 Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス

元の投稿で解決策を見る

2件の返信2

株式会社フルバランス
Shopify Partner
1513 544 681

成功

るん 様

 

はじめまして。

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

 

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

 

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 Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス
るん
Shopify Partner
79 3 10

株式会社フルバランス

ドウケ様

 

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

 

 

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

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

試してみます。

 

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

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

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

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

 

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