OSCommerce - Modify the interface design and layout.

Hi Experts

I've setup Oscommerce, and everything seems to work fine.
The default page design and layout is applied, so my question is how would i modify the design of oscommerce?
I've got a designer who can design the theme and skin for it, I just needed to know how to go about modifying it.

Please provide me some guidelines/examples/tutorials or any complications involved in doing such thing.

Actually I don't know how difficult is this question, so let me give 500pt, well, at least to me it's difficult, as I haven't done it before.

Thanks :)
LVL 12
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

I haven't used OsCommerce for a while, and I don't know how it is now, but one of the main reasons that made me drop it and write my own (simple version) was the fact that it is hard to change it's appearence. For all I know, you can change the images, and some html on the side and top includes, but it is difficult to change the general appearance, at least without modifying the script itself, which can make it very hard to update later.
minichickenAuthor Commented:
hmmm, that not good news.
The functionalities of Oscommerce is brilliant and easy to setup. It will take forever to build something like that, although I don't really need all the hardcore stuff, but it good to have for future development. How will i go on about setting up payment gateways, it not a widely-used payment gateway, but it's local to us. Any complications involved?
I'd have to agree with loco. If you do modify the layout drastically your changes may not be able to be implemented easily into future versions. This may prevent you from upgrading and can leave you with flaws in the system.

It is actually pretty easy to modify it with some general PHP knowledge. The problem is that you need to modify dozens of files if you really want to make it look unique.

Each file located in the includes/boxes file needs to be modified. These are the general UI building blocks that get places around the site.

best_sellers.php - the box that shows the best selling products.
categories.php - probably the first thing anyone edits the category listing.
currencies.php - the select currency box located on the bottom right.
information.php - the info links located on the bottom left.
languages.php - the select language flag table.
manufacturer_info.php - the manufacturer box displayed for a product on the right hand side to show company url and a link to other products by this manufacturer.
manufacturer.php - the dropdown list of manufacturers located on the left hand side.
order_history.php - the order history table shown to logged in users that have had previous orders.
product_notifications.php - the product notifications table that lets someone signup/cancel product update notifications.
reviews.php - the reviews table that shows a random review/let's the user write a review.
search.php - the simple search table.
shopping_cart.php - the shopping cart table located on the top right.
specials.php - the specials table that shows up on the right hand side when there are active specials.
tell_a_friend.php - the tell a friend table on the right hand side
whats_new.php - the what's new (random new product) table.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

and we continue....

in includes/classes

boxes.php - if you want to edit the boxes class to display the tables a bit differently you would edit this file
breadcrumb.php - the class that shows you your trail of where you are at (Home -> Category -> Product links)

the rest of the files in includes/classes I would leave be as they are more functionality then design.

and we continue...

in includes/modules (not in the subfolders like order_totals/shipping/etc)

all these files are UI pieces and should be modified. Things like product listing (also used for search results), address book UI, also purchased table, etc are all located here. The files are named in a way that it is easy to know what is what.

then most importantly we have the php file in the include directory itself

column_left.php - contains the calls to show the boxes. From here you can re-arrange the order, flip around, remove, swap, boxes from displaying on the left hand side.

column_right.php - same as for column_left.php just for the right side

application_top.php - mostly code so unless you are doing extreme modifications I would not touch it.

header.php - the header html file that needs to be edited to change the top of the sites UI. Keep in mind there is some PHP coding in here so it needs to be done with care.

footer.php - the footer UI design page and as with the header it does have some code so care should be used when editing it.

application_bottom.php - as with application_top.php it is mostly code but the tables are closed here. If your table structure has changed you will probably need to edit the closing tags.

Those should be all the files needed to be edited to make it look how you want. Keep in mind editing the images as well is a must.

I hope I helped in pointing you in the right direction.

minichickenAuthor Commented:
Thanks y2kwacko, nice list you made there.

What about the site stylesheet to change the link styles, table borders, colors, fonts, etc.....
also changing of header images, and other images, as well as name of the navigation links. Is that easy to change?

Integrate with a local (South Africa) payment gateway??

Thanks :)
The stylesheet is actually located in the root folder and named stylesheet.css. I apologize for not mentioning that as it seemed obvious to me.

The top header image code is located in includes/header.php and you can of course change it to whatever you want. Your other option is to just keep the filename the same and replace it with your own. The name of the navigation links are pulled from the DB and the code is located in the includes/boxes/categories.php file. I have done some custom interfaces for OSC in numerous occassions that requires custom looking navigation. The easiest method I found was to use a graphical table and just make it include name.jpg instead of the text. However you choose to edit it that is the file where it is contained in.

As for integrating with a local payment gateway your best bet is to either find a payment module that already exists or have one coded for you. You can have your programmer look at the payment modules located in includes/module/payment to see how it is done.

minichickenAuthor Commented:
Thanks kevin and b_loco for your contribution.

I think this should be enough to get me going....

Your help is much appreciated :)
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Fonts Typography

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.