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

[るん]

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

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

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を利用して取得するのでしょうか？

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

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

[株式会社フルバランス · Accepted solution]

るん　様

はじめまして。

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

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

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)
})()

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

[るん]

株式会社フルバランス

ドウケ様

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

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

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

試してみます。

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

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

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

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

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