Packt Deep Inside OsCommerce The Cookbook Spice Up Your OsCommerce Website Using 69 Mouth Watering Ready Made Recipes Oct 2006 ISBN 1847190901 pdf

(1)

F r o m T e c h n o l o g i e s t o S o l u t i o n s

Deep Inside

osCommerce

The Cookbook

Spice up your osCommerce website using 69 mouth-watering,

ready-made recipes

(2)

Deep Inside osCommerce

The Cookbook

Spice up your osCommerce website using

69 mouth watering, ready-made recipes

Monika Mathé

(3)

Deep Inside osCommerce: The Cookbook

Copyright © 2006 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval

system, or transmitted in any form or by any means, without the prior written

permission of the publisher, except in the case of brief quotations embedded in

critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of

the information presented. However, the information contained in this book is sold

without warranty, either express or implied. Neither the author, Packt Publishing,

nor its dealers or distributors will be held liable for any damages caused or alleged to

be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all the

companies and products mentioned in this book by the appropriate use of capitals.

However, Packt Publishing cannot guarantee the accuracy of this information.

First published: September 2006

Production Reference: 2150906

Published by Packt Publishing Ltd.

32 Lincoln Road

Olton

Birmingham, B27 6PA, UK.

ISBN 1-84719-090-1

www.packtpub.com

(4)

Credits

Author

Monika Mathé

Reviewers

Carine Bruyndoncx Jim Ekleberry Karly Phillips

Development Editor

Louay Fatoohi

Assistant Development Editor

Nikhil Bangera

Technical Editor

Divya Menon

Editorial Manager

Dipali Chittar

Indexer

Mithil Kulkarni

Proofreader

Chris Smith

Layouts and Illustrations

Shantanu Zagade

Cover Designer

(5)

Foreword

osCommerce is more than simply an open-source e-commerce solution. For

thousands and thousands of people, tweaking, adding, removing, and devising

new and ingenious ways to enhance their online stores is not so much a chore as an

engaging, fun, and above all, productive way of life.

Joining the osCommerce community means becoming part of a team of users and

developers from all over the world who share a common passion for contributing to

the project, or making use of it in any number of different ways. With a project like

osCommerce that lends itself to such a wide variety of contributions, tools, tips, and

tricks, it is important that you keep your finger on the pulse of the project.

Using the osCommerce website to discuss techniques and to share your ideas and

solutions is part and parcel of being an active community member. It is also a great

way to meet people with common ground, and help them with their projects or be

helped in return; there is much to be learned from this medium.

I daresay, however, that there are few such members out there who have been more

helpful and more supportive of osCommerce as whole than Monika—including

helping me out, a while back!

It is really only fitting then that she has taken a step out of her normal online arena

and written a book that mixes one part development experience with two parts fun

to bring you an osCommerce cookbook to take delight in.

Good luck and have fun,

(6)

About the Author

Monika Mathé

Fascinated by being able to combine logic and creativity, it seems that destiny had

finally found me when I became a software developer and Oracle Certified Database

Administrator.

It was a tough call to decide in which field to work, but landing a position in a

marketing agency and working with everything from Oracle to SQL Server and

HTML, ASP, and JavaScript was a fabulous decision I still congratulate myself for! I

learned more about marketing campaigns, e-commerce, CMS, and CRM than I had

ever wanted to know, I mean, ever thought was possible!

I have been completely absorbed by the Open Source Community. I became an avid

believer in PHP and in MySQL, and am definitely in a love affair with osCommerce.

I believe almost anything can be done with it ... I challenge anyone to prove me wrong!

Being an active member of the osCommerce Online Community, I know preemptively

which questions will arise in new shop creation. Presently, I am creating as many

customized shops for clients as time permits; of course while urging them to add as

many custom coded modules as I see fit ... that’s dessert for me!

With special thanks to my family, my forum friends, and my clients

all over the world. You are the spice of my life!

Monika Mathé

Architect

Oracle Certified Database Administrator (OCP DBA)

osCommerce Expert

http://www.monikamathe.com

osCommerce Profile Name: Monika in Germany

(7)

About the Reviewers

Carine Bruyndoncx

With a masters degree combining business, finance, and IT, it seems only natural

that I have been working in IT, for almost a decade, purely for international

financial companies and institutions. During these years, I have touched upon a lot

of different systems, databases, and programming languages, and held a range of

positions from analyst-programmer, DBA, quality assurance, and support as well as

team-leading and project management.

This international working environment management allowed me to build a solid IT

foundation. While living abroad and traveling extensively, I learned to appreciate the

cultural differences, habits, and the nice weather (though mostly in other parts of

the world).

In recent years, my focus has shifted away from finance towards CTI, CRM, and

e-business systems. Having experience with Vantive, Siebel, and a SAP CRM eSales

certification under my belt, it was time to start a new chapter in 2004. Following

my mantra, "Think global, act local" I joined Keukenlust.be (my parents business)

where among other responsibilites, I also handle the webshop (evidently based

on osCommerce).

