multimixer » mini template system

Making a osCommerce template: all the progress step by step

multimixer — Mon, 16 May 2011 11:42:27 +0000

I got a request to create a new osCommerce store. Very happy about this of course, new projects are always welcome, but more important, I liked the initial design idea, and that’s a great motivation always. Here are some of the images I got about how the website should look like

It is a great help to get a concrete information about the clients vision on how the website should look like and even more to get a message like this one: “You have free license to do what you think works best and looks good. I believe in your artistic taste.”

Since this looks like a very promising project, the design is far away of whatever could be called a “stock osCommerce design”, I decided to post the progress of designing this new theme here. The post will be updated as I go, so if you like you can check back from time to time to see what I’m doing. Feel free to post any comments about anything.

The store is live and you can visit it if you like here Mas Design

Installing osCommerce

First step of course is to install osCommerce on my local computer using XAMPP. I’m going to use the latest production ready version, and hat is version 2.3.1 (version 3 is not ready to be used on live stores)

That is how the product information page look like by default (I’m going to start the design with this page). Columns have been removed, that is very easy to do in the administration panel under admin>modules>boxes. You can disable there any boxes you don’t want, if you disable them all, you will get a layout without any columns or boxes

I’m also going to use mini template system for the design. (please note that mini template system is a commercial addon for osCommerce, do not click the link if you are not interested in anything that is not free and keep on reading here)

The reasons to use mini template system for this are following:

To have all design and template related files in one folder and not all over the osCommerce installation

To be able to switch to an other template any time and for any reason, without having to modify any file

To be able to use all the mini template system features to create the design easier, but most important

To give the ability to my client to manage his template easily maknig any necessary adjustements him self without having to contact (and pay) me or anyone else for this

Having mini template system already installed on osCommerce, next step is to create a new template and activate it in the administation panel

That is how the same product information page look like after installing the template.

On this base and within this template folder we will create the new template. Although I will use mini template system, following explanations will mainly point out what I would do if working on a default osCommerce store so that anyone interested can follow

Changing header and footer, adding background image

Header and foter affect the design the most. Changing them will give us immediately a new look and feeling and also, hopefully an inspiration on how to go on. To have the background image right away will give a feeling for all colors to be used

The background image can be added easily in the css file, this is in case of mini template system the file catalog/mts/themes/themplatefolder.style.css for default osCommerce it is catalog/stylesheet.css. We do add the background directly to the as follows

body {background:url(images/backgroundPlain_2000x1718.jpg)}

There are of course many settings you can do here, depending on what type of background image you’re going to use (eg a large one as in this case here or a small one that you want to repeat etc) You can read more about at w3schools. It is important in any case to have the image uploaded on your server and to set the correct path to it, in this case it is in folder /images/ but it could be in any folder

In the header section only thing we do right now is to remove any menus, backgrounds etc and to leave just the logo in place. We will add a menu in a later step. The file to do this (in a default osCommerce set up) is catalog/includes/header.php, if using mini template system, you will find the file in catalog/includes/mts/themes/templatefolder/files.

In the footer section we can already do more. Since we don’t want a thick footer with many links and stuff in in, all we have to do is a simple

structure, add the links we need to there (placeholder links for now) and style a little in the css file. The file to work on is called “footer.php” and is at the same location as the header file. As an example, the section of the footer that holds the left hand links, look like this in the file

        
          '. 'home' .''; ?>
          '. 'one link' .''; ?>
          '. 'one link' .''; ?>
          '. 'contact' .''; ?>

That is how the website look like after doing this changes

Already coming closer, not? Lets concentrate now on the contents and the layout of the product information page it self

Change the layout of the product information page

First we want to change the page structure, so we need to know how the various eements, like the image, description etc are placed. To visualize this, we just add stroong background colors to each “container”

Now that we can see each area clearly, lets move the product images area to the left and the description to the right. This is easy to do, just open your file catalog/product_info.php, find following line (2 times in the code) and change the “right” to be “left”

It’s however recommended to not use inline styles but to add any rules to your css file.

We also move the

area (holding the product name and price) and the button area to be on the right of the product image.

That is how it looks

Next thing we want to do is, to move the additional images to be on the left of the main image and not under it. That’s also not hard to do, instructions are on the bx slider site, that is the script that osCommerce use to create the image gallery. Also important, to make the correct settings for the sizes of the main and additional images. They are done directly in file catalog/product_info.php, the default settings look like this, you need to change them according to the image sizes you plan to use

An other thing to do is to get the “social bookmarks” directly into the body of the product information page. I wrote a separate post about how to do this, please read here about how to move social bookmarks to the body product information page in oscommerce

