Wenn Fin for Ecommerce einen Artikel hinzufügt oder ändert, aktualisiert es den Warenkorb in Ihrem Shop. Dies funktioniert standardmäßig bei den meisten Themes. Wenn Ihr Warenkorb nicht aktualisiert wird, finden Sie unten die Lösung.
Unterstützte Themes
Ihr Warenkorb bleibt automatisch synchron bei Dawn, Horizon, Brooklyn, Flex, Flow, Venue, Sense, Craft, Refresh und darauf basierenden Themes. Viele andere, darunter Focal, Prestige und Warehouse, werden ebenfalls unterstützt.
Hinweis: Die Unterstützung hängt davon ab, wie Ihr Theme aufgebaut ist, nicht vom Namen. Ein stark angepasstes Theme benötigt möglicherweise dennoch den untenstehenden Schritt.
Wenn sich Ihr Shop-Warenkorb nicht aktualisiert
Wenn Fins Änderungen Ihren Warenkorb nie erreichen oder erst nach einem Seiten-Reload sichtbar werden, aktualisiert Ihr Theme den Warenkorb auf eine Weise, die Intercom nicht erkennen kann. Dies ist bei benutzerdefinierten Themes am häufigsten.
Hinweis: Das Hinzufügen dieses Snippets erfordert Zugriff auf das Shopify-Admin und grundlegende Kenntnisse im Bearbeiten von Theme-Code. Wenn Sie sich mit dem Bearbeiten von Theme-Dateien nicht wohlfühlen, geben Sie diesen Artikel an Ihren Entwickler weiter.
Um das Problem zu beheben, fügen Sie das untenstehende Snippet in Ihr Theme ein. Es hört auf ein benutzerdefiniertes Browser-Event (intercom:cartUpdated), das Fin auslöst, wenn der Warenkorb geändert wird, lädt dann den Warenkorb von Shopify neu und feuert die Events, die Ihr Theme zur Neudarstellung verwendet.
Öffnen Sie im Shopify-Admin den Code-Editor für Ihr aktives Theme.
Öffnen Sie Ihre Haupt-Layout-Datei, normalerweise layout/theme.liquid.
Fügen Sie das Snippet direkt vor dem schließenden
</body>-Tag ein und speichern Sie.Testen Sie es, indem Sie Fin bitten, ein Produkt hinzuzufügen. Ihr Shop-Warenkorb sollte sich sofort aktualisieren, ohne die Seite neu zu laden.
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.
}
});
Ändern Sie die letzten drei Dispatches so, dass sie das aufrufen, was Ihr Theme zur Neudarstellung des Warenkorbs verwendet.
Wenn sich der Warenkorb nach dem Hinzufügen des Snippets immer noch nicht aktualisiert, prüfen Sie, ob die Namen der benutzerdefinierten Events in den letzten drei Dispatches mit denen übereinstimmen, auf die Ihr Theme hört. Die JavaScript-Dateien oder die Dokumentation Ihres Themes zeigen, welche Events zur Neudarstellung des Warenkorbs verwendet werden. Wenn Sie unsicher sind, geben Sie diesen Artikel an Ihren Entwickler weiter.