Since I can't stay away from computers, you might find me posting about

(8)

Jim Ekleberry aka Jim Daemon from Tennessee, USA belongs to the top 20 list of

osCommerce members and has been on the forums since January 2003. He likes

meeting new people and making friends so working on this book as a technical

reviewer was a great opportunity for him to show off his coding talents.

In his real life job, Jim works in his company Akoza which is a leading provider of

Information Technology (IT) services and is an IT outsource partner for small and

medium-sized businesses. He encourages all non-techie business people to spend

their time on their business instead of their technology and have his company do the

big business services for not-so-big companies.

His favorite quote is a clever remark by Albert Einstein, "Great spirits have always

found violent opposition from mediocre minds. The latter cannot understand it

when a man does not thoughtlessly submit to hereditary prejudices but honestly and

courageously uses his intelligence." — a perfect mantra for a tech reviewer!

(9)

Karly Phillips

Working wonders in the kitchen is like work in life itself... the preparations for

something exceptional and fulfilling keep us at it; keep us coming back again and

again to try it in different ways to improve ourselves and our causes.

I am not a master chef; my dining room table has no Michelin stars, but the 1/7th

of my life I spend passionately mucking about in my kitchen, I hope, will result in

much more than well-prepared meals—to create fond memories, not unlike those I

have of my own mother, for my children.

I am equally passionate about my work with To Love Children Educational

Foundation International Inc., an NGO with special consultative status to the

ECOSOC of the United Nations. TLC is making a difference in the poorest of the

developing countries of our world.

Monika kindly allowed me to share in the work of her kitchen, even giving me

permission to lick the spoon from time to time. Chapter 3, Spice Up Your Infoboxes,

was so intriguing to me, as a non-osCommerce user, that I read front to back Building

Online Stores with osCommerce: Professional Edition by David Mercer, registered a

domain, and downloaded a copy to play with… just to better understand it. It is a

wonderful tribute to her passion!

With my best wishes,

Karly Phillips

www.karlyphillips.com

(10)

Introduction

1 Chapter 1: Chop and Cream the Basic Design

7 1. Add Easy Top-Category Driven Stylesheets

7 Presentation

8 Ingredients

9 Cooking

10 2. Create Flexible Column Definitions

1

3 Presentation

13 Ingredients

14 Cooking

14 Summary

16 Chapter 2: Serve them New Menus

17 3. Show Active Subcategories only in Your Category Box

17 Presentation

17 Ingredients

18 Cooking

18 4. Create Separate Boxes for Each Top Category

22 Presentation

22 Ingredients

23 Cooking

24 5. Simplify Category Box Navigation by Defining Specific Colors

for Each Level

29 Presentation

29 Ingredients

30

(11)

6. Add Extra Links to Your Category Box

31 Presentation

31 Ingredients

32 Cooking

32 Summary

33 Chapter 3: Spice Up Your Infoboxes

35 7. Move Your Infobox Header closer to Content

35 Presentation

36 Ingredients

36 Cooking

36 8. Make Your Infobox Header Taller

37 Presentation

38 Ingredients

38 Cooking

38 9. Add a Pop-Up Page from an Infobox Link

39 Presentation

39 Ingredients

40 Cooking

40 10. Add Images to Infoboxes

42 Presentation

42 11. Add Extra Images to Your Columns without Framing Boxes

46 Presentation

47 Ingredients

47 Cooking

48 12. Hide or Show Boxes Driven by Language Choice

49 Presentation

49 Ingredients

49 Cooking

50 13. Add Boxes Dedicated to Specified Countries

5

1 Presentation

51 Ingredients

52

(12)

14. Define Box-Image Size Independent of Product Thumbs

5

4 Presentation

54 Ingredients

55 Cooking

55 15. Show Manufacturers' Logos in the Manufacturers Infobox

59 Presentation

59 Ingredients

60 Cooking

60 16. Add Double Borders to Boxes with Background Matting

62 Presentation

62 Ingredients

63 Cooking

63 Summary

66 Chapter 4: Stuff Your Product Display

67 17. Add Parent Category in Product Listing

68 Presentation

68 Ingredients

69 Cooking

69 Variation

70 18. Add Top Category in Product Listing

71 Presentation

71 Ingredients

72 Cooking

72 19. Add a Separator Line in Product Listing

74 Presentation

74 Ingredients

75 Cooking

75 20. Add a Cell Background and an Image Border to Product Listing

75 Presentation

76 Ingredients

76 Cooking

76 21. Sort Product Listing by Date Added

78 Presentation

79 Ingredients

79 Cooking

79 22. Prepare a Quick 'n Easy Review System for Product Listing

80 Presentation

81 Ingredients

81

(13)

23. Whip Up a Top-Category Driven Product Listing

83 Presentation

83 Ingredients

84 Cooking

84 24. Control Manufacturer Image Size

8

9 Presentation

90 Ingredients

91 Cooking

91 25. Call a Pop Up from Product Description in Product Info

