PrestaShop Classic Rocket
Classic Rocket is a rework of "classic theme". It has been built keeping in mind : performance, accessibility and SEO.
Contributed by Prestarocket (Twitter: @prestarocket)
Demo : https://demoprestashop.prestarocket.com/
Main features :
- last version of Twitter Bootstrap
- lazy loading images
- offcanvas for main menu and filter menu
- less css and less js
- form accessibility and better validation
- SEO: Hn, rel prev/next for pagination...
- font performance
- better responsive
We use Dareboost to test and improve our work.
Contributing
PR on branch develop please
Main differences with Classic Theme
Performance
With the same server (gzip, PrestaShop performance settings properly adjusted)
- CSS: from 80 Ko (with Classic theme) to 33 Ko
- JS: 155 Ko (with Classic theme) to 86 Ko
You can also see the web quality and performance comparison report on Dareboost
Twitter Bootstrap 4.4.x
- Almost all tpl files are edited to use new BS classes (ex: col-xs-12 => col-12)
- For retrocompatibility and third modules, we keep some important old classes in bs_alpha.scss
- Scss variables are split in 2 files: 1 file for overriding default Twitter Bootstrap variables and 1 file for custom scss variables for Classic Rocket theme (ex: $regular-price-font-size)
- Only usefull BS plugin are added individually in _dev/theme.js (carousel and scrollspy are not loaded).
New Js files
- Lazysizes is a fast, SEO-friendly and self-initializing lazyloader for images
- Slick Carousel is used for homepage slider and product images in product detail page; it's ligther than owl carousel and offers a lots of interesting features (touch, responsive options, data attribute settings)
- HoverIntent is a plug-in that attempts to determine the user's intent (for main menu)
Js file deleted (in _dev folder)
- tether.js (we use popper with last version of BS)
- velocity.js (we use slick)
- bootstrap-filestyle.min.js (BS provide a custom file input)
- drop-down.js (done with BS dropdown)
- product-miniature.js (done with css)
- product-select.js (we use slick)
- jquery.scrollbox.min.js
New module(s)
- ps_searchbarjqauto (for use jQuery autoComplete v1.0.7 )
New smarty blocks
- layoutWrapperClass
- contentWrapperClass
- 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 link rel next/prev (in templates/_partials/pagination-seo.tpl)
- name="robots" content="none" for ordered listing page
- Open Graph and JSON-LD structured data (in templates/_partials/microdata-jsonld.tpl)
- font load from Google (in templates/_partials/font.tpl)
Offcanvas menu
We simply extend bootstrap modal with custom class:
- .modal-dialog__offcanvas class in modal-dialog
- add .modal-dialog__offcanvas--right for right offcanvas
<!-- Button trigger offcanvas -->
<button type="button" id="search_filter_toggler" class="btn btn-secondary d-md-none" data-target="#offcanvas_search_filter" data-toggle="modal">
Filter
</button>
<!-- Modal Offcanvas-->
<div class="modal fade" id="offcanvas_search_filter" tabindex="-1" role="dialog" data-modal-hide-mobile>
<div class="modal-dialog modal-dialog__offcanvas modal-dialog__offcanvas--right" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="_mobile_search_filters_wrapper"></div>
</div>
</div>
</div>
</div>
Compatibility
PrestaShop 1.7.3.2 to 1.7.6.x
Download
Misc
You can also use gulp to work faster during development (gulpfile.js => gulp watch)
To do (you can help!):
- test rtl
- more BEM
- add more custom scss variables
- more data in jsonld
- PWA