X-Cart forums

[idesign123]

I just finished my first x-cart site and learned a LOT.
Many people on this forum have taken time to help me so, despite my busy schedule, IБ─≥m taking a moment to post some advice, specifically targeted to designers (like myself).

BACKGROUND:

I have very strong skills in traditional HTML. I can produce nearly any cosmetic effect via complex tables, Javascript, CSS, DHTML, etc. I can also install most CGI scripts, and have connected websites to some basic 3rd-party credit card processors. Basically, I thought I was pretty hot stuff coming into this and figured that learning x-cart would not be very difficult. Unfortunately, I got in way over my head on several issues and this project took MUCH longer than I anticipated. Now (nearly) everything is working perfectly and I am writing here the things I *wish* I knew when I started. Hope this helps someone!

IS X-CART RIGHT FOR YOU?

Probably a dumb question since you obviously just bought it. But I thought IБ─≥d start here. Until this project, I had only used Б─°3rd-party credit card processorsБ─² and did all the product pages in HTML. If you only have a few products, and/or donБ─≥t need the fancy x-cart extras like voting & recommended products, you may want to stick with this option. OR try the new LiteCommerce. I havenБ─≥t tried it myself, but it looks like a good solution for designers that just need the shopping cart function. Check the comparison chart though Б─⌠ x-cart had a couple features Lite-Commerce didnБ─≥t (though you may be able to buy an add-on module). As far as the competition, IБ─≥m not familiar with most of them. I do have some experience with MIVA Merchant and HATED it Б─⌠ unlike x-cart, it is not open source. You have to buy a module for every stupid tweak you make, and editing the HTML is a nightmare. X-Cart is open source so you can edit HTML to your heartБ─≥s content. Now that I (finally) know what IБ─≥m doing, I really like this program.

SETTING UP THE CART

Before diving into the cosmetics, do a very basic setup of the cart. Log into your control panel & modify your profile (lower right).

Click General Settings (right menu) and edit the things you know already. There is a popup menu at the top of this page that leads you to other important things to customize. You can turn off unwanted modules for example.

Oh, and if you haven't yet, change your password from the default one. Apparently some evil-doer is poking around trying to get into sites who haven't changed their password yet.

Setting up shipping is a pain (you have to do adjust settings in a million places). Do a search on this forum before starting - you have a lot of options. As a last resort you could do "Flat Rate" (not live) shipping - I wrote a summary post on this entitled "Tips for Flat Rate Shipping".

There are a lot of other things you will need to set up to get the cart to function correctly. You'll have to find that info elsewhere on the forum (try the FAQ first). My post is mainly on how to edit the template files!

EDITING TEMPLATES

Ok, so you want to start editing the cosmetics of the siteБ─╕

If you like the default x-cart layout and just want to tweak the color scheme & text, all you have to do is edit the CSS file and change some text.

- The CSS file is probably located in skin1 > skin1.css. You can get it via FTP or by clicking Б─°Edit TemplatesБ─² (right menu of your control panel)

- Text for the entire site (paragraphs, error messages, etc.) can be found in Б─°LanguagesБ─² (right menu of control panel).

- The default images are located in skin1 > images (swap out however you want).

Sounds good, but I know you Mr. Designer. You want to totally redo the cosmetics of X-Cart. You have a Photoshop file approved (that looks nothing like X-Cart) and need to know where to start.

- YouБ─≥re going to spend a lot of time in the Б─°skin1Б─² directory. These Б─°.tplБ─² files are what control the cosmetics of all the pages. Most of your files are located in Б─°skin 1 > customerБ─² and Б─°skin 1 > customer > mainБ─²

- You will also notice a directory called Б─°skin 1_originalБ─². DonБ─≥t edit anything in here. These files are copies of the original .tpl files so you can restore if you really mess up. I actually make a local backup every time I edit a file. All it takes is one mis-step and your file is ruinedБ─╕ and itБ─≥s easier to restore from a recent file than from the original.

LetБ─≥s edit something!

- In skin1 you will see a file called Б─°bottom.tplБ─². This is one of the easier files to edit so IБ─≥m starting there.

* If you are using an HTML editor like Dreamweaver or GoLive, do a search on this forum for advice before proceeding (I wrote the GoLive one).

