Aller au contenu
Support de Zwii

3 captures d’écran

À propos de ce fichier

Module Snipcart pour ZwiiCMS testé jusqu'à Zwii 10.4.04

 

Voir le module sur le site de présentation

C'est quoi ?

Snipcart est une plateforme de panier d'achat qui permet d'ajouter très rapidement la fonction boutique en ligne à votre site web. Snipcart prend en charge la validation du panier, le paiement, les envois de courriels aux clients et bien d'autres choses. L’inscription et la phase de test sont gratuites, quand votre site sera prêt une commission de 2% sera retenue sur chaque vente. C’est une solution intéressante pour créer rapidement un site d'e-commerce et cerise sur le gâteau Snipcart est basée à Quebec, Canada.    https://snipcart.com/fr

 

Le module Snipcart pour ZwiiCMS, proposé ici, crée une interface entre votre site Zwii et Snipcart en :

- automatisant l'intégration de Snipcart à votre site,

- facilitant la création des boutons d'ajout au panier ou de l'ensemble bouton et produit.

Ce mode d'emploi présuppose que vous avez créé un compte Snipcart.

 

RGPD : Le module Snipcart pour ZwiiCMS ne dépose pas de cookie, l'application tierce Snipcart dépose un cookie dénommée snipcart-cart nécessaire à la gestion du panier (consentement de l'internaute non nécessaire et il serait du ressort de Snipcart).

 

 

Une boutique

 

boutique.png.0ed5939c32fc369e9c039e8c331b3e83.png

 

 

 

Le panier qui apparaît après un clic sur un bouton d'ajout au panier

 

panier_simple.thumb.png.4b0489c984acfb996e2174649ecb73fa.png

 

 

Installation ou mise à jour

  • Décompressez l'archive snipcart_vxx.zip, elle contient 3 dossiers : core, module et site.
  • Transférer par FTP ces 3 dossiers à la racine de votre site.

Après une mise à jour 1.2 => 1.3 vous pouvez supprimer sur le serveur le dossier site/file/snipcart.

 

Exemple dans le site www/10500/

 

installation.png.9c4fa653081ff946074975f5220cb631.png

 

Création d'une page et configuration du module Snipcart

Créez une nouvelle page et associez lui un module Snipcart

 

page_creation.png.d90713769f82f4d810d39f196878a7df.png

 

Il est préférable de disposer le module en haut, un bouton d'accès au panier sera disposé en haut et à droite sur la page de vente en ligne (sinon ce sera en bas à droite).

Enregistrez et en configuration du module activez Snipcart et renseignez votre API KEY Snipcart (disponible dans Dashboard / Configure your domain / API KEYS ).

 

configuration_1.png.bc79446b87a83f680ce224610af6a547.png

Enregistrez la configuration.

 

C'est tout, votre module Snipcart a placé automatiquement les choses qu'il faut où il faut !

 

 

Vous pouvez choisir en configuration 2 modes de création

configuration_11.png.997bc1fac58ee988602facb3104164ef.png

 

Voir la vidéo : https://youtu.be/qaHrO-kcwLM

 

En résumé, à propos de ces  2 modes de création :

 

  •        vous ne créez que le bouton d'ajout au panier et vous êtes totalement libre pour éditer votre produit,
  •        vous créez simultanément le bouton et le produit et vous éditez rapidement vos pages 'boutique'.

 

 

  •        on peut modifier la configuration du module pour mixer les 2 modes sur une même page,
  •        en mode bouton et produit vous disposez de 3 mises en page : en ligne et, avec gabarits, sur 2 colonnes ou 3 colonnes.

 

 

En configuration vous pouvez également régler quelques paramètres par défaut, pour simplifier la saisie des boutons d'ajout au panier ou de l'ensemble bouton et produit.

Tous ces paramètres seront valables dans LA PAGE à laquelle vous avez associé le module Snipcart.

Vous pouvez créer autant de pages d'e-commerce que vous le souhaitez avec des configurations de module indépendantes.

 

configuration_2.png.deed284334ed0ffbac46748c7d9a818f.png

 

En documentation vous disposez d'un lien vers la page de connexion Snipcart et un lien vers cette documentation.

 

Edition d'une page d'e-commerce

Editez la page à laquelle vous avez associé un module Snipcart. Dans la barre de menu Tinymce doit apparaître, à côté de l'émoticône, une icône Snipcart :

 

menu_icone_barre.png.625d1552d93077c924b3bb0f4d3bb755.png

 

L'icône Snipcart est également disponible dans le menu 'Insérer' et dans le menu contextuel.

 

menu_inserer.png.6f4dc24bcfb65706b87616b35e931cb2.png

 

menu_contextuel.jpg.684209a8d1288e9237ae482412c54034.jpg

 

