Feedback Wanted From Cs-Cart Theme Developers

Hello!

My name is Alexey Melekesov, and I am a CS-Cart front-end developer.
I want to make CS-Cart theme development and support easier. That’s why I’d like to ask you about the problems you face when you develop themes for CS-Cart. Any ideas about how those problems can be fixed are also welcome. There’s no need to restrain yourself: if you feel that you must swear about a certain problem, go ahead :)

It would also help me a lot if you answered the following questions. All comments concerning the questions are welcome.

1. When you develop a theme, do you…

a. develop it as a module;

b. clone the default theme;

c. change only the templates you need to change?

2. How do you add your own styles and js?

3. What directory do you use to store your fonts and images at?

4. Are there enough default icons in CS-Cart?

5. Please, rate from 1 to 5 how hard it is for you to find the template you need? (1 = very easy, 5 = very hard). Do you use debug mode to find the template?

6. What do you think about product_data.tpl? Should the code logic and the current capture approach be changed somehow?

7. Do you have any problems with variables in the templates?

8. Do you use the CS-Cart built-in debugger? Does it help you?

9. Do you have any problems with cm-* js microformats?

10. Do you have to create custom blocks? How do you create them: with static_template or through add-on schemes?

11. How and where do you store your theme’s demo data?

12. Are there any more functions you need in the Layouts section?

13. Do you create your own styles in the Theme editor? Are there enough settings for you? Do you add your own variables?

14. Do you use hooks?

15. Have you ever faced any problems when working with LESS?

Alexey Melekesov

CS-Cart Front-End Developer

I am not a style designer but we create our designs in house and hire developers to implement PSD to HTML.

One major area that is problematic is JS. Changing JS in one place/theme, affects behavior in multiple places and styles. A front end change even affects admin panel.

4. Are there enough default icons in CS-Cart?

it would be really useful to have font-awesome included so that we can use many icons without needing image files.

8. Do you use the CS-Cart built-in debugger? Does it help you?

It would be really useful if the debugger would make it easier to find slow queries.

On a related note: it would also be very useful if error reports would be visible in admin panel home.

I am not a style designer but we create our designs in house and hire developers to implement PSD to HTML.

One major area that is problematic is JS. Changing JS in one place/theme, affects behavior in multiple places and styles. A front end change even affects admin panel.

4. Are there enough default icons in CS-Cart?

it would be really useful to have font-awesome included so that we can use many icons without needing image files.

8. Do you use the CS-Cart built-in debugger? Does it help you?

It would be really useful if the debugger would make it easier to find slow queries.

On a related note: it would also be very useful if error reports would be visible in admin panel home.

Thank you for your response.
We know about difficulties with JS and think about moving the js directory to the directory with a theme.
4. We also consider the opportunity to replace standard icons with font-awesome. One question for now is the font size.
8. It is not difficult to find slow queries in the debugger now. To do it, open the SQL tab and find the Time column in the SQL queries table.

This all sounds good but if Cs-Cart cant fix their upgrade process its all for nothing.. We customize our theme with the built in theme editor yet every upgrade all of our layout and blocks are all messed up and have to redo it all again..

This all sounds good but if Cs-Cart cant fix their upgrade process its all for nothing.. We customize our theme with the built in theme editor yet every upgrade all of our layout and blocks are all messed up and have to redo it all again..

Can you please provide me with the link to backtracker/helpdesk/forum where these issues are described?

Illya, Can't speak to Jay's specific points, but the upgrade process in all of 4.3 has been a real mess. No one can find out what's changed on their site or have any way to get to the backed up data (because it has to be disabled for the upgrade to complete or removed by the most recent upgrade). Compression of backups hasn't worked for 3 of the 4 releases and we'll get to see what happens with 4.3.5.

You need to stabilize this process and NOT change it mid-stream in point releases. That's a reallly BAD idea. You also need to test things on larger data sets than the demo store. You guys have made a mint on helpdesk due to upgrade issues that are really NOT the merchant's fault.

Please stabilize this process. To me, the important points are:

1) backup/restore works properly to revert to prior version - even on large sites of 5+GB of file data.

2) Ability to compare any past merchant state with the currently installed (or optimally to-be-installed) version.

3) As a PLUS, ability to compare changes BEFORE an upgrade so someone know whether they have a 1hr task ahead of them or days.

4) Another plus would be to have a DB only upgrade process. The idea is that the upgrade would be done in a dev structure, then when stable, upgrade the DB to current and copy the file structure from the dev site to production.

5) Ideally, can upgrade from any release to a more current one in one step. I.e. if I'm on 5.0.1 that I can upgrade to 5.3.5 in one step (one step from merchant's perspective even if upgrades are internally applied sequentially).

