e-commerce

Introduction #

Voici à quoi ressemble généralement la page principale du e-commerce ioi :

Plusieurs pages composent l’e-commerce #

1. Dans un premier temps, des pages en lien direct avec celui-ci :

• Shop : Ici, vous pourrez voir votre sélection de produits.
• Item : C’est ici que le client pourra afficher les informations détaillées sur un article. Les produits pourront être ajoutés au panier, à condition que l’utilisateur soit connecté.
• Cart : Ici, le client peut visualiser son panier et passer commande. Seuls les utilisateurs connectés peuvent accéder à cette page.

1. Ensuite, plusieurs pages de documents avec des accès directs vers ceux-ci :

• Open orders : Affiche les bons de commande en cours du client
• Closed orders : Affiche les bons de commande fermés du client
• Deliveries : Affiche les livraisons du client
• invoices : Affiche les factures du client

→ Vous pouvez trouver tous les raccourcis associés dans le Workspace :

Comment configurer votre e-commerce (version simplifiée) #

1. Création de la catégorie et de l’article

• Allez dans ioi E-commerce Categorieet créez en une.
• Allez dans ioi Article et créez un article avec ces paramètres :
  • Une catégorie de e-commerce définie
  • Décochez Non disponible à la vente
  • Cochez Public
  • Activez le statut Actif (blanc)

2.Création du catalogue fabricant

• Allez dans ioi Fabricant Catalogue et créez un catalogue fabricant avec ces paramètres :

  • Une catégorie de e-commerce définie
  • Décochez Boutique non disponible
  • Cochez Activé

• Allez dans ioi E-Commerce Paramètres et cliquez sur Mettre à jour la boutique: vous avez maintenant un e-commerce de base.

Création d’une catégorie d’e-commerce #

Tout d’abord, vous devez créer (ou importer) les catégories que vous souhaitez afficher sur vos futurs sites web dans ioi E-commerce Catégorie.

→ Ces catégories seront celles proposées à vos clients :

Exemples de Treeview :

Il est possible de personnaliser les catégories de manière beaucoup plus approfondie.\nPour plus d’informations sur la personnalisation des catégories ou leurs différents champs, consultez cette section {lien à venir}.

La prochaine étape consistera à importer les informations sur les articles que vous souhaitez vendre sur votre site.

Création des Article et Catalogue Fabricant #

Les articles que vous aurez en stock (ioi Article) et les articles que vous proposerez à partir d’un catalogue de fabricant (ioi Catalogue Fabricant) seront affichés dans votre e-commerce.

Vous pouvez les créer manuellement, mais je vous conseille d’utiliser l'outil intégré d'importation de données. Vous pourrez les importer en masse à partir d’un fichier Excel ou CSV.

Pour utiliser cet outil, commencez par mapper les colonnes de votre fichier Excel avec les champs disponibles du catalogue du fabricant et sélectionnez les différentes options que vous souhaitez utiliser.

Ensuite, cliquez sur ce bouton pour lancer l’importation :

Pour les Items et Catalogues, le champ relatif aux tags est simplement appelé tags et apparaît sous la forme « Formatted Tags » dans le document. Pour connaître le format correct, référez-vous à la section suivante.

Malheureusement, dans la plupart des cas, les catégories et tags utilisés par le fabricant ne correspondront pas à ceux que vous utilisez dans vos propres bases de données.

