Building a theme. It's like entering a teenagers room. Where do I start?

[Henrik41]

I am not new to programming (in fact I program ruby, rails, php, golang, js, html, etc). I decided for one of my project that Prestashop was the easy way to go. Installed it no problem. So I googled  "how do I create a new theme for Prestashop 1.7" since I need to modify the theme. The instructions are messy, the documentation is messy and really not that clear. 

What a mess!!! the code itself is a mess! even the theme.css is minify. They use smarty mess which I hate (but can manage). For a programmer like me that wants to make sense of all this code...it's like entering a teenagers room! Total Chaos. Ok b&@# is over. Now..

So where do I start? Is there any tutorial that can guide me in how to modify a page or create one?

Thanks

 

[Dreamtheme]

Hi,

Check this documentation - https://devdocs.prestashop.com/1.7/themes/getting-started/.

 

 

[Henrik]

Hmmm Thank you DreamTheme. I read the documentation obviously but I do think that hands on examples of how to build a custom page/template/layout is needed in the documentation. 

Like for example:

How do I even know what the URL of the page is when I create a new folder/file?

How do I create a new Page/Layout ?

Etc.

Thanks for the tips though.

 

Henrik 

 

 

[Dreamtheme]

Hi,

This is not WordPress, you don't create pages and layout in the way you understand it. PrestaShop uses "Smarty PHP template engine" - https://en.wikipedia.org/wiki/Smarty_(template_engine)

There are TPL (template) files in the theme folder, they are your "pages" but normally they are broken into smaller segments, like header.tpl, head.tpl and they construct the page together. There are mandatory things like checkout page, product page etc that are already included with the template (it doesn't matter if you use the starter theme or fork of the classic theme). By default you have all the required TPL's already there, so if you want to change the layout and structure of the product page for example you edit the product.tpl file. So If you want to add new "page" you can create your own TPL file and place it at the appropriate template folder/subfolder and call it at the appropriate place. Look at TPL files like HTML files, where you set divs/classes etc and then style it with CSS and JS. You can also extend existing TPL or override it with your own.

Check out -  https://devdocs.prestashop.com/1.7/themes/getting-started/theme-organization/ and see how it is organized. Start opening the theme folder /templates and look at all the TPl files and there contents and you will understand it.

PrestaShop also use Symfony and its Twig template engine.  Furthermore, Webpack and NPM are used to manage packages and segments and then compile the assets like CSS and JS, into one file. They are separated in many small files, like products.js and others that is later combined and compiled into one big theme.js That's why they are minified in the end result. You can find the unminified versions on the PrestaShop github page.

Another helpful link is - https://belvg.com/blog/smarty-template-engine-in-prestashop-1-7-basics-examples-functions.html

I suggest you to look at Smarty and Symfony engines websites and their docs too.