5) Ideally, can upgrade from any release to a more current one in one step. I.e. if I'm on 5.0.1 that I can upgrade to 5.3.5 in one step (one step from merchant's perspective even if upgrades are internally applied sequentially).

This!

I've come back to CS-Cart after a couple of years away doing other sites, mainly Shopify ones.

As a whole their product is inferior to CS-Cart but for template development the new Timber framework they've developed is really good for responsive work and is incredibly easy to use compared to what we have in CS-Cart.

The biggest issue I have with developing in CS-Cart is the documentation. After being away I need to refresh my memory but the documentation is dis-jointed with many broken links and links pointing to completely unrelated subjects.

I basically just clone a theme and then make all the changes I need directly to the files and generate diff sheets so I know what's changed for any future updates.

I've come back to CS-Cart after a couple of years away doing other sites, mainly Shopify ones.

As a whole their product is inferior to CS-Cart but for template development the new Timber framework they've developed is really good for responsive work and is incredibly easy to use compared to what we have in CS-Cart.

The biggest issue I have with developing in CS-Cart is the documentation. After being away I need to refresh my memory but the documentation is dis-jointed with many broken links and links pointing to completely unrelated subjects.

I basically just clone a theme and then make all the changes I need directly to the files and generate diff sheets so I know what's changed for any future updates.

Thank you for your feedback!
We'll look into creating our own framework for theme developers.
I know that our documentation needs considerable rework. We're working on it, albeit it may take some time.

I've come back to CS-Cart after a couple of years away doing other sites, mainly Shopify ones.

As a whole their product is inferior to CS-Cart but for template development the new Timber framework they've developed is really good for responsive work and is incredibly easy to use compared to what we have in CS-Cart.

The biggest issue I have with developing in CS-Cart is the documentation. After being away I need to refresh my memory but the documentation is dis-jointed with many broken links and links pointing to completely unrelated subjects.

I basically just clone a theme and then make all the changes I need directly to the files and generate diff sheets so I know what's changed for any future updates.

We would greatly appreciate your feedback on theme development docs: http://docs.cs-cart.com/4.3.x/designer_guide/index.html

Really, NairdaCart if you can send the problems you faced during revising your knowledge that would help us to improve the docs.

P.S. we are excited to have you back:)

A well thought out framework for theme developers would be great. It works well for other platforms.

Illya, Can't speak to Jay's specific points, but the upgrade process in all of 4.3 has been a real mess. No one can find out what's changed on their site or have any way to get to the backed up data (because it has to be disabled for the upgrade to complete or removed by the most recent upgrade). Compression of backups hasn't worked for 3 of the 4 releases and we'll get to see what happens with 4.3.5.

You need to stabilize this process and NOT change it mid-stream in point releases. That's a reallly BAD idea. You also need to test things on larger data sets than the demo store. You guys have made a mint on helpdesk due to upgrade issues that are really NOT the merchant's fault.

Please stabilize this process. To me, the important points are:

1) backup/restore works properly to revert to prior version - even on large sites of 5+GB of file data.

2) Ability to compare any past merchant state with the currently installed (or optimally to-be-installed) version.

3) As a PLUS, ability to compare changes BEFORE an upgrade so someone know whether they have a 1hr task ahead of them or days.

4) Another plus would be to have a DB only upgrade process. The idea is that the upgrade would be done in a dev structure, then when stable, upgrade the DB to current and copy the file structure from the dev site to production.

5) Ideally, can upgrade from any release to a more current one in one step. I.e. if I'm on 5.0.1 that I can upgrade to 5.3.5 in one step (one step from merchant's perspective even if upgrades are internally applied sequentially).

I agree with the Above Points but also want to add few More Points.

1) When you provide the Upgrade through Upgrade Centre. it is Viable only to the website where the Traffic is very less and can be made offline for 1 hour to upgrade it but when you touch the Sites with DB Size is more than 5GB and any time users are live is approx. 100 so you cannot make it offline for 1 Hour. So need Manual Package to upgrade also with only changed files Details and Changed DB Structure Details to ease out the things.

In regards to point 4:

It would be helpful if there was a quick and easy way to add custom icons fonts like Font-Awesome, PaymentFont, etc. Or if more such libraries are included.

Yes, definitely more icon fonts built-in as a select-able library.

I also hate that cs-cart has hard-coded the smarty truncate command into the templates. It needs to be pulled out into a config setting. On every cs-cart site I have done I have had to modify the template to allow a longer product name. Let the store owner choose the length of the product names NOT cs-cart.

And I hate that I have to modify the product template to move items around. Some clients want the description at top, some at bottom, some don't want sku, etc. All the product items should be easily relocatable without having to modify a template! All product items should be controllable (on or off) without having to modify a template!

In regards to point 4:

