Post by Saahib » Sun Apr 12, 2020 2:30 am

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 ?
Last edited by Saahib on Tue Apr 14, 2020 3:07 am, edited 1 time in total.

New member

Posts

Joined
Wed Apr 01, 2020 10:34 pm

Post by Saahib » Mon Apr 13, 2020 6:00 pm

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

New member

Posts

Joined
Wed Apr 01, 2020 10:34 pm

Post by thekrotek » 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.

Professional OpenCart extensions, support and custom work.
Contact me via email or Skype by support@thekrotek.com


User avatar
Expert Member

Posts

Joined
Sun Jul 03, 2016 12:24 am


Post by letxobnav » Mon Apr 13, 2020 6:56 pm

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.

Crystal Light Centrum Taiwan
Extensions: MailQueue | SUKHR | VBoces

“Data security is paramount at [...], and we are committed to protecting the privacy of anyone who is associated with our [...]. We’ve made a lot of improvements and will continue to make them.”
When you know your life savings are gone.


User avatar
Expert Member

Posts

Joined
Fri Aug 18, 2017 4:35 pm
Location - Taiwan

Post by straightlight » Mon Apr 13, 2020 7:12 pm

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.

The most generated errors being found on Opencart forum originates from contributed programming. The increased post counters are caused by redundancies of the same solutions that were already provided prior.


Regards,
Straightlight
Opencart.com Administrator / Quality Assurance Analyst / Programmer / Opencart Tester


Legendary Member

Posts

Joined
Mon Nov 14, 2011 11:38 pm
Location - Canada, ON

Post by JNeuhoff » 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.

MHC Web Design
Override Engine * Integrated VQMod * Unused Images Manager * Instant Option Price Calculator * Number Option * Google Rich Snippets * Google Tag Manager * Export/Import Tool * SpamBot Buster


User avatar
Expert Member

Posts

Joined
Wed Dec 05, 2007 3:38 am


Post by straightlight » Mon Apr 13, 2020 10:06 pm

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 ... :ponder:

The most generated errors being found on Opencart forum originates from contributed programming. The increased post counters are caused by redundancies of the same solutions that were already provided prior.


Regards,
Straightlight
Opencart.com Administrator / Quality Assurance Analyst / Programmer / Opencart Tester


Legendary Member

Posts

Joined
Mon Nov 14, 2011 11:38 pm
Location - Canada, ON

Post by JNeuhoff » 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.

MHC Web Design
Override Engine * Integrated VQMod * Unused Images Manager * Instant Option Price Calculator * Number Option * Google Rich Snippets * Google Tag Manager * Export/Import Tool * SpamBot Buster


User avatar
Expert Member

Posts

Joined
Wed Dec 05, 2007 3:38 am


Post by straightlight » Mon Apr 13, 2020 11:31 pm

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.

The most generated errors being found on Opencart forum originates from contributed programming. The increased post counters are caused by redundancies of the same solutions that were already provided prior.


Regards,
Straightlight
Opencart.com Administrator / Quality Assurance Analyst / Programmer / Opencart Tester


Legendary Member

Posts

Joined
Mon Nov 14, 2011 11:38 pm
Location - Canada, ON

Post by Saahib » Tue Apr 14, 2020 3:20 am

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.

New member

Posts

Joined
Wed Apr 01, 2020 10:34 pm

Post by Saahib » Tue Apr 14, 2020 3:29 am

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.

New member

Posts

Joined
Wed Apr 01, 2020 10:34 pm

Post by IP_CAM » Tue Apr 14, 2020 4:50 am


Please don't send me OC Forum Personal Messages, just contact: jti@jacob.ch
---
OC 1.5.6.5 LIGHT Test Site: http://www.bigmax.ch/shop/
OC 1.5.6.5 V-PRO Test Site: http://www.jacob.ch/shop/
My Github OC Site: https://github.com/IP-CAM
2'600+ FREE OC Extensions on the World's largest Github OC Repository Archive Site.


User avatar
Legendary Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland

Post by Saahib » Tue Apr 14, 2020 6:01 pm

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.

New member

Posts

Joined
Wed Apr 01, 2020 10:34 pm

Post by Saahib » Tue Apr 14, 2020 6:02 pm

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

New member

Posts

Joined
Wed Apr 01, 2020 10:34 pm
Who is online

Users browsing this forum: No registered users and 10 guests