OpenCart Community

Hi,

I have been warned about it and I knew I will need it first, well I have finally made up my mind to go with OC3 and first thing I need is to understand creating / customizing theme. I already understand twig / php / css stuff but so far what I can see that there is no clear guide guiding you to make OC3 themes. Everyone wants you copy default theme and then modify it.
Unfortunately default theme still uses Bootstrap 3 while we have BS 5 on way and by no way default theme is lightweight. but yes, it works. I would like to know if there is some kind of hierarchy in theme for OC3 and if yes then why there is no documentation, is it intentional ?

Apparently there is no such guide.
Hope Danial and other project managers understand that this way they are hampering wider adaptation of OC.

If you already understand TWIG, PHP, CSS and other things, why you need a guide then? Any theme is just a bunch of files, which you can edit any way you want.

this way they are hampering wider adaptation of OC

The theme has little to do with that.
Anybody who knows twig/css/js needs no guide, anybody who doesn't buys a template/theme.

The Opencart team does not need to develop a documentation for TWIG files. The documentation is already created by Symphony. The fact that TWIG files are integrated in the platform is because many other platforms are also using it. If you'd like more information about TWIG codes, simply use Google to find what you need.

Since you already know twig, css, and php the easiest way to do a new theme is to use the following new folders structure:

catalog/view/theme/my-theme/template/*/*.twig
catalog/view/theme/my-theme/stylesheet/stylesheet.css
catalog/view/theme/my-theme/image/*.png
catalog/view/javascript/bootstrap4/*

The template folder only needs twig files which are different from the default twig files. If your theme doesn't contain a certain twig template file it will fall back to the default one. You will at least need a modified catalog/view/theme/my-theme/template/common/header.twig for your theme because of e.g. using bootstrap4.

In the admin backend, all you have to do is to keep the store default theme, just change the theme folder to your new my-theme.

JNeuhoff wrote: ↑

Mon Apr 13, 2020 9:05 pm

Since you already know twig, css, and php the easiest way to do a new theme is to use the following new folders structure:

catalog/view/theme/my-theme/template/*/*.twig
catalog/view/theme/my-theme/stylesheet/stylesheet.css
catalog/view/theme/my-theme/image/*.png
catalog/view/javascript/bootstrap4/*

The template folder only needs twig files which are different from the default twig files. If your theme doesn't contain a certain twig template file it will fall back to the default one. You will at least need a modified catalog/view/theme/my-theme/template/common/header.twig for your theme because of e.g. using bootstrap4.

In the admin backend, all you have to do is to keep the store default theme, just change the theme folder to your new my-theme.

If this solution is really working ... perhaps I could add this in the FAQ for future forum users who might be looking for ways to upgrade their bootstrap versions with new or existing custom themes ...

Yes, it should work, though I haven't tried bootstrap 4 yet. But as regards to the other folders, yes, I have done it several times for different OpenCart sites, and it keeps it pretty much compatible with most 3rd party extensions.

Some web themes are more complex and may require additional settings, in which case you'd also need these files:

admin/controller/extension/theme/my-theme.php
admin/language/*/extension/theme/my-theme.php
admin/view/template/extension/theme/my-theme.php


The theme settings are stored in the OpenCart DB table oc_setting. If you use these additional theme settings, then, in the OpenCart admin backend, you'd have to switch the theme from 'default' to 'my-theme' at System > Settings > edit > tab General > Theme.

JNeuhoff wrote: ↑

Mon Apr 13, 2020 11:16 pm

Yes, it should work, though I haven't tried bootstrap 4 yet. But as regards to the other folders, yes, I have done it several times for different OpenCart sites, and it keeps it pretty much compatible with most 3rd party extensions.

Some web themes are more complex and may require additional settings, in which case you'd also need these files:

admin/controller/extension/theme/my-theme.php
admin/language/*/extension/theme/my-theme.php
admin/view/template/extension/theme/my-theme.php


The theme settings are stored in the OpenCart DB table oc_setting. If you use these additional theme settings, then, in the OpenCart admin backend, you'd have to switch the theme from 'default' to 'my-theme' at System > Settings > edit > tab General > Theme.

While the OC admin - > extensions - > extensions - > themes(x) page also needs to be configured, the observation above was about Bootstrap implicitly ... not only about adding / troubleshooting the custom themes themselves.

JNeuhoff wrote: ↑

Mon Apr 13, 2020 9:05 pm

Since you already know twig, css, and php the easiest way to do a new theme is to use the following new folders structure:

catalog/view/theme/my-theme/template/*/*.twig
catalog/view/theme/my-theme/stylesheet/stylesheet.css
catalog/view/theme/my-theme/image/*.png
catalog/view/javascript/bootstrap4/*

The template folder only needs twig files which are different from the default twig files. If your theme doesn't contain a certain twig template file it will fall back to the default one. You will at least need a modified catalog/view/theme/my-theme/template/common/header.twig for your theme because of e.g. using bootstrap4.

In the admin backend, all you have to do is to keep the store default theme, just change the theme folder to your new my-theme.

Thanks for clarifying and sharing your experience about hierarchy in themes. So there is no xml or json kind of file where you store theme related info like name, version or anything which is then used by OC to show info about theme (say in admin panel) ?

BTW, I need to add here that BS3 to BS4 migration will need significant changes , will not just work switching form BS3 to BS4 Css. I hope in upcoming version, OC uses some lighter frontend framework.

Besides, I have edited my first post, wanted to say that default theme with BS3 is not lite (and add with Jquery), have you ever looked into pureCSS (purecss.io) by Yahoo. Its light and its built on approach where you add elements as needed. Although has most of the basic things already included. I will not suggest going to BS4 , rather we should wait for BS5 which is expected to be lighter and Jquery removed.

thekrotek wrote: ↑

Mon Apr 13, 2020 6:29 pm

If you already understand TWIG, PHP, CSS and other things, why you need a guide then? Any theme is just a bunch of files, which you can edit any way you want.

I understand but if you ever closely follow any popular open source project, then you will find that they have very comprehensive documentations, its one of the reason for the popularity as then developer can save their time by actually working on the part which they need instead of going through lots of code and understanding its flow. Most of them have documentation in WIKI format so that anyone with suggestion can edit it , which can be later reviewed and merged. I don't know system here yet but , for example, phalcon framework, they encourage members to contribute to docs a lot. Comprehensive docs means more future developers which means active project.

Lastly, I would like to add that a guide also helps you to know proper way of doing things in a system, otherwise even for greatest developer, it takes a good time to understand project properly.

JNeuhoff wrote: ↑

Tue Apr 14, 2020 4:08 pm

docs.opencart.com

Glad for sharing the link, me being so naive, can you point to the part where its talking about theme development.

IP_CAM wrote: ↑

Tue Apr 14, 2020 4:50 am

https://webocreation.com/blog/create-op ... -designer/

Thanks, will be going through it, currently in process of understanding the OC ecosystem.