prestarocket-agence / classic-rocket

Classic Rocket is a rework of "classic theme". It has been built keeping in mind : performance, accessibility and SEO.

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">&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

classic-rocket's Issues

When on checkout, page jumps to the top after each step

On the checkout page, for each step for instance when adding an address, the page jumps to the top when pressing Continue. This forces the customer to scroll down to the correct place after each click on Continue which is very confusing. Instead they should simply be scrolled to the next step of the process when clicking Continue.

megamenu not wrapping

When a category holds more than a certain number of subcategories, the text does not stay within the border of the menu box. Ideally it should wrap around and continue downwards inside the box (I would imagine).

Images on product page not loading.

Prestashop v1.7.4.2
classic-rocket 1.0.0

Classic theme loads images correctly with following URL:
http://localhost:8081/135-large_default/my_product.jpg

classic-rocket tries to load image with following URL (which points to nowhere):
http://localhost:8081/135-pdt_540/my_product.jpg

This happens when changing theme from classic to classic-rocket.

I way to fix this would be to manually rename pictures on the server.

Is there any other way?

Thanks.

[bug] Notice: Undefined index: category_name

After installation of classic-rocket on clean PS 1.7.5.1 and navigating to any product (fe. /men/1-1-hummingbird-printed-t-shirt.html):

(1/1) ContextErrorExceptionNotice: Undefined index: category_name
in 3afdfc8ab50006734f1239b4ee717bd1998e90b5_2.file.microdata-jsonld.tpl.php line 117

Feature request - Link modules positions to active theme

Hi,

I've been developing e-commerce websites with PS (from 1.5 to 1.7) for years now.

Yesterday my boss wanted to see how looks the classic theme. So, being currently working on a new PS website (1.7.5.2), I switched from my current "under development" theme to classic one and showed how it looks to my boss. But when I wanted to go back to my working theme, all modules positions were initialized, so I had to do gain all I did to get my theme working correctly.

This is where I wanted to go: could it be nice to link all modules positions to the active theme? This way a switch between two themes could be easier and would not break the website. I think the "Home page configuration" should also been linked to the active theme.

Thanks.

[bug] Type error: Too few arguments to function smarty_modifier_replace()

After installation of classic-rocket on clean PS 1.7.5.1 and navigating to /6-accessories:

(1/1) FatalThrowableError
Type error: Too few arguments to function smarty_modifier_replace(), 2 passed in /home/domains/presta1/www/var/cache/dev/smarty/compile/layouts_layout_left_column_tpl/ff/c0/a8/ffc0a89a14b80f2eea865886f7c3ecce4d9959dc_2.file.pagination-seo.tpl.php on line 35 and exactly 3 expected

at smarty_modifier_replace('http://10.5.5.68/6-accessories', '?page=1')
in ffc0a89a14b80f2eea865886f7c3ecce4d9959dc_2.file.pagination-seo.tpl.php line 35

line 35 from ffc0a89a14b80f2eea865886f7c3ecce4d9959dc_2.file.pagination-seo.tpl.php:

$_tmp_array['canonical'] = smarty_modifier_replace($_smarty_tpl->tpl_vars['page']->value['canonical'],$_smarty_tpl->tpl_vars['queryPage']->value);

Issues in google product structured data

On product page, there are some issues in google product structured data :

• There are two versions : a json-ld version and old microdata version
• With the google tool https://search.google.com/structured-data/testing-tool there are some warnings that has to be fixed.

Product page: Changing quantity or size reloads product image

When you update the quantity from say 1 to 2, there is no reason for showing the image loading spinner, and replacing it with the current image again (image reload).

Re-loading an image:

• ok, when changing color etc. 👍 (this works fine)
• not ok, when changing the quantity or size 🐛 (this should be changed)

Slow loading of Material Icons Font

Hello,

The icons loading of the google font was too slow, the text appeared before the icons. So i changed the loading. Instead of using the file font.tpl, i load the Material Icons Font with the _font.scss file like that :

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');

