This dummie's guide to customizing my first Zen Cart

[Servelan]

After five failed attempts to get my site up and running and looking like I wanted it to, I thought it might be handy to write down my experience and what I did.

Tools I used: FileZilla, a folder on my desktop dedicated to temp test files, my browser, Notepad and a copy of the overrides chart from here: http://www.zen-cart.com/index.php?ma...roducts_id=298 .

First of all, I downloaded the latest code bits. I unzipped them locally, and made the folder and subfolders/files read only too so I couldn’t overwrite the originals with anything I’d modified and thus always had a pristine copy in case I messed something up.

Second, I read this tutorial on installing: https://www.zen-cart.com/tutorials/i...hp?article=107 , followed by this one on security: http://www.zen-cart.com/wiki/index.p...ecommendations (I left the download folder, but removed its contents except for the .htaccess file, and disabled downloading via the admin console), then this one: http://www.zen-cart.com/wiki/index.p...ing_From_Hacks just in case there was something else I could batten down. This tutorial: http://www.zen-cart.com/wiki/index.php/Troubleshooting might also be very useful to have on hand. Note that immediately after you install, if you try to use the admin console, you get two very loud warnings to the effect of: ‘OMG, you haven’t renamed your admin folder!’ and ‘OMG, you haven’t deleted your install directory!’ and won’t be able to proceed until you fix those two things. Zen Cart doesn’t like being able to write to the configure.php file, either.

Third, I looked at a lot of free templates (even though I did pay for one I found so as not to have to put the designer’s credentials on my page) to find one that looked like I wanted my site to look. If you Google ‘Mistik Zen Cart template’, you’ll see the template I used; my site, however, looks a bit different: fiddly-bits.com/shop . How I picked the template for my site was by looking at the general components used in the template. The one I chose had headers and footers on the sideboxes, and this was something I wanted to use. Since I didn’t want to use the same images and color scheme, I just copied the stylesheet.css and began customizing my site with that and the other pertinent files called out via various tutorials. I don’t know if that works for all templates, but it worked in my case.

Fourth, I looked for the tutorials/posts on getting rid of the ‘Congratulations’ message, the logo, and the breadcrumbs on my main page, and in the Admin control panel, removed all the sideboxes I didn’t want to have showing. These are all easily found by searching the forum and wiki.

Fifth, I went looking for how to get rid of the browser bar Zen Cart! blurb because like everyone else, I wanted to brand my site with my company name.

This presented a problem. Try as hard as I could I couldn’t make the thing change. I got one very good bit of advice from Stevesh about one part of what fixed it for me, which is to make all the folders for the override system from the get-go. I used the overrides chart to make folders in all the indicated places and started putting copies of my modified meta_tags.php, the file that tutorial #17 says should do the trick after tweaking, in each of ‘my’ folders, starting at the top of the structure and working on down. After four iterations of copying files and looking to see if anything changed, and nothing had changed, I said to heck with it and went searching to see if I could find another method. I found this information: http://www.zencartoptimization.com/2...d-consider-it/ and when I followed it, I immediately had a changed browser bar, so perhaps that’s an alternative method you could use if you can’t get the ‘usual’ method to work.

I was advised to ‘invoke’ or ‘use’ the override system, and while it was clear to experienced users, it wasn’t to me until after I used the overrides chart as a guide to where to put my customized folder, and made a custom template, that all the pieces fell together.

Customizing your site seems to need two things: a template_info.php file you make to tell the system ‘Hey! I’m using my stuff, here! Look at my file and ignore the default stuff!!’ plus the file folders in which to put any files you modify.

When you make the folders into which to put your modified files, the one under /includes/templates will have other folders, based on this tutorial on making a customized template: https://www.zen-cart.com/tutorials/i...hp?article=142 .

All the ‘custom’ folders referred to in the tutorials are your template folder. If you want to make your own customizations, even if you don’t use a whole template set (I used just the .css file from the template I used) you want to give the template name, and the folder name, something unique, like ‘style1’ or ‘mystyle’ or something that will differentiate it from the classic and default folders and their contents. From the admin console, you can then select your custom template (under Tools), which should show up with the name you gave it in the template_info.php file. When you make a customized template, if you don’t have a screenshot specified in the template_info.php file but try to look at the preview, you will get an Access Denied! message; ZenCart can’t find the file, so you can’t look at it, so it <obviously> must be forbidden, according to Zen Cart.

When I customized my site style-wise, I found this method worked for me:

§ Invoke FileZilla and navigate to my Zen Cart site.
§ Open up my temp/test folder, and point my local FileZilla folder to my temp/test folder.
§ Open up my browser to my Zen Cart site.

Then:

As I read through the forum and tutorials to find the changes I wanted to make, I would download the file I needed to modify from my site to my local temp/test folder. I would then rename the file out on my site as orig.filename or old.filename so that I still had a good copy I could fall back on if my change broke something or looked like crap.

I tried to change only one thing at a time, although as I got more into some files and recognized what I wanted and didn’t, sometimes I’d change more than one thing IF I knew that the change wouldn’t break anything, like changing a color or how many pixels something was spaced from something else. I’d change the file in question in Notepad, then close it, still in my temp/test folder, and upload it with FileZilla to my site (if you use an editor like Word, it adds formatting that will break functionality). Then, in my browser, I’d hit refresh to see how the change looked or what broke. By doing only one thing at a time, it took a bit longer, but I was able to easily back off any changes I made that messed things up, and fine-tune the things I wanted to.

If you are following a tutorial and things don’t seem to work correctly, some things I found were common causes:

§ Not escaping a quote in a word like Johnson’s or it’s like so: Johnson\’s or it\’s.
§ Not putting a modified file in the right place. The hierarchy of override file folders helps with this.
§ Modifying one of the core files – one of the causes of the occasional blank page, as though your site’s disappeared
§ Tutorial was written for a different version than the one you’re using and functionality’s changed.
§ The file you’re modifying doesn’t affect what you think it does.

[stevesh]

Good tutorial. The only thing I'd disagree with is #3 here:

Modifying one of the core files – one of the causes of the occasional blank page, as though your site’s disappeared

There's no problem with editing core files other than the fact that they may be overwritten during a version upgrade, removing your changes.

Blank pages are most commonly caused by #1 (not escaping special characters in defines) and especially by edting PHP files in a WYSIWYG editor (like Dreamweaver) which adds extra characters and/or lines to the end of the file.

[gjh42]

Also, this

I would then rename the file out on my site as orig.filename or old.filename so that I still had a good copy I could fall back on

can be dangerous. Some files will be loaded even if you change their filename, giving unexpected results or errors. If you must keep a backup in the same folder, rename the extension or just add .bak like somefile.php.bak or stylesheet.bak.

[Vger]

rename the extension or just add .bak like somefile.php.bak or stylesheet.bak

Please note - if you rename .php files that way and they remain accessible from outside of your website and your site needs a PCI Scan then this will result in a fail.

My advice - keep any backups offline (on your PC), and not on the website itself.

Vger