E-commerce avec Seblod

Salut à tous!

La grande question

Une autre question récurrente lors des formations SEBLOD est "oui mais avec l'e-commerce on fait comment?". Sachez donc que Seblod n'est pas juste compatible avec l'e-commerce mais surtout qu'il permet des expériences e-commerce originales et personnalisées qu'aucune autre solution de pure boutique en ligne ne peut fournir.
 Le but de ce billet est de présenter une solution simple pour une solution d'e-commerce 100% native Joomla et seblod.
Cette solution utilise le composant J2STORE pour la gestion du panier, du tunnel de paiement, des options de livraison, de la facturation et de toutes les fonctions inhérentes à une solution d'e-commerce.

Avec cette solution n'importe quel contenu Seblod (qui n'est qu'un article Joomla étendu) peut devenir un produit d'e-commerce.

La nouvelle solution avec J2store 3.x et SEBLOD 3.x

 Avec la dernière version de J2store (3.x) existe un plugin de champ SEBLOD (gratuit) pour que le montage d'une solution e-commerce avec SEBLOD soit vraiment très simple et très rapide. En effet il suffit maintenant d'installer le champ (téléchargeable sur le site de J2store) et de suivre ce tutoriel pour l'intégration ecommerce avec SEBLOD. L'idée est qu'il faut juste créer un champ de type j2store et placer ce champ dans la vue formulaire pour saisir les infos e-commerce relatives au produit mais aussi dans la vue contenu (ou dans une vue liste) pour afficher le bouton 'ajouter au panier'. C'est aussi simple que cela!

Il faut au préalable configurer Jstore (menu componsants/ j2store/ options) de telle façon qu'il interprete la balise n'importe où dans le vue contenu
Ecommerce j2store config

 

Il faut ensuite ajouter un champ de type J2store dans la vue formulaire du type de contenu (ici un 'product'):

j2store field plugin

Pour obtenir ce type d'interface dans le gestionnaire d'articles du backoffice:

j2store seblod article form

 Il faut ensuite placer ce même champ J2store dans la vue contenu du produit:

seblod j2store content

Pour obtenir le résultat suivant dans le vue détail du produit sur le site:

Ecommerce front

Et ensuite ajouter, par exemple, ce même champ dans les vues listes (un catalogue produit par exemple) pour que le bouton 'ajouter au panier' apparaisse dans la liste:

j2store list

La solution sous Joomla 2.5 et J2store 2.x

 Nous listons ici l'ancienne solution que nous avions publié en 2014 qui déjà permettait une intégration ecommerce dans SEBLOD mais comme on peut le voir n'était pas aussi rapide à mettre en oeuvre:

Création des champs nécessaires 

Avec les template d'édition d'articles standards, J2store propose un volet sur la droite pour remplir les champs j2store associés à l'article.
Ecommerce j2store

Le but est donc de recréer ces champs dans le template SEBLOD. Au minimum nous avons besoin de 2 champs

Ecommerce fields

Ces deux champs doivent absolument posséder ces stockages précis:

Ecommerce itemprice field

Ecommerce product enabled field

Le premier champ contient le prix de l'article, le second est un booléen pour indiquer si oui ou non un bouton 'ajouter au panier' sera ajouté dans les vues contenu de l'article.

Ce qui donne dans l'édition du contenu:
Ecommerce admin
On peut procéder de la même manière sur les autres champs J2store qui sont stockés en JSON dans le champ attribs de l'article.

Affichage du bouton 'ajouter au panier

Pour que ce bouton apparaisse il suffit qu'une balise J2store soit présente dans la vue contenu. Cette balise est de la forme
{j2storecart ID}
Avec ID valant l'ID du contenu (= article joomla).


Il faut ensuite ajouter un champ 'ajout_panier' qui va contenir cette balise.
On ajoute donc les champs suivants dans cette vue contenu:

Ecommerce content view

Le champ code contient les lignes suivantes:

if ($fields['product_enabled']->value)
$fields['ajout_panier']->value="{j2storecart ".$fields['art_id']->value."}";

Le resultat en front est un contenu avec le champ 'ajout panier' qui permet l'achat de ce contenu avec la gestion du panier et du tunnel de paiement:


Ce qui donne en vue contenu:
Ecommerce front



 Affichage dans une liste Seblod

On peut tout autant afficher le bouton 'ajout au panier' dans une liste Seblod:
Ecommerce liste


Pour cela il faut configurer la liste comme suit:
Ecommerce liste produits

 

Commentaires 7

excellent article .
j'aime beaucoup tous ces informations pour l'e-commerce .
merci pour le partage .

excellent article . j'aime beaucoup tous ces informations pour l'e-commerce . merci pour le partage .

Guest - Ramesh

le vendredi 5 août 2016 06:38

Thank you. Great tutorial

Thank you. Great tutorial

Guest - Flo

le lundi 3 avril 2017 13:50

Bonjour,
Il y a t'il des modifications à faire avec les versions actuelles de Joomla (3.5.6), Seblod (3.10) et J2Store (3.2.21 Core)?
Sur mon site de test, les tags ne sont pas interprétés (Piece jointe).
J'ai bien configuré l'option "Add to cart placement"
Merci.
https://framapic.org/zB7KBmi48Uc7/20wwnHY191Ck.jpg

Bonjour, Il y a t'il des modifications à faire avec les versions actuelles de Joomla (3.5.6), Seblod (3.10) et J2Store (3.2.21 Core)? Sur mon site de test, les tags ne sont pas interprétés (Piece jointe). J'ai bien configuré l'option "Add to cart placement" Merci. [img]https://framapic.org/zB7KBmi48Uc7/20wwnHY191Ck.jpg[/img]
Already Registered? Login Here
Guest
mercredi 22 janvier 2020

Image Captcha