Release notes Atomic Suite v1.2.0
Last updated
Last updated
Des nouvelles molécules, améliorations des performances, intégration de reCaptcha et plusieurs d’autres fonctionnalités disponibles dans la nouvelle version d’Atomic !
Améliorations et changements clé :
Désormais vous avez la possibilité d’ajouter une vidéo Youtube ou Vimeo directement sur votre site via une molécule dédiée - “Vidéo”. Cette molécule permet d’ajouter une URL youtube ou vimeo, ainsi que d'activer la lecture automatique, changer la largeur ou ajouter une image “placeholder”. Elle est également optimisée au niveau des performances.
Pourquoi c’est important ?
La vidéo est un des types de contenu qu’on ajoute de plus en plus souvent sur les sites. Cette molécule est indispensable pour gérer les pages en toute autonomie.
Besoin d’ajouter plusieurs détails supplémentaires sur les fiches produit ou d'expliquer les détails du fonctionnement des cartes cadeaux? Désormais vous pouvez ajouter des onglets sur votre boutique. Avec la molécule “Onglets” vous pouvez dispatcher l’information dans plusieurs onglets afin de rendre la navigation sur votre site plus fluide.
La configuration de cette molécule est très simple. Il suffit de choisir un bon emplacement et de créer la molécule principale. Ensuite, vous pouvez ajouter toutes les informations nécessaires : vous pouvez ajouter une description simple ou vous pouvez ajouter des molécules (ex: image, liste de produits) à l’intérieur de chaque onglet.
Pourquoi c’est important ?
Les onglets divisent le contenu en sections significatives qui occupent moins d'espace de l'écran. À cet égard, les utilisateurs peuvent facilement accéder au contenu qu'ils sont intéressés à (plutôt que d'avoir tout le contenu dans les paragraphes).
Les onglets sont visuellement agréables. Mis en œuvre correctement, les onglets peuvent améliorer l'aspect visuel d'un site web.
Désormais vous pouvez utiliser la molécule “Accordéon” pour ajouter rapidement de nouveaux contenus sur votre site. Cette molécule est idéale pour créer la FAQ. Pareil que les onglets, vous pouvez ajouter une description simple ou des molécules à l’intérieur de chaque élément d’accordéon.
Pourquoi c’est important ?
La molécule accordéon vous permet de ne pas faire des développements en plus et avoir la main sur tout le contenu de votre site.
Plusieurs améliorations ont été effectuées au niveau des performances.
Les erreurs suivantes ont été corrigées :
Mobile : Éliminez les ressources qui bloquent le rendu
Une des raisons de cette erreur est liés aux icônes qui mettent du temps à charger. Pour améliorer ce point nous avons intégré les material icônes comme package dans Atomic.
Mobile : Dimensionnez correctement les images
Les images sur la Home page de la démo ont été redimensionnées correctement. A partir de la v1.3.0 on aura un outil qui permettra de changer les dimensions des images automatiquement via le BackOffice.
Mobile : Les éléments d'image ne possèdent pas de width ni de height explicites
Désormais la hauteur et la largeur d’une image sont spécifiées ce qui évite des décalages de la mise en page lors du chargement.
Accéssibilité : Les couleurs d'arrière-plan et de premier plan ne sont pas suffisamment contrastées
Il est très important de respecter les bons ratios de contraste dès le début de la création du site (phase UI).
Afin de rendre le contenu accessible à tous les utilisateurs, il importe de prendre en considération les règles d’accessibilité liées au contraste :
texte de 18 pt, ou 14 pt en gras -> rapport de contraste de 3:1.
tout autre texte -> rapport de contraste de 4,5:1.
Plus d’information : https://web.dev/color-contrast/?utm_source=lighthouse&utm_medium=devtools
Outils de vérification : https://app.contrast-finder.org/
Accessibilité : Les éléments d'en-tête ne sont pas classés séquentiellement par ordre décroissant
Il est important de travailler ce point dès la création du site pour éviter d’avoir la structure incorrecte des éléments d'en-tête. Une correction a été effectuée au niveau du template d’Atomic, ce qui permettra d'éviter des erreurs dans le future dans les templates des sites créés avec Atomic.
Bonnes pratiques : La page utilise des bibliothèques JavaScript frontales présentant des failles de sécurité connues 3 failles détectées
La version 3.6 de jQuery a été ajoutée dans Atomic (v3.4-> v3.6). Il reste encore un problème au niveau de la version de jQuery-UI utilisée par PrestaShop qui n’est pas à jour.
Bonnes pratiques : Les erreurs de navigateur ont été enregistrées dans la console
Une erreur du chargement du logo a été corrigée sur la démo d’Atomic.
Mobile : Supprimez les ressources JavaScript inutilisées -0,6s
Malheureusement, il est impossible de corriger ce problème à 100% car le fichier principal javascript est requis pour le bon fonctionnement du site. Cependant, nous avons activé la fonctionnalité de la minification html par défaut à l'installation d’Atomic. L’activation de cette option est nécessaire pour améliorer les performances.
Autres améliorations : display des images & icons
“Preconnect“ est désormais utilisé pour les polices avec des icônes (utilisé par défaut pour material icons).
Pourquoi c’est important ?
La performance web est le facteur clé pour l’expérience utilisateur ainsi que pour le référencement naturel du site. Dans les cadres de cette version plusieurs améliorations ont été apportées à la page d’accueil du thème Atomic.
Voici les résultats du rapport Lighthouse sur la page d'accueil de la démo Atomic:
Version Mobile
Version Desktop
Nous avons intégré les configurations de reCaptcha v3 afin de sécuriser tous les formulaires sur le site sans obliger les utilisateurs à faire trop d’actions. Plus aucun test ne sera soumis aux internautes pendant leur parcours sur votre site web. Pour configurer la reCaptcha sur votre site, il suffit d’ajouter les clés et de sélectionner les pages concernées.
reCaptcha sera activée uniquement lorsque l’utilisateur clique sur un champ d’un formulaire. Cela évite d’afficher le badge tout le temps.
Pourquoi c’est important ?
L’utilisation de captcha est indispensable pour la sécurité des formulaires sur votre site. L’activation de captcha au clique permet d’éviter son affichage permanent sur le site et l’afficher seulement au bon moment. La version 3 de reCaptcha est beaucoup plus moderne : en cas d’échec de l’internaute, reCAPTCHA v1 ou v2 pouvait être un frein important à la conversion. reCaptcha v3 permet d’éviter des tests chronophages et de simplifier le remplissage des formulaires par les internautes.
Lazy Load est activé pour toutes les images ajoutées dans Atomic lors de création de nouvelles molécules. Cela permet de charger plus rapidement les pages web, même sur les appareils mobiles.
Pourquoi c’est important ?
Lazy Load bloque les téléchargements d'images en dehors de la vue d’utilisateur. Cela signifie que les images ne sont téléchargées que lorsqu'elles deviendraient visibles pour l'utilisateur. Par conséquent, les pages se chargent très rapidement avec Lazy Load. Cette configuration reste option car il ne faut pas activer le lazy loading si l’image est affichée en haut de la page et visible directement après l’ouverture (ex: image principale sur la page d’accueil).
Pourquoi c’est important ?
Parfois, il peut être nécessaire de modifier les paramètres de cache standard en fonction des particularités du site.
Certains hooks standards n’existaient pas dans le thème Atomic (ex : displayWrapperTop). Tous les hooks standards ont été ajoutés sur la page Panier.
Pourquoi c’est important ?
Dans les prochaines versions d’Atomic il y aura des pages dédiées au Panier et Checkout. Il sera possible de visualiser plus simplement les emplacements disponbibles pour l’ajout des molécules sur ces pages. Pour avoir plusieurs options d’affichage il est nécessaire d’avoir le maximum de hooks ajoutés dans le thème.
L’atom “icon” a été dans la molécule “Lien”.
Pourquoi c’est important ?
Les icônes rendent la navigation plus fluide. La possibilité d’ajouter une icônes existait auparavant pour la molécule “Titre”, désormais cette option est ajoutée également pour les liens.
A partir de la version 1.2.0 le menu Atomic est déplacé juste au-dessous du menu “Sell” :
Pourquoi c’est important ?
Ce petit changement permet d’avoir un accès plus rapide à l’animation du contenu sur votre site.
Pourquoi c’est important ?
Le plus souvent, les molécules sont affichées pour tous les clients à la fois. La gestion des groupes au niveau de chaque molécule rend l’interface trop complexe et ajoute des paramètres qui ne sont jamais utilisés. Pour l’éviter, l’option d'activation des groupes a été ajoutée.
[*] Templates improvements
[*] Several ISSUEs with Atomic in IE 11 in the Front Office
[*] Issue with CSS classes for titles after update
[*] Issue with svg and molecule duplication
[*] Product list molecule with new products : incorrect positions
[*] Change domain of button's text input file translation (move all custom translations)
[*] Classlib Multishop issue
[*] Error when updating image in slider
[*] Hide "Translations" tab
[*] Incorrect display of errors if adding as child element
[*] Issue with cache after the import
[*] Modal shopping cart isn't scrollable on mobile
[*] Problem my account RGPD block with cache extension activated
[*] Fancybox : uniform behavior multiple & single product
[*] Version de Node, v.10 > v.12
[*] Replace "Prototheme" by "Atomic Suite" in the slider
[*] Fancybox: duplication of closing the image preview when using the "magnifying glass" button
[*] Fancybox: if the product has one image, it does not open for preview
[*] Error "SmartyException" when opening some product on FO
[*] Fix translation : "bannière"
[*] Problem with rendering outlined icon in Chrome on Windows
[*] Design system : delete useless margin
[*] To many call to database when clearing cache
[*] Manual selection of products : UX improvement
[*] Error "SmartyException" on design-system page
[*] Molecules' positions updates optimizations
[*] Language selector improvements
[*] Molecules not displayed in container
[*] Allow adding Row molecule in Column
[*] Cache page not working
[*] Error while installing Atomic on bigcatalog environment 
[*] Issue with switching between combinations & displaying images
[*] Problem with Fancybox & material icons
[*] Cache duration in minutes instead of seconds
v1.1.2 vs v1.2.0
v1.1.2 vs v1.2.0
Afin de simplifier l’interface de configuration des molécules, nous avons ajouté une configuration globale “Manage groups” dans l’onglet “Atomic Suite”-”Settings”-”General”. Désormais il n’est plus nécessaire de sélectionner des groupes pour chaque molécule si vous en avez pas besoin. Vous pouvez toutefois activer la gestion des groupes à tout moment pour gérer les molécules pour les différents groupes de clients.