That's solved my problem. Hope it will help someone else.

[Feature request] Move faceted OK button to the sidebar header

It would be good to move the OK button to the siderbar header, next to X icon.

When there are more filters than page height, OK button scrolls with them. This way, it would be visible all the time and when the user reaches the end with his selection, he just clicks OK and doesnt have to scroll back to the top again.

Feature Request - seller's warranty

Add these items to the theme to reassure the customer and encourage them to buy.

FREE SHIPPING - MONEY BACK - DISCOUNTS - SUPPORT

Carousel images not sliding

Hi,

It looks like there is no automatic image rotation on classic-rocket carousel slider, reproductible on the demo site.
https://demo-prestashop.prestarocket.com/
Regards,

ps_facetedsearch 3.0.x template

After latest upgrade of reworked ps_facetedsearch template need to be upgraded too.
Reason? No toggler visible in desktop view, two togglers (up,down) visible in mobile. also break the lines

FEATURE REQUEST - MEGA MENU

Keep raw javascripts instead of bundled and minified ones

Hi!

I'm trying to make my own Prestashop 1.7 boilerplate to get my future developments start fastest and I want to use your classic theme adaptation, it's awesome!

I'm wondering if you can include the raw javascript files separated. Now theme.js contains bootstrap and other logic for the web to work, I want use my own version of bootstrap/jquery javascript.

Can you provide the raw javascript files?

Thank you and congratulations for your work.

[improvement] cart have dropdown feature

as far I know classic theme will not add this feature, but I think its have great benefit and improvement for customer. maybe you can considere to add this to classic rocket. I read the detail here http://forge.prestashop.com/browse/BOOM-1301

thanks

A few improvements to consider/implement

Keep prices in the product list on the bottom, makes it look more uniform.

.product-description {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

Remove one unneccessary padding between products in 2column view.

.product-miniature:nth-child(2n+1) {
    padding-right: 7.5px;
}
.product-miniature:nth-child(2n) {
    padding-left: 7.5px;
}

Make left column slightly bigger on md view, improves usability a lot.

col-12 col-md-4 col-lg-3
col-12 col-md-8 col-lg-9

Other

• Footer columns shouldn't be collapsible between 922px and 1190px.
• Make product list one column, maybe under 360px?

__

Best theme ever :-)

Move dependency module into proper repository

Hey, @toutantic just create this for you ;)

https://github.com/PrestaShop/ps_searchbarjqauto

Regards

This theme is not valid for Prestashop 1.7

Hi

First of all, I did testdrive the theme the day after it was published and to be honest it was the best news for Prestashop this year. I was thinking about trying to tweak the Classic theme myself and I really lack the skills and then this comes along and fixes almost all the issues. Big kudos for an amazing and important effort.

I have not done anything with Prestashop in a while so today I had some time and decided to install the 1.7.4.2 and the latest version of the classic-rocket.

However, when trying to install classic-rocket, I just get the "This theme is not valid for Prestashop 1.7" error message.

This is on a vanilla installations just downloaded from github of both Prestashop and the theme.

Overlay problem with megamenu and slider

On Desktop, when the megamenu window overlaps the slider, in the front page, the slider control buttons < .. > are on top, so you cannot click on the menu items, and the menu will disappear when hovering over the slider buttons.

infinite scroll on product list page "Enhancement"

This would be a really nice feature to add to this theme.
Also a Shop now days should have an infinite scroll.. instead of having to click on the next button all the time.

Please consider this

Footer does not expand on iphone

On iPhone the small arrows to the right in the footer:

does not expand. It works works in other browsers and also on Android but not in iOS. Nothing happens when clicking the arrow so the footer menu options does not display.

| Bug | in the menu bar when there are multiple categories

Bug in the menu bar when there are several categories. The search bar is not visible correctly.

use npm for slick.js

hi,

