Release notes Atomic Suite v1.3.0
Last updated
Was this helpful?
Last updated
Was this helpful?
Interface améliorée, fonctionnalité de preview avant la publication d’une molécule, les performances améliorées de Back Office!
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.
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.
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.
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.
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.
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.
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 !
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.
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.
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.
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.
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.
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.
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.
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.
[+] Add date of caching to header
[+] Cache for specific pages
[*] User account : different size of buttons
[*] reCaptcha : Frontend improvements
[*] Issue when adding .gif image
[*] Scroll after closing image in fancybox
[*] Extra characters on the page "Display in Front Office" after creating a new molecule
[*] Error 500 in BO on Content animation > Orders > "Checkout" tab
[*] Mobile image not displayed on mobile devices
[*] Bad displaying Accordeon molecule on FO with Safari (desktop\mobile)
[*] Modal molecule H5->div
[*] Issue with video molecule
[*] Small bug in tooltip in "Video" molecule
[*] Issue with video template + Small issue with template improvements
[*] Issue with filters (GT and other env)
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.