Skip to main content

APIパターンの仕組み

ほとんどのUpcart APIスクリプトは、同じシンプルなパターンに従います: カートイベントをリッスンする → 条件を確認する → アクションを実行する たとえば:「カートが読み込まれたら → 空かどうかを確認して → 固定ボタンを非表示にする」。 💡 APIは初めてですか? 以下の例に進む前に、まず APIとは何か? から始めてください。

スクリプトを追加する場所

以下のすべてのスクリプトは、次の場所に追加します: Cart Editor → Settings → Custom HTML → Scripts (before load) 各スニペットを <script>...</script> タグで囲んで保存します。テストするには、ブラウザのDev Toolsコンソール(F12)を開き、console.log のメッセージを確認します。

レガシーとモダンのコールバックについて

Upcartには、カートイベントをリッスンする2つの方法があります: 以下の例はすべてモダンAPIを使用しています。古いスタイルを使用している既存のスクリプトは、引き続き動作します。

例1: カートが空のときに固定カートボタンを非表示にする

仕組み: upcartSubscribeCartLoaded は、カートが読み込まれるたびに発火します。コールバックは、items 配列を含む cart オブジェクトを持つ event を受け取ります。各アイテムの quantity を合計して、カートが空かどうかを判定します。 ⚠️ 重要: event.cart には item_count プロパティはありませんevent.cart.items を反復処理して合計を計算する必要があります。

例2: アイテムがカートに追加されたときにログを記録する

event.item で利用可能なプロパティ:

例3: サードパーティの分析アプリと連携する(例: TripleWhale)

注: サードパーティアプリはそれぞれ異なります。正しいイベント形式については、アプリのサポートチームにご確認ください。

例4: 商品が追加された後にカートを自動的に開く

注: Cart Editor → Settings → Cart settings で「Open cart drawer on add to cart」がすでに有効になっている場合、このスクリプトは不要です。

クイックリファレンス: サブスクライブ関数(モダンAPI)


直接アクション関数

完全なAPIドキュメントについては、Upcart Public API Documentation を参照してください。

トラブルシューティング

  • スクリプトが実行されませんか? 配置場所を再確認してください。Scripts (before load) にある必要があり、after loadではありません。
  • 要素が見つかりませんか? セレクター(例: #upCartStickyButton)が、カート内の実際の要素IDと一致していることを確認してください。
  • 何かが壊れましたか? 各行の先頭に // を追加してスクリプトをコメントアウトし、保存して更新してください。
  • まだ行き詰まっていますか? その他のトラブルシューティング手順については、API FAQ を参照してください。