Custom templates

[netteria]

Hi

What FAQ would you recommend for building a template from scratch?

Thanks
Slawek

[mafiouso]

https://wiki.oscommerce.com/index.php?title=Design_Technologies_and_Creating_Theme

if you find anything else please share it in this post.

 

i am finding it very hard to figure out (learn) how the new themes and layout works. where things are,  what does what. etc. i will figure it out (but i feel others wont)

i really think its important for devs. to focus help content like how to videos on the subject,  even if its a simple screen cap. of doing stuff so people can reference it.

without people being able to mod the looks of their site they wont use it.

i will try share what i can learn, and leave a end user guide to help the next person if i can.

(no disrespect intended, just feedback)

[freakystreakefc]

Maybe a set of YouTube tutorials would be ideal? Creating a theme from scratch and possibly a cover of the features within and how to use them. I'm sorry but the Wiki is not great, both hard to understand and in some cases using a different backend than that shown in the screenshots. 

[osCommerce-Official]

@Ivan Holbi please consider if you can upload a video of how a theme is created

[Yak39]

On 8/18/2022 at 7:31 AM, mafiouso said:

https://wiki.oscommerce.com/index.php?title=Design_Technologies_and_Creating_Theme

if you find anything else please share it in this post.

 

i am finding it very hard to figure out (learn) how the new themes and layout works. where things are,  what does what. etc. i will figure it out (but i feel others wont)

i really think its important for devs. to focus help content like how to videos on the subject,  even if its a simple screen cap. of doing stuff so people can reference it.

without people being able to mod the looks of their site they wont use it.

i will try share what i can learn, and leave a end user guide to help the next person if i can.

(no disrespect intended, just feedback)

I feel like I really need to second that. I find this editing system to be really not flexible. It would be really good to understand from a coding perspective and not from a WYSIWYG perspective, how a bottom-up theme can be built. Even though the grid offers good flexibility it takes quite some times for the Pros to get on board on manually adding and configuring widgets rather than setting their own designs directly from scratch on a local ide and with a json manifesto.
Do you plan to open up to this kind of tutorial or all the designers will be forced to work onto your tool? 
Looking at the themes structures from FTP, it seems like there's close to no information about it. 
The dynamic loading of the content via widgets is very clear, but having another way to edit both widget and the layout system would really be paramount.
 

[osCommerce-Official]

@Sergey Dunaev could you please comment here? 

[Yak39]

I am sure you guys are all very busy especially in these days of launching. Still it would be great to understand better your strategic direction on this.
On one hand it's clear that you are pushing for a system really reminiscent of WP's editor (no offense intended but the UI for the editor would still need more than some tweaks), on the other I'm puzzled by the coding structure.
I could clearly see that:

• some classes are still generated via html_output.php,
• most of the rest of the structure is made of widgets - for which having a design guide principle would really be useful to at least tweak into those without recurring to the endless tabs in the editor
• the widgets are then placed in the YII framework. I'm not familiar with this, either than it's V2 and seems like its frontend grid down the road is still a bit of a Bootstrap mod.

So just starting by letting understand some developers the folder structure and all the components and their location for the layout management would be already a good progress. Also understanding your intended rules of engagement for the community to possibly trying to support on the improvement on the UX of the editor, too would be great.

Edited September 1, 2022 by Yak39

[mafiouso]

it should be more user friendly not just just for devs. (WP simple)

after all, if a person cannot customise their store it wont be useable for them.  and a large share of users will be DIY people

the old OSC was easy to tweak and the design was simple to understand after playing around for a bit,  but i have spent a few days testing on this new layout and its VERY hard to understand what is going on

this is why i recommended an old OSC layout theme as a bridging example 

[osCommerce-Official]

11 hours ago, mafiouso said:

it should be more user friendly not just just for devs. (WP simple)

after all, if a person cannot customise their store it wont be useable for them.  and a large share of users will be DIY people

the old OSC was easy to tweak and the design was simple to understand after playing around for a bit,  but i have spent a few days testing on this new layout and its VERY hard to understand what is going on

this is why i recommended an old OSC layout theme as a bridging example 

Thats exactly why we have the theme designer and widgets. To make it easy to modify designs. To make it possible for non developers to do it. 

Developers are welcome to build their own widgets if they like and even share them in the App Shop. But everyone can now easily modify any page using the theme designer feature. 

Now, if someone wants to build a theme resembling old layout etc - they are very welcome to do it of course. 

However going to the old ways of constantly modifying things in the code is counterproductive and will lead businesses to the same problem of having heavily customised sites that no one can support but the original developer. 

We have seen problems like that times and times again, hence our solution with themes. 

[mafiouso]

11 hours ago, osCommerce-Official said:

Thats exactly why we have the theme designer and widgets. To make it easy to modify designs. To make it possible for non developers to do it. 

Developers are welcome to build their own widgets if they like and even share them in the App Shop. But everyone can now easily modify any page using the theme designer feature. 

