OSCommerce - Modify the interface design and layout.

Posted on 2004-11-23
Last Modified: 2013-12-03
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 :)
Question by:minichicken
    LVL 2

    Assisted Solution

    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.
    LVL 12

    Author Comment

    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?
    LVL 3

    Accepted Solution

    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.
    LVL 3

    Assisted Solution

    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.

    LVL 12

    Author Comment

    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 :)
    LVL 3

    Assisted Solution

    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.

    LVL 12

    Author Comment

    Thanks kevin and b_loco for your contribution.

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

    Your help is much appreciated :)

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Top 6 Sources for Identifying Threat Actor TTPs

    Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

    Suggested Solutions

    As this topic comes over and over again in different forms, I've finally decided to write a short (yea, right...) article / tutorial about pagination with PHP with MySQL database. There are dozens of these kind of tutorials, I know - I wanted to mak…
    Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
    Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
    The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    22 Experts available now in Live!

    Get 1:1 Help Now