i think it will be more easier to maintain if you used slick from npm instead load it from lib folder.

https://www.npmjs.com/package/slick-carousel

Update the bootstrap version ?

Hello,

I would like to know how i can update the bootstrap version

Thank you

Question: 1.7.6 status

Just a question, not an issue.

Will there be a release of classic-rocket matching the 1.7.6 release of Prestashop?

Store information not visible on mobile

I guess store information should also be expandable like the other headers.

Issue when update to webpack 4 and all plugins

Hi there is an issue when you update to webpack 4 and all plugins and dependencies, here is the new webpack configuration:

webpack.config.js

`/**

• 2007-2017 PrestaShop
• NOTICE OF LICENSE
• This source file is subject to the Academic Free License 3.0 (AFL-3.0)
• that is bundled with this package in the file LICENSE.txt.
• It is also available through the world-wide-web at this URL:
• https://opensource.org/licenses/AFL-3.0
• If you did not receive a copy of the license and are unable to
• obtain it through the world-wide-web, please send an email
• to [email protected] so we can send you a copy immediately.
• DISCLAIMER
• Do not edit or add to this file if you wish to upgrade PrestaShop to newer
• versions in the future. If you wish to customize PrestaShop for your
• needs please refer to http://www.prestashop.com for more information.
• @author PrestaShop SA [email protected]
• @copyright 2007-2017 PrestaShop SA
• @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
• International Registered Trademark & Property of PrestaShop SA
  */
  const webpack = require('webpack');
  const path = require('path');
  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  const TerserPlugin = require('terser-webpack-plugin');

let config = {
optimization: {
minimizer: [
new TerserPlugin({
terserOptions: {
sourceMap: true,
compress: {
sequences: true,
conditionals: true,
booleans: true,
if_return: true,
join_vars: true,
drop_console: true
},
output: {
comments: true
},
minimize: false
},
}),
],
},
entry: {
main: [
'./js/theme.js',
'./css/theme.scss'
]
},
output: {
path: path.resolve(__dirname, '../assets/js'),
filename: 'theme.js',
sourceMapFilename: '[file].map'
},
devtool: 'source-map',
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: '../css/theme.css',
}),
],
module: {
rules: [
{
test: /.js/,
loader: 'babel-loader'
},
{
test: /.(sa|sc|c)ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
sourceMap: true
}
},
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
plugins: function() {
return [ require('autoprefixer') ]
}
}
},
{
loader: 'sass-loader',
options: { sourceMap: true }
}

    ],
  },
  {
    test: /.(png|woff(2)?|eot|ttf|svg|gif)(\?[a-z0-9=\.]+)?$/,
    use: [
      {
        loader: 'file-loader',
        options: {
          name: '../css/[hash].[ext]',
          sourceMap: true
        }
      }
    ]
  }
]

},
externals: {
prestashop: 'prestashop',
$: '$',
jquery: 'jQuery'
}
};

module.exports = config;
`

package.json

{ "name": "xxxxxxx", "version": "1.0.0", "description": "Tema de xxxxxx", "main": "index.js", "scripts": { "build": "webpack --mode production --progress --colors --debug --display-chunks", "watch": "webpack --mode development --progress --colors --debug --display-chunks --watch" }, "author": "Ausral", "license": "AFL-3.0", "devDependencies": { "@babel/core": "^7.5.4", "ajv": "^6.9.1", "autoprefixer": "^9.4.4", "babel-loader": "^8.0.6", "bootstrap": "4.3.1", "bootstrap-touchspin": "^4.2.5", "css-loader": "^3.0.0", "expose-loader": "^0.7.3", "file-loader": "^4.0.0", "flexibility": "^1.0.5", "gulp": "^4.0.0", "gulp-autoprefixer": "^6.0.0", "gulp-replace": "^1.0.0", "gulp-sass": "^4.0.2", "gulp-sourcemaps": "^2.6.5", "jquery": "^3.4.1", "lazysizes": "4.1.5", "material-design-icons": "^2.1.3", "mini-css-extract-plugin": "^0.7.0", "node-sass": "^4.5.0", "popper.js": "^1.14.3", "postcss-flexibility": "^2.0.0", "postcss-loader": "^3.0.0", "sass-loader": "^7.1.0", "style-loader": "^0.14.0", "terser-webpack-plugin": "^1.3.0", "webpack": "^4.35.3", "webpack-cli": "^3.3.5", "webpack-dev-server": "^3.7.2", "webpack-sources": "^0.1.0" }, "dependencies": { "babel-preset-react": "^6.24.1" } }

