Release notes Atomic Suite v1.3.0

Interface améliorée, fonctionnalité de preview avant la publication d’une molécule, les performances améliorées de Back Office!

[+] Icons for molecules on the 1st step #content management #ux/ui

Désormais vous avez la possibilité de sélectionner les molécules plus facilement grâce aux icônes. La présentation visuelle des molécules permet de trouver rapidement le type de molécule que vous souhaitez ajouter sur votre site. Les molécules les plus utilisées sont affichées en premier.

Pourquoi c’est important ?

L’affichage des icônes permet d’avoir une meilleure expérience utilisateur et trouver plus facilement la molécule nécessaire.

[+] Preview feature #productivity

A 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.

Pourquoi c’est important ?

Cette évolution permet d’éviter des erreurs lors de la création de molécules et sélectionner l’emplacement le plus approprié pour l’affichage dans le Front Office.

[+] "Open in a new tab" option for banners #content management #ux/ui

Afin de ne pas rediriger l’utilisateur vers un autre page, il peut être utile d'ouvrir une page web dans un nouvel onglet.

Désormais vous pouvez configurer une banniere pour ouvrir le lien dans le même onglet ou dans un nouvel onglet :

Pourquoi c’est important ?

Cette nouvelle option permet d’améliorer l’expérience utilisateur en cas d’ajout des liens sur les bannières. L'ouverture de liens dans un nouvel onglet permet aux utilisateurs d'explorer une nouvelle page sans avoir à appuyer sur le bouton de retour pour revenir sur la page initiale.

[+] "Type" parameter for molecule "Tabs" #content management

Désormais vous avez deux options d’affichage des onglets :

horizontal (par défaut)
Vertical (nouvelle option).

Le nouveau type d’affichage (“vertical”) est bien adapté pour afficher entre 2 et 5 onglets en fonction de la taille du titre de chaque onglet.

Si vous avez besoin d’afficher plusieurs onglets il est conseillé d’utiliser l’affichage horizontal afin de laisser visible tous les onglets et éviter de les afficher sur les deux lignes.

Pourquoi c’est important ?

L’ajout de cette option d’affichage pour la molécule “Onglets” offre encore plus de flexibilité. Désormais vous pouvez choisir l’affichage le plus adapté au style et à la structure de votre boutique.

[+] Show the quantity of molecules in each group of hooks #ux/ui

Parfois, il est compliqué de retrouver rapidement les molécules déjà créées. Cette évolution est bénéfique pour l’UX et simplifie la navigation dans le BackOffice.

Pourquoi c’est important ?

Cette évolution mineure améliore l’efficacité de travail avec les molécules.

[+] Visual presentation for Orders pages #ux/ui #content management

Désormais la présentation visuelle est disponible pour les pages Panier, Checkout et la page de confirmation de commande. Maintenant il est possible de visualiser plus simplement les emplacements disponibles pour l’ajout des molécules sur ces pages.

Pourquoi c’est important ?

Les pages Panier, Checkout et la page de confirmation de commande sont les pages clé lors de l’achat des produits. Il est important de pouvoir afficher toutes les informations indispensables sur ces pages et donc, ajouter facilement les molécules dessus. La structure de ces pages n’est pas évidente au premier regard et sa présentation visuelle permet de choisir facilement les hooks indispensables pour l’affichage des molécules.

[+] ID de molécule dans le code en FO #optimization & productivity

Désormais il est possible de voir rapidement l’ID des molécules dans le code html de la page. Cette amélioration, plutôt technique, est utile pour trouver rapidement la molécule ajouté grâce à son ID.

Pourquoi c’est important ?

Si vous avez plusieurs molécules de même type (ex : plusieurs molécules de type “liste de produits”) sur la même page, il est difficile de distinguer rapidement certaines molécules en Front Office. Grâce à “ID” vous pouvez trouver la molécule nécessaire en quelques clics via la console de votre navigateur !

[+] Add "Mobile image" atom to Image & Video #content management

A partir de la version 1.3.0 il est possible d’ajouter une image pour la version mobile du site dans les molécules “Image” & “Vidéo”:

Pourquoi c’est important ?

Ce petit changement permet d’ajouter des images appropriées pour la version mobile de votre site. En plus, le fait d’avoir des images spécifiques pour la version mobile est très bénéfique pour le référencement et la performance du site sur les mobiles.

[+] Display a molecule depending on a certain product feature #content management

Désormais il est possible d’afficher certaines molécules uniquement sur les pages de certains produits avec des caractéristiques spécifiques.

Pourquoi c’est important ?

Cette nouvelle option dans les conditions d’affichage de molécules sur les pages produit permet de gérer les configurations spécifiques à votre site sans aucun développement supplémentaire.

**[*] Optimize the requests generated by Atomic** #performances #optimisations

Plusieurs améliorations techniques ont été effectuées afin d’améliorer les performances des pages Atomic dans le BackOffice. Un refactoring approfondi a été effectué sur les requêtes.

Pourquoi c’est important ?

Ces changements sont très importants pour les performances du BackOffice et permettent de diminuer le temps de chargement des pages.

[+] Check hooks installation #optimization & productivity

Parfois lors de l’installation du thème certains hooks ne sont pas installés correctement. Ce processus est géré par PrestaShop et il est compliqué de corriger ce problème. Cependant afin d’éviter et de corriger ce soucis, nous avons ajouté une vérification d’installation des hooks dans l’onglet “Atomic Suite”-”Settings”-”General”.

Désormais vous pouvez vérifier si tous les hooks nécessaires sont installés correctement en quelques clics et si besoin les installer en cliquant sur le bouton “Installer les hooks requis automatiquement”.

Pourquoi c’est important ?

L’installation manuelle de hooks manquant peut prendre du temps mais la nouvelle fonctionnalité permet de le faire en quelques secondes.

[+] Header : inverser "mon compte" et "panier" #ui/ux

Il existe plusieurs bonnes pratiques UX dans le monde du e-commerce. Normalement l'icône du “panier” s’affiche toujours dans le coin le plus à droite du header. Nous avons inversé les éléments “Mon compte” et “Panier” pour suivre les règles UX adaptées par d’autres sites e-commerce.

Pourquoi c’est important ?

L’affiche de l'icône de panier à droite de l'icône “mon compte” permet d’avoir une interface plus intuitive pour les utilisateurs de la boutique.

[+] Sélection des produits/catégories/marques : ordre d'affichage #ux/ui

Enfin la fonctionnalité de drag’n’drop est disponible pour modifier l’ordre d’affichage des produits/ catégories/ marques et éviter de refaire toutes les configurations de molécule à partir du zéro !

Les éléments sélectionnées manuellement (ex: produits pour la liste de produits) sont affichés dans le Front Office selon l’ordre de leur sélection dans le Back Office. A partir de la version 1.3.0 d’Atomic Suite il est possible de modifier cette ordre facilement à l’aide de drag’n’drop :

Pourquoi c’est important ?

Cette évolution a pour objectif d’améliorer l’expérience utilisateur dans le BackOffice et d’éviter des actions chronophages.

[+] "Title" molecule : without levels #SEO #optimization & productivity

L'option "no level" / "sans niveau" est ajoutée dans la molécule “Titre”. Cette configuration permet d’utiliser les styles de paragraphe par défaut avec la possibilité d'ajouter des styles personnalisés.

Pourquoi c’est important ?

Dans certains cas, il n'est pas nécessaire d’ajouter des niveaux pour les titres (h1/h2). Cette nouvelle option nous permet d’être plus flexible et d’utiliser un style nécessaire pour le design de votre site.

[+] Compatibility with PS 1.7.8 (to be finished in 1.4.0) #optimization #bugfix

Certaines erreurs d’installation d’Atomic Suite avec la nouvelle version de PrestaShop v1.7.8.x ont été corrigées dans cette release.

Pourquoi c’est important ?

Atomic Suite est toujours compatible avec la dernière version de PrestaShop. C’est important d’assurer la compatibilité dès que possible pour pouvoir créer des e-shops sur la base de la plus récente version de PrestaShop.