Liquid、JavaScriptなどに関する質問
いつもお世話になっております。
こちらの過去の質問を参考に個数制限を実装したいと考えています。
処理の流れはわかるのですが、勉強不足のため実際に書くべきコードがよくわかりません。
1.カートに追加する処理を止めるというのは、submitボタンにonclickイベントを記述し、
呼び出した関数内で商品が制限数を超えていたら、returnして処理を止めれば良いでしょうか?
2.数量制限商品がカートに何個投入されているかは、cartAPIを利用して取得するのでしょうか?
その場合のコードがよくわからず、教えていただけると大変助かります。
よろしくお願いいたします。
解決済! ベストソリューションを見る。
成功
るん 様
はじめまして。
株式会社フルバランスのドウケと申します。
一案ですが、ご参考になれば幸いです。
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.カートに追加する処理を止めるというのは、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コールの例が載っていなかったため、よくわからなかったのですが、教えていただいたコードでカートの商品情報を取得できました。
こちらを使用すれば、カートの商品数量を取得できそうです。
こちらを使用して、実装してみようと思います。
ありがとうございました。
いつもShopifyをご利用いただき、ありがとうございます。 Shopifyは、皆様の日本語での利用体験の向上に努めております。さらなる改善のために皆様のご意見をお寄せい...
By JasonH May 9, 2025Shopify アカデミーの学習パスと認定スキルバッジExpanding Your Shopify Business Internationallyを活用して、国際的にビジネ...
By Shopify Feb 7, 2025Shopify アカデミーの学習パスB2B on Shopify:立ち上げとカスタマイズで卸売販売に進出しましょう。これら3つの無料コースは、ShopifyストアでB2B機能...
By Shopify Jan 31, 2025