93 Presentation

93 Ingredients

94 Cooking

94 26. Call Unique Code for a Single Product in Product Info

96 Presentation

96 Ingredients

97 Cooking

98 27. Show a Pop Up with Shipping Options in Product Info

100 Presentation

101 Ingredients

102 Cooking

102 28. Add an Anchor for Options in Product Info

109 Presentation

109 Ingredients

110 Cooking

110 29. Integrate Tell a Friend into Product Info

112 Presentation

112 30. Offer an Ask a Question about a Product Link on Product Info

116

(14)

31. Sell Affiliate Products from Your Catalog

12

2 Presentation

122 Ingredients

124 Cooking

124 32. Fill Up Also Purchased Products Search Result

131 Presentation

131 Ingredients

132 Cooking

132 33. Limit New Products to Those with an Image

134 Presentation

135 Ingredients

135 Cooking

136 34. Set Column Count for New Products

137 Presentation

137 Ingredients

138 Cooking

138 Summary

140 Chapter 5: Dish Up a Better Search

141 35. Add Help Text to Your Search-Box Input Field

141 Presentation

141 Ingredients

142 Cooking

142 36. Set the Search-Result Value Independent of Admin Listings

145 Presentation

145 Ingredients

146 Cooking

146 37. Add an All Manufacturers Page to the Manufacturers Infobox

147 Presentation

148 Ingredients

148 Cooking

148 38. Customize Your Product Listing with Individual Boxes for

Each Manufacturer

153 Presentation

153 Ingredients

155 Cooking

155 Summary

163 Chapter 6: Grill that Checkout Process

165 39. Make Removing Products from the Cart more Intuitive

165

(15)

Ingredients

166 Cooking

167 40. Remove Delivery Address Modification from Your Shipping Page 16

8 Presentation

168 Ingredients

169 Cooking

169 41. Modify Shipping Method Display for the Confirmation Page

17

1 Presentation

171 Ingredients

172 Cooking

172 42. Add a Sophisticated Gift Wrapping Option to the Shipping Page

173 Presentation

174 Ingredients

176 Cooking

176 43. Add the Option to Donate during Checkout

190 Presentation

190 Ingredients

191 Cooking

192 44. Personalize Your Order Confirmation Email

20

2 Presentation

202 Ingredients

203 Cooking

203 45. Add Your Customers' Email Addresses and Phone Numbers to Your

Order Confirmation Email

20

4 Presentation

204 Ingredients

204 Cooking

205 46. Add Your Customers' Fax Numbers to Your Order Confirmation

Email

205 Presentation

205 Ingredients

206 Cooking

207

47. Add the Products' Manufacturers to Your Order Confirmation Email

209 Presentation

209 Ingredients

210 Cooking

210

48. Add the Products' Category Tree to Your Order Confirmation Email

211 Presentation

211 Ingredients

212 Cooking

212

(16)

Chapter 7: Whip Up New Shipping Options

215 49. Add Multiple Flat Rate Shipping Modules

216 Presentation

216 Ingredients

217 Cooking

217 50. Add Percentage and Base Price Support to Table Rate

225 Presentation

225 Ingredients

227 Cooking

227 51. Allow Free Postage for Free Items

233 Presentation

233 Ingredients

234 Cooking

234 52. Limit Flat Rate Shipping to a Specific Top Category Only

24

1 Presentation

241 Ingredients

243 Cooking

243 53. Hide Shipping Modules Driven by Weight

251 Presentation

252 Ingredients

253 Cooking

254 54. Create a Per Item Shipping Module with Two Price Levels

268 Presentation

268 Ingredients

271 Cooking

271 Summary

280 Chapter 8: Season Your Payment Modules

281 55. Hide Payment Modules from Public Eyes

281 Presentation

282 Ingredients

284 Cooking

284 56. Create Dependencies between Shipping and Payment Modules

286 Presentation

286 Ingredients

287 Cooking

287 57. Offer Customized Payment Options for Selected Customers

28

9 Presentation

289 Ingredients

291 Cooking

291

(17)

Chapter 9: Cook Up a Multiple Banner System

295 58. Set Up Category-Driven Banners

295 Presentation

296 Ingredients

298 Cooking

298 59. Create Rotating Banners that Link within Your Own Shop

301 Presentation

301 Ingredients

303 Cooking

303 Summary

310 Chapter 10: Throw Together Dessert–Extra Treats for You!

311 60. Display a Dynamic Shipping Table for Table Rate Shipping

311 Presentation

311 Ingredients

313 Cooking

313 61. Restructure and Customize Your File Download Module

31

6 Presentation

317 Ingredients

318 Cooking

319 62. Create a Dual Website Combining Shopping Cart and Showroom

Features

320 Presentation

320 Ingredients

323 Cooking

323 Summary

330 Chapter 11: Beef Up Your Admin

331 63. Reset Date Added for Products

331 Presentation

332 Ingredients

333 Cooking

333 64. Set an Expiry Date for Products

334 Presentation

335 Ingredients