I also reorganized the way the information is getting displayed like price, add to cart button etc. The add to cart button is still the default, this will change later after the general button style is decided.

Let’s check how things look now

Next thing will be to add “related products”, that is an area to show any cross- or up-sell items of a product. There is an addon existing for this in osCommerce, called “optional related products“. This need of course to be upgraded to work with version 2.3.1 of osCommerce. Also the way the product information get printed to the screen, need to be adjusted to the particular layout. An other layout, than the one shown here, is posted here and also used live on this site

However, in this case we need just the related product images to be dispayed, all other info will appear as a toltip upon hover, or in a “jquery dialog” upon click, I’m not sure yet. After adding this, the website look like this

We are more or less done with the layout. Lets remove the help background colors and replace them by semi transparent rgba colors (for IE we will use png images) and that is how everything look like now

There are still more things to do of course, like to improve the page functionality: I don’t want the various links (like “ask a question about this product” or “reviews” etc) to lead to other pages, I don’t think that it is a good idea to let customers leave the product information page (except of course towards checkout), so all this information need to pop up within the product information page. For this I’m going to use either one of the existing scripts (the jQuery UI dialog or a fancybox style) or something totally different

After doing some smaller changes, and after adding the real products and real images, here is how the product information page look like

What is new here, compared to the previous “version”?

Option types: That are the radio buttons that let users to select the iPhone model they use. For this I used the addon “option types v2” that I modified a little to work with osCommerce version 2.3.1. Additionally I added some more improvements made by me, like the ability to add short and long option descriptions etc. Unfortunately, I didn’t found time to upload a new version of the addon, all information is posted however at the osCommerce forum

Here is an example of how the option description pop up window look like

An other “new” thing is the “ask a question” feature, that enables store customers to send a question about that product to the store owner without having to leave the product information page. I think there are some addons available that promise to do this, I preferred however to create the functionality by my self from scratch.

I will make a separate post about this, for now just to say that what I did was, to create an ordinary form, same/similar to the contact us form of the default osCommerce, include it into file product_info.php, wrap it into a div and link to that div using fancybox, you can read more about at the fancybox usage instructions

Additionally I added the image of the product in question to the left and a jQuery valitadition. This is how the screen look like after pressing the “ask a question” link

An oer issue that had to be solved was the space issue. As you can see the text side of the product info page has the same height as the image side, so the text is limited by this. It appeared now the case, that some products needed some extra text, and there was absolutely no space for this.

One way was to add a scrollbar to the product description it self. This is technically easy, by adding an “overflow:auto” to the

that wraps the product description, but the result is really very ugly:

What to do then? Since the additional text is related to the images, why not to add it over the images and make it appear upon hover? This is what I decided to do, but how to implement? Not all products have this extra note, and the text can be different from product to product.

Someone would say to go on as follows: Make a new field in the database for the extra text, an input filed in admin to enter this text, then change the query in product_info.php to get this text, and finally modify the file one more time to display it. Such a trouble !

I did something totally different, using jQuery. Since we have it in osCommerce why not to use it? The particulat jQuery method to use is append() Using this, all I had to do is to type in the text into the product description, wrap my extra text into a

, give to that

an id, eg

and then, using append() to move that

from its original place (the description) to the

Here is how it look like upon hover over the image:

Index pages: Product listing, category listing and home page

Next step is to do something about the homepage and the product and category listing pages. In osCommerce product listing and categories listing happens on the index page. This may be a little confusing, because usually we call “index” the “home” page. However, in osCommerce, the index page has 3 “cases”:

case to list subcategories
case to list products
Case not to list anything, that case is if no “cPath” is given, that is the so called “front-” or “home-” page

That “cases” are clearly to indentify in your catalog/index.php file, and look like this:

  if ($category_depth == 'nested') {
.
here we have subcategory listing
.

  } elseif ($category_depth == 'products' || isset($HTTP_GET_VARS['manufacturers_id'])) {
.
Here we have product listing
.

  } else { // default page
.
here we dont have anything = front page
.
  }

Index page: listing subcategories in a simple grid

