Lorsque Fin for Ecommerce ajoute ou modifie un article, il met à jour le panier dans votre boutique. Cela fonctionne par défaut sur la plupart des thèmes. Si votre panier ne se met pas à jour, la solution est ci-dessous.
Thèmes pris en charge
Votre panier reste automatiquement synchronisé sur Dawn, Horizon, Brooklyn, Flex, Flow, Venue, Sense, Craft, Refresh et les thèmes basés sur ceux-ci. Beaucoup d'autres, y compris Focal, Prestige et Warehouse, sont également pris en charge.
Note : Le support dépend de la façon dont votre thème est construit, pas de son nom, donc un thème fortement personnalisé peut encore nécessiter l'étape ci-dessous.
Si le panier de votre vitrine ne se met pas à jour
Si les modifications de Fin n'atteignent jamais votre panier, ou n'apparaissent qu'une fois que l'acheteur recharge la page, votre thème actualise son panier d'une manière qu'Intercom ne peut pas détecter. C'est le cas le plus fréquent sur les thèmes personnalisés.
Note : Ajouter ce snippet nécessite un accès administrateur Shopify et une connaissance de base de l'édition du code du thème. Si vous n'êtes pas à l'aise avec l'édition des fichiers de thème, partagez cet article avec votre développeur.
Pour le corriger, ajoutez le snippet ci-dessous à votre thème. Il écoute un événement personnalisé du navigateur (intercom:cartUpdated) que Fin déclenche chaque fois qu'il modifie le panier, puis récupère à nouveau le panier depuis Shopify et déclenche les événements que votre thème utilise pour le recharger.
Dans votre administration Shopify, ouvrez l'éditeur de code pour votre thème en ligne.
Ouvrez votre fichier de mise en page principal, généralement layout/theme.liquid.
Collez le snippet juste avant la balise de fermeture
</body>, puis enregistrez.Testez-le en demandant à Fin d'ajouter un produit. Le panier de votre vitrine devrait se mettre à jour immédiatement, sans rechargement de page.
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.
}
});
Modifiez les trois dernières dispatches pour appeler ce que votre thème utilise pour recharger le panier.
Si le panier ne se met toujours pas à jour après avoir ajouté le snippet, vérifiez que les noms des événements personnalisés dans les trois dernières dispatches correspondent à ceux que votre thème écoute. Les fichiers JavaScript ou la documentation de votre thème indiqueront quels événements il utilise pour recharger le panier. Si vous avez un doute, partagez cet article avec votre développeur.