336 Cooking

336 65. Limit Also Purchased Products Selection by Date

344 Presentation

344 Ingredients

345

(18)

66. Display Full Information for Customer, Delivery, and Billing Addresses

at a Glance

347 Presentation

347 Ingredients

348 Cooking

348 67. Highlight Orders According to their Order Status

352 Presentation

352 Ingredients

353 Cooking

353 68. Sort Your Administration Menu Configurat

ion-Box Entries

355 Presentation

355 Ingredients

356 Cooking

356 69. Allow Entering Products in an Additional Currency

359 Presentation

359 Ingredients

360 Cooking

360 Summary

369

(19)

(20)

Introduction

Dear fellow osCommerce community members, what’s for dinner tonight?

Your good old stew recipe probably doesn’t sound that appetizing anymore, and

your customers probably share this view when they visit your website that hasn’t

been spiced up recently for added interest.

Let’s whip up in our cuisine a donation module for that church, which prefers to

collect alms not only during servicess, but also online these days. You may be an

artist in need of an online showroom presenting courses, tutorials, and artwork in

a content management system, with or without an added shopping-cart function

as its backbone. Why not garnish your gift shop with a great solution for offering

gift-wrapping choices during checkout.

osCommerce is a highly adaptable, fascinating piece of software that already offers

most necessary ingredients to work with; yet you can compare it with a five-star

restaurant where the secret trimmings and preparations make the unrivaled dishes.

Make your store truly yours by adding that special kick, which makes it stand out

from the crowd of online shops. Just as you are willing to spend a dime on a fabulous

five-star dinner prepared by the chef, you will find that your customers feel the same

way, as your shop wins their favor due to your new custom code that enhances their

shopping experience. Increased sales rates will show you just how much they really

like those new treats.

With this book in your hands, you will find many inspiring ideas that will make

you itch to dive into your code pages immediately. Some are only a few lines worth,

some go knee-deep into core code changes, while others involve minor tackling of a

lot of files with incredible outcomes. All will add that special flavor to your site that

you have been looking for.

This step-by-step presentation of each tastefully prepared recipe will allow you to

(21)

Your files are your ingredients; your brain is your equipment; add a bit of elbow

grease, and your customers will be delighted to see the mouthwatering treats you

cook up for them.

Just as a great cook can whip up an entire menu after a spoonful of that new gravy in

his favorite restaurant, you too will be inspired to make changes similar to those in

this book. You’ll learn about code reading and the great pleasure of making that code

yours. While I suggest making most changes manually, you can request a file set of

each recipe from Packt’s website by presenting a proof of purchase of this book. This

will definitely come in handy with larger bits of code, when typing it all again could

become messy.

But who cares about a bit of mess? Get out your apron and roll up your sleeves, and

Bon appetit!

What This Book Covers

Chapter 1 equips you with a few, very easy, and very important changes to the basic

design, which will make developing, and later modifying a whole new template

a breeze.

Chapter 2 will help you modify your navigation to ensure a smoother shopping

experience for your customers.

Chapter 3 covers infoboxes, and turns you into an expert in tweaking them to

your needs.

Chapter 4 deals with one of the most important visual parts of your shop—the

product display in the listings and the detail page.

Chapter 5 outlines different methods to make searching on your site a fun experience

since you want your customers to use your search and to find the products you want

to sell to them.

Chapter 6 highlights customizations of the checkout process, namely, the flow from

the shopping cart to the shipping and payment pages up to the order email.

Chapter 7 talks about new shipping modules. You will learn how to adapt existing

modules to create completely new rate systems for your shop.

Chapter 8 focuses on existing payment modules and how they can be tweaked.

Chapter 9 provides tips on efficiently using banners as a marketing tool.

(22)

Chapter 11 tackles changes in the admin area. You alone will be the keeper of these

secret recipes hidden to the public eye.

What You Need for This Book

This book is for people who are already familiar with osCommerce. It presumes

a working knowledge of PHP and HTML, as well as basic understanding of

phpMyAdmin for database inserts.

How to Use This Book

As with any good cookbook, you can open this book in any chapter and start with

the recipe that tantalizes your taste buds first. There is no need to first read the book

cover to cover, as all individual recipes work as standalone modules to spice up your

default osCommerce installation to suit your taste.

All recipes are sorted by topics into chapters and can be implemented in any order.

Each recipe starts out with an osCommerce 2.2 Milestone 2 Update 060817, which

has the latest security patches of August 2006 added to the core code. If you are

using several recipes, make sure you mix and match carefully, so you won’t break

the code. Always take a backup of the files modified. For easier identification, mark

the header part of the file with the recipe you are using in it.

Conventions

In this book, you will find a number of styles of text that distinguish between

different kinds of information. Here are some examples of these styles, and an

explanation of their meaning.

There are three styles for code. Code words in text are shown as follows: "Run the

following SQL statement in your database to create the new columns affiliate and

affiliate_url for the products table."

A block of code will be set as follows:

// 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

(23)