Now, if someone wants to build a theme resembling old layout etc - they are very welcome to do it of course. 

However going to the old ways of constantly modifying things in the code is counterproductive and will lead businesses to the same problem of having heavily customised sites that no one can support but the original developer. 

We have seen problems like that times and times again, hence our solution with themes. 

thanks for your reply,

to clarify i am not saying the old code way is better... i am saying this new method is very hard to use and understand. and i have a decent i.t background, but i am still getting stuck. i may figure things out eventually. other people wont .

for example there are multiple parts of the admin pages you need to go back and forth from to build a theme, the editor, the menus, the catalogue etc. setting owners and attributes then finding its not working on the preview.

personally i am stuck right now.

 

[grumplestiltskin]

2 hours ago, mafiouso said:

 this new method is very hard to use and understand. <snip>

personally i am stuck right now.

Me too! I have been doing this for a while but right now I want to give up.

What would REALLY help is a basic configuration that comes out of the box with a single sales channel that has a similar look and feel to the 'old' osCommerce that we've been starting with for almost 20 years.

Right now I can't even get the store physical address to display correctly. I have tried editing the widget to no avail.

I can see all the benefits of being able to modify EVERYTHING, but if I can't figure out how to do it, then it's going to get very frustrating very quickly.

[freakystreakefc]

I'm having trouble too. With no proper instructions/tutorials available, it's so hard to understand. Having a tough time just trying to change the colour of a breadcrumb background. There's so many pages or sections that aren't labelled too well so it's tough to find the exact page you need. I could easily skin/customise the old osc and I know that this is completely new (and improved) over it but... it's too confusing and hard to get around and do what you want to do easily.

[osCommerce-Official]

Thank you all! 

Let's do this. Let's put typical questions "how to" here, and we will update Wiki with that info or point you to an existing article. 

[freakystreakefc]

How do I reskin/customise a template. There's so many options but no explanation on how to use those built into the theme designer. A video tutorial series would be ideal.

[osCommerce-Official]

9 minutes ago, freakystreakefc said:

How do I reskin/customise a template. There's so many options but no explanation on how to use those built into the theme designer. A video tutorial series would be ideal.

@Ivan Holbi could you please consider doing one?

[Yak39]

How to I work on a layout without using the onboard editor, and work directly from code?
How do I build a new widget or modify the code of an existing one?
 

[osCommerce-Official]

44 minutes ago, Yak39 said:

How to I work on a layout without using the onboard editor, and work directly from code?
How do I build a new widget or modify the code of an existing one?
 

Answer to the first question will come from @Sergey Dunaev

@Ivan Holbi could you please share a more detailed manual on how to work with the widgets?

[mafiouso]

my thinking is to just make a long ass youtube video guide, stating with a blank canvas and setting up a new store as a new user would. inc. a theme build and adding products.

then you can time link, or cut out sections to answer sub questions or link back in the wiki.

this will then generate new questions over missing help areas in times, and a new update video can be made addressing those at a later time.

youtube is good platform because you can go back and update, link and annotate the video 

[osCommerce-Official]

For the time being, did you have a chance to check this page:

https://wiki.oscommerce.com/index.php?title=Creating_Theme_from_Scratch

[Yak39]

2 hours ago, osCommerce-Official said:

For the time being, did you have a chance to check this page:

https://wiki.oscommerce.com/index.php?title=Creating_Theme_from_Scratch

Personally I did - while the step by step is sufficiently clear, I believe it's also a good draft to highlight some "issues":
look at figure 3: the numbers of menus to customize all the items via editor is really massive, and that's essentially for just a couple of CSS lines of code. That's why I believe the general view over here is that if you want to onboard pro designers you need to provide a clear file structure for a developer.
That goes especially for widget, where it feels like most of the design architecture is located there.
That said I also think no one here wants to criticize your choice on having an editor: to be the first time OSC has one I believe is quite impressive and a good compromise that is reminiscent of Divi on WP. But its flexibility and UX limit a lot probably a standard power user. For UI devs instead it's probably  quite limiting.
What is easier to fix to onboard more community? probably couple of lines to describe structure and components interaction to some developers? 😉

[osCommerce-Official]

4 hours ago, Yak39 said:

Personally I did - while the step by step is sufficiently clear, I believe it's also a good draft to highlight some "issues":
look at figure 3: the numbers of menus to customize all the items via editor is really massive, and that's essentially for just a couple of CSS lines of code. That's why I believe the general view over here is that if you want to onboard pro designers you need to provide a clear file structure for a developer.
That goes especially for widget, where it feels like most of the design architecture is located there.
That said I also think no one here wants to criticize your choice on having an editor: to be the first time OSC has one I believe is quite impressive and a good compromise that is reminiscent of Divi on WP. But its flexibility and UX limit a lot probably a standard power user. For UI devs instead it's probably  quite limiting.
What is easier to fix to onboard more community? probably couple of lines to describe structure and components interaction to some developers? 😉

