SnipCart, une alternative e-commerce pour vos sites statiques

Les performances sont devenues un nouveau cheval de bataille pour les développeurs ces dernières années. Les recherches menées sur les besoins des utilisateurs tendent à prouver que la rapidité de chargement d’un site pèse fortement dans la balance et favorisent le succès de votre présence web si votre site est performant.

Ces besoins ont replacé les sites statiques sur le devant de la scène. Ils sont un terreau plus que favorable à la conception de sites rapides sans toutes les contraintes du passé. Ils peuvent désormais être aisément maintenus et mis à jour avec les générateurs de sites statiques et CMS que l’on peut y greffer.

Une lacune semblait toutefois être la vente en ligne qui requiert des fonctionnalités plus “dynamiques” comme le panier d’achat et la gestion de compte client. SnipCart change la donne et propose une solution très simple à mettre en place pour n’importe lequel de vos sites.

Un panier pour développeurs

SnipCart se présente lui-même comme une plateforme de panier d’achat pour développeurs. L’outil se compose de deux éléments:

Vous commencerez donc par créer un compte sur SnipCart afin de démarrer votre période d’essai. Celle-ci n’est pas limitée dans le temps, ce qui est déjà très utile pour des projets de longue haleine ou qui connaissent des lenteurs (qui a parlé de retour client ?!?).

Votre compte créé et votre adresse mail confirmée, vous accédez à un panneau de contrôle très simple. SnipCart vous propose une vue générale de vos ventes et bénéfices.

En tant que développeur, votre première étape sera de créer une clé API afin d’utiliser SnipCart sur votre site. Pour cela, il vous suffit de cliquer sur l’icône Account dans le coin supérieur droit de votre écran et de parcourir le menu jusqu’à API Keys. Comme le nom du lien l’indique, vous pourrez gérer plusieurs clés en une seule interface.

Une intégration très simple

Armé de votre clé API, nous pouvons désormais activer SnipCart sur notre site. Pour cela, trois ligne de code vont suffire:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdn.snipcart.com/scripts/2.0/snipcart.js" 
        data-api-key="YOUR KEY" 
        id="snipcart"></script>
<link href="https://cdn.snipcart.com/themes/2.0/base/snipcart.min.css" 
      rel="stylesheet" 
      type="text/css" />

À partir de là, l’API SnipCart est active sur votre site.

Une première solution pour tester un achat en ligne est de créer un bouton d’achat direct, comme ceci:

<button
    class="snipcart-add-item"
    data-item-id="2"
    data-item-name="Bacon"
    data-item-price="3.00"
    data-item-weight="20"
    data-item-url="http://myapp.com/products/bacon"
    data-item-description="Some fresh bacon">
        Buy bacon
</button>

On retrouve divers éléments de type data-item. Ces éléments sont les données produit que SnipCart va utiliser pour gérer vos produits, établir les informations de panier et de facturation. Vous pouvez retrouver une liste complète des paramètres disponibles dans la documentation officielle de SnipCart en Anglais.

Note: lors du premier clic sur un bouton d’achat, SnipCart va sauvegarder votre fiche produit dans votre panneau de contrôle (menu latéral gauche > products). Cela permettra à SnipCart, dans le futur, de vous fournir des statistiques de vente par produit. Il n’est donc nullement nécessaire de faire un double encodage de vos informations. Vous avez aussi la possibilité sous le panneau de contrôle d’effectuer l’opération Fetch (menu latéral gauche > products > fetch) afin de soumettre un nouveau produit via une url de votre site. Faites bien attention à soumettre l’url où se situe le bouton d’achat du produit car ce sont les données dont SnipCart a besoin.

Nous parlions d’un panier

Actuellement, nous ne pouvons effectuer que des achats directs avec la solution que je viens de vous présenter. Pour permettre à vos internautes d’aller plus loin, il nous faut un panier d’achat.

En ajoutant le code suivant à l’en-tête de votre site, nous allons disposer d’un panier en quelques secondes:

<div class="snipcart-summary">
    Number of items: <span class="snipcart-total-items"></span>
    Total price: <span class="snipcart-total-price"></span>
</div>

Vous remarquerez que ce code ne fait nullement appel à du Javascript. SnipCart détecte les éléments à partir de leur attribut class et remplit automatiquement les “vides”.

Si nous utilisons à nouveau notre bouton d’achat, la fenêtre de confirmation d’achat apparait toujours, ce qui n’est pas tip top avec l’utilisation d’un panier d’achat. Deux possibilités s’offrent à nous ici:

Continuer mes achats

Nous pouvons ajouter un bouton “continuer mes achats” à la fenêtre de confirmation d’achat. Pour cela, vous devez ajouter le script suivant à la suite du script de SnipCart:

<script>
if (typeof Snipcart !== 'undefined'){
    document.addEventListener('snipcart.ready', function() {
        Snipcart.execute('config', 'show_continue_shopping', true);
    });
}
</script>

Nous avons spécifié à SnipCart que l’option show continue shopping était active. Le résultat est l’apparition d’un bouton “continuer mes achats” sur la modal qui présente le panier en cours.

Toutefois, la modal apparait toujours et cela pourrait vous poser problème. Il existe donc une seconde alternative.

Ne pas afficher la modal à chaque ajout au panier

Afficher la modal à chaque ajout au panier peut être assez frustrant pour les visiteurs qui désirent poursuivre leurs achats. Afin de palier à ce problème, SnipCart propose une directive très simple à ajouter comme paramètre de la balise script de SnipCart:

<script src="https://cdn.snipcart.com/scripts/2.0/snipcart.js" 
        id="snipcart" 
        data-autopop="false" 
        data-api-key="YOUR KEY"></script>

Avec le paramètre data-autopop à false, SnipCart sait désormais que la modal ne doit plus apparaitre sauf action précise du visiteur lorsqu’il cliquera sur le lien “mon panier”.

N’oubliez donc pas d’intégrer ce lien dans l’ensemble de vos pages:

<a href="#" class="snipcart-checkout">Click here to checkout</a>

Sans celui-ci, vos visiteurs seraient alors dans l’incapacité d’effectuer le moindre achat.

Proposer une meilleure expérience

Une critique que l’on peut faire à SnipCart est le manque de “relation” qu’il propose de base avec votre site. L’API ressemble plus à une couche étrangère, venue d’ailleurs. Elle pourrait susciter le doute chez certains acheteurs.

Pour palier à cela, SnipCart dispose d’un large éventail de possibilités grâce à son API. Il vous est possible d’agir lors des interactions avec celle-ci. Vous retrouvez une présentation très complètes des événements disponibles dans la documentation de SnipCart, en Anglais.

Il vous est donc possible de créer des animations d’ajout en panier en parallèle des actions que SnipCart effectue. Voici un exemple afin d’ajouter une animation au bouton d’ajout au panier lors d’un clic:

if (typeof Snipcart !== 'undefined'){
    document.addEventListener('snipcart.ready', function() {
        Snipcart.subscribe('item.adding', function (ev, item, items) {
            var obtn = document.querySelector('button[data-item-id="' + item.id + '"]');
            obtn.classList.add('item-added-effect');
            setTimeout(function(){ 
                obtn.classList.remove('item-added-effect'); 
            }, 2000);
        });
    });
} 

Les possibilités sont nombreuses et des développeurs plus doués que moi en Javascript feront certainement mieux que ce que j’illustre avec cet exemple. Le fait est que SnipCart, au travers de ses événements, offre un large panel d’alternatives pour injecter des interactions entre son API et votre site, le rendant ainsi bien moins “statique” qu’il n’y parait.

Pour aller (beaucoup) plus loin, vous avez aussi la possibilité d’adapter complètement l’interface de SnipCart pour votre site. Je ne me suis toutefois pas encore lancé dans cette partie de la documentation et n’en parlerai donc pas plus pour ce premier article.

Vendez à l’international

SnipCart est aussi prévu pour gérer plusieurs langues. Par défaut, il vous suffit de spécifier la langue de la page en cours pour que SnipCart adapte ses textes:

Snipcart.setLang('fr');

J’ai toutefois remarqué que l’ensemble des textes n’étaient pas traduit via cette directive, comme le bouton “continuer mes achats”. Vous pouvez palier à ce problème puisque l’API vous permet de spécifier vos propres traductions:

Snipcart.execute('bind', 'app.ready', function() {
    Snipcart.execute('registerLocale', 'fr', {
    "thankyou_message":
    "Merci pour votre commande ! Bisous bisous !"
    });
});

Consultez la documentation en ligne pour en savoir plus sur la gestion des langues sous SnipCart.

Une interface mobile-friendly

SnipCart propose une fenêtre de type modal pour la gestion des commandes sur votre site. De base, ce n’est pas la panacée sur Smartphone. Toutefois, après quelques tests, je peux dire que ce panier pour développeurs ne s’en sort pas si mal que ça. La création d’un compte via mobile n’est certainement pas l’étape la plus simple mais l’ensemble fonctionne sans trop de difficultés.

Des produits numériques faciles à gérer

Si vous désirez vendre des fichiers numériques (photographie, fichier audio, livre numérique, etc.), le panneau de contrôle offre aussi des fonctionnalités très simples et parfaitement sécurisées.

Par rapport à des produits conventionnels que vous encoderiez directement sur votre site, vous devez passer en premier lieu par le panneau de contrôle de SnipCart pour des fichiers numériques (menu latéral gauche > digital goods).

Chaque fichier numérique dispose d’une clé (file guid) que vous devrez ajouter comme paramètre data-item-guid sur votre bouton d’achat. Cette clé n’est générée qu’après upload dans le panneau de contrôle de SnipCart.

<button
    class="snipcart-add-item"
    data-item-id="2"
    data-item-name="Picture"
    data-item-price="30.00"
    data-item-shippable="false"
    data-item-guid="FILE GUID"
    data-item-url="http://myapp.com/products/dog"
    data-item-description="Picture of my dog">
        Buy bacon
</button>

Vous remarquerez que j’ai aussi ajouté data-item-shippable à false. Ce paramètre va permettre d’éviter aux utilisateurs de spécifier une adresse de livraison pour ce type de produit et donc retirer une étape inutile du processus d’achat.

Et encore tant de chose à vous présenter

Je vous ai présenté ici différents points qui ont marqué mes douze premiers jours sous SnipCart et, comme vous aurez pu le constater, ce panier pour développeur dispose d’excellents atouts pour faire de vos sites “statiques” des plateformes de vente en ligne très appréciables.

Les premières heures sur cette API peuvent sembler frustrantes de par le fait que l’on a l’impression de subir SnipCart. Ce sentiment s’estompe toutefois très vite à la lecture de leur documentation en ligne et on finit par se rendre compte que les possibilités sont aussi larges que pour toute autre solution de vente en ligne.