It would be helpful if there was a quick and easy way to add custom icons fonts like Font-Awesome, PaymentFont, etc. Or if more such libraries are included.

Yes, definitely more icon fonts built-in as a select-able library.

Right now we are trying to decide which icon font should be used in framework theme.

From one side - it should be Font-Awesome, but it weights ~100kb

from other side the native bootstrap font weights only ~20kb but has not enough icons.

We care about font size because front-end performance is important.

First we will try to implement both fonts, so developer will be able to select which one should be used. But not sure if this will work, there could be some problems because of icons padding. We will check this out.

At the moment priority #1 is Font-Awesome.

I also hate that cs-cart has hard-coded the smarty truncate command into the templates. It needs to be pulled out into a config setting. On every cs-cart site I have done I have had to modify the template to allow a longer product name. Let the store owner choose the length of the product names NOT cs-cart.

And I hate that I have to modify the product template to move items around. Some clients want the description at top, some at bottom, some don't want sku, etc. All the product items should be easily relocatable without having to modify a template! All product items should be controllable (on or off) without having to modify a template!

1. Truncate command - accepted, will try to find more developer-friendly solution. Thank you.

2. Product Main Content - why don't you just create a new template instead of default_template.tpl and set it as default at Settings -> Appereance?

2. Product Main Content - why don't you just create a new template instead of default_template.tpl and set it as default at Settings -> Appereance?

That is exactly what I do, I end up creating several new templates for every client. But I prefer if this adjust-ability was built in. Creating a new template just to turn a feature off or just to move a field to another location on the same page seems inefficient.

David

Right now we are trying to decide which icon font should be used in framework theme.

From one side - it should be Font-Awesome, but it weights ~100kb

from other side the native bootstrap font weights only ~20kb but has not enough icons.

We care about font size because front-end performance is important.

First we will try to implement both fonts, so developer will be able to select which one should be used. But not sure if this will work, there could be some problems because of icons padding. We will check this out.

At the moment priority #1 is Font-Awesome.

Why is this a consideration? There is no reason why it needs to have any effect on performance. If the webmaster can simply select which font icons he wants to activate then CS-Cart will only load the needed fonts.

This is exactly why a style framework is useful. Let webmasters turn on the things they need and let them turn off what they do not need.

BTW: The size of font-awesome download is 90kb but with correct gzip compression it only loads 6kb. Once loaded its cached.

Hello Alexey,

actually I have seen you are also contributor for the cs-cart boilerplate theme.

Let me give some points for your request in the first post.

First of all it is a pleasure to see that cscart finally had made the step to a bootstrap theme. I remember me having given this idea to the cscart team by the bugtracker as idea about ~2 years ago. One big issue cscart has is its lack of available Themes. Themeforest for example has a ton of other shopping software themes, but for cscart it really looks bad. This situation is still in place. So a logic way to solve this is giving a theme to the community which is easy to use and can make use of allready available Themes / Snipets, like bootstrap.

Regarding the questions:

1. We clone the theme, and try to use hooks > tpl files for chcanges. (we try to make as less changes as possible so they still can work with updates)

2. By hooks including our custom .less or .js

3. Fonts: design/themes/{theme}/media/fonts/addons/*, for Images we would prefer the design/themes/{theme}/media/images/addons folder, however cscart sometimes does not give support for it, like the php fn_generate_thumbnail function, which requires a path in maindir/images.

4. Think so

5. We search the templates for the css classes shown in the html code. However this is SSH based, so this is more of a non-common way people will do it or being able to do.

6. product_data.tpl: I am actually looking into product_data.tpl again for redesigning the Product Page. Here is my thought: I really would wish I could use the Drag & Drop Editor for changing the Structure of the Product Page. Block for the img, different price titles, buttons & Tabs Area. Its much more intuitive and developer friendly. Maybe thats only for me but I really like the Drag & Drop system - so why not using it also for positioning of that sub-elements. Same goes for Category Pages.

7. No

8. We do not use it often, only for php/mysql debug stuff, but its rare.

9. No, they are very usefull

10. Not sure on this

11. We create a new theme so it is stored in the default Demo Theme.

12. Please refer to #6, We would love to see blocks available for designing category Page and product Page. Another huge plus would be the support for more dynamic grids like 24 or 32 Grid. The 12 and 16 Grids have some disadvantages regarding spaces between elements. Sometimes you want 1/3 1/3 1/3 which only works for the 12grid, but than you also want some kind of splitment which only works for the 16grid.

13. Yes we create custom. We would wish more flexibility for the Color Selector, like transparency.

14. We prefer hooks ofer tpl changes.

15. If using a custom schema.json, the new variables are required to have been set in theme editor before putting them in less file, otherwise throws error because they have no value yet.

Kind regards