@Ivan Holbi could you please check and comment?

[grumplestiltskin]

I also checked the wiki on creating a theme from scratch. I am just not there yet....

I know what has happened with this project as I am guilty of it myself... The development team knows this product so well that they cannot see it with 'outside' eyes. To them everything is logical, makes sense and is easy to use. From the outside, we do not have the understanding to appreciate this and rather we see something that is hard to use, complicated, and quite honestly, annoying. You guys have created a fighter jet and we are trying to learn how to fly it. Unfortunately we have only flown an old biplane and all the gizmos and functions are beyond us. We need to work up to it in stages.

As I suggested before, it might be helpful to create an old-style look and feel template so we can at least have a starting point that is familiar. I do not like the old-style, but I do understand it. If I can see the widget that is used to generate a certain feature, then I will be in a better position to learn, edit, modify, be happy, and sleep well.

O... and how do I create and edit a plain and simple home page? At present I can't seem to create a landing page that I can edit. I can create a page that is the landing, but I can't seem to edit the text. I can edit text on other pages though. I am also unable to get the store physical address to display.

[mafiouso]

5 hours ago, grumplestiltskin said:

I also checked the wiki on creating a theme from scratch. I am just not there yet....

I know what has happened with this project as I am guilty of it myself... The development team knows this product so well that they cannot see it with 'outside' eyes. To them everything is logical, makes sense and is easy to use. From the outside, we do not have the understanding to appreciate this and rather we see something that is hard to use, complicated, and quite honestly, annoying. You guys have created a fighter jet and we are trying to learn how to fly it. Unfortunately we have only flown an old biplane and all the gizmos and functions are beyond us. We need to work up to it in stages.

As I suggested before, it might be helpful to create an old-style look and feel template so we can at least have a starting point that is familiar. I do not like the old-style, but I do understand it. If I can see the widget that is used to generate a certain feature, then I will be in a better position to learn, edit, modify, be happy, and sleep well.

O... and how do I create and edit a plain and simple home page? At present I can't seem to create a landing page that I can edit. I can create a page that is the landing, but I can't seem to edit the text. I can edit text on other pages though. I am also unable to get the store physical address to display.

have to agree,

i could not figure out how to get the old category hierarchy showing left, now from my understanding it may need to be a widget that needs to be made first??
i was playing around with Magento for the first time for another job, and right out of the box it made sense (but i can also see what it lacks, that OSC4 has)

i think the key to success here is setup and learning time, if only experienced devs. can mod stores it narrows who can afford to build a websites using it (when there are so many basic ecommerce stores around with quick diy setups)
if uses cannot mod easy, it may be more important to have more out of box themes and stuff to get going?

 

[osCommerce-Official]

2 minutes ago, mafiouso said:

have to agree,

i could not figure out how to get the old category hierarchy showing left, now from my understanding it may need to be a widget that needs to be made first??
i was playing around with Magento for the first time for another job, and right out of the box it made sense (but i can also see what it lacks, that OSC4 has)

i think the key to success here is setup and learning time, if only experienced devs. can mod stores it narrows who can afford to build a websites using it (when there are so many basic ecommerce stores around with quick diy setups)
if uses cannot mod easy, it may be more important to have more out of box themes and stuff to get going?

 

You could add a block and put a vertical style menu into it. The menu would be populated by categories, for example. 

However often a better usability can be achieved by having menu aligned horizontally across the top of the page.  

[freakystreakefc]

On 9/7/2022 at 4:59 AM, grumplestiltskin said:

I also checked the wiki on creating a theme from scratch. I am just not there yet....

I know what has happened with this project as I am guilty of it myself... The development team knows this product so well that they cannot see it with 'outside' eyes. To them everything is logical, makes sense and is easy to use. From the outside, we do not have the understanding to appreciate this and rather we see something that is hard to use, complicated, and quite honestly, annoying. You guys have created a fighter jet and we are trying to learn how to fly it. Unfortunately we have only flown an old biplane and all the gizmos and functions are beyond us. We need to work up to it in stages.

As I suggested before, it might be helpful to create an old-style look and feel template so we can at least have a starting point that is familiar. I do not like the old-style, but I do understand it. If I can see the widget that is used to generate a certain feature, then I will be in a better position to learn, edit, modify, be happy, and sleep well.

O... and how do I create and edit a plain and simple home page? At present I can't seem to create a landing page that I can edit. I can create a page that is the landing, but I can't seem to edit the text. I can edit text on other pages though. I am also unable to get the store physical address to display.

This describes how most (I imagine) will be feeling when they attempt to start creating. I know that' s exactly how I feel. I'm beginning to understand a lot of how v4 works but it's still so frustrating to achieve even the most simple of tasks. Have to ditch my gogles in place of a fighter pilot helmet...