Thème "classic-rocket"

0,00 €
HT

Classic Rocket est une reprise du "thème classique". Il a été construit en gardant à l'esprit : la performance, l'accessibilité et le référencement.

  • Module garantie qualité Module garantie qualité
  • Module envoyé par mail dès validation du paiement Module envoyé par mail dès validation du paiement
  • Paiement 100% sécurisé Paiement 100% sécurisé

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

Fiche technique

Versions de PrestaShop compatibles
PrestaShop 1.7.3.2 à 1.7.6.x