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.3.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">&times;</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

• classic-rocket

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