Installer Snipcart sur son site Webflow

par
Robin Desarcy
Temp de lecture :
10
min
webflow
snipcart

Si vous cherchez une solution e-commerce plus complète que celle proposée par Webflow e-commerce, vous devriez sérieusement considérer la solution de Snipcart.

1. Créez un compte

Rendez-vous sur le site https://snipcart.com/ , indiquez puis confirmez votre adresse mail.

2. Configurez Snipcart

Votre compte créé, vous avez maintenant accès à votre Dashboard.

Vous y retrouverez une checklist des tâches à faire pour configurer votre compte Snipcart.

2.1. Remplissez les infos de votre business

Ici rien de bien compliqué, il faut juste remplir tous les champs demandés.

2.2. Ajoutez votre domaine

Etape très importante, c'est le moment de dire à Snipcart sur quel demaine vous autorisez que Snipcart soit actif.

Comme vous voyez, vous pouvez ajouter plusieurs domaines et sous-domaines.

3. Ajoutez Snipcart sur votre site

Pour ce faire, Snipcart vous renvoie vers la documentation mais je vais vous épargnez la lecture.

Copiez simplement le code ci-dessous dans le Header de votre site :

<link rel="preconnect" href="https://app.snipcart.com">
<link rel="preconnect" href="https://cdn.snipcart.com">
<link rel="stylesheet" href="https://cdn.snipcart.com/themes/v3.0.21/default/snipcart.css" />

Et ajoutez ce code ci où vous souhaitez que votre panier Snipcart soit placé :

<script async src="https://cdn.snipcart.com/themes/v3.0.21/default/snipcart.js"></script>
<div hidden id="snipcart" data-api-key="YOUR_PUBLIC_API_KEY"></div>

Evidement, remplacez "YOUR_PUBLIC_API_KEY" par votre clé API publique que vous trouverez ici :

Account > API KEYS

Voilà, Snipcart est installé, vous êtes prêt à ajouter vos produits !

4. Ajoutez vos produits

Vos poduits ne sont pas encodé dans Snipcart, et c'est d'ailleurs là un bel avantage.

En effet, Snipcart ne prends connaissance de vos produits qu'au moment où vous les ajouter au panier, je m'explique ...

Dans la documentation, Snipcart vous donne un bout de code, celui d'un bouton "ajouter au panier" pour être plus précis, et c'est ce bouton qui va contenir toutes les infos sur le produit.

Voici le code :

<button class="snipcart-add-item"  
data-item-id="starry-night"  
data-item-price="79.99"  
data-item-url="/paintings/starry-night"  
data-item-description="High-quality replica of The Starry Night by the Dutch post-impressionist painter Vincent van Gogh."  
data-item-image="/assets/images/starry-night.jpg"  
data-item-name="The Starry Night">
Add to cart
</button>

Toutes les informations produits que Snipcart a besoin sont dans les attributs du button.

data-item-id : l'identifiant unique du produit

data-item-price : le prix du produit

data-item-url : l'url à laquelle le bouton est encodé (je vous expliquerai plus tard pourquoi c'est très important et utile)

data-item-descriprion : la description du prouit (elle sera reprise dans le panier)

data-item-image : le lien vers l'image du produit (aussi reprise dans le panier)

data-item-name : le nom du produit

Name, ID, Price et URL sont obligatoires, les autres sont optionnelles.

Vous en trouverez d'ailleurs beaucoup d'autres dans la documentation (nous y reviendrons plus tard).

4.1. Utiliser le CMS Webflow pour lister les produits

L'avantage de cette méthode, c'est qu'avec Weblow CMS, il suffit de remplacer les valeurs des attributs par les valeurs d'un item du CMS.

Pour ce faire, créer une collection dans Webflow avec vos produits, par exemple :

Encodez vos produits puis ajoutez la collections sur votre page produits.

Et dans l'element "Collection Item", ajouter votre embed avev le code Snipcart, c'est à ce moment que la magie arrive ...

Il vous suffit de remplacer les valeurs par celle du CMS , ainsi :

La méthode est exactement la meme que vous soyez sur la page avec tous vos produits ou sur la page d'un produit spécifique, pensez juste à bien changer l'URL.

Et voila, tout est prêt !

4.2. Est-ce bien sécurisé ?

