Fin for Ecommerceが商品を追加・変更すると、ストアのカートが更新されます。これはほとんどのテーマでデフォルトで動作します。カートが更新されない場合は、以下の修正方法をご覧ください。
対応テーマ
カートはDawn、Horizon、Brooklyn、Flex、Flow、Venue、Sense、Craft、Refreshおよびそれらをベースにしたテーマで自動的に同期されます。Focal、Prestige、Warehouseなど多くの他のテーマも対応しています。
注意：サポートはテーマ名ではなくテーマの構造に依存するため、大幅にカスタマイズされたテーマでは以下の手順が必要な場合があります。
ストアフロントのカートが更新されない場合
Finの変更がカートに反映されない、またはページをリロードしたときだけ反映される場合、テーマがIntercomで検出できない方法でカートを更新しています。これはカスタムテーマで最も一般的です。
注意：このスニペットの追加にはShopify管理画面へのアクセスとテーマコード編集の基本知識が必要です。編集に不安がある場合は、この記事を開発者に共有してください。
修正するには、以下のスニペットをテーマに追加してください。これはFinがカートを変更するたびに発行するブラウザのカスタムイベント（intercom:cartUpdated）を監視し、Shopifyからカートを再取得して、テーマがカートを再描画するために使用するイベントを発火します。
Shopify管理画面で、ライブテーマのコードエディタを開きます。
通常はlayout/theme.liquidのメインレイアウトファイルを開きます。
スニペットを閉じる
</body>タグの直前に貼り付けて、保存します。Finに商品を追加させてテストしてください。ページをリロードせずにストアフロントのカートが即座に更新されるはずです。
document.addEventListener('intercom:cartUpdated', async () => {
try {
const res = await fetch(`${window.Shopify.routes.root}cart.js`, {
headers: { Accept: 'application/json' },
cache: 'no-store',
});
if (!res.ok) return;
const cart = await res.json();
// Replace these with whatever your theme uses to re-render the cart.
document.dispatchEvent(
new CustomEvent('cart:live', { detail: cart, bubbles: true })
);
document.dispatchEvent(
new CustomEvent('cart:reload', { bubbles: true })
);
document.documentElement.dispatchEvent(
new CustomEvent('cart:refresh', { bubbles: true })
);
} catch {
// Cart fetch failed. Leave the storefront cart as it is.
}
});
最後の3つのdispatchを、テーマがカートを再描画するために使用するものに変更してください。
スニペット追加後もカートが更新されない場合は、最後の3つのdispatchで使われているカスタムイベント名がテーマが監視しているものと一致しているか確認してください。テーマのJavaScriptファイルやドキュメントで、どのイベントがカートの再描画に使われているか確認できます。不明な場合はこの記事を開発者に共有してください。