Thème "classic-rocket"

PrestaShop Classic Rocket

Main features :

• Latest version of Twitter Bootstrap
• Lazy loading images
• Offcanvas for the main menu and the filter menu
• Less css and less js
• Accessibility of forms and better validation
• SEO: Hn, rel prev/next for pagination
• Font performance
• Improved Responsive

We use Dareboost to test and improve our work.

Main differences with Classic Theme

Performance

With the same server (gzip, PrestaShop performance settings correctly adjusted)

• CSS : from 80 Kb (with classical theme) to 33 Kb
• JS : 155 Ko (with classical theme) to 86 Ko

You can also view the web performance and quality comparison report on Dareboost

Twitter Bootstrap 4.3.x

• Almost all tpl files are edited to use new BS classes (ex: col-xs-12 => col-12)
• For backward compatibility and third modules, we keep some important old classes in bs_alpha.scss
• Scss variables are divided into 2 files: 1 file to replace the default Twitter Bootstrap variables and 1 file for custom scss variables for the Classic Rocket theme (ex: $regular-price-font-size)
• Only useful BS plugins are added individually in _dev/theme.js (carousel and scrollspy are not loaded).

New Js files

• Lazysizes is a fast and self-initializing image lazyloader for SEO
• Slick Carousel is used for the home page cursor and product images in the product detail page; it is lighter than the owl carousel and offers many interesting features (touch, reactive options, data attribute settings)
• HoverIntent is a plug-in that attempts to determine the user's intent (for the main menu)

Js file deleted (in the _dev folder)

• tether.js (we use popper with the latest version of BS)
• velocity.js (we use slick)
• bootstrap-filestyle.min.js (BS provides custom file entry)
• drop-down.js (done with the BS drop-down menu)
• product-miniature.js (made with css)
• product-select.js (we use slick)
• jquery.scrollbox.min.js

New module(s)

• ps_searchbarjqauto (for use with jQuery autoComplete v1.0.7)

New smarty blocks

• layoutWrapper
• ClasscontentWrapperClass
• pageHeaderClass
• pageContentClass
• pageFooterClass

New image sizes

We use srcset in product-cover-thumbnails.tpl for responsive images.

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

• Better pagination with rel next/prev link (in templates/_partials/pagination-seo.tpl)
• name="robots" content="none" for the ordered list page
• Open Graph and JSON-LD structured data (in templates/_partials/microdata-jsonld.tpl)
• loading the Google font (in templates/_partials/font.tpl)

Offcanvas Menu

We simply extend the modal bootstrap with a custom class:

• .modal-dialog__offcanvas class in modal-dialog
• Add .modal-dialog__offcanvas--right for right offcanvas