Clicking "Terms and Conditions" on "agree"-line last step checkout loads new page

The original classic design opens a modal for the Terms and Conditions leaving de checkout-page in the background. Something like that is prefered in classic-rocket as well.

Loading a new page and leaving the checkout process distracts the customer.

Category block display

• Category arrows are not aligned with the title
• Plus sign doesnt change to minus when clicking the category title

Prestashop version: 1.7.6

[checkout.js] $(this) is undefined

'this' is undefined when you are using it into those line

$(document).on('click','.js-checkout-step-header', (event) => {
    let stepIdentifier = $(this).data('identifier');
    $('#'+stepIdentifier).addClass('-current');
    $('#content-'+stepIdentifier).collapse('show').scrollTop();
});

Here you have 2 solutions

first one with arrow functions

$(document).on('click','.js-checkout-step-header', (event) => {
    let stepIdentifier = $(event.currentTarget).data('identifier');
    $('#'+stepIdentifier).addClass('-current');
    $('#content-'+stepIdentifier).collapse('show').scrollTop();
});

if you want to use 'this' then this is the right code

$(document).on('click','.js-checkout-step-header', function() {
    let stepIdentifier = $(this).data('identifier');
    $('#'+stepIdentifier).addClass('-current');
    $('#content-'+stepIdentifier).collapse('show').scrollTop();
});

But i don't understand why you add -current class ? core.js already do the job

Issue with colissimo module

The colissimo modal box for choosing relay points is not clickable.
The div div .modal-content is missing in colissimo template.

In classic rocket, there is a “pointer-events: none” on .modal-dialog and “pointer-events: auto” on .modal-content

How can we fix that ?

Could not install module ps_searchbarjqauto

I download the theme and put it on the folder /themes

Then , when in backoffice I try to 'Use that theme' I have that error: ' Could not install module ps_searchbarjqauto. The module is not valid and can not be loaded. ' .

Prestashop 1.7.4.2 clean

Login validation

Hey, it seems there's a small issue with login validation, "Your password should be at least 5 characters" should appear only after submitting the form.

Issue on products display

Hi on less than 320 px width it keeps showing 2 columns (col-6) it should be col-12

Wrong Input validation

Input validation goes wrong on newsletter,

https://prnt.sc/nq4pcf

Image not showing on Internet Explorer

Hi after done all the update of Webpack and dependencies, on IE the image are not been shown, on the console got this error:

This is my package.json:

{ "name": "australpygb", "version": "1.0.0", "description": "Tema de Austral", "main": "index.js", "scripts": { "build": "webpack --mode production --progress --colors --debug --display-chunks", "watch": "webpack --mode development --progress --colors --debug --display-chunks --watch" }, "author": "Ausral", "license": "AFL-3.0", "devDependencies": { "@babel/core": "^7.5.4", "ajv": "^6.9.1", "autoprefixer": "^9.4.4", "babel-loader": "^8.0.6", "bootstrap": "4.3.1", "bootstrap-touchspin": "^4.2.5", "css-loader": "^3.0.0", "expose-loader": "^0.7.3", "file-loader": "^4.0.0", "flexibility": "^1.0.5", "gulp": "^4.0.0", "gulp-autoprefixer": "^6.0.0", "gulp-replace": "^1.0.0", "gulp-sass": "^4.0.2", "gulp-sourcemaps": "^2.6.5", "jquery": "^3.4.1", "lazysizes": "4.1.5", "material-design-icons": "^2.1.3", "mini-css-extract-plugin": "^0.7.0", "node-sass": "^4.5.0", "popper.js": "^1.14.3", "postcss-flexibility": "^2.0.0", "postcss-loader": "^3.0.0", "sass-loader": "^7.1.0", "style-loader": "^0.14.0", "terser-webpack-plugin": "^1.3.0", "webpack": "^4.35.3", "webpack-cli": "^3.3.5", "webpack-dev-server": "^3.7.2", "webpack-sources": "^0.1.0" }, "dependencies": { "babel-preset-react": "^6.24.1" } }

