This recipe allows you to personalize the look of your store with much more detail than one stylesheet alone could offer. You will be able to specify an extra stylesheet for use with any of your top categories. This will come in very handy for color driven categories like "Men's and Women's Perfumes", "Clothing", or "Food Groups". You can specify new stylesheets for all or only a few of your top categories; for all others the default stylesheet will be used. The new stylesheets are relevant for all product-related pages, which are:
index.phpproduct_info.phpproduct_reviews.phpproduct_reviews_info.phpproduct_reviews_write.phptell_a_friend.php
In our case, the three top categories of a default osCommerce installation are called Hardware, Software, and DVD Movies. We will have the following background colors assigned for easy referencing: Hardware is yellow, Software is red, and DVD Movies is blue.
Clicking on Software or any related subcategory shows the red background. As the rounded corners of the infoboxes are images and not stylesheet driven, they will be replaced by transparent images.
This is how the top category DVD Movies category will look:
Go fetch your butter, flour, and cream, and let's enrich your style!
Note
New:
catalog/stylesheet_hardware.css catalog/stylesheet_software.css catalog/stylesheet_dvd.css (these are modified versions of the stylesheet.css file) catalog/includes/modules/cat_driven_stylesheets.php
Modified:
catalog/images/infobox/corner_left.gif catalog/images/infobox/corner_right.gif catalog/images/infobox/corner_right_left.gif catalog/includes/functions/general.php catalog/index.php catalog/product_info.php catalog/product_reviews.php catalog/product_reviews_info.php catalog/product_reviews_write.php catalog/tell_a_friend.php
1. Create transparent images for your infobox corners, and drop them in the
catalog/images/infoboxfolder. Replace all three imagescatalog/images/infobox/corner_left.gif, catalog/images/infobox/corner_right.gif, andcatalog/images/infobox/corner_right_left.gifwith the new transparent image created in the same size while keeping the original filename.2. Create new stylesheets in the
catalogfolder by copyingstylesheet.cssand naming them according to their intended use for easy referencing. For each category that has its own design colors (we will call these secondary stylesheets, determined by thecategories_idused for that page), overwrite the default style parameters with new ones. Here our new files are calledstylesheet_hardware.css, stylesheet_software.css, andstylesheet_dvd.css, as they will be used for Hardware, Software, and DVD Movies respectively.
Note
Chef's suggestion:
A different naming convention could use the categories_id for naming the new stylesheets, so they would be called stylesheet_cat_1.css, stylesheet_cat_2.css, etc. If you are changing IDs often or are the visual type, using descriptive names is probably the better solution for you.
3. Make the changes in the new stylesheets for the desired new looks. Here only the style for
BODYwas assigned a new background color; so all other style classes were removed from the stylesheet files. The original code for theBODYclass is defined as follows with the highlighted part changed for your secondary stylesheets files to assign new background colors:
BODY {
background: #ffffff;
color: #000000;
margin: 0px;
}
4. Open
catalog/includes/functions/general.php, and add the following new function before the closing?>tag, it will return the top category for a product, which will in turn decide on which stylesheet to add as a secondary stylesheet to your pages:
function tep_get_top_category_id($product_id) {
$topcat_array = explode('_' , tep_get_product_path($product_id));
$top_cat = $topcat_array[0];
return $top_cat;
}
Note that the built-in function of osCommerce,
tep_get_product_path, only pulls one category for each product, which can prove tricky for linked products as those are assigned to several categories. If you have many linked products and want to change the category colors according to the current category, adding a clone of this function that takes$current_category_idas a second parameter may be an option for you. Another option would be to duplicate products so that they have their owncategories_id; this is recommended only if you are not tracking stock.Also remember that products set at top level will not show in your products listings and also not be able to use their own stylesheets.
<?php
/*
$Id: cat_driven_stylesheets.php, v 1.00 2006/06/05 00:00:00 mm Exp $
Module written by Monika Mathé
http://www.monikamathe.com
Module Copyright (c) 2006 Monika Mathé
osCommerce, Open Source E-Commerce Solutions
http://www.oscommerce.com
Copyright (c) 2003 osCommerce
Released under the GNU General Public License
*/
switch ($stylesheet_test) {
case '1':
$stylesheet_add = 'hardware';
break;
case '2':
$stylesheet_add = 'software';
break;
case '3':
$stylesheet_add = 'dvd';
break;
default:
$stylesheet_add = '';
break;
}
?>
6. Open the last six files of the ingredients list:
index.php, product_info.php, product_reviews.php, product_reviews_info.php, product_reviews_write.php, andtell_a_friend.php, and find this line in each of them:
<link rel="stylesheet" type="text/css" href="stylesheet.css">
Directly below it, put on the following lines to add a secondary stylesheet if one was detected for the top category of the selected area:
<?php
if ($stylesheet_add != '') {
echo '<link rel="stylesheet" type="text/css" href="stylesheet_' .
$stylesheet_add . '.css' . '">';
}
?>
7. In
index.php, find this code that deals with the different categories and their products:
// the following cPath references come from application_top.php
$category_depth = 'top';
if (isset($cPath) && tep_not_null($cPath)) {
$categories_products_query = tep_db_query("select count(*) as total from " . TABLE_PRODUCTS_TO_CATEGORIES . " where categories_id = '" . (int)$current_category_id . "'");
Replace with the following code to fill the parameter
$stylesheet_testwith the top-level category ID if the selected category, and then call the file that decides which stylesheet to include as a secondary stylesheet:
// the following cPath references come from application_top.php
$category_depth = 'top';
if (isset($cPath) && tep_not_null($cPath)) {
$cPath_array = explode('_', $cPath);
$stylesheet_test = $cPath_array[0];
include(DIR_WS_MODULES . 'cat_driven_stylesheets.php');
$categories_products_query = tep_db_query("select count(*) as total from " . TABLE_PRODUCTS_TO_CATEGORIES . " where categories_id = '" . (int)$current_category_id . "'");
8. In the other five product-related files,
product_info.php, product_reviews.php, product_reviews_info.php, product_reviews_write.php, andtell_a_friend.php, find this:
require('includes/application_top.php');
Immediately below it, add the following two lines that check the top category ID by the current
products_id, and then call the file that decides which stylesheet to include as a secondary stylesheet:
$stylesheet_test = tep_get_top_category_id((int)$HTTP_GET_VARS['products_id']); include(DIR_WS_MODULES . 'cat_driven_stylesheets.php');
You've created a fantastically rich starter! Bon appetit!