Installation

Vous devez d'abord créer un compte Snipcart pour commencer. C'est toujours gratuit en mode de test.

Pour commencer, vous devez inclure nos ressources, des fichiers JavaScript et CSS, dans votre code source.

Nous vous suggérons d'utiliser directement les ressources de notre CDN.

1. Ajouter des indications preconnect

<link rel="preconnect" href="https://app.snipcart.com">
<link rel="preconnect" href="https://cdn.snipcart.com">

2. Inclure notre feuille de style par défaut

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

3. Intégrer Snipcart à votre site

Ici, vous pouvez décider de l'endroit où vous voulez que le panier JS de Snipcart soit positionné sur votre site web.

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

Nous vous recommandons vivement d'utiliser l'attribut hidden. Surtout si vous comptez personnaliser nos modèles.

Exemple

Voici un exemple d'une configuration de base avec Snipcart installé correctement.

<!DOCTYPE html>
<html>
  <head>
    <title>Hello world</title>
    <link rel="stylesheet" href="https://cdn.snipcart.com/themes/v3.2.0/default/snipcart.css" />
  </head>
  <body>
    <div class="content">
      Your site content here
    </div>

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

Configurations globales

Certains paramètres globaux peuvent être configurés à l'aide d'attributs de données sur l'élément div#snipcart.

data-config-add-product-behavior

Définit ce qui se passe lorsque les clients ajoutent des produits au panier.

Pour l'instant, la seule valeur prise en charge pour ce paramètre est none. Lorsque none est spécifié, les clients restent sur le site lorsqu'un produit est ajouté; le panier ne s'ouvre pas.

Toute autre valeur (ou l'omission de ce paramètre), fera apparaître le panier lorsqu'un produit est ajouté.

<div hidden id="snipcart" data-api-key="<API_KEY>" data-config-add-product-behavior="none"></div>

data-config-modal-style

La fenêtre pop-up du panier peut avoir deux styles différents. Le premier est un panier pleine page et le second est seulement une modale latérale. Le style par défaut est le panier pleine page.

Pour que le panier s'ouvre dans une modale latérale, vous pouvez utiliser l'attribut data-config-modal-style et définir la valeur à side.

<div hidden id="snipcart" data-api-key="<API_KEY>" data-config-modal-style="side"></div>

side cart

Étape suivante

Maintenant que vous avez installé Snipcart, vous pouvez commencer à ajouter des produits à votre site.