\n→ Pour remédier à cela, vous pouvez utiliser la Conversion des Tags ioi Shop [#Importation et création de tags] et la Conversion des Catégories ioi Shop [#Conversion des catégories ioi Shop] pour convertir automatiquement toute entrée dans le format adéquat.

Mettre à jour l’e-commerce #

→ Allez dans ioi E-Commerce Paramètres et cliquez sur Mettre à jour l'e-commerce.

Lorsque qu’un client charge la page web de l’e-commerce, seuls les prix et les traductions sont recalculés. Le prix peut dépendre des avantages et des réductions liés au client, et les traductions dépendent évidemment de la langue sélectionnée.\nLes informations spécifiques à chaque article seront également récupérées en temps réel, donc aucun calcul n’est nécessaire pour cela.

Les catégories, tags et références des articles affichés sont pré-calculés, de sorte que sans aucun calcul, votre boutique restera vide.

→ Pour lancer le calcul, vous pouvez soit appuyer sur le bouton Mettre à jour l'e-Commerce dans ioi E-Commerce Paramètres pour calculer toute la boutique, soit appuyer sur Précalculer toute la catégorie dans une catégorie spécifique ioi E-commerce Catégorie pour recalculer une catégorie particulière, typiquement lorsque vous avez ajouté ou supprimé des articles dans cette catégorie.

Une donnée supplémentaire pré-calculée est la liste de recherche dans chaque langue. Elle est calculée chaque fois que la catégorie principale ioi E-commerce Catégorie (Toutes les catégories) est calculée, quel que soit le bouton utilisé.

Désactivation de l’e-commerce #

En appuyant sur le bouton de désactivation dans ioi E-Commerce Paramètres, chaque page de l’e-commerce est redirigée vers l’application elle-même (/login), empêchant toute utilisation ou visibilité de la boutique.

Personnalisation de l’e-commerce (HTML, CSS et JS) #

Chaque page web de l’e-commerce peut être trouvée dans la liste des pages web et leurs HTML, JS et CSS sont disponibles pour vous permettre de personnaliser entièrement la boutique en ligne. Vous pouvez les trouver dans l’espace de travail ou dans la section des pages web du module du site web.

Cependant, pour éviter que vos modifications ne soient écrasées lors des mises à jour, cochez d’abord l’option arrêter la synchronisation dans ioi E-Commerce Paramètres. Vous ne recevrez plus de nouvelles fonctionnalités relatives à ces pages de notre part, mais vos propres modifications resteront intactes.

Traductions #

Chaque mot dans l’e-commerce peut être traduit.

La langue cible sera la langue de l’utilisateur connecté et celle sélectionnée pour l’utilisateur invité.

Ils utiliseront la liste de traductions intégrée à la base de données et à l’application elle-même pour tous les mots divers, traduisant ainsi la plupart des boutons de manière adéquate.

Pour les articles, les catalogues ou les descriptions de catégories, ils utiliseront la traduction fournie pour cet élément spécifique si elle est disponible. Sinon, ils reviendront à la description par défaut en anglais si celle-ci manque dans la langue sélectionnée.

Mockup Img #

Si vous avez publié un article sans image, une image fictive sera utilisée. Cette image fictive sera, si possible, le logo de votre entreprise et peut provenir de plusieurs sources. Si aucune image n’est définie dans le champ testé, le système cherchera une image dans les champs suivants, dans cet ordre :

• ioi Société (principal) / petit logo
• ioi Société (principal) / grand logo
• Navbar Settings / Logo de l’application
• Website Settings / Image de marque
• L’image par défaut pour ioi Catalogue Fabricant (comme vous pouvez le voir dans sa liste)

Public ID #

L’ID de l’article affiché à vos clients est celui défini dans le champ Public ID.\nS’il est laissé vide, il sera simplement rempli avec l’ID principal. Cela vous permet de choisir adéquatement ce que vous voulez montrer à vos clients.

Exemple : Pour supprimer une information incluse dans l’ID principal de la vue du client.

→ De plus, l’ID public est également la référence utilisée pour trouver des articles similaires ayant uniquement quelques caractéristiques différentes, comme la taille ou la couleur.

Articles avec options (taille, couleur) #

Vous pouvez définir des articles ou des catalogues avec des options. Il suffit de créer ou d’importer un article pour chaque combinaison disponible que vous pouvez proposer et d’utiliser les tags pour spécifier leurs options.

Pour que ces articles ou catalogues soient liés ensembles ils doivent partager un même Modèle :

Un Modèle étant un ioi Item avec le statut Template:\n

→ En cliquant sur l’une des options, la page se mettra à jour directement avec les données de l’article correspondant à cette option spécifique.

Tags #

Les tags sont utilisés pour définir votre produit, le rendre plus facile à trouver pour les clients et différencier les variations d’un même produit. Ils sont constitués d’un sujet de tag et d’une valeur de tag.

Exemple : Couleur et Bleu. Pour les articles et les catalogues, le champ associé est simplement tags et apparaît sous la forme de Tags formatés dans le document. Ce champ est le seul qui compte.

La table que l’on peut trouver dans ioi Article est uniquement utilisée pour aider à ajouter manuellement des tags à un article. Si elle est laissée vide, cela n’aura aucun effet. Si elle est modifiée, le changement sera transféré au champ Tags formatés.

Exemple de création de Tag #

Exemple de tags sur la page d’un article #

Également appelés articles avec options.

Importation et création de tags #

Lors de l’importation de catalogues, l’option nouvelle référence désactivée dans ioi Fabricant doit être cochée pour permettre l’importation des tags.

Les tags doivent être importés au format sujet=valeur, chaque tag successif étant séparé par un CAR(10), le saut de ligne Excel, ou tout autre équivalent.

Par défaut, les tags manquants sont automatiquement créés.

Conversion des Tags ioi Shop #

Ces conversions permettront de convertir automatiquement les tags.

Exemple :

Vous pouvez voir comment un tag avec la valeur BLEU NUIT/JAUNE FLUO et le sujet Couleur verra sa valeur convertie en MidnightBlue-Yellow.

Pour le tag de couleur, cela est particulièrement intéressant car en utilisant le format de couleur CSS, comme MidnightBlue ou Yellow, ces tags spécifiques seront affichés sous forme de couleur plutôt que de texte. En séparant les deux couleurs par un tiret, un tag bicolore sera affiché.

Le champ Sujet de tag permet de créer automatiquement le tag cible s’il manque lorsque vous créez la conversion de tag.

Le champ Fabricant permet de restreindre cette conversion de tag à un fabricant spécifique.

Personnalisation des Catégories #

Ici seront abordés les différents champs et options disponibles pour une Catégorie e-shop.

Nouvelle catégorie #

• L’identification a pour seul but de définir l’ID de votre catégorie pour votre usage interne. Il ne sera pas affiché à vos clients (sauf parfois dans l’URL). N’hésitez pas à utiliser ce que vous trouvez le plus pertinent.

• L’option is_group définit si une catégorie est un groupe avec une ou plusieurs sous-catégories ou si c’est une “end catégorie”.

• Le champ catégorie parente permet de créer l’arborescence en définissant quelle catégorie est l’enfant de quelle catégorie parente.

• L’image affichée est l’endroit où vous pouvez choisir l’image pour cette catégorie.

• La description étendue est actuellement réservée à un usage interne et ne sera pas affichée à vos clients.

• Le bouton de sélection d’image affichée vous permettra de sélectionner une image pour votre catégorie. Cela sera utile dans certains cas.

• Les options activé et publié permettent, si elles sont désactivées, de respectivement empêcher un article de cibler cette catégorie comme étant la sienne et de retirer cette catégorie et son contenu de la vue du client.

L’une des dernières vérifications, visible uniquement si l’option is_group est cochée, est la case Ne pas afficher les articles enfants.

→ Cela permet (si autorisé dans ioi E-Commerce Paramètres) d’afficher spécifiquement les articles de toutes les sous-catégories de cette catégorie, plutôt que de simplement afficher les sous-catégories.

Pour les “end catégories” (non groupées), une case et un champ supplémentaires sont disponibles. La catégorie de tag et son tag associé.

→ Les catégories de tag sont un type spécial de catégories transversales qui, comme les catégories de groupe, ne peuvent pas être ciblées par des articles.\nElles afficheront tous les articles ayant les tags associés parmi toutes les catégories ayant le même parent.

Exemple : Un VTT avec la catégorie boutique VTT et le tag Feature=High Visibility sera trouvé à la fois dans les catégories VTT et High Visibility. Un autre vélo d’une autre catégorie et avec le même tag sera également affiché dans la catégorie High Visibility.

• L’onglet Traduction contient les traductions dans les quatre langues supplémentaires que vous avez sélectionnées.

• L’onglet Préchargé est uniquement destiné à l’information et au débogage. Il contient les données JSON qui définissent ce qui sera affiché aux utilisateurs recherchant le contenu de cette catégorie spécifique.\nCes données JSON sont générées automatiquement lorsque vous cliquez sur le bouton Précalculer toute la catégorie.

Conversion des catégories ioi Shop #

Ces conversions permettront de convertir automatiquement les catégories correspondant à la source en cible pour vous aider lors de l’importation.

Le champ Fabricant permet de restreindre la conversion à un fabricant spécifique.

→ De plus, vous pouvez choisir des tags spécifiques qui seront automatiquement ajoutés à tout article ou catalogue subissant cette conversion spécifique. Si plusieurs tags doivent être ajoutés de cette manière, il suffit de les séparer par un saut de ligne.

Personnalisation de la page d’article #

Vous pouvez configurer des informations supplémentaires à afficher sur la page de l’article juste au-dessus des informations du mémo.

Dans ioi E-Commerce Paramètres, onglet Item Page, ajoutez les noms de champs (personnalisés ou standard) que vous souhaitez afficher. Vous pouvez également définir le titre et une valeur par défaut éventuelle si le champ est vide.

Personnalisation de la page de panier #

Vous pouvez configurer des informations supplémentaires que vous souhaitez obtenir lorsque le client passera commande.

Dans ioi E-Commerce Paramètres, onglet CartPage, ajoutez les noms de champs (personnalisés ou standard) que vous souhaitez récupérer.\n→ Ces noms de champs doivent appartenir aux types de documents personnalisés du type de document sélectionné. Vous pouvez également définir le titre, la valeur par défaut, un espace réservé et les rendre cachés (combinés avec la valeur par défaut, cela permet d’envoyer toujours une valeur spécifique).

La valeur fournie par le client sera automatiquement placée dans le champ ciblé du document lié au client et à la commande.

Personnalisation des tags #

Il vous arrivera parfois de vouloir changer l’ordre des tags et leur apparence pour répondre à vos besoins.

Cela est disponible dans le document ioi Tag Sujets.

À cet endroit, vous pouvez changer l’ordre des sujets dans l’arborescence (page de la boutique) ou dans les options (page de l’article). Les sujets sont ordonnés du plus petit au plus grand ordre, le plus petit étant en haut.\nL’option d’affichage permet de choisir comment vous souhaitez que ces tags soient affichés (pour l’instant uniquement disponible sur la page de l’article).

Vous pouvez également choisir entre liste standard, liste déroulante, carrés ou carrés colorés (dans ce cas, vos valeurs doivent être des couleurs CSS. Exemple : LightGreen).