PrestaShop version 1.7.6

I did try on fresh installation and install the theme and it works, no idea what is not working!

Need help?

Hey @prestarocket

i've noticed that progress here is slow and classic-rocket becomes outdated, do you need some help to maintain this project?

Cart shown on checkout on mobile res

On desktop, the checkout header hides the menu and the cart which I think is correct:

However when resizing the screen to mobile resolution, these items are displayed (and in a non optimal way).

I think the intention is to hide the menu and cart also for mobile resolutions

Footer copyright info not centered on small screens

This is a minor, just mentioning it here since I do not know all the places where text-sm-center.

The css:

@media (min-width: 576px)
.text-sm-center {
text-align: center!important;
}

Does not center the copyright text on screens smaller than 576px, I think the intention is that it should be centered?

Reproduce by simply making the screen smaller than 576px and see that the copyright info etc is moved from the center to the left.

Feature Request - Add multiple predefined color.

currently the theme is founit with pretty simple colors: blue, white and gray. It would be interesting to add several shades of colors modifiable from the backend. Because all users do not have the same tastes. Some prefer soft colors others brighter and brighter colors others darker.

Add the true colors of social network sharing icons

• Add the true colors of social network sharing icons because when we fly over the icons of social networks they are blue.

https://www.materialui.co/socialcolors

Thank You

module ps_searchbarjqauto invalid prestashop 1.7.5.0

Hello
thanks for your theme... really....
but i cannot install it because prestashop 1.7.5.0 tell me that invalid module so unable to install it
can you please help me
thanks

How to remove FOUC?

FOUC happens with Top buttons.

It happens even on the demo site:
https://demo-prestashop.prestarocket.com

Image Slider auto transition not working

Hi,

Not even the official demo site is working. By default the slide should transition every 5000ms. That's not happening. Any idea?

Failed at the [email protected] build script 'NODE_ENV=production webpack --progress --colors --debug --display-chunks

Hi,
I'm new in development and I get this issue by running webpack.
I'v done this:
sudo npm install sudo npm run build
Then I get this error:
npm ERR! Linux 4.4.0-141-generic npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "build" npm ERR! node v4.2.6 npm ERR! npm v3.5.2 npm ERR! code ELIFECYCLE npm ERR! [email protected] build: NODE_ENV=production webpack --progress --colors --debug --display-chunks`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build script 'NODE_ENV=production webpack --progress --colors --debug --display-chunks'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the prestarocket-dev-tools package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! NODE_ENV=production webpack --progress --colors --debug --display-chunks
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs prestarocket-dev-tools

`

Please anyone may help?

how to keep changes after updates?

Hello there, i write changes to the custom.css, but after update the files are deleted.. is there a way to update keeping changed files or even changed code easily?

greetings

Minor css issue on add to cart confirm

Continue shopping button is outside of the container.

iPhone 6 screenshot.

Faceted navigation not functional

Mobile:

• Arrows not aligned
• When clicking anything, it opens the last filter
• Price slider visible on page load

Desktop:

• Options not visible
• Cannot expand anything

Upgrade to Bootstrap v4.2.1

Lastest version of Bootstrap is 4.2.1 published 8 days ago. Can you make this in the next future update. Thank You