Dans l'éditeur Tinymce positionnez le curseur où vous voulez insérer un bouton et cliquez sur l'icône Snipcart, une fenêtre de création d'un bouton d'ajout au panier, ou de création bouton et produit, apparaît avec les valeurs par défaut définies en configuration pour poids en grammes, taxe et transport :

 

creation_general.png.43a7fbc29396cd37ca5c0d3b5e364194.png

 

Nom du produit

 

A renseigner obligatoirement

Id du produit

 

Attention !  il doit absolument être unique et renseigné

 

Description

 

Facultatif

Illustration

 

Facultatif

Vous avez préalablement transféré par FTP une image illustrant le produit

Tarif TTC

 

Prix TTC du produit en €,  hors éventuels frais de livraison

Poids en grammes

 

A renseigner si vous avez défini une règle de transport faisant intervenir le poids (voir Frais de transport) et si vous cochez la case 'Frais de transport', sinon laissez la valeur par défaut.

Saisir un poids en grammes sans décimale

Taxe

 

A renseigner si vous avez défini une ou plusieurs taxes dans Snipcart (voir Taxes), sinon laissez vide.

Le prix du produit étant TTC  cette valeur ne sert qu'à informer le client sur le montant des taxes

Transport

 

Pour que Snipcart ajoute des frais de transport, cochez la case. Dans ce cas une ou plusieurs règles de transport devront être créées dans Snipcart (voir Frais de transport)

Pour des biens immatériels ou pour une collecte en magasin décochez la case, dans ce cas aucune règle de transport n'est obligatoire

Attention !  si dans votre page se trouve au moins un produit avec frais de transport, ils seront calculés sur l'ensemble des produits.

 

 

Dans l'onglet Bouton toutes les valeurs peuvent être réglées par défaut :

 

creation_boutons.png.57c5ddaabf44b8f0904c05cee374502c.png

 

 

L'onglet Options permet d'associer jusqu'à 2 options que le client pourra choisir sur la page panier :

 

creation_options.png.5716260a99b98e0ff0d0c863516aff9f.png

 

Par exemple si le client doit choisir la contenance d'une bouteille, saisissez dans data-item-custom1-name la phrase de votre choix par exemple Contenance et dans data-item-custom1-options les options possibles séparées par une barre verticale (Alt Gr 6) , par exemple : 37,5cl|75cl|1,5l

 

panier_1_option.jpg.b0e86233f289a7680aa90e0a7d5a394d.jpg

 

C'est la première option (ici 35,5cl) qui s'affichera par défaut dans le panier.

 

Si le choix a une incidence sur le prix ajoutez la entre crochets, par exemple : 37,5cl|75cl[+5]|1,5l[+10]

Le choix 75cl entrainera une augmentation du prix de 5€.

 

558552186_panier_1_option.jpg.1fe6b00b329a33684d2e433a37062e88.jpg

 

 

L'onglet Textes permet d'afficher une zone de saisie de texte pour le client et un message.

 

creation_textes_pnb.png.ffb912c4fc815c038ed8a431315c43c2.png

 

Résultat obtenu avec pour la zone d'édition client data-item-custom3-name à Votre message et pour le message data-item-custom4-value à Merci pour votre commande (data-item-custom4-name laissée vide) :

 

panier_1_option_2textes.jpg.21e06f921ba19d1179ff442db835b15d.jpg

 

 

L'onglet Avancé permet d'ajouter au bouton des paramètres non prévus dans les onglets précédents, il nécessite une lecture approfondie du guide produits Snipcart dont un lien se trouve sur les onglets Options, Textes, et Avancé.

 

