In this article, I would like to share my thought of designing a Web 2.0 style website for Zen-Cart™ based websites, from the technical point of view.
Zen-Cart™, when you first download it, certainly didn't come with the best design. When you go to the showcase area, most of the sites there are looking pretty basic too (read: crappy). This situation apparently has given most new developers, probably you too, the image that Zen-Cart™ designs can only get so far.
The truth is not necessarily like that. Zen-Cart™ has a very good, structured architecture that it makes easier for programmers to design its module, while not making it too hard for designers to design how it looks. That is, if only both of these groups were willing to learn Zen-Cart™'s architecture.
This article is explaining step by step my approach to get my web 2.0 design to the sites I developed. Oh by the way, you might be using psd to html services, either by software or hand-made. I have never used that kind of service before, if you have, please do let me know if you feel like sharing the experience - I would really appreciate it.
Step 1: Find Examples in the right place
I don't usually look at other Zen-Cart™ sites for my examples, well, they don't even necessarily have to come from shopping cart websites to start with.
But if you are more comfortable with the other way around, you might want to look at Kuroi's Unofficial Zen Cart Hall of Fame this site got some really good examples there.
Step 2: Design it, cut it etc. the common procedure
I don't think I need to explain this. Design your site, then cut the design to their respected areas: Header, Top-Menu, Main-Page, Breadcrumb, Sideboxes, Footer.
Step 3: Look for each area's file location by looking up from their pattern (classname or id)
This is the hardest step where experience with Zen-Cart™ kicks in, and it kicks so hard on it.
There are two ways of making changes to your website, and both of them may be done simultaneously to achieve the best structured design possible.
- Change the design from the css file. The css file is located under includes/templates/YOUR_TEMPLATE/css folder, named stylesheet.css. To make this change you don't actually need to copy the file.
- Edit the file.
If the change can be done only at css level, then you don't need to know the file location, but what if you have to add / remove / edit the html? Then you will need to find the files containing the area you are looking to change. For this step you will need at least these two software.
First, a text editor where you can look for strings inside multiple files and folders like Dreamweaver or Notepad++ I used the free Notepad++ by the way.
And second, a site debugger where you can easily find a position of certain area in a page, I use Mozilla Firebug for this.
You use these two software above to lookup for an id or classname of a tag inside the files inside includes/templates/template_default/ folder.
After you found the correct position, you can copy the file in question to includes/templates/YOUR_TEMPLATE/ folder and make the changes there.
Step 4: Make the changes to the copied file(s)
It is not an issue when the file you are looking to edit is not a sidebox.
With sideboxes, Zen-Cart™ put the output html inside a $content variable, so you will need to change it from there.
This is the important point:
Zen-Cart™ came with several useful server side functions to use in your website, but unfortunately the documentation (if any) is not shown to people not within the development team. This makes it hard to look for a function, you need to know where exactly the functions you need to use used in your site, then copy them and configure them to match your need.
The reason I was telling you that was there are also time when we need to draw objects such as inputs and anchors, which, by Zen-Cart™ standard are generally drawn with server functions.
We want to be able to follow these functions whenever possible, to avoid anomalies if we bypass them. For example if we write down the link directly instead of using zen_href_link we will end up with a page with a broken back link.
These are some functions I often used, look for more detailed version in your includes/functions/ folder:
- zen_href_link to write down the href attribute inside an anchor(a) object.
- zen_image to draw images.
- zen_draw_input_field, zen_draw_checkbox_field, etc. these are functions to draw input objects on your Zen-Cart™ sites.
The functions above are all available inside includes/functions/html_output.php file. I also use a lot of functions inside function_lookups.php and function_general.php, you might want to take a look at them.
Step 5: Change the text from inside languages folder
Zen-Cart™ standard architecture put all the variable text inside includes/languages/ folder. To change a text, lookup for that text inside that folder, copy the file into an override folder, for example includes/languages/english/YOUR_TEMPLATE/ folder to override english folder.
You do this overriding things because you do want to minimise the lost any changes when you upgrade your Zen-Cart™.
Step 6: Get the modules you need.
If you can do the five steps above correctly, you will most likely end up with a dynamic, well structured Zen-Cart™ site. But that might still not enough if you want your site to stands out. You might need to add off-the-standard functionalities to your website.
You can do that by downloading and installing modules to your site. If the modules you are looking for are not available, you can create one if you have enough programming skill (do not forget to follow the guidelines I wrote here) or post up a commercial request on the forum.
Or, well, if you are looking for more advanced module and you want the best result, you can get a professional software developer who understands Zen-Cart™. You can look for them in the forum by looking at the posts, usually they are giving advice. There are quite some of them there, including me.
I hope this article helps. If you ever need more help, questions are welcomed through private message and threads (my forum name is Jaycode). Thank you for reading this article.