This is the first “case” we will start with. The file we will work on is catalog/index.php and particularly the section that starts with

  if ($category_depth == 'nested') {

You will find this at line about 37 in a default index.php file and the default output look like this

First thing we activate our template, the one we are working on, and now it looks like this

There is not really much to do here, things look almost ok. I’ll do following:

Disable the new products module. Very easy to do, in the file, at line about 88, comment out the new products module “inclusion” like this

Next, I will remove any borders and make the subcategory name to be placed on the image and not under it. The part of the file to work on is this here (line about 73)

      echo '        ' . tep_image(DIR_WS_IMAGES . $categories['categories_image'], $categories['categories_name'], SUBCATEGORY_IMAGE_WIDTH, SUBCATEGORY_IMAGE_HEIGHT) . '
' . $categories['categories_name'] . '' . "\n";

What I will do is to place the contents of the into 2 nested

, the first one will get the full width and will be used to add a background, the second one will be positioned relative and will get the width of the image and will be used as a wrapper for the next element, an absolute positioned

, wrapped by the 2 div’s that will hold the category name

Final step is to adjust the subcategory image size, this I do in the administration panel under admin>configuration>images. Number of items per row can be set under admin>maximum values>Categories To List Per Row

The rest is a few lines of css to set margin and padding for the elements and to choose the background colors that will be again set as semi transparent rgba colors. I do also play a little with opacity values, so I can get a nice effect upon hover. For browsers that support transitions, there will be also a small delay in the effects

That’s how the site look like now

On hover over any subcategory, opacity values change and it look like this

Because I’m not sure yet about the image ratio that will be used, I created 2 more subcategory listing layouts, one with a dark background and one on a white background.

To switch from one listing layout to an other is quite simple, all that I needed to do is to change the number of “categories to list per row” under admin>configuration>maximum values and the subcategory image size of course under admin>configuration>images.

The colors can be set and changed by modifying a couple of lines in stylesheet.css

The final subcategory listing section of the index page, using the real product images look like this. The category name appear upon hover over the image

Index page: Product listing using bxGallery

The osCommerce product listing page (index,php for “case” products) looks by default like this.

After activating the template, we see that the “body” of the listing remain almost the same. How it comes? It has the css class “.ui-widget-content” and since we didn’t change the ui theme yet, the result looks same.

Before changing anything in colors and backgrounds, we want to change the way of product listing. The default osCommerce way is maybe suitable for stores with many products and very practical, since it gives a fast overview, but, in this case here, it doesn’t match the whole design.

How and where to change this? The file to work on is catalog/includes/modules/product_listing.php This one get included into the index.php file in “category_depth” products, at about line 238

    include(DIR_WS_MODULES . FILENAME_PRODUCT_LISTING);

All data get collected in index.php, product_listing.php is responsible for the display. That mean that, if you want to have any other data displayed on your product listing, you need to make sure this data is taken from the database in index.php and then you can decide how to display it modifying this file here.

What we want to do is to change the listing style completely, to turn it into a “gallery” style. Since osCommerce has already the very nice bxGallery script (by Steven Wanderski) installed, there is no reason to look for an other one.

bxGallery must be applied to an html unordered list, so, first thing is to change the table structure of product_listing.php into an unordered list. (An “unordered list” is a list created by

etc oposite to the “ordered list”, that means numbered, that is like

etc)

After doing this, the file looks like this (in a simplified form)

 echo '' . "\n";

    $pi_counter = 0;
    while ($listing = tep_db_fetch_array($listing_query)) {
    $pi_counter++;

            $pi_entry = '';

	$pi_entry .= '' . tep_image(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name'] . '';

            $pi_entry .= '';

    } // end while ($listing = tep_db_fetch_array($listing_query)) {

    echo '
';

To say the truth, all you need to do is, to look how it is done in product_info.php that use the same gallery. You can of course add anything you want into each

within the

If you want to keep the admin settings, about what to show on the listing, you can use the switch/case structure that exist in the file, just make sure you replace the table structure by

’s or anything that suit your needs

Do not forget to add this after your list is done

You can find more information and setting options on the bxGallery site. However, hat are the settings I used to create a list like on the image below

All products of a category are listed in “thumbnails”, upon hover the main image on the left change. This is what the installed gallery script do

Upon hover over the main image, a short product description and the “buy now” and “details” buttons appear.

I’m not absolutely sure if I maybe prefer the large image to be on the right, that is easy to change by changing the thumbplacement: ‘right’, to be thumbplacement: ‘left’, in the bxSlider settings

Tell me what you like more, left or right? I really can not decide

An issue I had to solve here was that, the thumbnails generated by bxGallery are not links, they can not be clicked, or let’s say, if clicked they only change the main image. Here I did a temporary fix, I’m not posting it because it’s not very “elegant” and it also requires changes to the bx gallery script it self, so I think it will cause more questions than necessary.

Index page: product listing in a grid

Well, finally I decided to go with a much more simple and “lightweight” listing in a grid style, that looks like this

Things are much more easy here, than in the bx gallery case. All you have to do is, to modify the code of file includes/modules/product_listing.php to create a for each product instead of a as per default. Within this you can add any information you like, such as name, price etc. This I wrapped all into

, that are the of the original file.

Next thing to do will be, to copy the “logic” of the products to display per row for example from the new products module, that is located in file catalog/includes/modules/new_products.php

In case you are a mini template system user, there are good news: This all and much more will be included into version 1.4 that will be released soon, so you can make all adjustments from your administration panel.

Index page: Front page with banners

We all know the default osCommerce frontpage, showing the new products and the famous”welcome guest” message

To show new products may be fine, depending on the store, but the “welcome message” is something that need’s to be removed in any case and for every price. People do not visit online stores to login or to create accounts, so, if you still have this on your store, remove it asap !

Having mini template system installed, it get really easy to configure the front page. Using the front page manager and the banner manager we can configure the front page very quickly without having to modify any file at all. (please note that mini template system is a commercial addon for osCommerce, do not click the link if you are not interested in anything that is not free and keep on reading here)

We are going to use the 2 banner modules, the first one to display a large image and message, the second one can be used to promote featured products or specials or anything. I won’t get to much busy with the content, since this is very easy to manage and change by the store owner himself.

That’s how our front page look like after a few clicks in the admin panel

Well, finally, the front page includes just 1 banner slider and look like this

This is however the easiest part of the whole design process, technically I mean. The hard part is to get the right inspiration :-)

As said, this is all done using mini template system. Let’s see what you would need to do in case you don’t use it. The file we need to work on is index.php and concrete the last “section” of it that starts at about line 244 in a default osCommerce installation and look like this

} else { // default page ?>

Here you can basically delete everything, so that this area of the file look like this

} else { // default page ?>

You are free now to add anything you want into here, this is plain html and you can do whatever you want, no limitation. If you want for example to add a slider, there are many nice jQuery based sliders around, I personally would use bxSlider as I did for mini template system. However, here is an other slider overview, but please do not feel limited to this, there are for sure more.

Most, if not all, of them will require to make an unordered list (

) of the images you want to display. Some others allow also some text, however each slider has it’s own specific setup. What you need to do is to add the unordered list into the
structure left in index.php, link to each image separately and of course make sure the images are on the server and the path to them is correct.

Finally you will need to add the new script files and link to them in includes/template.top.php

If you want to have new products, or upcomming products or any other module you may have installed, you can add it to here like this for the new products
If you want to style this module too, you need to do it in its file, for example the file that displays the new products is catalog/includes/modules/new_products.php

So, we are done with the front page, not so hard, not? Next step is no make the main navigation menu on top.

The header and the main navigation

This is something that I left for the end, for sure you noticed that on the final images, the header is already there. Here is how I did it

First of all to say that, even the main navigation is in the header, I didn’t modify the file that holds the header information at all ! Well, this is because of mini template system, if you have the default osCommerce, you will need to do a couple of changes to the file includes/header.php

The header section consist of 3 elements: The logo, the main “slogan” on the right and the menu under it
- The logo is easy, just upload it under admin>configuration>store logo. That’s all
- The slogan, at the top right is in real a banner. Instead of an image, I typed in my text into the “html” textarea in admin>tools>banner manager. I added this banner to banner group “my_theme_name_header”.The first row is a
  tag, the second one a
  . The rest is css styling
- To set up the menu, I created a link group using mini template systems link manager and enabled the main navigation bar setting it to display my just created link group.
That was all. Lets see now what I had to do if not using mini template system. Here is a useful article to read, that explain the osCommerce header structure. If you want such a header, what you need to do in file catalog/includes/header.php is
- replace the contents of
  by the banner code. You will find such a code example in file catalog/includes/footer.php Choose a link group name and add the content to that group via admin, same as I did before
- Strip out the complete breadcrumb section and replace it by your menu. I’m sorry, but I can’t go into details here about how to create such a menu, maybe there is something in the osCommerce addons area, I’m not sure. As a general orientation, you need to get your categories structure into an unordered list (there is an addon for this) and then apply a script to create the dropdowns, what I use is superfish, but there are others too.
Additional information

I used a custom ui widget theme to fit the needs of the template. This I created using themeroller, all I had to do was to install it, you can read here about how to install a new theme to your osCommerce store

I used also custom fonts for the header section and all page headings, you can read here about how to do this

Well, people, I maybe forgot to mention some things I did, feel free to ask. I’m sorry for not going into detail in some things, the post would be too long, it is already long, I’ll try to cover particular issues in separate posts. Target of this post is finally to give you inspiration and not to teach you each technique step by step

Conclusion

Files that I had to modify (starting from a default osCommerce 2.3.1 store and without mini template system in use) are
- stylesheet.css
- index.php
- product_info.php
- includes/template_top.php
- includes/header.php
- includes/footer.php
- includes/modules/product_listing.php
Total = 7 files.

Please realize that changing just 7 files changed the overall look of the store completely. Consider this when you are planning to purchase a template and ask (before buying) how many files will need to be modified or replaced by he template. Most of the poorly coded templates will require a complete reinstallation of osCommerce. A properly coded template will not require changes to more than 10 files, something aroud 5 to 10 files. Also to say that, if using mini template system most of the files don’t need to be modified at all.

The store is live and you can visit it if you like here Mas Design Feel free to browse around and to check whatever I posted here. Please do not make any test orders because the store is live, I guess that real orders are welcome of course, I can only say that this titatium backcovers are really a nice thing.

Enjoy

PS Please do not ask me to send you this template. I’m not selling it and not giving it in any form. This is a custom work, the design and layout are unique, the store owner participated him self at many stages of the design process, making images, suggestions, giving ideas etc. So, there will be no second exactly same store. If you need a custom store, you can get in touch of course, I’ll be happy to discuss any details with you, but please don’t ask for exactly this one

Link manager and menu maker for osCommerce version 2.3.1

multimixer — Wed, 09 Mar 2011 17:14:28 +0000

Links are one of the most important parts on a online store. It’s basically the only way to get from one page to an other. Unfortunately, the default osCommerce doesn’t make it very easy to add new links. There is no other way than to type them directly into the php files. And there is just one box that is supposed to display links, the “information” box.

There are all the time questions from people about how to add a link here or there, questions about how to place it into the code and about the same amount of wrong links, for example links that do not hold the necessary session id.

So I thought why should this be so hard? Why not to be able just to type in any links to anywhere I like and then to display them easily on my webstore without having to alter any file? So first I went to the addon section of osCommerce to take a look. Yes, there are a couple of link managers, but they don’t do exactly what I want. They are all kind of “link exchange” orientated, and this was not my need. Then I saw Gary’s blog post about his own version of a link manager and this gave me the final motivation to start dong my own thing.

For the impatient readers, the result in short: What I did is a link manager and menu creator, completelly to manage from the osCommerce administration panel

Link manager I call the admin interface to create links and to organize them into groups. I can type in any links and I can create groups and subgroups of any depth, and to add to each group any type of links: links to internal osCommerce pages (eg privacy.php), link to external websites, links to product categories or links to products themselves.
Menu maker I call the various ways I got to display that links and link groups on the website, for example on the main navigation bar or in boxes. Here I have various configuration options to adjust the content, lay out and colors of the menus completely to the needs of the website. Again, without having to touch any file.

Little more in detail now and first about the part to create and organize links, what I call “link manager”.

Link manager: Create and organize links

The whole setup is very similar to the way products and categories are created, just one difference. While products and categories are manage from one and only file (admin/categories.php), and that any product has to be part of a category, my link manager works different: There is one part just to enter links, something like a “link-pool”, and an other part to make the groups.

This comes from the simple conclusion, that a link can be a member of many groups, so it would be confusing to enter a link as part of a group and then to start to copy it to here and there. Much better to have such a link pool, where I can have a complete overview of all my links.

Such an overview look like this

The overview can be filtered to show only external or only internal links

How to add new links? Very easy. Links to internal osCommerce pages are added automatically. In case there are any new files, there is a button “update” that will add them. External links need to be added manually. There is no link exchange function and such. The store owner adds manually any link to any page he want to link to from his store. Simple and clean

For a new link you can add a link name, a link description (that will be the title) and of course the url (without any http://). Next you can decide if you want the link to be active or not, and also to what visitor group in should be visible: To registered users, not registered users or all users. Thats necessary for links to pages like login.php or logoff.php. Any link, internal or external can be edited any time of course. The screen look like this

Thats it regarding creating links, nothing else to do. Next step is to organize this links into groups. For that there is an other page respnsible, called “link groups”. The overview here look like this

Much similar to categories, not? Here you can create as many groups and sub groups you like. You can also delete that groups, you can move them and you can copy them. And of course you can add links to them ! The screen to add links to groups look like this

All links of the link pool are available. You can set for each link if you want it to open in the same or in anew window. An other thing you can do is to add product categories, and you can also decide what category you want to add.

An other thing you can do is to add a url to the group title. That means to make the group title to be a link it self. This makes a sense if the group is going to be part of a larger menu

Again you have all links available, you can decide if you want the link to open in the same or in a new window, and you can also have the category to be the link target, in case the link group include product categories

Next step is to display the links, thats the job of the menu creator

Menu creator: Display your links in a nice way

There are many areas where links could be displayed, for now I set up 2 areas: The main navigation bar and the “link boxes”.

The main navigation bar will display the links in a drop down way
The “link boxes” will do the same, using a fly out effect

Both do use the “superfish” jQuery script, I plan to add more display ways, like tree, accordion etc. Also more areas to display the links, like the footer and whatever else I will think of

Let’s concentrate on what is now. And what is now are really many configuration options, like everything somebody could think of when setting up a menu. The point here: Everything is done per mouse click in the administration panel of osCommerce. The interface for the navigation bar for example has more than 30 different configuration options the image is too large to post it here.

For example you can decide to show the “search” in the header or not, to show products in the menu or not, you can decide if you want the width of the top level menu items to be set automatically or manually (to adjust to vary long or very short items), you can set the height and width of the menu tabs on top level and the sub levels, you can decide to use “supersubs” or not (that’s to adjust the width of the submenus to it’s content automatically), you can set colors about anything you can imagine and so on.

Here are some screenshots of the main navigation bar

Same of course you can do with the vertical fly out menus. This you can use also to create separate menu boxes per category

Configuration options are like unlimited too

I hope you noticed that the vertical menu can fly out to the left or to the right depending on where the box is located.

If you are interested in more details you can read here about.

And you can see it in action here

The link manager and menu maker is installed by default into mini template system as a core feature, but I could also imagine it as a standalone solution for any osCommerce store, I just don’t know if there is any interest for this.

Well, that’s all nice and fine, what I want to do now is to tell you a little about what caused some headache when developing this system

To make an order to all that ul’s and li’s that have to open and close in the right moment. That’s not that hard if you have just categories or just link groups in a menu, but it is getting more and more complicated if you want to have them all “link groups, direct links, product categories and products. I can tell you, I spend some time looking at the source code of my site trying to analyze the output. Kind of “ulitis” I got (no need for a dentist for this, a beer is much better)
To get the cPath always correctly. That’s not an issue if you display the categories from the top level, but what is if you want to display just the sub “dvd movies” or its sub level “action” and this either on top level or somewhere in the menu jungle? There is of course a function available to get this, but this is querying the database, so this got solved in an other way without a single query
To avoid queries in general: First time I checked, a single menu was causing 740 queries ! Total disaster. Finally to display the categories needs less queries than the default osCommerce categories box
To get the “left-right” fly out: Yes, this was a problem, specially after involving the “subersubs” thing, but thats also gone now, solved, past and forgotten
To get the “auto” width feature for the navigation bar: Basically what happens is to count the top level parts and then to find the percentage for each. Thats all fine, if you have just to items (50% x2) or 4 items (25% x4) etc. But what is if you have 3, 6 or 7 items? Browsers do interpret the decimals in a different way, that can result to a disaster for your menu. Only way, back to the pixels, and because the width is also not fixed (can be 960 or 1200 for example) and because there can be a search or not, this all needs to be calculated correctly.

Well people, I hope you take a look and tell me what you think.

Mini Template System officially released

multimixer — Thu, 06 Jan 2011 04:43:38 +0000

Proud to announce that the first official release of mini template system (MTS) for osCommerce version 2.3.1. is available to download and use. Please visit the mini template system website for more information

The system is available in 2 forms:

As a “modular package“: This package contains all necessary files and instructions to install mini template system (MTS) on an existing osCommerce store, that it based on version 2.3.1

An a “osCommerce package“: This is a complete osCommerce installation (version 2.3.1), exactly as offered on the official osCommerce website with mini template system (MTS) pre-installed

I hope you’ll enjoy it all and I’m waiting of course for your comments, questions or suggestions about

Separating data from execution in osCommerce boxes

multimixer — Mon, 03 Jan 2011 12:11:44 +0000

I was in the need to be able to access the data of each box in osCommerce without having the box being “executed”, that means in this case, added to the left or right column. Why this, you may want to ask. There are several reasons for, lets say I want to add the contents of the box into an other group and to have it displayed in the footer, header or in the middle of the page, whatever.

Let’s take things from the beginning on a concrete example and let’s understand first how things work by default before doing any changes. Thats always a good idea.

Let’s take a simple box, the one that displays the links to “contact us”, “shipping and returns”, “conditions of use” etc. This box, the “information” box is getting created in file catalog/includes/modules/boxes/bm_information.php

Opening the file, we see that it is a class with various functions in it. We are interested in function “execute()” that looks like this

    function execute() {
      global $oscTemplate;

      $data = '' .
              '  ' . MODULE_BOXES_INFORMATION_BOX_TITLE . '' .
              '  ' .
              '    ' . MODULE_BOXES_INFORMATION_BOX_SHIPPING . '
' .
              '    ' . MODULE_BOXES_INFORMATION_BOX_PRIVACY . '
' .
              '    ' . MODULE_BOXES_INFORMATION_BOX_CONDITIONS . '
' .
              '    ' . MODULE_BOXES_INFORMATION_BOX_CONTACT . '' .
              '  ' .
              '';

      $oscTemplate->addBlock($data, $this->group);
    }

Two things are going on here. The first is that $data is getting defined, so we say that $data is this and this and this, in this example $data is a collection of links to various pages

Second thing that happens is to add this data to a group. What group? The one that got defined just before in function “bm_information()” :

        $this->group = ((MODULE_BOXES_INFORMATION_CONTENT_PLACEMENT == 'Left Column') ? 'boxes_column_left' : 'boxes_column_right');

This here says that the group is either the left or the right column, depending on what the value in the configuration table of our database is. Thats in other words the setting we have when configuring the boxes in the admin area, setting the option to “left column” or “right column”

Back to the execution function, and the part where the $data is getting added to a group

      $oscTemplate->addBlock($data, $this->group);

We see that a function of class $oscTemplate is getting used, thats in the file catalog/includes/classes/osc_template.php, and the function looks like this

    function addBlock($block, $group) {
      $this->_blocks[$group][] = $block;
    }

It’s simply adding our $data (of the box file) to the array of blocks, the group, again defined in the box file.

To complete the picture, we should also know that the whole “execution system” is getting activated via the function buildBlocks() (file catalog/ includes/classes/osc_template.php starting at line 70) and this function again is called in file catalog/includes/template_top.php, just at the beginning, at line 13

Now, that we know how the system works, we can go back to the original question, that is: To separate the “data” (in our example the creation of the list of links) from the “execution” (in our example to add this list of links to the left or right column)

I hope that now, the reasons why to do this are more clear than before: I want simply to have the option to access the plain (well, ok, including it’s html) data of each box, so that I can do with it whatever I want, without having to access each time the box file.

There is for example a addon available (Box content placement), that is adding 3 more optional positions for the boxes, and for this it is altering each box file. Thats all fine, but what if you want to add one more position? And what if you want to have some boxes to appear under some conditions only? For example jut on some pages? Or to have the boxes appearing on all pages but the front page? And so on and so forth.

Thats why I ended up with the approach I’m presenting here, to separate data from execution. In our box example (file includes/modules/boxes/bm_information.php), all I do is to split the function execute into 2 separate functions, so it looks like this

    function dataF() {

      $data = '' .
              '  ' . MODULE_BOXES_INFORMATION_BOX_TITLE . '' .
              '  ' .
              '    ' . MODULE_BOXES_INFORMATION_BOX_SHIPPING . '
' .
              '    ' . MODULE_BOXES_INFORMATION_BOX_PRIVACY . '
' .
              '    ' . MODULE_BOXES_INFORMATION_BOX_CONDITIONS . '
' .
              '    ' . MODULE_BOXES_INFORMATION_BOX_CONTACT . '' .
              '  ' .
              '';

	  return $data;
    }

    function execute() {
      global $oscTemplate;

      $oscTemplate->addBlock($this->dataF(), $this->group);
    }

You see that I created a new function, called “dataF()” (could be “kuku()”) where the “data creation process” happens and then I use the output of this function for the function execute(), that is now just executing any data that was “created” before. Same of course I need to do for all boxes

After done once, things are getting really easy. Each time I need a box (out of the regular left/right schema), all I need to do is to “activate” the class of the box I need and to output the contents of dataF() anywhere I want. Or, I can create a new group of boxes, called eg “boxes_footer, add to it any boxes I like, and then display the whole thing in the footer, or wherever I want. Or I can move all boxes together to the left or to the right. In general: I have the total control over the boxes display, without doing anything to the boxes files themselves

This approach is used in mini template system, for example when moving all boxes to the left or to the right, or when making the “information” or “search” box to disappear when a certain template is activated

Update on 5/5/2010: Because some of you asked how to output the content of dataF(), here is the way to do it.

Let’s say you want to display the contents of box “shopping cart” at the bottom of file shipping.php. That’s not very realistic, it’s just an example to demonstrate that you can display anything anywhere

What you need to do in this case? first thing is to “activate” the class in this way

$boxdata = new bm_shopping_cart;

Next step is to echo the variable $boxdata wherever you want, not that the variable could be called anything, eg $kuku

echo $boxdata->dataF();

Now, there is the “danger” to get an error on the page in case the shopping cart box is not present, that means installed. To avoid this, we need to check if the class exists and to activate it only if this is the case, like this

if (class_exists(bm_shopping_cart)) {
$boxdata = new bm_shopping_cart;
echo $boxdata->dataF();
}

The result on shipping.php looks like this

In the same way you can output any box at any place of your store, for example the cart in the header, or the information box in the footer, or whatever

You will want of course to wrap everything into proper html and/or to use some css to style everything. Enjoy

Mini Template System for osCommerce v2.3.1

multimixer — Sun, 19 Dec 2010 15:19:04 +0000

I recently got the idea, and task to my self, to create a basic, generic template for the new osCommerce version 2.3. In other words not “just” a template, but a flexible base that could carry many types of stores and open to any customization.

In detail, the task included:

jquery ui widget compatibility: Since this feature is included in osCommerce it should be kept and wherever possible expanded. It’s a nice, fast and easy way to change the look of the store. The jquery ui themeroller is a great and free online tool, each one can go and pick whatever he like. The point is, that it should be easy to integrate into the store, without having to change anything in the files

Flexibility: The template should be flexible in any way. Unlike other templates, that look nice eg when they have 6 products on the front page, but totally screwed up when having to display just 4, the template should look nice under “any conditions”. It should look nice with wide or narrow columns, with all boxes on the left or on the right, or even with no boxes at all. It should look nice with or without banners, should be able to take a “minimal” or “overloaded”, a pale or strong look without any problems

Common sense: it’s maybe just my point of view, but some things look to me like having a “natural” order. For example, some links, like “login/logout”, or “order history” etc belong to the header. Same the information about what’s in the cart. Same, and most important, for the checkout link. Why? Because they have to be accessible any time from any page without having to search or to scroll. Same also for the boxes: not everything has to be in a box. I saw once a addon to osCommerce that was doing the incredible thing to add the paypal logo to the store in a side box, with border and titles as : “the paypal logo”. So, each template removes some boxes, depending on how it is structured: If there is a search area in the main navigation menu, there is no necessity for a search box, right? Common sense for me, I hope you share my point of view.

Admin controls: The store owner should be able to manage the main structure of the store right from the admin panel. It’s not possible to expect from every store owner to be a php expert, to know about css and who knows what else. Also not possible to expect from store owners to spend hours reading tutorials and asking questions about how to change the background of their store. Also not acceptable no expect store owners to pay a good amount of money for every single change they need. A store owner should be busy with commercial activities and not with coding

Easy and native operation: Everything should be easy for the store owner. Easily to drop in a new template, easy to activate or deactivate it, easy to modify it. Easy to create various looks of the same template, easy to share them with friends and colleagues to get opinions, leaving the current store operation untouched. But also for developers designers, it should be easy to jump in at any point and start customizing the way they want, without having to spend the half day, trying to understand how everything is structured.

100% osCommerce compatibility: All main files should stay in their original condition without any changes. This was of highest importance to guarantee conformity and easy integration of addons and/or upgrades of the core code. Also, in case somebody wants to uninstall it, the whole system should not leave any garbage behind. This was also the hardest part, because all design had to be implemented without adding or removing css classes or changing the markup. You can say it had to be a “remote” designing only and exclusively via css and some functions.

The result? Yes it is working. You can just upload a template to the templates folder, go to your admin, click “install” edit any settings you need, then click “activate” to go live with it. Much like in wordpress. A new template installation won’t take you more than 3 minutes, the de-installation (in case you want to go back to the default look) will cost you just one click.

In a first step you can change the ui theme, color scheme, shadow structure, column position and column width. This gives already more than 1000 possible combinations and should be satisfying for most of the cases. Here are some screenshots of combinations I like (It’s possible of course to create incredible combinations too)

There are uncountable combinations possible. You see that even I say “base template” it is like having many, really many templates for osCommerce version 2.3.1 available any moment, just a click away. I’ll create some more shadow/wrapping/color schemes, and of course some more templates. Isn’t that great? To switch for example no, in the cChristmas time, to a Christmas template and then back again to the regular one? Don’t forget that this all is done in your administration panel, easily and comfortable by clicking on buttons. Here is an idea of the environment in admin:

For “advanced” users it’s possible to “inject” html and css classes to critical points of the page, like before or after the main container, or the columns. This gives you the change to create even more specific designs without even touching the osCommerce files. That’s also great for template designers.

The immediate next steps are to add some nice features, like a modular index page (that’s the front page and the product listing pages), modular product information page, a true menu manager for the main menu, a boxes manager to control when, where, how and under what conditions each box should be displayed and so on. And also some more nice jquery effects, to take advantage of what is already installed in osCommerce.

However, more detailed articles about will follow in the next days.

I uploaded a first “demo” version of the template. You can find it here: mini template system for osCommerce v2.3. I hope that the system will be available to download in the next days.

Please do not try to browse with internet explorer, the support for this is under development. Naturally IE users will never enjoy the quality of firefox and safari browsing, but that’s not my problem

If you see something that you don’t like please let me now, if for example you don’t see the header on the top of the page but on the right, or the bottom, thats something I would like to know. You can say it also when you like what you see always nice to hear a good word from time to time.