Guide de migration v3

Principes de base

Vous pouvez mettre à niveau l'intégration de votre panier d'achat à la dernière version de Snipcart, v3, sortie en octobre 2019.

Il y a plusieurs raisons de procéder à une mise à niveau. Le changement le plus apparent concerne l'interface utilisateur du panier. Le nouveau design est sobre et conçu pour s'adapter à la plupart des sites web avec peu de modifications. Nous avons suivi les meilleures pratiques ergonomiques pour un processus de paiement centré sur la conversion et avons utilisé une approche orientée vers le mobile.

Vous pouvez plus facilement remplacer les modèles de panier par un panier pleine page, une petite modale centrée, un panier coulissant, etc.

Nous avons également facilité l'injection de votre style visuel lors du passage à la caisse. Des couleurs et des animations à l'ajout ou à la suppression de champs, vous pouvez faire beaucoup. Nous disposons maintenant d'une syntaxe de type HTML qui permet de jouer facilement avec les composants du panier.

Enfin, il ne dépend d'aucune bibliothèque tierce dans la portée globale, telle que jQuery.

Gardez à l'esprit que malgré les avantages, il n'y a pas de besoin immédiat de mise à niveau; si vous êtes satisfait de votre intégration actuelle, nous continuerons à supporter la v2 dans un avenir prévisible.

Cependant, les nouvelles fonctionnalités ajoutées dans la v3 ne seront pas portées sur la v2.

Étapes de migration

Si vous n'avez pas personnalisé votre panier, la migration de la v2 à la v3 est, dans la plupart des cas, aussi simple que de permuter le script d'installation qui se trouve dans cette entrée.

La plupart des attributs de définition du produit se comportent de la même manière, à quelques exceptions près, énumérées ci-dessous.

Si vous avez appliqué une personnalisation à votre panier, vous pouvez lire notre section sur les bris de compatibilité pour identifier les modifications qui nécessitent une action de votre part.

Bris de compatibilité

Pendant la migration de votre intégration actuelle, certains changements nécessiteront votre attention :

Installation

  • Vous devez préciser l'emplacement du panier dans vos balises et spécifier la clé API. Consultez notre guide d'installation pour plus de détails.
  • jQuery peut être supprimé de l'installation s'il n'est pas nécessaire pour votre site web. Ce n'est pas une dépendance pour Snipcart v3.
  • Les champs personnalisés des commandes doivent être déplacés du script d'installation vers la div de Snipcart et transformés d'attributs en balises HTML. Lisez cette entrée pour plus de détails.

Définition des produits

  • L'attribut data-item-categories n'est plus séparé par des virgules. Vous pouvez utiliser des barres verticales (|) pour séparer les catégories.
  • L'attribut data-item-stackable n'est plus booléen, mais une chaîne de caractères qui décrit les différents comportements possibles. Lisez cette entrée pour plus de détails.

Résumé du panier et tableau de bord client

  • Le snipcart-total-items a été renommé en snipcart-items-count.

Personnalisation

Pour permettre cette expérience utilisateur améliorée, nous avons dû reconstruire le panier à partir de zéro. C'est pourquoi les balises et les styles ont changé, et ce ne sont pas toutes les personnalisations qui peuvent être portées dans cette nouvelle installation. Cela dit, il devrait maintenant être plus facile de personnaliser le panier pour l'adapter à votre marque. Consultez cette entrée pour plus de détails.

Personnalisation du style

Tout comme son prédécesseur, vous pouvez modifier le style du panier v3 en ajoutant ou en remplaçant n'importe quel CSS dans les règles CSS de Snipcart. Nous vous recommandons d'utiliser les outils de développement offerts par votre navigateur pour déterminer les classes à cibler, afin d'appliquer les modifications souhaitées.

Personnalisation des balises

Si vous avez utilisé des manipulations directes du DOM pour insérer ou modifier du HTML à l'intérieur du panier, vous devrez utiliser notre fonction de personnalisation pour transférer ces modifications. Pour en savoir plus sur cette fonctionnalité, vous pouvez lire cette entrée.

API JavaScript

L'API JavaScript, désormais appelée SDK JavaScript, a été reconstruite et réorganisée. La plupart des méthodes se retrouvent dans le nouveau SDK sous un autre nom.

La plupart des cas d'utilisation peuvent être reproduits à l'aide de ce nouveau SDK, mais nous nous efforçons toujours de fournir des fonctionnalités pertinentes, telles que des événements, pour répondre à tous les scénarios possibles.

Localisation

Nous avons réorganisé notre système de localisation; il est désormais plus facile de prendre en charge plusieurs langues et régions. Vous pouvez lire cette entrée pour plus d'informations.

Les contributions de la communauté pour la v3 se trouvent dans ce nouveau dépôt de code source. Le format du fichier de localisation est nettement amélioré.

Fonctionnalités non prises en charge

Il convient également de noter qu'il existe encore quelques fonctionnalités, précédemment disponibles avec la v2, qui sont actuellement en cours de développement :

  • Validation personnalisée

Pour être informé de tout développement futur, vous pouvez vous abonner à notre infolettre ou suivre nos notes de versions.

Certaines passerelles de paiement ne seront pas portées à la v3, mais sont disponibles en utilisant notre fonctionnalité de passerelle de paiement personnalisée :

  • Pin payments
  • Paymill
  • Paysafe

Si vous avez des questions, n'hésitez pas à nous écrire à l'adresse geeks@snipcart.com ou via notre assistance en ligne. Nos développeurs se feront un plaisir de répondre à toutes les questions ou préoccupations que vous pourriez avoir pendant votre migration.