When we wish to draw your attention to a particular part of a code block, the

relevant lines or items will be made bold:

$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 . "'"); }

New terms and important words are introduced in a bold-type font. Words that you

see on the screen, in menus or dialog boxes for example, appear in our text like this:

"clicking the Next button moves you to the next screen".

This sticky note box appears at the start of all recipes, and will tell you which ingredients to have ready before you get cooking.

To make sure that your soup doesn't get too salty or burned, special tips are highlighted as Chef's suggestion in this format.

Reader Feedback

Feedback from our readers is always welcome. Let us know what you think about

this book, what you liked or may have disliked. Reader feedback is important for us

to develop titles that you really get the most out of.

To send us general feedback, simply drop an email to [email protected],

making sure to mention the book title in the subject of your message.

If there is a book that you need and would like to see us publish, please send us a

note in the SUGGEST A TITLE form on www.packtpub.com or email suggest@

packtpub.com.

(24)

Customer Support

Now that you are the proud owner of a Packt book, we have a number of things to

help you to get the most from your purchase.

Downloading the Example Code for the Book

To obtain the code for this book, send a mail to

[email protected]

. Your order

will be verified and the code dispatched via email”

Errata

Although we have taken every care to ensure the accuracy of our contents, mistakes

do happen. If you find a mistake in one of our books—maybe a mistake in text or

code—we would be grateful if you would report this to us. By doing this you can

save other readers from frustration, and help to improve subsequent versions of this

book. If you find any errata, report them by visiting

http://www.packtpub.com/ support, selecting your book, clicking on the Submit Errata link, and entering the

details of your errata. Once your errata have been verified, your submission will be

accepted and the errata added to the list of existing errata. The existing errata can be

viewed by selecting your title from http://www.packtpub.com/support.

Questions

(25)

(26)

Chop and Cream the

Basic Design

Welcome to our cooking class! Your Chef is Monika—also known as Monika in

Germany on the forums. There is no doubt about the fact that I absolutely love

osCommerce, and thoroughly enjoy tweaking all parts of it to get the underlying

code to perform at its best. In the following chapters, you will learn about all parts of

the osCommerce structure and how to adapt them to your needs. Let's get cooking!

As starters, let's change a few design elements of the default osCommerce setup,

namely, the stylesheet handling, and the three column layout, which is currently a

bit inflexible.

In this chapter, we will see how to:

Add easy top-category driven stylesheets

Create flexible column definitions

1. Add Easy Top-Category Driven

Stylesheets

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:

(27)

index.php

product_info.php

product_reviews.php

product_reviews_info.php

product_reviews_write.php

tell_a_friend.php

Presentation

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.

(28)

This is how the top category DVD Movies category will look:

Go

fetch your butter, flour, and cream, and let's enrich your style!

Ingredients

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

(29)

Cooking

1. Create transparent images for your infobox corners, and drop them

in the catalog/images/infobox folder. Replace all three images

catalog/images/infobox/corner_left.gif, catalog/images/infobox/ corner_right.gif, and catalog/images/infobox/corner_right_left.gif

with the new transparent image created in the same size while keeping the

original filename.

2. Create new stylesheets in the catalog folder by copying stylesheet.css

and 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 the categories_id

used for that page), overwrite

the default style parameters with new ones. Here our new files are

called stylesheet_hardware.css, stylesheet_software.css, and

stylesheet_dvd.css, as they will be used for Hardware, Software, and

DVD Movies respectively.

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 BODY was assigned a new background color; so all other style

classes were removed from the stylesheet files

. The original code for the

BODY

class 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; }

(30)

