このガイドでは基本を順を追って説明し、cart drawer 内でカスタム機能の構築を始められるようにサポートします。 👉 Upcart パブリック API の完全なドキュメントを見る
概要
- カートの変更に反応する — アイテムが追加、削除、更新されたことを検知します。
- アクションをトリガーする — カートをプログラムで開閉するなど。
- カスタム機能を構築する — 独自のロジックや UI コンポーネントを cart drawer 内に直接組み込みます。
始めるために必要なもの
- Shopify ストアでの Upcart へのアクセス
Upcart がストアにインストールされ、有効になっていることを確認します。 - JavaScript の基本的な理解
多くのカスタマイズでは既成のスニペットを使用しますが、基本を超えたことをしたい場合は、JavaScript の基礎知識が役立ちます。
最初の Upcart API スクリプトを追加する
- Upcart Editor → Settings → Custom HTML → Scripts (before load) に移動します
- スクリプトを貼り付けます — 例:
window.upcartOnAddToCart を使用する古い例は引き続き動作しますが、非推奨であり、コンソールに警告が記録されます。新しいスクリプトにはすべて upcartSubscribeAddedToCart を使用してください。
- 変更を保存してから、ストアでテストします:
- デベロッパーツールを開きます(Windows では
F12またはCtrl + Shift + J、Mac ではCmd + Option + J) - 商品をカートに追加します
- Console タブで次のメッセージを確認します:
"You just added [product title] to your cart!"
カートのカスタマイズを始める
その他のリソース
- 🧩 API FAQ — トラブルシューティングのヒントとよくある質問
- ⚙️ Upcart API の一般的な使い方 — 人気のコード例とテンプレート
- 💡 カスタマイズドキュメント — すぐに使える既成のスクリプト
- 🛍️ Shopify の Cart API ドキュメント — Shopify が舞台裏でカートデータをどのように処理するかを学べます
- 👩💻 高度なカスタマイズが必要ですか? より複雑な統合については、Shopify エキスパートへの依頼を検討してください。