Événements du SDK JavaScript
Afin d'écouter les événements Snipcart, vous pouvez utiliser la méthode on :
Snipcart.events.on('{eventName}', callback);Pour vous délier d'un événement, vous pouvez appeler la fonction retournée par la méthode on :
const unsubscribe = Snipcart.events.on('{eventName}', callback);
unsubscribe();Événements publics
Plusieurs de ces événements sont utiles pour afficher un avis particulier à vos clients ou pour s'intégrer à des outils d'analyse tiers.
item.adding
Avant qu'un article soit ajouté au panier, un événement item.adding est déclenché. La fonction de rappel reçoit le ParsedCartItem comme argument.
Snipcart.events.on('item.adding', (parsedCartItem) => {
console.log(parsedCartItem);
});item.added
Après l'ajout d'un article au panier, un événement item.added est déclenché. La fonction de rappel reçoit le CartItem ajouté comme argument.
Snipcart.events.on('item.added', (cartItem) => {
console.log(cartItem);
});item.updated
Lorsqu'un article du panier est mis à jour, un événement item.updated est déclenché. La fonction de rappel reçoit le CartItem mis à jour comme argument.
Snipcart.events.on('item.updated', (cartItem) => {
console.log(cartItem);
});item.removed
Lorsqu'un article est retiré du panier, un événement item.removed est déclenché. La fonction de rappel reçoit le CartItem retiré comme argument.
Snipcart.events.on('item.removed', (cartItem) => {
console.log(cartItem);
});cart.created
Lorsqu'un panier est créé (par exemple, lorsqu'un article est ajouté pour la première fois), un événement cart.created est déclenché. La fonction de rappel reçoit le CartState créé comme argument.
Snipcart.events.on('cart.created', (cartState) => {
console.log(cartState);
});cart.confirmed
Lorsqu'une commande est passée et que le panier est confirmé avec succès, un événement cart.confirmed est déclenché. La fonction de rappel reçoit le CartState confirmé comme argument.
Snipcart.events.on('cart.confirmed', (cartConfirmResponse) => {
console.log(cartConfirmResponse);
});cart.confirm.error
Lorsqu'une commande est passée mais que sa confirmation échoue, un événement cart.confirm.error est déclenché. La fonction de rappel reçoit le BaseCartConfirmError comme argument.
Snipcart.events.on('cart.confirm.error', (confirmError) => {
console.log(confirmError);
});cart.reset
Lorsque le panier est réinitialisé avec succès, un événement cart.reset est déclenché. La fonction de rappel reçoit le CartState confirmé comme argument.
Snipcart.events.on('cart.reset', (cartState) => {
console.log(cartState);
});payment.failed
Lorsqu'une commande est rejetée en raison d'une erreur de paiement, un événement payment.failed est déclenché. La fonction de rappel reçoit le BaseCartConfirmError comme argument.
Snipcart.events.on('payment.failed', (paymentError) => {
console.log(paymentError);
});discount.applied
Lorsqu'un rabais est appliqué au panier, un événement discount.applied est déclenché. La fonction de rappel reçoit le Discount appliqué comme argument.
Snipcart.events.on('discount.applied', (discount) => {
console.log(discount);
});shipping.selected
Lorsqu'une méthode de livraison est sélectionnée dans le panier, un événement shipping.selected est déclenché. La fonction de rappel reçoit la ShippingMethod sélectionnée comme argument.
Snipcart.events.on('shipping.selected', (shippingMethod) => {
console.log(shippingMethod);
});language.updated
Lorsque la langue du panier est mise à jour, un événement language.updated est déclenché. La fonction de rappel reçoit un objet contenant le code de langue mis à jour, ainsi que les éventuelles modifications spécifiées ({lang: string, overrides: {[key: string]: string}}).
Snipcart.events.on('discount.applied', (languageUpdatedResponse) => {
console.log(`Language was changed to ${languageUpdatedResponse.lang}`);
});customer.registered
Lorsque les clients créent un compte pour pouvoir accéder à leur tableau de bord client, un événement customer.registered est déclenché. La fonction de rappel reçoit le Customer comme argument.
Snipcart.events.on('customer.registered', (customer) => {
console.log(`Customer ${customer.email} just created an account.`);
});customer.signedin
Lorsqu'un client se connecte à son tableau de bord client, un événement customer.signedin est déclenché. La fonction de rappel reçoit le Customer comme argument.
Snipcart.events.on('customer.signedin', (customer) => {
console.log(`Customer ${customer.email} just signed in.`);
});customer.signedout
Lorsqu'un client se déconnecte, un événement customer.signedout est déclenché. La fonction de rappel ne reçoit pas de paramètres.
Snipcart.events.on('customer.signedout', () => {
console.log('Customer signed out');
});snipcart.initialized
Lorsque Snipcart a terminé son initialisation, un événement snipcart.initialized est déclenché. La fonction de rappel prend le SnipcartState comme argument.
Snipcart.events.on('snipcart.initialized', (snipcartState) => {
console.log(snipcartState);
});snipcart.initialization.error
Lorsque Snipcart ne parvient pas à s'initialiser, un événement snipcart.initialization.error est déclenché. Dans ce cas, la fonction de rappel ne prend aucun argument.
Snipcart.events.on('snipcart.initialization.error', () => {
console.log('Failed to initialize Snipcart');
});Événements liés au thème
theme.routechanged
Après la modification d'une route dans le panier, un événement theme.routechanged est déclenché. La fonction de rappel reçoit un objet contenant le chemin de la route précédente et actuelle comme argument ({from: string, to: string}).
Cet événement peut être utile si vous souhaitez effectuer des manipulations DOM à l'intérieur du panier.
Snipcart.events.on('theme.routechanged', (routesChange) => {
if (routesChange.from === "/" && routesChange.to !== "/") {
console.log('cart opened');
}
if (routesChange.from !== "/" && routesChange.to === "/") {
console.log('cart closed');
}
})Événements liés au contexte du navigateur
summary.checkout_clicked
Lorsqu'un client clique sur un bouton Afficher le panier, un événement summary.checkout_clicked est déclenché. Dans ce cas, la fonction de rappel ne prend aucun argument.
Snipcart.events.on('summary.checkout_clicked', () => {
console.log('checkout clicked')
});