Si vous êtes développeur, je vous entends déjà crier "N'importe quoi ! Renseigner les données et le prix du produit côté front-end, c'est du délire, c'est absolument pas sécurisé !".

Et vous avez raison ... presque !

Rappelez vous de l'attribut data-item-url, Snipcart va s'en servir pour faire du crawling sur la page.

Pour générer le panier et valider la commande, Snipcart va suivre l'url, regarder le bouton avec l'ID renseigné puis récupérer et comparer les valeurs.

Ainsi, même si vous modifier les données dans l'inspecteur, Snipcart verra qu'elles ne correspondent pas et renverra une erreur.

Donc oui, c'est bien pensé, bien sécurisé.

Pour plsu d'infos sur ce mécanisme de crawling, tout est expliqué ici : snipcart order validation.

5. Ajoutez des options

Si vos produits ont différentes options, par exemple, différentes tailles, différentes couleurs ...

Vous pouvez les renseigner dans l'attribut data-item-custom1-name et data-item-custom1-options, comme ceci :

<button class="snipcart-add-item"  
data-item-id="starry-night"  
data-item-price="79.99"  
data-item-url="/paintings/starry-night"  
data-item-description="High-quality replica of The Starry Night by the Dutch post-impressionist painter Vincent van Gogh."  
data-item-image="/assets/images/starry-night.jpg"  
data-item-name="The Starry Night"  
data-item-custom1-name="Frame color"  
data-item-custom1-options="Black|Brown[+100.00]|Gold[+300.00]">  
Add to cart
</button>

D'ailleurs, remarquez que si certaines options sont plus cheres, vous pouvez indiquez le supplément entre crochet.

Petit problème, les options sont selectionnables que dans le panier, idéalement, elles devraient l'être aussi sur la page produit avant d'ajouter le produit au panier.

Pour corriger ca, nous allons ajouter quelques lignes de Javascript pour créer un select avec les options et mettre à jour le bouton "add to cart".

<script>
const button = document.querySelector('#starry-night')
const quantity = document.querySelector('#quantity')
quantity.addEventListener('change', () => {
 // Sets the default quantity when adding the item
 button.setAttribute('data-item-quantity', quantity.value)
})
const select = document.querySelector('#frame_color')
select.addEventListener('change', () => {
 // Sets the default frame color when adding the item
 button.setAttribute("data-item-custom1-value", select.value)
})
</script>

Dans cette exemple, on permet de changer la quantité et la couleur du produit.

Pour plus d'exemple de champs personnalisés, référez vous à cette page de la documentation : snipcart products.

6. Personnalisez le panier

Si vous souhaitez ajouter des champs supplémentaires dans le formulaire du checkout, reprenez le code du apnier que vous avez copié/collé au début du tutoriel et ajoutez vos champs supplémentaires.

Vous pouvez par exemple ajouter un champ de texte :

<billing section="bottom">
   <fieldset class="snipcart-form__set">
       <div class="snipcart-form__field">
           <snipcart-label class="snipcart__font--tiny" for="vatNumber">
               VAT Number
           </snipcart-label>
           <snipcart-input name="vatNumber"></snipcart-input>
       </div>
   </fieldset>
</billing>

ou une checkbox :

<billing section="bottom">
   <fieldset class="snipcart-form__set">
       <div class="snipcart-form__field">
           <div class="snipcart-form__field-checkbox">
               <snipcart-checkbox name="subscribeToNewsletter"></snipcart-checkbox>
               <snipcart-label for="subscribeToNewsletter" class="snipcart__font--tiny snipcart-form__label--checkbox" for="subscribeToNewsletter">
                   Subscribe to newsletter
               </snipcart-label>
           </div>
       </div>
   </fieldset>
</billing>

Et bien d'autres champs que vous trouverez ici : snipcart order custom fields.

7. Quelques boutons supplémentaires

7.1 Bouton panier

<button class="snipcart-checkout">Click here to checkout</button>

7.2 Nombre de produit et prix

<span class="snipcart-items-count"></span>
<span class="snipcart-total-price"></span>

7.3 Dashboard client

<button class="snipcart-customer-signin">My account</button>

Devenez membre, accèdez à des articles et vidéos exclusives.
Devenir membre

Commençons aujourd’hui,
récoltez les bénéfices demain.

Créons un site web qui déchire.