- Looking at the bottom.tpl code youБ─≥ll see your good friend HTML (hooray!). The only exception is a couple Б─°SmartyБ─² tags like {include file="copyright.tpl"}. X-cart has a default copyright notice in there. If you donБ─≥t need it, delete it. In fact you can delete this entire table and replace it with the page bottom you lovingly created. Upload, refresh your site and youБ─≥ll see your new footer (woo hoo!).

Ok, I know youБ─≥re excited to get going now but here are a few more thoughtsБ─╕

- The main files for your page are Б─°header.tplБ─², Б─°bottom.tplБ─² & Customer > Б─°home.tplБ─².

- Home.tpl has some important includes. Make sure you don't delete anything important. When deleting things you don't want, make sure to include the entire code block including any {if} {else} stuff. This is a good file to test after each step.

- Home.tpl is your road map to the other files to edit. You can see for example that the cart template is Customer > Б─°menu_cart.tplБ─² (one of the more difficult to edit files by the way.

- Sometimes you can figure out what the tpl file is by looking at the URL at the page (look for a tpl file that ends in the same word as the one after the question mark). ItБ─≥s not foolproof but helped me a few time. If all else fails, start back with home.tpl and follow the trail of includes till you figure it out (or search the forum).

- If you need to add anything to the <head> area, add it into the home.tpl file (this has the header for most of the pages). If you add Javascript you have to put {literal}{/literal} around it.

- I was told by someone to have the code flush left (no indents) and donБ─≥t use comment tags. DonБ─≥t know if thatБ─≥s needed, but I did it just in case.

- If you want to add extra fields to your product detail pages, do some reading on the subject of Б─°Extra FieldsБ─². ItБ─≥s a pretty cool option.

- Adding new pages (about us, etc.) is not intuitive (unless IБ─≥m missing something). They want you to add a section to the help menu (though you can grab the code & move it wherever you want. Do a search on the subject of adding pages if you need to do this.

- The default home page is index.html - you can replace this with your own index.html, or change it into a redirect (the most Google-friendly redirect would be a "301 redirect" placed in an htaccess file - do a search on this forum or the internet to learn how to do that one).

- The template for the main cart page (customer/home.php) is "welcome.tpl" (in Customer > Main). It took me a long time to find that one (brain cramp)

- The main template for product pages is customer > main > product.tpl (if I remember right).

- The main checkout pages are "cart.tpl", "anonymous_checkout.tpl" & "checkout.tpl" (again, if I'm remembering right).

IF YOU GET STUCK

This forum will become your best friend (if youБ─≥re trying to redo the cart cosmetics). Before you post, do a search on the topic. Chances are that someone has posted the answer already.

If you need help (and canБ─≥t find the answer), feel free to post. Make sure to put your x-cart version & platform in your signature - a lot of the solutions depend on the version youБ─≥re using.

People on the forum bailed me out several times on this project (not to mention the answers I got by reading other peopleБ─≥s posts). Be polite & donБ─≥t take advantage of their generosity. If they spent a LOT of time on your specific problem, consider pmБ─≥ing them and offer a small Paypal donation (optional).

And if you find the answer to a problem that had been plaguing you, please post it! Many people will be reading your posts later and be grateful you took a few minutes to help them.

FINDING A PARTNER

This letter has been addressed to designers and/or people who (like me) know a lot about HTML, CGI, etc. but are relatively new to shopping carts. DonБ─≥t assume youБ─≥re superman Б─⌠ you may get stuck and need help.

My primary partner is Lee of webmouster.com. HeБ─≥s based in the UK (and IБ─≥m in California) but the distance hasnБ─≥t been a problem at all. I found him by posting a pathetic cry for help in the Б─°Professional HelpБ─² section, and he has bailed my sorry butt out several times now (nice guy too - I had to think twice about posting his name since I don't want him to get totally swamped like some of the other pros)

I have heard great things about the Moderators Б─⌠ Boomer, shan & funkydunk. They were unavailable when I was in crisis mode (theyБ─≥re probably booked up doing x-cart work). If I ever managed to stump Lee, IБ─≥d likely ask one of them for help. Oh, and I have bought a few x-cart mods from them. Several x-cart users have created mods for x-cart and they are conservative about mentioning them (you can usually find links to mods in their signatures). These mods generally donБ─≥t cost much and have come in handy for me a couple times.

And donБ─≥t forget about the X-Cart team (in Russia)! IБ─≥ve given them a couple difficult modification requests and they were able to do some really cool things. Their prices are also very competitive.

If you need help, you can also post your needs in the Б─°Professional HelpБ─² section and someone may respond to your post.

I guess what IБ─≥m trying to say here is to think about what youБ─≥d do if you got stuck (and if youБ─≥re trying to totally redo the cart cosmetics from scratch you will get stuck). Try the forum first, but if you need help itБ─≥s nice to have someone you can contact. Ideally you would start out with a small request (not under pressure) instead of waiting till youБ─≥re in the depths of despair (like I did).

SUMMARY:

Customizing X-cart cosmetics is relative easy once you know what files to edit. ItБ─≥s all open-source and logical once you get used to the logic.

Know your resources Б─⌠ forum, x-cart support team, mods you can buy, and/or professional help.

Hope that helps someone!

:Stacey

* if this helped you, please make a post when you have a Б─°Eureka!Б─² moment. It may be me that needs the information.

[B00MER]

Stacey,

Thanks for taking the time out of your day to post a good walk-through for those who are newbies to x-cart and lite commerce, it defiantly helps alot of people!

I would agree that more of these kinds of postings should start to appear here on the forum, really giving those out there a valuable resource when diving into a new product. The more details and information you have the better you a prepared and know what your limits are when planning.

Couple of notes I'd like to add:

After I've cut my photoshop template up into an html file, the first thing I will do is copy all of my images/ into skin1/images/ on my server. I will then proceed to edit my .html file and replace all instances of images/ with {$ImagesDir}/ this will make it fairly easy for me to copy and paste my .html into the .tpl's for later use.

The two first file I most ALWAYS edit are:
skin1/head.tpl and skin1/customer/home.tpl

These files are pretty much the "core" of the customer side as well as the header for the top part of your store.

After a bit of editing and re-arranging I will then proceed to edit skin1/skin1.css and make proper adjustments to this as I see fit.

From here on is where I either go deeper into more .tpl files making adjustments in (sometimes) almost every file so that it will better fit my photoshop template that I have original planned out or I will leave it as is, if not much customization is needed.

Again, the key here to template editing is planning, the more planning and preparing you do the better off you'll be and have a quicker turn-around which all clients like.

Anyhow, kudos for the posting!

P.S. I know us 'Moderators' have been pretty swamped lately, new Quarter of the year, new budgets, so my apologizes on mine and their behalfs if sometimes we do seem scarce.

[DogByteMan]

I think this one should be a sticky.... Boomer?

[daveb1]

Hi B00mer

Could you elaborate a bit on this point

After I've cut my photoshop template up into an html file...

From what you've said, it seems like you make a mockup of the site in PS, then save each layer (which presumably has one image in each of them) which you then copy over to the xcart images directory. My knowledge of PS is limited at best, and although I can do the simple picture editing stuff, I hadn't even considered making a complete mockup of the site. Is this right? And more importantly, how is that achieved?

Cheers

Dave

[B00MER]

After I've done my mockup, I use ImageReady and proceed to create slices of the template that need to be cutup into images to fit into a table, ImageReady will do this for you and upon save for webpage create your images and your html file.

Here's some tips and tutorials that may be useful in PS:

Create a Web-page header with a tabbed navigation bar:
http://www.adobe.com/tips/phs8navbar/main.html

Phong has some good tutorials:
http://www.phong.com/tutorials/

Some other good-tutorials:
http://www.good-tutorials.com/tutorials/5

[lyncca]

Originally Posted by daveb1

From what you've said, it seems like you make a mockup of the site in PS, then save each layer (which presumably has one image in each of them) which you then copy over to the xcart images directory. My knowledge of PS is limited at best, and although I can do the simple picture editing stuff, I hadn't even considered making a complete mockup of the site. Is this right? And more importantly, how is that achieved?

Cheers

Dave

When we create a design mockup for any client, we will start with a 750 x 600 canvas in photoshop, and create the design. We put gridlines anywhere we know that we will want to create slices. Then, at the bottom of the tool palette, there is a button you can click that will toggle your canvas over to ImageReady. Then, in IR, you can "convert gridlines to slices" -- then I name each of my slices and decide on how much to optimize, etc.

Then, Save Optimized As> and select html and graphics. This will create your basic code for you, then you can modify it to make it span horizontally, vertically, etc.

If you do these steps, if you decide to make basic changes to the design, you can reexport them with the same slices and grids already made and won't have to readjust much of your code