Skip to content
Classic Rocket is a rework of "classic theme". It has been built keeping in mind : performance, accessibility and SEO.
Smarty PHP CSS JavaScript
Branch: master
Clone or download
Prestarocket
Prestarocket Merge branch 'develop'
Latest commit 2065f9c Apr 23, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
_dev fix #37 #31 : fix footer responsive Apr 19, 2019
assets build Apr 19, 2019
config update htaccess directive Jul 27, 2018
dependencies/modules/ps_searchbarjqauto fix input type for search Jul 26, 2018
modules fix #37 #31 : fix footer responsive Apr 19, 2019
templates Merge pull request #47 from bhavikvaghani/patch-1 Apr 23, 2019
.gitignore add gitignore Jul 20, 2018
LICENCE.md add Licence AFL-3.0 Jul 20, 2018
README.md update readme Apr 23, 2019
preview.png add theme Jul 20, 2018

README.md

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.

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.5.x

Download

Misc

You can also use gulp to work faster during development (gulpfile.js => gulp watch)

To do (you can help!):

  • test rtl
  • form validation
  • more BEM
  • add more custom scss variables
  • more data in jsonld
  • PWA
You can’t perform that action at this time.