Une Boutique Type avec Vivid Store


Test et tuto du magasin "isitVivid.com"


Je viens d'ajouter un Add-on gratuit sur ce site web en provenance de : https://store.market.isitvivid.com/. Il y a des add-ons ou blocs payants et gratuits pour concrete5. Il est intéressant pour moi comme pour certains lecteurs qui utilisent C5 de voir comment pourrait être une petite boutique de vente en ligne sur un site web concrete5.

J'avais déjà tenté le coup sur un autre site web dans le passé, et puis, j'ai tout abandonné. Non pas, à cause de la difficulté d'ajouter des produits dans la boutique et de la mise en valeur des photos des produits et de leurs descriptions. Mais surtout à cause de ce qui se passe à la fin.

En fait, vous pouvez très bien faire une boutique à l'aide de blocs ou de widgets prévus à cette effet, il s'agit juste d'apprivoiser la bête. Non, la difficulté est ailleurs.

Le problème vient au niveau du paiement.C'est beaucoup plus difficile qu'il n'y paraît. On doit être affilié à un système bancaire que l'on doit payer. Il faut un certificat SSL.

Bref, pour le paiement des produits, le système de boutique ne suffit pas en lui-même.

Mais, je m'égare...


Voyons comment se présente cette boutique ?


J'ai fais cette boutique en 1 heure et bien que ce soit juste un test (la boutique est fictive), elle fonctionne sauf au final pour le paiement (j'en ai parlé au-dessus).

Lorsque on télécharge cet add-on, qui se place automatiquement dans le tableau de bord de votre site voici ce que vous pouvez voir

Un fichier qui se nomme STORE a été ajouté. (STORE qui veut dire magasin). Ce fichier STORE se déplie en 4 sous-dossiers.

  • Orders (Commandes)
  • Products (Produits)
  • Attributs (Attributs)
  • Paramètres (Paramètres)

C'est à l'aide de ces dossiers que tout se passe car ils proposent tout ce qu'il faut pour créer votre boutique.

Vous pouvez (c'est conseillé) créer des groupes. En fait, ces groupes sont les catégories des produits. Exemple, dans un groupe que vous nommez : "bibelots" vous mettrez tous les bibelots que vous voulez vendre. Dans un autre groupe nommé : "tableaux" vous y ajouterez tous les tableaux en vente dans la boutique et ainsi de suite..

Pour l'instant, j'ai créer en test 5 groupes (catégories de produits) et je ne m'en suis servi que d'un seul ; le groupe test. Voir la copie d'écran


Produits et collections

On développe les paramètres d'un produit

Maintenant, je vais vous montrer les différents paramètres lorsque vous ajoutez un produit dans la boutique. Il faut cliquer sur : " Ajouter un produit" tout simplement.

Regardez la copie d'écran du dessus, pour l'exemple, je vais cliquer sur le crayon du produit Chevaux et vous aurez une autre copie d'écran juste en dessous à regarder.(je n'ajoute pas de produit, je vous montre les différents paramètres du dossier produits)

On remarquera 8 sous-dossiers des paramètres :

  • Overview (Vue d'ensemble)
  • Downloads and Users Groups (Groupes d'utilisateurs et téléchargements)
  • Images (L'image du produit)
  • Détails (Détails)
  • Shipping (Expéditions)
  • Attributs (Les attributs)
  • Detail Page (Détails de la page)

Je vous mets juste 3 copies d'écran : " Vue d'ensemble - Détails - Expéditions"


Les paramètres de la Vue d'ensemble du produit fictif : " Chevaux"

Les paramètres les plus importants pour les transactions finales avec les ID et clés avec Stripe par exemple.

Les paramètres pour le transport


Les paramètres importants concernant les :

  • La monnaie
  • Les impôts
  • Paiements
  • Ordres statuts
  • Les notifications par E-mail

Intéressons-nous maintenant, au plus important pour une boutique


Le plus difficile est de proposer un paiement adapté et sûr sur internet. Pour cela, VIVID STORE a intégrer le système de paiement (que je ne connaissais pas avant de me documenter) Stripe. C'est une start-up californienne qui permet aux marchands d'accepter les paiements en ligne par carte bancaire. Lire cet article. Cette boutique ne prend pas Paypal mais Stripe doit faire l'affaire.(si ça ne coûte pas trop cher, je ne me suis pas encore inscrit). Mais, Vivid Store a prévu des champs pour paramétrer Stripe, notamment avec l'ID a placé directement comme vous pouvez le voir sur les impressions écrans suivantes :

Je viens de me rendre compte que j'ai fais une petite erreur dans le système d'intégration prévu par cette boutique. On voit qu'ils ont prévu de remplir les champs pour Auhorize.net et non pas, directement avec Stripe. Voilà ce qui est dit précisément :
"MODES DE PAIEMENT

Encastré

  • Authorize.net construit en
  • Facture (pas de paiement à la caisse)

Comme Extensions

  • Stripe (bienvenus toute l'Europe et l'Australie) Disponible par contact (pour l'instant)
  • Beanstream Disponible par contact (pour l'instant)
  • Sage Disponible par contact (pour l'instant)"


Pour paramétrer les symboles monétaires ainsi que les séparateurs de milliers

Les emplacements et règles fiscales

Les paramètres pour la livraison ( à noter qu'ils nomment ça : " Transport maritime" !

Les paramètres les plus importants pour les transactions finales avec les ID et clés avec Stripe par exemple.

Les paramètres pour le statut des commandes



Conclusions


En conclusion et pour clore ce tuto, outre les copies d'écran, j'ai réalisé une petite page en dessous pour vous montrer ce que cela peut donner. Il y a 5 produits fictifs avec chacun, une image. On peut cliquer sur : " Plus de détails " et " Add to Cart (Ajouter au panier)". On peut même mettre plusieurs catégories dans la marge à la façon Blog.

Quand à moi, si il me vient à l'idée d'avoir une petite boutique, je saurai l'installer sur le site. Comme je vous l'ai dis, il faut s'inscrire à une solution de paiement et je suis tenté d'approfondir le système Stripe et de vous en reparler par la suite. En fait, dans ce tutoriel, j'ai traduis en Français pour vous l'expliquer, la plupart des paramètres de cet Add-on gratuit.




Chargement de la conversation