function tep_get_top_category_id($product_id) {

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_id

as a second parameter may be an option for you. Another option would be

to duplicate products so that they have their own categories_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.

5. Cr

eate the new file

cat_driven_stylesheets.php in your

(31)

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, and tell_a_friend.php

, and find this line

in each of them:

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

7. In index.php

, find this code that deals with the different categories and

their products:

$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_test

with the top-level category ID if the selected category, and then call the file

that decides which stylesheet to include as a secondary stylesheet:

$cPath_array = explode('_', $cPath); $stylesheet_test = $cPath_array[0];

(32)

$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, and tell_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!

2. C

reate Flexible Column Definitions

Th

is recipe allows you to define and redefine column width and column layout,

and modify the traditional three column layout to any other combination including

asymmetrical designs, within seconds.

Presentation

You can completely remove the right column, freeing up all space taken up by it.

(33)

Let's take one of grandma's favorites and make it new!

Ingredients

Modified:

catalog/includes/application_top.php

All 38 files on root level in the catalog folder that have the right and left column. catalog/includes/column_left.php

catalog/includes/column_right.php

Cooking

1. In catalog/includes/application_top.php

find this:

// customization for the design layout define('BOX_WIDTH', 125);

// how wide the boxes should be in pixels (default: 125)

The default-box width is defined by this parameter. We divide the parameter

into two using the left and right column respectively. Replace with this code:

// customization for the design layout define('BOX_WIDTH_LEFT', 125);

// how wide the boxes should be in pixels (default: 125) define('BOX_WIDTH_RIGHT', 125);

// how wide the boxes should be in pixels (default: 125)

(34)

2. Find in index.php

and the other root files (altogether 38) the following lines:

<td width="<?php echo BOX_WIDTH; ?>" valign="top"> <table border="0" width="<?php echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="2">

<?php require(DIR_WS_INCLUDES . 'column_left.php'); ?>

</table></td>

Replace this with the following lines, as we will be moving the column-cell

definition directly into the column files:

<?php require(DIR_WS_INCLUDES . 'column_left.php'); ?>

3. Repeat this for the right column, find:

<td width="<?php echo BOX_WIDTH; ?>" valign="top"> <table border="0" width="<?php echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="2">

<?php require(DIR_WS_INCLUDES . 'column_right.php'); ?>

</table></td>

Replace with this:

<?php require(DIR_WS_INCLUDES . 'column_right.php'); ?>

4. For both columns, you have now removed the cell definition from the root

files. This means that if the included file is empty, no additional cell will be

added and the entire page width can be used for the site content.

The parts that were cut from the root files have to be added to the column

files; so open

catalog/includes/column_left.php, and add the following

line at the very top, above the opening php tag:

<td width="<?php echo BOX_WIDTH_LEFT; ?>" valign="top"> <table border="0" width="<?php echo BOX_WIDTH_LEFT; ?>" cellspacing="0" cellpadding="2">

Note

how the new definition was used so that left and right columns can be

defined independently. Add the following code after the closing php tag of

catalog/includes/column_left.php

:

(35)

5. Repeat this procedure for the catalog/includes/column_right.php

file

using the column-right definition when replacing.

<td width="<?php echo BOX_WIDTH_RIGHT; ?>" valign="top"> <table border="0" width="<?php echo BOX_WIDTH_RIGHT; ?>" cellspacing="0" cellpadding="2">

Add the following code after the closing php tag of

catalog/includes/column_right.php:

</table></td>

If you'd now like to remove the whole column right without changing

the underlying structure, so you can have it back as soon as you

implement a new design, comment out everything in the file

catalog/includes/column_right.php. You can add all boxes you'd like to

keep to the left column.

Chef's suggestion

:

This setup enables you to have more than three columns

also (you may want to show a column for ads on your product pages); all it takes is a new include for the

additional column in the relevant file and a new file created

following this method for your includes folder, with its

own width specified.

Just as easily, add a conditional statement at the top of the

column file (close at bottom), so your right column only

shows on certain pages.

Time to share a cup of tea with Grandma! You've done it! Bon appetit!

Summary

In this chapter, you have learned to add additional stylesheets for all top-category

products that need a special flavor. You can now easily add more stylesheets and

completely change the look of your sub-pages; they can use different colors and

background images for each top-level category. In addition, you have learned to cut

up your root files and take out the cell-definition part for your left and right columns,

(36)

Serve them New Menus

In this chapter, we will whip up new navigation structures that will help your

customers browse your pages with ease.

We will talk about how to:

Show active subcategories only in your categories box

Create separate boxes for each top category

Simplify category box navigation by defining specific colors for each level

Add extra links to your category box

3. Show Active Subcategories only in

Your Category Box

In a default osCommerce setup, the category box holds your categories, and

subcategories are displayed in the same box directly below the active category name.

This recipe will use the category box for subcategories only while the main categories

are displayed in a different menu.

By adding a navigation bar with your top categories at the top of the pages, the

category box only needs to be visible if there are subcategories to a category. At all

other times, the category box will be hidden to free up the space.

Presentation

In this setup a horizontal navigation bar was added at the very top of the page for

the top categories of the shop, which are Hardware, Software, and DVD Movies in a

default osCommerce installation. By clicking on the category Software, a subcategory

box shows up, displaying all the subcategories that belong to Software. The box is

(37)

still visible when you click on a subcategory from the box to show the subcategory

product listing like here:

If your setup has five top categories with active

subcategories and two top categories with products right

on the first level, your top menu bar will show all seven top categories, but only the five that have subcategories

will produce a category box with their subcategories when selected.

This one is very easy; so let's play—hide the pigs in blankets!

Ingredients

Modified:

catalog/includes/header.php

catalog/includes/boxes/categories.php

Cooking

1. Open catalog/includes/header.php

and find this in line 51:

if ($messageStack->size('header') > 0) { echo $messageStack->output('header'); }

(38)

Immediately below it, add the following code snippet to create the new

top-category navigation bar. We are pulling all top categories from a query,

lining them up horizontally as links to the respective categories_id, and

displaying this string in a horizontal menu bar, cutting off the last characters

used for separating menu items in the loop—the string ' | ',

which is 13 characters long:

<td class="headerNavigation" align="center"> <?php

$mylinks = '';

$categories_query = tep_db_query("select c.categories_id, cd.categories_name, c.parent_id from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd where

c.parent_id = '0' and c.categories_id = cd.categories_id and cd.language_id='" . (int) $languages_id ."'

order by sort_order, cd.categories_name");

while ($categories = tep_db_fetch_array($categories_query)) { $mylinks .= '<a href="' . tep_href_link(FILENAME_DEFAULT, 'cPath=' . $categories['categories_id']) . '"

class="headerNavigation">' .

$categories['categories_name'] . '</a> | '; }

(39)

$categories_string .= tep_href_link(FILENAME_DEFAULT, $cPath_new) . '">';

if (isset($cPath_array) && in_array($counter, $cPath_array)) { $categories_string .= '<b>';

}

// display category name

$categories_string .= $tree[$counter]['name'];

if (isset($cPath_array) && in_array($counter, $cPath_array)) { $categories_string .= '</b>';

}

if (tep_has_category_subcategories($counter)) { $categories_string .= '->';

tep_count_products_in_category($counter); if ($products_in_category > 0) {

Change to the new code. This will show rows only if it is a subcategory level

or below, but not a top category:

if ($tree[$counter]['parent'] == 0) {

if (isset($cPath_array) && in_array($counter, $cPath_array)) {

(40)

}

if (isset($cPath_array) && in_array($counter, $cPath_array)) {

for ($i=0; $i<$tree[$counter]['level']; $i++) {

3. In this section, a new infobox heading will be created for categories, and

the top-level category array is filled for display in the original box. Still in

, find the following code in

line 61:

new infoBoxHeading($info_box_contents, true, false);

$categories_string = ''; $tree = array();

$categories_query = tep_db_query("select c.categories_id, cd.categories_name, c.parent_id from " .

while ($categories = tep_db_fetch_array($categories_query)) {

$tree[$categories['categories_id']] = array(

Replace it with the following code; wrapping this whole section into an "if"

statement, which checks whether we are indeed on subcategory level already.

The query is adjusted to pull subcategories only from the current category.

The category array has been removed as it is no longer needed:

(41)

TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd where c.parent_id = '0' and

c.categories_id = cd.categories_id and c.categories_id = '" . $cPath . "' and cd.language_id='" . (int)$languages_id ."' order by sort_order, cd.categories_name");

while ($categories = tep_db_fetch_array($categories_query)) {

4. Almost at the bottom of the page, find the following in line 124, which

displays the category box:

new infoBox($info_box_contents);

Replace with the following code, closing the "if" statement created in step 3

after the categories box display is finished:

new infoBox($info_box_contents);

}

Good job getting those sausages in the cakes! Bon appetit!

4. Create Separate Boxes for Each Top

This recipe will create a category box for each of your top categories that have

subcategories. To cover top categories that have products right in the next level

without subcategories, a top navigation bar is added.

Presentation

(42)

If your setup has five top categories with active

subcategories and two top categories with products right on

the first level, your infobox headers will show all seven top categories in the left column, but only five category boxes

will show with subcategories obviously; the top categories that have no subcategories will show as links that direct to

their product listing. See the Chef's suggestion below (at the end of the Cooking section) for a hack that only shows the

box if there are subcategories for this top category.

Go grab your cookie cutters, and have fun hacking your code!

Ingredients

Modified:

catalog/includes/header.php

(43)

Cooking

1. Open catalog/includes/header.php

and find this in line 51:

if ($messageStack->size('header') > 0) { echo $messageStack->output('header'); }

?>

Immediately below it, add the following code snippet to create the new

top-category navigation bar. We are pulling all top categories from a query,

lining them up horizontally as links to the respective

categories_id

, and

displaying this string in a horizontal menu bar, cutting off the last characters

used for separating menu items in the loop—the string ' | ',

which is 13 characters long:

<td class="headerNavigation" align="center"> <?php

$mylinks = '';

while ($categories = tep_db_fetch_array($categories_query)) { $mylinks .= '<a href="' . tep_href_link(FILENAME_DEFAULT, 'cPath=' . $categories['categories_id']) .

'" class="headerNavigation">' .

$categories['categories_name'] . '</a> | '; }

echo substr($mylinks, 0, strlen($mylinks)-13); ?>

</td> </tr> </table>

2. Open catalog/includes/boxes/categories.php

and find this in line

14, where the category tree is built, which in the default version holds all

categories and subcategories:

global $tree, $categories_string, $cPath_array;

(44)

$categories_string .= "  ";

$categories_string .= tep_href_link(FILENAME_DEFAULT, $cPath_new) . '">';

if (isset($cPath_array) && in_array($counter, $cPath_array)) {

$categories_string .= '<b>'; }

// display category name

if (isset($cPath_array) && in_array($counter, $cPath_array)) {

$categories_string .= '</b>'; }

Replace with the following code that will only display information about a

specific category:

global $tree, $categories_string, $cPath_array, $cat_name;

$cPath_new = 'cPath=' . $tree[$counter]['path'];

$categories_string .= '<a href="';

$categories_string .= tep_href_link(FILENAME_DEFAULT, $cPath_new) . '">';

if ($cat_name == $tree[$counter]['name']) {

(45)

3. In this section, the category box is created in the default setup. Still in

, find the following code in

line 64:

We want to create a category box for each top category; this section needs to

be wrapped into a loop, and the top-category name needs to be pulled into

the variable $cat_name, so it can be shown as the box heading. Replace the

previous code with the following, with the upper section being all new, and

with a few changes in the lower-loop part (important parts are highlighted).

Only the top box has a rounded corner, and the selection pulls in to each loop

only the subcategories of the relevant box:

(46)

$num = 0;

$categories_box_query = tep_db_query("select c.categories_id, cd.categories_name, c.parent_id from " .

if (tep_has_category_subcategories($box_id)) {

(47)

4. Al

most at the bottom of the page, find this in line 162:

new infoBox($info_box_contents); ?>

</td> </tr>

This is where the default infobox is created. As we have many boxes, and

have each of these boxes wrapped in its own table cell as seen in step 2, we

need to close those cells, move one counter ahead in the loop, and free up the

parameter $first_element so that only current-box data shows in each box.

Replace with this:

new infoBox($info_box_contents); ?>

</td> </tr> <?php

}

unset($first_element); }

?>

If you prefer to show the box only for categories that have subcategories, and are happy with the top-navigation bar for those categories that have products right on the next level, you only need to move one line in categories.php. Find the following code in line 85:

if (tep_has_category_subcategories($box_id)) {

Move it directly above line 77, which increases the $num

parameter, so it looks like this:

if (tep_has_category_subcategories($box_id)) { $num++;

Moving this row will exclude all categories that do not have subcategories from the box header creation loop, while the regular recipe code will display the header but no content if there are no subcategories.

(48)

5. Simplify Category Box Navigation by

Defining Specific Colors for Each Level

In the default setup, all levels of categories have the same font color in the category

box. If you'd like to color each level differently, this recipe will allow you to specify a

stylesheet class for each category level.

Experiment using all the available class formatting options, not only colors. It may be the perfect choice for your store

to show one of the levels in uppercase completely (with the first letter being bigger) using the parameter font-variant:small-caps;

Presentation

Your box could look like the one in this recipe. A second-level subcategory Subcat

level 2 was added for better demonstration:

In this example, Hardware

stays black, first-level subcategory

CDROM Drives is

red, and the added second-level subcategory is brown. The code presented here

supports four levels of subcategories.

Keep in mind though that flat navigation structures are

(49)

It will keep your customers far happier, though, if they do not have to click through

a deep tree of categories to find the product they are looking for.

Need to add some food coloring to your mix? Go for it!

Ingredients

Modified:

catalog/stylesheet.css

Cooking

1. We

will first need to include color definitions for subcategories in the

stylesheet file that we can refer to when creating the category box. Open

catalog/stylesheet.css

and add anywhere in the file:

/* begin styles for categories box, levels */ A.cat {

color: #000000;

text-decoration: none; }

A.subcat1 { color: #FF0000;

A.subcat2 { color: #5b0d0d;

A.subcat3 { color: #019901;

/* end styles for categories box, levels */

2. Open catalog/includes/boxes/categories.php

and find this in line 20:

(50)

Replace with the following code, which checks for the level the category is in

and assigns the appropriate stylesheet class:

switch ($tree[$counter]['level']) { case 0:

$class = 'cat'; break;

case 1:

$class = 'subcat1'; break;

case 2:

case 3:

default: $class = ''; break; }

$categories_string .= '<a class="' . $class . '" href="';

A visually appealing dish, isn't it? Bon appetit!

6. Add Extra Links to Your Category Box

Depending on your layout and structure, you may benefit from adding important

links directly to the bottom of your category box. You can use any links from your

website that you want to put into easy reach. If you have added contributions that

list all products, you can of course add a link to that page here also.

Presentation

(51)

If you're looking for the cream of the cream, this is for you!

Ingredients

Modified:

Cooking

1. Open catalog/includes/boxes/categories.php

and find this in line 132:

$info_box_contents[] = array('text' => $categories_string);

Add the following code right below it:

$info_box_contents[] = array('text' => tep_draw_separator());

$text2 = '';

$text2 .= '<a href="' . tep_href_link(FILENAME_SPECIALS, BOX_HEADING_SPECIALS) . '">' . BOX_HEADING_SPECIALS . '</a><br>';

$text2 .= '<a href="' . tep_href_link(FILENAME_PRODUCTS_NEW, BOX_HEADING_WHATS_NEW) . '">' . BOX_HEADING_WHATS_NEW . '</a><br>';

(52)

BOX_HEADING_REVIEWS) . '">' . BOX_HEADING_REVIEWS . '</a>';

$info_box_contents[] = array('text' => $text2);

Smoother than a great Béchamel! Bon appetit!

Summary

Having finished this chapter, you now have a full pantry of ideas to change your

main navigating configuration. You can limit your category box to the active

(53)

(54)