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 Mirai Dec 3, 2023すべてのShopifyアカウントはデフォルトではmyshopify.comのURLと関連付けられており、これはアカウント設定時に使用したビジネス名に基づいて作成されます。しかし、オ...
By Nina_13 Nov 26, 2023このトピックは英語版コミュニティの投稿:Shopify Web Pixel Manager Sandbox FAQの日本翻訳です。
By Mirai Nov 19, 2023