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

**URL:** <https://community.shopify.com/t/topic/137942>\
**Category:** 技術的なQ＆A\
**Created:** [July 26, 2022, 6:51am UTC](https://community.shopify.com/t/topic/137942 "2022-07-26T06:51:02Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

- 主題: Shopifyで数量制限の実装方法。質問者は「追加を止める方法」と「カート内数量取得方法」を相談。
- 提案: 制限に達したら「カートに追加」ボタンにdisabled属性を付与する、または非表示にする。数量セレクターにmax属性を併用する案も提示。
- 取得方法: Shopify Ajax API（GET /{locale}/cart.js）でカート情報をJSON取得可能。提示されたJavaScriptのfetch例により、レスポンスのitemsから商品と数量を参照できる。
- 技術補足: cart.jsは現在のカート状態を返すエンドポイントで、itemsに各ラインアイテムの数量などが含まれるため、対象商品の投入数の判定に利用できる。
- 結果・今後: 質問者はコードでカート商品の取得に成功。disabled属性＋max属性で数量制限、cart.jsで数量判定という方針で実装を進める意向。
- 進捗状況: 具体実装はこれからで、追加の課題や未解決点は示されていない。現時点では解決に向けて収束。

<div class="post-metadata">

**Author:** ![Anonymous\_876e90207c84eec074dc8f1fbdf1c908](https://avatars.discourse-cdn.com/v4/letter/a/e99b99/32.png) [@Anonymous\_876e90207c84eec074dc8f1fbdf1c908](https://community.shopify.com/u/Anonymous_876e90207c84eec074dc8f1fbdf1c908)\
**Post date:** [July 26, 2022, 6:51am UTC](https://community.shopify.com/t/topic/137942/1 "2022-07-26T06:51:02Z")

</div>

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

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

[https://community.shopify.com/post/1619353](https://community.shopify.com/post/1619353)

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

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

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

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

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

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

---

<div class="post-metadata">

**Author:** ![Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_44fbe07fc59d9ccaacd70575fd5a5155/32/194200_2.png) [@Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://community.shopify.com/u/Anonymous_44fbe07fc59d9ccaacd70575fd5a5155)\
**Post date:** [July 28, 2022, 1:17am UTC](https://community.shopify.com/t/topic/137942/2 "2022-07-28T01:17:28Z")

</div>

るん 様

はじめまして。

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

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

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

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

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

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

[https://shopify.dev/api/ajax/reference/cart#get-locale-cart-js](https://shopify.dev/api/ajax/reference/cart#get-locale-cart-js)

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

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

```

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

---

<div class="post-metadata">

**Author:** ![Anonymous\_876e90207c84eec074dc8f1fbdf1c908](https://avatars.discourse-cdn.com/v4/letter/a/e99b99/32.png) [@Anonymous\_876e90207c84eec074dc8f1fbdf1c908](https://community.shopify.com/u/Anonymous_876e90207c84eec074dc8f1fbdf1c908)\
**Post date:** [July 30, 2022, 7:35am UTC](https://community.shopify.com/t/topic/137942/3 "2022-07-30T07:35:24Z")

</div>

株式会社フルバランス

ドウケ様

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

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

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

試してみます。

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

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

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

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

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