Création d'une nouvelle molécule

Il existe deux façons de créer une nouvelle molécule :

• Vous voulez ajouter un contenu sur votre site mais vous n’avez pas encore choisi sur quel type de pages vous souhaitez l’afficher OU vous voulez ajouter une molécules sur plusieurs types de pages.

La meilleure solution est de passer par le menu “Atomic suite by 202” > “Animation de contenu” > “Créer une nouvelle molécule”. Cette option vous permet de créer une molécule en 3 étapes.

• Vous souhaitez ajouter une nouvelle molécule sur votre site et vous imaginez déjà son emplacement précis dans le Front Office.

Cette option est idéale si vous avez déjà choisi où est-ce que vous souhaitez afficher votre nouvelle molécule.

Vous pouvez accéder à une des pages du menu principal :

• Structure des pages

• Accueil

• Catalogue - intègre les pages Produits, Catégories, Marques

• Commandes - intègre les pages Panier, Paiement, Confirmation de commande.

Lorsque vous êtes sur une de ces pages, vous pouvez voir une représentation visuelle des principaux éléments de cette page.

Par exemple : page “Produits”

Ce visuel est interactif. En passant le curseur sur chaque élément, vous pouvez voir le nom du hook correspondant. Une fois que vous avez cliqué sur l'élément sélectionné, le hook correspondant s'ouvre dans la colonne de droite. Si certaines molécules ont déjà été ajoutées sur le hook sélectionné, vous les verrez dans la liste.

Vous pouvez ajouter une nouvelle molécule sur le hook sélectionné en cliquant sur le bouton "Créer une nouvelle molécule".

à partir de la version 1.3 de Atomic, vous pouvez voir le nombre de molécules déjà liées a chaque groupe de hook entre parenthèses.

Exemple :

Vous souhaitez ajouter une nouvelle molécule au-dessous de l’image principale sur les fiches produit.

Le contenu du hook correspondant sera ouvert au clic sur l’élément correspondant sur le visuel à gauche.

Il est possible de greffer une molécule sur n’importe quel hook dans la liste au clic sur le bouton “Créer une nouvelle molécule”.

En passant par cette interface vous avez une vue complète des hooks disponibles pour chaque type de page dans le Front Office. Cela vous permet de voir rapidement de quel hook vous avez besoin et de le présélectionner avant de procéder à la création d’une molécule.

1. Créer une molécule en 3 étapes

La création d’une molécule passe toujours par les 3 étapes suivantes

> Etape 1 : Choix du type de la molécule

Découvrez toutes les molécules disponibles.

> Etape 2 : Configuration de la molécule

> Etape 3 : Choix du mode et des options d’affichage

• Activez l’affichage via un hook (ou via widget)

Vous pouvez choisir d'afficher votre molécule dans le Front Office sur n'importe quelle page de votre boutique en utilisant les hooks.

L'affichage via les hooks natifs de PrestaShop vous permet d'ajouter instantanément de nouvelles molécules sur votre boutique. Vous n'avez pas besoin de modifier le code du site, comme lorsque vous utilisez des widgets. Afin d'avoir un aperçu rapide de la position des hooks sur les différentes pages, vous pouvez vous rendre sur la page correspondante via le menu d'Atomic Suite et regarder l'image ou cliquer sur le bouton "Aperçu live de hooks".

Vous pouvez choisir d'afficher votre molécule via un widget si aucun des hooks ne vous convient. Il sera possible de l'ajouter à n'importe quel endroit de votre site web, mais il sera nécessaire d'intégrer le widget par le développeur.

Si vous souhaitez utiliser un widget au lieu de hooks pour afficher votre molécule dans le Front Office, veuillez choisir "Non" et cliquer sur le bouton "Continuer". Le code du widget sera affiché sur la page suivante.

• Sélectionnez un des emplacements dans le Front Office et les hooks correspondants.

Vous pouvez choisir un type de page où vous voulez afficher la molécule. Les principaux types de pages sont disponibles dans la liste : Accueil, Produits, Catégories, Marques.

À partir de la version 1.3.0 d’Atomic Suite vous pouvez prévisualiser la molécule dans le Front Office avant de la publier sur votre site. L’option “Preview” est disponible à la 3ème étape de création de la molécule et permet d’ouvrir rapidement la page en question avec la molécule affichée sur le hook sélectionné. Cette fonctionnalité n’est pas disponible pour la page de checkout et de confirmation de commande.

Si vous souhaitez l'afficher sur chaque page de votre boutique, veuillez utiliser "Structure des pages".

• Spécifiez un affichage conditionnel si nécessaire.

Les conditions d'affichage des molécules sont différentes selon le type d'emplacement. En activant ce paramètre, vous pouvez limiter l'affichage de la molécule dans le temps ou ajouter certaines restrictions spécifiques (par exemple : exclure certaines pages, etc.).

Il est également possible de configurer l'affichage sur plusieurs types de pages.

Une fois que toutes les configurations sont ajoutées vous serez redirigé vers une page récapitulative avec la liste d’actions possibles :

• Modification de la molécule

• Accès à l’emplacement sélectionné pour modifier la position de la molécule

• Accès à toutes les molécules

• Accès rapide à la création des éléments-enfants (optionnel, ex : ajout des slides dans le carrousel)

• Code du widget à copier (si l’affichage via un hook est désactivé)