Best way to build a Prestashop theme in 2019?

[random_passanger]

Hello,

what is the best way to build theme for Prestashop nowadays? I mean that Starter theme is marked as deprecated and newest dedicated branch is for 1.7.3.x but now we have 1.7.5.1. Do You recommend to build on top of starter theme (does it work well with newest release of Prestashop?) or maybe modify classic template? What I like about Starter theme is that it uses Webpack which is modern and actual tool among webdevelopers.

Edited April 20, 2019 by random_passanger (see edit history)

[tdsoft]

read more: https://devdocs.prestashop.com/1.7/themes/reference/templates/templates-layouts/

[random_passanger]

30 minutes ago, tdsoft said:

read more: https://devdocs.prestashop.com/1.7/themes/reference/templates/templates-layouts/

Hello,

thank You for Your reply. I think that You don't get my question. I'm asking if Starter theme is still actual for Prestashop 1.7.5.1 or developers are using different approaches to code themes. What You gave me is a link to templating documentation.

[tdsoft]

You should clone & modify Classic theme of Prestashop

[maldor]

Hi

in 2020 what's the best way?

Here we found these possible solutions:

• Starter theme (not maintained)
• Classic theme (that it's not a starter theme)
• Classic-rocket theme (it's like Classic but with modern libraries, etc)

The docs is really unclear: here it says about that Starter Theme but at the same time the danger alert at the top page warns that "This project is not maintained anymore by the core team."

Really confusing.

 

I'm asking here the same thing:

 

 

[fbenoist.com]

For me, it is preferable to start from the classic-rocket theme.

[maldor]

1 hour ago, fbenoist.com said:

For me, it is preferable to start from the classic-rocket theme.

Hi @fbenoist.com

thanks for your opinion.

You use classic-rocket for build theme from scratch? I mean, for example, building a Product template with layout totally different from the default one?

We are going to change a lot layout components (Header, Mini cart, Footer) and these templates: Home, Product, Category, CMS page, Cart. I think it's more easy and fast write new scss as we need instead of overriding everytime pre-existing css. Is classic-rocket convenient for this kind of work?

Curious to know how you work with it.

Thanks

[Verlonimo]

Hi, @maldor

 

I have been developing a lot things with Joomla cms for more then 6 years and recently was asked to take a look at Prestashop and migrate current Joomla site to Prestashop or Magento. I have never ever used Prestashop and it took me like 1 month to find how it works.

 

Now regarding your question.

Who ever has created Classic, Classic-rocket themes has probably HTML  and Bootstrap 4 knowledge of zero. There is so many html issues in those templates. Basically you need to go throught all tpl files and fix them. As example in Classic theme there is:

 

          <button id="submit-login" class="btn btn-primary" data-link-action="sign-in" type="submit" class="form-control-submit">
            {l s='Sign in' d='Shop.Theme.Actions'}
          </button>

As you can see class attribute is declared twice for no reason... Seems prestashop is proud of using Bootstrap 4 but in classic theme there is like only 5% usage of it.

It has some kinda custom classes like "hidden-sm-down" which u don't need cause you can do same with default BS4 utilities "d-none d-md-block". Only using BS4 you can get rid about 70% of theme.css....

 

So what i am doing now. Created new theme based on classic theme, got rid of all css, js....Left only core things. Going throught all tpl's files and doing my customizations there.

 

So my answer is YES, if you want to have clean theme then you must do it from scratch. Probably it doesn't matter which default theme you gonna choose cause both of them are crap for production usage....

 

Thanks

 

Edited April 3, 2020 by Verlonimo (see edit history)

[maldor]

Hi @Verlonimo

thanks for sharing your experience. Actually we're doing like the same but starting from Classic-rocket because of better webpack configurations (and it's pretty bad).

Quote

So what i am doing now. Created new theme based on classic theme, got rid of all css, js....Left only core things

How you find what is core (in css and especially js)? Could you share what files?

Thanks

[random_passanger]

Hello everyone,

some time passed from start of this thread but I see high activity here last time so here is what I learned on my own so far - just clone official dev Prestashop Classic Theme and modify it. I think that this way is the best as it has Webpack and other stuff already integrated plus all accepted contributions/commits by others. I successfully almost done whole shop on top of my idea, I mean i passed it to an agency as I had no sufficient time to finish this but I made huge progress in short time. Try my way and get used to it as Prestashop will be never left with no updates/commits but projects like Classic Rocket could be. Sorry for bad english.

[Verlonimo]

Hi,

@maldor

By core things i mean core.js

I have deleted all theme.css and theme.js from template and creating my own.

I do not use webpack, only some prepros tool for sass. I also adding jquery plugins directly to theme via theme config file.... i might build everything with webpack later but as prestashop has its own compression tool inside then i dont see a big difference... all js still will be compresed into one file...

 

As example, i working right now on checkout. Creating my own ajax to delete or add voucher, update delivery, address forms and many othe stuffs.  Mostly for this i would have to change in core.js but instead i just look on github in _core folder how it's done and creating my own based on....

https://github.com/PrestaShop/PrestaShop/tree/develop/themes/_core/js

 

Basically trying keep everything inside theme as much as possible with default prestashop modules overriden. Touching default controllers override or creating my own only if needed.

 

 

Hope that helps. If you have any questions feel free to ask. Happy to help.

 

Regards

Edited April 23, 2020 by Verlonimo (see edit history)

[maldor]

Thanks  @random_passanger  @Verlonimo

@Verlonimo I'm customizing the checkout too, to be precise the confirmation page just after the checkout. You know how to test/open that page without place an order each time?

 

[Verlonimo]

Hi,

@maldor

have you tried to refresh page? I haven't look into order confirmation page yet. If it doesnt work and you want to make only some html changes then you can save that page with right mouse click and do html customization there and later apply it to tpl it self....

Every other changes will require to place orders for testing... you always can delete them later...

Thanks