Ne jamais modifier le code du bouton manuellement ( avec l'édition en code source de Tinymce) !

 

creation_avance.png.d235b9d1eedd5a3481972f5aa73dfc47.png

 

Par exemple pour ajouter une case à cocher Cadeau vous saisissez data-item-custom5-name="Cadeau" data-item-custom5-type="checkbox" , vous obtenez :

 

panier_5_options.png.6c0100f33645653decaa6d4818114d7d.png

 

Panier obtenu avec 2 options Contenance et Bouchon, une zone de texte client, un message et une case à cocher Cadeau.

 

Modification ou suppression du bouton d'ajout au panier

Sélectionnez le bouton par un clic droit sur son texte :

 

modification_menucontextuel.png.7a8ccf32e6690ac12dbbd0bf634765a0.png

 

Et dans le menu contextuel choisir Snipcart.

 

La fenêtre s'ouvre en mode modification suppression :

 

modification_general.png.ec7fbd80b226bb8056c2b22045a2545b.png

 

 

 

Le mode d'emploi est identique, un bouton Supprimer apparaît en bas à droite pour faciliter la suppression d'un bouton d'ajout au panier ou de l'ensemble bouton et produit.

 

 

Taxes

Création de taxes dans Snipcart

image.png.c5e0447820f415107b0bbec6151ff3cd.png

 

Les prix sur le site d'e-commerce sont TTC, vous devez cocher la case 'Included in price'.

 

 Si vous voulez que cette taxe soit calculée également sur les frais de transport cochez la case ' Applies on shippings'.

 

Vous devez créer plusieurs taxes si dans votre boutique différentes taxes peuvent s'appliquer sur vos produits, exemple avec pour la France une TVA à 20%, 10%, 5.5%, 2.1%,...

 

image.png.daaef71b8d25277f74944176b75d7146.png

 

Dans Zwii quand vous créez votre bouton Snipcart d'ajout au panier, vous devez saisir le nom exact de la taxe, exemple ici avec 'TVA 20%'.

 

creation_general.png.43a7fbc29396cd37ca5c0d3b5e364194.png

 

Si vous voulez que plusieurs taxes s'appliquent au produit vous devez saisir le nom des taxes séparé par une barre verticale (AltGr touche 6), exemple avec les taxes TPS et TVQ saisir exactement TPS|TVQ.

 

Quand, sur la page de votre site d'e-commerce, vous cliquez sur le bouton 'Ajouter au panier', vous obtenez pour un produit avec 'TAXE 20%' cet écran :

 

image.png.53f8c54330dcb66e78059c0ad0057bd1.png

 

Frais de transport

Création d'une règle de transport dans Snipcart

image.png.87f90c1622bf77d0b35469d29c5bc5f0.png

 

Vous pouvez ajouter Dans 'Handling' des frais et des délais de préparation.

 

Placez Custom Shipping sur ON et cliquer sur CONFIGURE

 

image.png.e52a8d1d16fefedb640c95585535649e.png

 

 

Puis sur CREATE SHIPPING METHOD.

 

 

 

Donnez un nom à cette règle de transport et notez 0 dans FOR ORDER'S TOTAL ABOVE pour que cette règle s'applique dés le premier €.

 

image.png.c56aba312685221b91f678159115a4a8.png

 

Si vous placez sur ON le choix LOCATION, vous devrez choisir le ou les pays pour lesquels cette règle de transport s'applique.

Puis indiquez la tarification en €  par tranche de poids.

 

image.png.f48b025e8b37775a0b898f9bf49f966a.png

 

Dans la boîte de dialogue Snipcart Tinymce, onglet Général, vous devez cocher la case 'Frais de transport' et renseigner le poids en grammes du produit.

Astuce : si vous voulez une tarification par unité plutôt que par poids, rentrez 1 à chaque article dans la zone de texte poids en grammes (c'est la valeur par défaut à l'installation) et dans l'écran précédent créer une règle par grammes articles : de 1 à 6 grammes articles 10€, de 7 à 12 grammes articles 15€, etc...

 

 

 

 

 

modification_general.png


Quoi de neuf dans la version 1.3 ?   Voir le journal des modifications

Publiée

Version 1.3

  • Modification d'un dossier pour les ressources
  • Constantes pour gestion des modules avec la future version Zwii 10.5.00

 

Version 1.2

 

2 modes de création :

  • Création uniquement du bouton d'ajout au panier (idem version 1.1) pour être totalement libre dans l'édition du produit
  • Création simultanée du bouton et du produit pour éditer rapidement les pages boutique.

 




Retour utilisateur

Vous pouvez donner un avis uniquement après avoir téléchargé le fichier.


roger

Signaler ·

   1 sur 1 membre a ou ont trouvé cet avis utile 1 / 1 membre

Ayant eu l'occasion de tester sur un site de vente snipcart en étant moi même partis de zéro, le module que nous offre Sylvain est, selon mon propre avis personnel, le plus complet qui soit avec toutes les options de configurations possibles offertes par snipcart sur leur site web dans la gestion des tarifs, les "petits plus" permettant une interaction avec le client etc...

Un travail d'excellence dans l'intégration du système réalisé par notre ami pour qu'il soit exploitable dans le cms Zwii sans avoir vraiment besoin de grandes connaissances en la matière;

Il suffit de suivre à la lettre le tutoriel fourni pour arriver à ses fins.

Le module mérite amplement les cinq étoiles que je lui attribue, si je pouvais j'y ajouterais une étoile d'or supplémentaire tellement c'est un véritable petit plus offert là pour les utilisateurs de Zwii qui créent des sites de vente en ligne avec parfois bien du mal pour intégrer dedans un système de gestion de commande aussi pointu que celui ci.

 

Roger

 

  • Merci 1

Partager cet avis


Lien vers l’avis
augras

Signaler ·

  

Le travail réalisé sur ce module est tout simplement fantastique.

Pour l'avoir pas mal utilisé pour voir les possibilités je peux dire que toute la configuration se fait via une interface très simplement : c'était le but recherché et il est parfaitement atteint.

@sylvainlelievre met la création d'une boutique en ligne complète à la portée de tout le monde.

Un grand BRAVO !

  • Merci 1

Partager cet avis


Lien vers l’avis
×
×
  • Créer...