Thème "classic-rocket"

PrestaShop Classic Rocket

Principales caractéristiques :

• Dernière version de Twitter Bootstrap
• Images de chargement paresseux
• Offcanvas pour le menu principal et le menu filtre
• Moins de css et moins de js
• L'accessibilité des formulaires et une meilleure validation
• SEO : Hn, rel prev/next pour la pagination...
• Performance des polices
• Responsive amélioré
• Nous utilisons Dareboost pour tester et améliorer notre travail.

Main differences with Classic Theme

Performance

Avec le même serveur (gzip, paramètres de performance de PrestaShop correctement ajustés)

• CSS : de 80 Ko (avec thème classique) à 33 Ko
• JS : 155 Ko (avec thème classique) à 86 Ko

Vous pouvez également consulter le rapport de comparaison des performances et de la qualité du web sur Dareboost

Twitter Bootstrap 4.3.x

• Presque tous les fichiers tpl sont édités pour utiliser de nouvelles classes BS (ex : col-xs-12 => col-12)
• Pour la rétrocompatibilité et les troisièmes modules, nous conservons quelques anciennes classes importantes dans bs_alpha.scss
• Les variables Scss sont divisées en 2 fichiers : 1 fichier pour remplacer les variables Twitter Bootstrap par défaut et 1 fichier pour les variables scss personnalisées pour le thème Classic Rocket (ex : $regular-price-font-size)
• Seuls les plugins BS utiles sont ajoutés individuellement dans _dev/theme.js (le carrousel et le scrollspy ne sont pas chargés).

Nouveaux dossiers Js

• Lazysizes est un lazyloader d'images rapide et auto-initialisable pour le référencement
• Slick Carousel est utilisé pour le curseur de la page d'accueil et les images des produits dans la page de détail du produit ; il est plus léger que le carrousel de la chouette et offre de nombreuses fonctionnalités intéressantes (toucher, options réactives, paramètres des attributs de données)
• HoverIntent est un plug-in qui tente de déterminer l'intention de l'utilisateur (pour le menu principal)

Fichier Js supprimé (dans le dossier _dev)

• tether.js (nous utilisons popper avec la dernière version de BS)
• velocity.js (nous utilisons slick)
• bootstrap-filestyle.min.js (BS fournit une entrée de fichier personnalisée)
• drop-down.js (fait avec le menu déroulant BS)
• product-miniature.js (fait avec css)
• product-select.js (nous utilisons slick)
• jquery.scrollbox.min.js

Nouveau(x) module(s)

• ps_searchbarjqauto (pour utilisation de jQuery autoComplete v1.0.7)

Nouveaux blocs smarty

• layoutWrapperClass
• contentWrapperClass
• pageHeaderClass
• pageContentClass
• pageFooterClass

Nouvelles tailles d'images

Nous utilisons srcset dans product-cover-thumbnails.tpl pour les images responsive.

pdt_180:

• width: 180
• height: 180
• scope: [products]

pdt_300:

• width: 300
• height: 300
• scope: [products]

pdt_360:

• width: 360
• height: 360
• scope: [products]

pdt_540:

• width: 540
• height: 540
• scope: [products]

SEO

• Meilleure pagination avec le lien rel next/prev (dans templates/_partials/pagination-seo.tpl)
• name="robots" content="none" pour la page de liste ordonnée
• Open Graph et données structurées JSON-LD (dans templates/_partials/microdata-jsonld.tpl)
• chargement de la police de Google (dans templates/_partials/font.tpl)

Menu Offcanvas

Nous étendons simplement le modal bootstrap avec une classe personnalisée :

• .modal-dialog__offcanvas class dans modal-dialog
• Ajout .modal-dialog__offcanvas--right pour right offcanvas