multimixer » learn

How to install the osCommerce Hook system

multimixer — Fri, 30 Oct 2015 13:58:17 +0000

This is a quick explanation about how to install the osCommerce “hook system”. It will be standard in the next osCommerce versions, but you can start using it on your existing store of series 2.3.xx, it make things like adding content or a mini application to a page much easier

Here you go

1) File catalog/admin/includes/application_top.php

Add to the bottom of the file, before the last closing ?> following

// hook
  require(DIR_FS_CATALOG . 'includes/classes/hooks.php');
  $OSCOM_Hooks = new hooks('admin');

2) File catalog/includes/application_top.php

Add to the bottom of the file, before the last closing ?> following

// hook
  require(DIR_FS_CATALOG . 'includes/classes/hooks.php');
  $OSCOM_Hooks = new hooks('shop');

3) Upload file hooks.php

Create a file named hooks.php, copy paste the code shown below and upload it to location catalog/includes/classes/

_site = basename($site);

      $this->register('global');
    }

    function register($group) {
      $group = basename($group);

      $directory = DIR_FS_CATALOG . 'includes/hooks/' . $this->_site . '/' . $group;

      if ( file_exists($directory) ) {
        if ( $dir = @dir($directory) ) {
          while ( $file = $dir->read() ) {
            if ( !is_dir($directory . '/' . $file) ) {
              if ( substr($file, strrpos($file, '.')) == '.php' ) {
                $code = substr($file, 0, strrpos($file, '.'));
                $class = 'hook_' . $this->_site . '_' . $group . '_' . $code;

                include($directory . '/' . $file);
                $GLOBALS[$class] = new $class();

                foreach ( get_class_methods($GLOBALS[$class]) as $method ) {
                  if ( substr($method, 0, 7) == 'listen_' ) {
                    $this->_hooks[$this->_site][$group][substr($method, 7)][] = $code;
                  }
                }
              }
            }
          }

          $dir->close();
        }
      }
    }

    function call($group, $action) {
      $result = '';

      foreach ( $this->_hooks[$this->_site][$group][$action] as $hook ) {
        $result .= call_user_func(array($GLOBALS['hook_' . $this->_site . '_' . $group . '_' . $hook], 'listen_' . $action));
      }

      if ( !empty($result) ) {
        return $result;
      }
    }
  }
?>

4) Create new folders

First a folder named /hooks/ within catalog/includes/ Then, create 2 new folders named /shop/ and /admin/ within that new folder /hooks/

Your folder structure should look like this now – the image is showing only the new folders of course

That’s all, now you have the hook system installed and can start creating hooks.

I’ll post some examples about how to create and use that “hooks” soon

Nice css tooltips for your store

multimixer — Tue, 11 Jun 2013 17:43:38 +0000

I got several questions recently from people who want to add tooltips to various areas of their osCommerce store. I got to see any kind of possible and impossible approaches to this ! It is true that tooltips are a nice way to provide additional information to your store visitors

Things are really simple, I’ll post a couple of examples that you can use in your store. There are many ways available of course, I prefer to use plain css

Important to understand is, that a tooltip has an “anchor” and a “content”. The anchor is the part that stay visible on the page and will trigger the tooltip effect when someone hover over it. The content is the part that stay hidden until someone hover over the anchor

1 Tooltips in product descriptions

This is the most simple case since it is plain html. You can add following into your product description, or any other text, like for example a category description, the text in your static pages etc


  Tooltip
  
      The title 1

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a purus et mauris pharetra sagittis ut in ligula. Sed sagittis, lacus sit amet aliquet elementum, dui leo porttitor arcu, ut tempus orci erat eget sem. Proin nec orci sit amet lorem semper gravida sed eu sapien. Nulla commodo odio vitae libero venenatis sit amet suscipit est tempus.

The word “tooltip” is the anchor. The text that comes after that and is wrapped into a span of class “Tcon” is the tooltip content.

There is no need to have the tooltip wrapped into a element, you can use anything you like, for example a div, like this


  Tooltip
  
      The title 2

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a purus et mauris pharetra sagittis ut in ligula. Sed sagittis, lacus sit amet aliquet elementum, dui leo porttitor arcu, ut tempus orci erat eget sem. Proin nec orci sit amet lorem semper gravida sed eu sapien. Nulla commodo odio vitae libero venenatis sit amet suscipit est tempus.

Try it out, copy paste it into your description and enjoy the result :) Don’t forget to add the css that comes further down this post

There are of course more variations that you can try out, for example

The tooltip anchor and the tooltip are a link


  Tooltip 3
  
      The title 3

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a purus et mauris pharetra sagittis ut in ligula. Sed sagittis, lacus sit amet aliquet elementum, dui leo porttitor arcu, ut tempus orci erat eget sem. Proin nec orci sit amet lorem semper gravida sed eu sapien. Nulla commodo odio vitae libero venenatis sit amet suscipit est tempus.

Only the tooltip anchor is a link


  Tooltip 4
  
      The title 4

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a purus et mauris pharetra sagittis ut in ligula. Sed sagittis, lacus sit amet aliquet elementum, dui leo porttitor arcu, ut tempus orci erat eget sem. Proin nec orci sit amet lorem semper gravida sed eu sapien. Nulla commodo odio vitae libero venenatis sit amet suscipit est tempus.

Add a link within the tooltip


  Tooltip 5
  
      The title 5

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a purus et mauris pharetra sagittis ut in ligula. Sed sagittis, lacus sit amet aliquet elementum, dui leo porttitor arcu, ut tempus orci erat eget sem. This is a link Proin nec orci sit amet lorem semper gravida sed eu sapien. Nulla commodo odio vitae libero venenatis sit amet suscipit est tempus.

Use an image as an anchor, with or without a link.

The example below is showing the anchor as an image and link


  
  
      The title 6

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a purus et mauris pharetra sagittis ut in ligula. Sed sagittis, lacus sit amet aliquet elementum, dui leo porttitor arcu, ut tempus orci erat eget sem. Proin nec orci sit amet lorem semper gravida sed eu sapien. Nulla commodo odio vitae libero venenatis sit amet suscipit est tempus.

Add an image within the tooltip.

The image can be a link or not


  
  
      The title 6

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a purus et mauris pharetra sagittis ut in ligula. Sed sagittis, lacus sit amet aliquet elementum, dui leo porttitor arcu, ut tempus orci erat eget sem. Proin nec orci sit amet lorem semper gravida sed eu sapien. Nulla commodo odio vitae libero venenatis sit amet suscipit est tempus.

There are of course more options available, but I think that you got the idea now.

Next part will be about how to create tooltips within php pages of osCommerce

The tooltip css

This is the most important part, this is what makes the tooltip alive. The css is common for all too tips, doesn’t matter in what part of the store you are using them.

You can paste the following part into your file catalog/stylesheet.css

Mini Template System users, please use file catalog/mts/themes/your_theme/style_custom.css to add that and leave the default stylesheet.css and any other css file in peace

/* tooltip base: Do not alter */
.tooltip, .tooltip:hover{position:relative;}
.tooltip .Tcon{visibility:hidden;position:absolute;}
.tooltip:hover .Tcon{visibility:visible;}

/* tooltip positioning */
.tooltip .Tcon{
  left:-350px;
  bottom:30px;
}
.tooltip:hover .Tcon{
  left:0;
  bottom:30px;
}

/* tooltip styling */
.tooltip, .tooltip a, .tooltip:hover{text-decoration:none;}
.tooltip .Tcon{
  width:300px;
  padding:20px;
  line-height:16px;
  background:#000;
  opacity: 0.8;
  border:2px solid #FFF;  color:#EEE;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius:2px;
  -moz-box-shadow: 0px 0px 8px 4px #666;
  -webkit-box-shadow: 0px 0px 8px 4px #666;
  box-shadow: 0px 0px 8px 4px #666;
}
.tooltip .Tcon, .tooltip:hover .Tcon{
  -webkit-transition: all 0.6s ease;
  -moz-transition:    all 0.6s ease;
  -o-transition:      all 0.6s ease;
}
.tooltip .Tcon strong{line-height:30px; font-size:16px;}
.tooltip .Tcon a{text-decoration:underline}

/* anchor styling */
.tooltip .Tanc{cursor:pointer;}

You can see that the css rules are split into groups about styling and positioning. You could merge some of them, but for starting you can leave them like this, it’s easier to understand what is going on

You can change anything you want of course, important is to leave the first set of rules (tooltip base) in peace

If you want an example of how such a tooltip look like, you can hover over the text “support this blog” that comes right after, or over the twitter icon in the footer

Enjoy

Make all your buttons primary

multimixer — Fri, 02 Nov 2012 09:59:29 +0000

osCommerce use 2 types of buttons regarding display: “Primary buttons and secondary buttons”. The difference is, that primary buttons appear “stronger” on the screen, while secondary are like faded out

This has a good reason, the main action use a “primary” button, while any others use a “secondary” one. For example, on the product information page you can see that the “add to cart” button is a primary one – this is the main and most important button on that page – while the reviews button is a secondary one

How it comes that there are 2 types of buttons? A short explanation:

a) The file

Each button is created in the file it has to appear, so, in this example, we can see in file catalog/product_info.php

The “add to cart” button

tep_draw_button(IMAGE_BUTTON_IN_CART, 'cart', null, 'primary');

The “reviews” button

tep_draw_button(IMAGE_BUTTON_REVIEWS . (($reviews['count'] > 0) ? ' (' . $reviews['count'] . ')' : ''), 'comment', tep_href_link(FILENAME_PRODUCT_REVIEWS, tep_get_all_get_params()));

Beside any other difference, that are not part of this topic, you can see that the “add to cart” button has the parameter “primary” while the “reviews” button, don’t have any parameter regarding this

Here is an other button example that appear as a secondary button on the website, maybe more clear, because of less other parameters

A primary button

tep_draw_button(IMAGE_BUTTON_BUY_NOW, 'cart', tep_href_link(basename($PHP_SELF), tep_get_all_get_params(array('action')) . 'action=buy_now&products_id=' . $product['id'] ) , 'primary')

A secondary button

tep_draw_button(IMAGE_BUTTON_DETAILS, 'info', tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $product['id']))

That are the “details” and “buy now” buttons that appear like this on a website

You can see that again, the “buy now” button has the parameter “primary” while the “details” has no parameter in this direction at all

Where do this parameters go to, and how do they affect the display?

b) the function

All buttons are created using the function “tep_draw_button(parameters)” This function is in file catalog/includes/functions/html_output.php

  function tep_draw_button($title = null, $icon = null, $link = null, $priority = null, $params = null) {

You can see that the 4th parameter the function accept is $priority, this is where the “primary” parameter of the above buttons goes to

The function handles this parameter as follows

    if (!isset($priority)) {
      $priority = 'secondary';
    }

What does this mean? It say ” if there is no $priority set, then set $priority to be secondary”

So, you see why buttons with no priority parameter set appear as secondary buttons.

In a next step, the function adds the $priority to the button html

    $button .= ').addClass("ui-priority-' . $priority . '").parent().removeClass("tdbLink");';

In simple words, it add the class “ui-priority-primary or ui-priority-secondary to the jQuery function that goes with each button, depending on how $priority was defined before. In our html the button appear then having one of the two priorities

Next thing that happen is plain and simple css

c) the css

In the css file of each UI theme, there are rules regarding the priority, that look like this

.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; }
.ui-priority-secondary, .ui-widget-content .ui-priority-secondary,  .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }

The above example is from jQueryUI version 1.8.22, but there are no big differences (if any) to the other versions

This rules say plain and simple that anything with priority “primary” has to have bold fonts, while anything with priority “secondary” has to have normal fonts and a opacity of 0.7

That’s all that happen with the buttons, there is no mystery, in case you suspected any :)

How to change the buttons

Now, after we know this all, what can we do if we want all of our buttons to look the same?

Not good options are:

- Modify all osCommerce files that have a button and add a priority of “primary” to each button. A huge task that will cause the same amount of work if you want to change anything

- Modify the tep_draw_button() function to set a priority of “primary” by default, instead of “secondary” as it does now. Not good, because you’ll loose the flexibility you have now, your change will not affect any buttons that have a priority of secondary set explicit and finally you’ll modify a core osCommerce file, this is never a very good idea

- modify manually the css file of your jQueryUI theme and change the rules for the 2 cases

Unfortunately the above options (and some other) are often suggested in the forum, anyway.

The good option is to do everything in css by adding new rules to your stylesheet.css file. This is very simple to do

- open your file catalog/stylesheet.css

- copy paste the original jQueryUI css rules into it

.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; }
.ui-priority-secondary, .ui-widget-content .ui-priority-secondary,  .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }

- change them to anything you want. For example if you want both buttons to be same, you can use he rules as follows

.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: normal; }
.ui-priority-secondary, .ui-widget-content .ui-priority-secondary,  .ui-widget-header .ui-priority-secondary { opacity: 1; filter:Alpha(Opacity=100); }

Mini Template System users, please use file catalog/mts/themes/your_theme/style_custom.css to add that and leave the default stylesheet.css and any other css file in peace

That’s all people, enjoy

Streamline your checkout process in osCommerce

multimixer — Sat, 23 Jun 2012 17:16:05 +0000

There are many cases where the visitor get just one shipping or payment option presented. This can be the case if you have just one shipping or payment module enabled or it can be that you have conditions for your shipping and payment ways: In this case a visitor from UK will get just one shipping or payment option while a visitor from the USA 3 of them.

In any case, it makes no sense to let people navigate through pages where there is nothing to select and no information presented. All your visitors can do in such a case is to press the “continue” button, and this is something the system can do automatically

In this way, you can cut of 2 of the 4 checkout steps and that’s a huge improvement. People will be transfered directly from the shopping cart page to the checkout confirmation page. Please note, that it case you enable a second shipping or payment module, the page will appear again by it self

The tip presented here comes from the “tip and trick” section of the osCommerce forum, to the topic there I contributed my self, unfortunately it’s getting lost in the crowd and I thing it’s worth to have it clearly presented. Like each forum post, it evolved over the time.

Lets start, things are easy, you’ll need just to copy paste

The files you’ll be working on are

catalog/checkout_shipping.php
catalog/checkout_payment.php

Make a copy of that files and store them somewhere on your computer, in that way you’ll be able to get back to the previous status in case you mess up

1. checkout_shipping.php

open the file and find following line, it’s number 97 in a default file

// process the selected shipping method

Add just before following

// bypass if only 1 shipping method available or free shipping
if ( (tep_count_shipping_modules() <= 1) || ($free_shipping == true) ) {
if (!tep_session_is_registered('shipping')) tep_session_register('shipping');
if ($free_shipping) {
$quote[0]['methods'][0]['title'] = FREE_SHIPPING_TITLE;
$quote[0]['methods'][0]['cost'] = '0';
} else {
$quote = $shipping_modules->quote($method, $module);
}
$shipping = array('id' => $shipping,
'title' => (($free_shipping == true) ? $quote[0]['methods'][0]['title'] : $quote[0]['module'] . ' (' . $quote[0]['methods'][0]['title'] . ')'),
'cost' => $quote[0]['methods'][0]['cost']);
$shipping = $shipping_modules->cheapest();
tep_redirect(tep_href_link(FILENAME_CHECKOUT_PAYMENT, '', 'SSL'));
}

Done !

2. checkout_payment.php

Open the file and find following line, it’s number 81 in a default file

  require(DIR_WS_LANGUAGES . $language . '/' . FILENAME_CHECKOUT_PAYMENT);

Add just before

// skip if only 1 payment method available
$payment_module_selections = $payment_modules->selection();
if (sizeof($payment_module_selections) <= 1) {
  if (!tep_session_is_registered('payment')) tep_session_register('payment');
  $payment = $payment_module_selections[0]['id'];
  tep_redirect(tep_href_link(FILENAME_CHECKOUT_CONFIRMATION, '', 'SSL'));
}

Done !

Mini template system users, you can do exactly the same if your want, your files are identical to the default osCommerce version

Thats all people, try it out

All credits to the original posters at the osCommerce forum

Add more buttons to your osCommerce header

multimixer — Tue, 19 Jun 2012 13:15:05 +0000

Even this question has been asked – and answered – really many times in the osCommerce forum, it still seem to be a hard thing to do for many people. I recently got an email from a osCommerce user asking exactly this: How to add more buttons to my header, just beside the existing “cart”, “checkout” and “my account” buttons.

This is how the section look by default

That is really very easy to do, lets start. The file to work on is catalog/includes/header.php. Make a copy of it for backup reasons and open the file (not the copy)

Step 1: Locate the existing buttons

They are very easy to find, very close to the top of the file you’ll see following:

  
count_contents() > 0 ? ' (' . $cart->count_contents() . ')' : ''), 'cart', tep_href_link(FILENAME_SHOPPING_CART)) .
       tep_draw_button(HEADER_TITLE_CHECKOUT, 'triangle-1-e', tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL')) .
       tep_draw_button(HEADER_TITLE_MY_ACCOUNT, 'person', tep_href_link(FILENAME_ACCOUNT, '', 'SSL'));

  if (tep_session_is_registered('customer_id')) {
    echo tep_draw_button(HEADER_TITLE_LOGOFF, null, tep_href_link(FILENAME_LOGOFF, '', 'SSL'));
  }
?>

Each of that lines is a button. Well, the term “button” is maybe to exactly correct, since they don’t submit anything. In fact they are just links looking like buttons. This happens because of the “tep_draw_button()” function of osCommerce, that take a plain link and make it look like a button

Step 2: Create a new button

Each button need at least following information

a link: To where should your button link to? It can be any page of your store, like eg “contact us”, any product, any category
a text: There should be a text, so that people know what the button is for
an icon: This is the small symbol on the left of your button

Here is a single button

tep_draw_button(HEADER_TITLE_CHECKOUT, 'triangle-1-e', tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'))

In plain english we could say

tep_draw_button(button text, button icon, button link)

As an example, lets create a button to the contact us page. So we want to link to “contact_us.php”, we want the button text to say “contact us” and the icon to be an envelope

2.1 The button link

This is this part of the button code

tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL')

This is the regular tep_href_link() function used all over osCommerce. For the “contact_us.php” page, the link would look like this

tep_href_link(FILENAME_CONTACT_US)

We don’t need the SSL part of the link, since contact us is a regular page not SSL protected. As you can see, we did use the constant (FILENAME_CONTACT_US) instead of just typing in the filename (contact_us.php). This has no difference to the link functionality, but it’s highly recommended to keep this practice. You can find a list of all files and their constants in file catalog/includes/filenames.php

2.2 The button text

This is following part of the button code that we use as a reference:

HEADER_TITLE_CHECKOUT

As you can see there is again a “constant” used, instead of just typing in the text. This way the store can be multilingual. Even you use just one language in your store right now, it’s better to keep it that way instead of typing in plain text. Additional benefits are that all text is in one file and that you can change it easily there. Finally, the same text can be reused anywhere in the store

We will use

IMAGE_BUTTON_CONTACT_US

The file to define the text is catalog/includes/languages/english.php (or german.php, italian.php, swahili.php etc). Here you can add to anywhere (maybe after all other defines that are like IMAGE_BUTTON_XY)

define('IMAGE_BUTTON_CONTACT_US', 'Contact us');

What we did here is, to define, set, declare, that constant IMAGE_BUTTON_CONTACT_US be “contact us”in English. Same you need to do for all languages of your store and translate accordingly

2.3 The button icon

Here we cant use anything we want, but need to pick an icon from the existing icon set of jQuery UI. There is a large selection available, you can see it on the themeroller website. Going to the bottom of the site, you’ll see a listing of all available icons. Hover over each and you’ll see its name.

For the contact us button, where we want the envelope icon and got the text “ui-icon-mail-closed”, so the text I need for the button is “mail -closed”

2.4 Putt it together

Now after we have the button link, button text and button icon, lets put our new button together again. Here it is

tep_draw_button(IMAGE_BUTTON_CONTACT_US, 'mail-closed', tep_href_link(FILENAME_CONTACT_US))

3 Place the button to the header

You can place that button to anywhere you like. Now, since we said we want it in the header, lets add it to there.

  echo tep_draw_button(HEADER_TITLE_CART_CONTENTS . ($cart->count_contents() > 0 ? ' (' . $cart->count_contents() . ')' : ''), 'cart', tep_href_link(FILENAME_SHOPPING_CART)) .
       tep_draw_button(HEADER_TITLE_CHECKOUT, 'triangle-1-e', tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL')) .
       tep_draw_button(HEADER_TITLE_MY_ACCOUNT, 'person', tep_href_link(FILENAME_ACCOUNT, '', 'SSL'));

  echo tep_draw_button(IMAGE_BUTTON_CONTACT_US, 'mail-closed', tep_href_link(FILENAME_CONTACT_US));

  if (tep_session_is_registered('customer_id')) {
    echo tep_draw_button(HEADER_TITLE_LOGOFF, null, tep_href_link(FILENAME_LOGOFF, '', 'SSL'));
  }

If you want to place the button between the existing “cart” and “checkout” buttons it would look like this

  echo tep_draw_button(HEADER_TITLE_CART_CONTENTS . ($cart->count_contents() > 0 ? ' (' . $cart->count_contents() . ')' : ''), 'cart', tep_href_link(FILENAME_SHOPPING_CART)) .
       tep_draw_button(HEADER_TITLE_CHECKOUT, 'triangle-1-e', tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL')) .
       tep_draw_button(IMAGE_BUTTON_CONTACT_US, 'mail-closed', tep_href_link(FILENAME_CONTACT_US)) .
       tep_draw_button(HEADER_TITLE_MY_ACCOUNT, 'person', tep_href_link(FILENAME_ACCOUNT, '', 'SSL'));

  if (tep_session_is_registered('customer_id')) {
    echo tep_draw_button(HEADER_TITLE_LOGOFF, null, tep_href_link(FILENAME_LOGOFF, '', 'SSL'));
  }

This is how things look like so far

4 Some more button examples

A nice thing to have would be a login button in the header that would change to logoff in case the customer is already logged in

Here you can change this

  if (tep_session_is_registered('customer_id')) {
    echo tep_draw_button(HEADER_TITLE_LOGOFF, null, tep_href_link(FILENAME_LOGOFF, '', 'SSL'));
  }

to this

  if (tep_session_is_registered('customer_id')) {
    echo tep_draw_button(HEADER_TITLE_LOGOFF, null, tep_href_link(FILENAME_LOGOFF, '', 'SSL'));
  } else {
    echo tep_draw_button(IMAGE_BUTTON_LOGIN, 'key', tep_href_link(FILENAME_LOGIN, '', 'SSL'));
  }

and it will to exactly this

An other thing you can do, is to add a link to an external website, for example your blog. Here we don’t need to use the tep_href_link() function to create the link since the session will be lost anyway. What we want here is, to make the link target open in a new browser window and to be “stronger” than the others

Here is the button:

 echo tep_draw_button('My blog', 'person', 'http://multimixer.gr', 'primary', array('newwindow'=>'newwindow'));

You can check the parameters that the tep_draw_button() function accept in file catalog/includes/functions/html_output.php

Here is how our header look now with all that buttons

While you are doing in the header section, you could take a look about other things you can do to make it look nicer: Make a nice header for your osCommerce store

Mini template system users: Please don’t do anything of all this, it’s not necessary. You can use link manager to create links and add them to any link groups and menu maker to place them either to your main navigation or to your link boxes. There is no need to modify any file

Styling the breadcrumb area in osCommerce

multimixer — Mon, 13 Feb 2012 10:37:45 +0000

The so called “breadcrumb trail” is the part on top of your osCommerce store showing the path to the actual location of the store the visitor is in. Reading the many questions in the osCommerce forum about how to style this area I think it’s worth to give a quick overview about how to do this.

Nothing of all this is necessary, things are really simple.

This is how the area looks like by default

This is generated in file catalog/includes/header.php, the code looks like this


  trail(' » '); ?>

There is nothing to do at this file, you can close it right away, just please notice the css classes used to wrap the beadrcrumb. They are “grid_24 ui-widget infoBoxContainer” in the outer level and “ui-widget-header infoBoxHeading” in the inner level. You can close the file now, we are not going to modify it in any way.

Lets start doing something

1 Change the ui-widget theme

First thing we can do for the look of our breadcrumb is to change the ui theme of the store. Well yes, this will change the overall look, but it’s also a good idea to get the general look as close as possible to what you like, before starting with the details.

This is how it would look like using ui theme “lightness”

Why did the look change? Because the whole section is wrapped into the ui classes “ui-widget” and “ui-widget-header” as we just saw above

2. Individual styling

All actions will be done in one and olny file: catalog/stylesheet.css I would suggest to add any code posted below to the bottom of this file

First lets see how to target this section in our css file, in other words, how to make our css file to know that we mean this and only this section of our store. If we are not specific enough, any rules added will affect other areas too (like the styling of the information boxes) and that’s something we don’t want to do right now

The selector we are going to use as a “prefix” for all other css classes is #header+div .

What does this mean? In plain text this say to the css file that we mean the div that comes after the element that has an id of “header”. There is only one in the whole store, the breadcrumb, there is no other.

After we know this, we can easily start adding some rules

/* START breadcrumb styling */
#header+div .ui-widget-header{
background:none;background:#f00; /* the background color */
border:5px solid #00ff00; /* the border around */
color:#000; /* the text color */
font-weight:400; /* use a normal font weight */
}

#header+div .ui-widget-header a{
color:#000; /* the text color of the links*/
}

#header+div .infoBoxHeading{
font-size:14px; /* the font size */
padding:10px 2px; /* padding top/bottom and left/right*/
}

#header+div .infoBoxHeading{
font-family:Verdana, Arial, Helvetica, sans-serif; /* the fonts to be used */
}
/* END breadcrumb styling */

Lets take a look now how it looks after this styling actions

Very sexy, yes? I won’t be offended if you use some other colors, I promise :)

Important to keep in mind is (1) that only the breadcrumb area got affected by our actions and (2) that we didn’t had to modify any file, just to add a couple of lines to our css

Enjoy

Add a remove button to the shopping cart page

multimixer — Thu, 05 Jan 2012 14:18:12 +0000

In version 2.3.1 of osCommerce, there is no remove button for items placed into the shopping cart, but a plain text link. On top of this, the link text is also “hardcoded”, so it always says “remove”, doesn’t matter what language you have in use in your store.

That is how the shopping cart page look by default

Let’s change this, and let’s create a multilingual button, that will look consistent with all other buttons all over your store. The file we need to work on is

catalog/shopping_cart.php

Make a copy of that file so you can replace the file you are working on, in case you mess anything up. At about line 97 we can see there following piece of code

      $products_name .= '

' . tep_draw_input_field('cart_quantity[]', $products[$i]['quantity'], 'size="4"') . tep_draw_hidden_field('products_id[]', $products[$i]['id']) . tep_draw_button(IMAGE_BUTTON_UPDATE, 'refresh') . '   or remove';

To make it a bit more clear what’s happening here, let’s break the code into separate lines

$products_name .= '

' .
tep_draw_input_field('cart_quantity[]', $products[$i]['quantity'], 'size="4"') .
tep_draw_hidden_field('products_id[]', $products[$i]['id']) .
tep_draw_button(IMAGE_BUTTON_UPDATE, 'refresh') .
'   or remove';

The “remove” link is following

'   or remove'

As you can see, the words “or” and “remove” are hardcoded into the file and the result is the plain text link you can see on your screen. This we are going to replace by a nice button. This is the code we are going to use

tep_draw_button(IMAGE_BUTTON_REMOVE, 'trash', tep_href_link(FILENAME_SHOPPING_CART, 'products_id=' . $products[$i]['id'] . '&action=remove_product'))

As you can see, the link part, including it’s “action” is exactly same as before. New is, that we use the tep_draw_button function of osCommerce

IMAGE_BUTTON_REMOVE is the text for our button, this we wil add later to file catalog/includes/languages/english.php. The word “trash” is for the icon we want to use on the button, we can use any of the available icons of the jQuery ui theme.

So, our code looks now like this

$products_name .= '

' .
tep_draw_input_field('cart_quantity[]', $products[$i]['quantity'], 'size="4"') .
tep_draw_hidden_field('products_id[]', $products[$i]['id']) .
tep_draw_button(IMAGE_BUTTON_UPDATE, 'refresh') .
tep_draw_button(IMAGE_BUTTON_REMOVE, 'trash', tep_href_link(FILENAME_SHOPPING_CART, 'products_id=' . $products[$i]['id'] . '&action=remove_product'));

and in one line, as it was before, like this

  $products_name .= '

' .  tep_draw_input_field('cart_quantity[]', $products[$i]['quantity'], 'size="4"') . tep_draw_hidden_field('products_id[]', $products[$i]['id']) . tep_draw_button(IMAGE_BUTTON_UPDATE, 'refresh') . tep_draw_button(IMAGE_BUTTON_REMOVE, 'trash', tep_href_link(FILENAME_SHOPPING_CART, 'products_id=' . $products[$i]['id'] . '&action=remove_product'));

Copy-pasters in a hurry, can just replace line 97 of their file with this line here

Next thing we need to do is, to define the text we want to have displayed on our new button, this we do in file

catalog/includes/languages/english.php

Here you can add anywhere before the last closing ?> following into the file, it will be better of course if you add it close to the other button text defines

      define('IMAGE_BUTTON_REMOVE', 'Remove');

Please note that this define is globally available all over your sore, so you can use the same constant anywhere else you want to have the text “remove” displayed. You can change the text of course to anything that fit your needs, eg to “kuku” and you need to add the same define to your other main language files in case you use more languages (eg german.php, spanish.php, swahili.php etc)

Lets lake a look now how our shopping cart page look like

Easy not? Enjoy and lets hope that nobody is going to press this :)

In case you are interested, here’s an other interesting post about how to remove all items from the shopping cart

Front page trash can image taken from wp clipart, thank you guys

jQuery tips: Rounded corners for osCommerce boxes

multimixer — Wed, 28 Sep 2011 18:16:03 +0000

Here is a quick and easy way to add rounded corners to your osCommerce boxes using jQuery and styling them with a couple of simple css rules

Here is how the boxes look by default

They have square corners and glue to each other. Lets go to change this. Please do not follow any advices posted in the osCommerce forum telling you that you have to go to several files changing this and that, or that you have to write huge blocks of css.

Things are much more simple, because of 2 facts

1) osCommerce uses a “jQuery UI” theme, and in it’s css there are already classes defined that will do rounded corners in any direction.

That classes are (names are self explanatory)

.ui-corner-all

.ui-corner-top

.ui-corner-bottom

.ui-corner-right

.ui-corner-left

.ui-corner-tl (tl = top left)

.ui-corner-tr (tr = top right)

.ui-corner-bl (bl = bottom left)

.ui-corner-br (br = bottom right)

2) jQuery has a method called “addClass()“, that does exactly this: to add a css class to anywhere you want

Now after we know this, all we have to do is to add the ui class that creates rounded corners to the right element of the box using addClass()

All code snipsets I will add to file catalog/includes/footer.php (if not something else is mentioned) to here

Mini template system users

please find the same part of code in file mts/themes/your_theme/files/includes/footer.php

Lets say you want to add rounded corners to the top of the box heading and to the bottom of the box content, so that the whole box looks like “rounded”. That what you need to add:

$("#columnLeft div.ui-widget-header, #columnRight div.ui-widget-header").addClass("ui-corner-top");
$("#columnLeft div.ui-widget-content, #columnRight div.ui-widget-content").addClass("ui-corner-bottom");

And this is the result

For sure you noticed that I added also some space between the boxes, so that they don’t glue to each other. This I did by adding following to file catalog/stylesheet.css

#columnLeft .infoBoxContainer, #columnRight .infoBoxContainer {margin-bottom:10px; }

You can adjust of course the value of the margin as you like

Mini template system users, don’t need to add anything to anywhere since this is a admin setting. For questions please click the support link on top of your administration panel

There are of course other possibilities to play with rounded corners, for example to add separate rounded corners to both, box heading and box content, like this:

Just add to your footer (same location as before) following

$("#columnLeft div.ui-widget-header, #columnRight div.ui-widget-header").addClass("ui-corner-all");
$("#columnLeft div.ui-widget-content, #columnRight div.ui-widget-content").addClass("ui-corner-all");

To my stylesheet.css file I added folowing to make things a bit nicer

#columnLeft .infoBoxHeading, #columnRight .infoBoxHeading {
  margin-bottom:2px;
  padding:7px 2px;
}

You can of course add such a ronded corner only to the top left of the box heading or to anywhere you want. Go on and try it out

A possible question: How round are the rounded corners? This depends on the ui-widget theme you have installed. If you need an other corner radius, you can go to the themeroller page and create a new theme using any settings you like for the corners.

You may be interested to read about how to add a jQuery ui theme to your osCommerce store.

Styling the modules on the product information page in osCommerce

multimixer — Wed, 27 Jul 2011 16:10:29 +0000

The product information page in osCommerce displays usually, beside the product information it self, various modules: For example the “also purchased” module, or “related products” in case you have that, or “slave products” and various others.

All of that modules have a common css styling: The ui widget styling. The module heading is class “ui-widget_header” the content is “ui-widget-content”. That’s all fine and can be styled very nicely using themeroller and you can read here about how to change the ui theme of your store easily. But what is in case you have more than one module on the same page? Does it not start to look a little boring?

If you like to change the look of one – or all – the modules on your product information page, keep on reading, it’s really very simple. We are going tho change the look of the “also purchased” module, that is the most common, since it exist in each store by default

That is how the module look like on an unmodified store

Applying and other ui-theme, it looks already much different

Please note that the image above shows a store designed with mini template system, other design changes you see in relation to the default set up are because of that. The ui theme will change the colors of your module, not more

So, what to do to change the look of that module?

First lets go to apply a unique id to the whole module, so we can be sure that any setting we do will affect just this and not anything else too.

The file we need is catalog/includes/modules/also_purchased_products.php. All we do here is to add one id to the wrapping div as follows

Change this

to this

You can close and upload the file.

Anything else we do in file catalog/stylesheet.css (for mini template system users the file is catalog/mts/themes/theme_base_001/style_custom.css)

Here is some css that I used

#alsoPurchased .ui-widget-content{ border:1px solid #7ba6d3; padding-top:30px;  -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;}
#alsoPurchased .ui-widget-header{border:none; background:none; margin:0; font-size:14px; font-weight:normal; position:relative; bottom:-10px;}
#alsoPurchased .ui-widget-header span{color:#fff; background:#7ba6d3; padding:10px; border:1px solid #7ba6d3;  -moz-border-radius:10px 3px 3px 0; -webkit-border-radius:3px; border-radius:3px;}

And that is how the result look like

The orange separation lines can also be added easily. And of course you can change the css settings completely as you like Here is an other example of styling the “master slave” listing module that I added to an other site

Now go on and make your store a little more pretty

Enjoy

Create a google AdSense box for your osCommerce store

multimixer — Tue, 26 Jul 2011 18:28:21 +0000

I had a client who wanted to display google AdSense adds on the right column of his store. Now I need to say, that I’m not the greatest fan of such an idea: A store is there to make money by selling its products or services, not through advertising or anything else. Each visitor should be focused on what the store has to offer, any ads or similar displays are just a distraction in my opinion.

Honestly, if your store doesn’t make enough money, you should focus on that, or start advertising for the store and not on the store

Anyway, this was the request, so if you like something like this too, here you go

Step 1: Create the files

All boxes are in osCommerce in folder catalog/includes/modules/boxes/

The corresponding language files are in folder catalog/includes/languages/english/modules/boxes/ and have exactly the same filename as the box it self

What we do now is to take the most simple box that exist, that is bm_information.php, make a copy and rename it to be bm_adsense.php. Same we do with the corresponding language file. So we have 2 fies now called bm_adsense.php.

Keep them open in your editor, do not upload them and more important do not install and activate them in admin, you will get errors at that stage

Step 2: Basic setup

As we know, all boxes are so called “classes” and do write configuration values (constants) to the database. That mean that some parts of the content of that files must be unique.

Before doing anything else, we need to make the file contents “unique” in that meaning. We do this by replacing class function names and constants as follows:

1 Box file: class and function names – 3 replacements

Replace all instances of ”bm_information” with “bm_adnsense”, so for example, on top of the file, it was

  class bm_information {
    var $code = 'bm_information';

and it will look like

  class bm_adsense {
    var $code = 'bm_adsense';

2 Box file: Constants – 18 replacements

replace all instances of “MODULE_BOXES_INFORMATION” with “MODULE_BOXES_ADSENSE” Please note the capital letters.

For example it was

      if ( defined('MODULE_BOXES_INFORMATION_STATUS') ) {
        $this->sort_order = MODULE_BOXES_INFORMATION_SORT_ORDER;
        $this->enabled = (MODULE_BOXES_INFORMATION_STATUS == 'True');

and now it look like

      if ( defined('MODULE_BOXES_ADSENSE_STATUS') ) {
        $this->sort_order = MODULE_BOXES_ADSENSE_SORT_ORDER;
        $this->enabled = (MODULE_BOXES_ADSENSE_STATUS == 'True');

3 laguage file: Constants

Same thing you do in the language file, well, ok, you don’t need all that defines, so you can basically replace the contents of that file with this

  define('MODULE_BOXES_ADSENSE_TITLE', 'adsense');
  define('MODULE_BOXES_ADSENSE_DESCRIPTION', 'Show adsense box');
  define('MODULE_BOXES_ADSENSE_BOX_TITLE', 'adsense');

Right now you can upload the files if you like and go and enable them in your admin panel under modules>boxes. What you have now is a clone of the information box. Next step will be to modify the file for our purpose

Step 3 :File modification

All we have to do now, is to create and add to that box a new text input field to where we will add our adsense code in the administration panel

We need one more configuration constant for the database, that we create as follows in function install()

        tep_db_query( "insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ( 'adSense code', 'MODULE_BOXES_ADSENSE_CODE', '', 'Paste the adSense code into here', '6', '4', 'tep_draw_textarea_field(\'configuration[MODULE_BOXES_ADSENSE_CODE]\', false, 35, 20, ', now())" );

And we need of course to add that constant to the array of keys, as follows

    function keys() {
      return array('MODULE_BOXES_ADSENSE_STATUS', 'MODULE_BOXES_ADSENSE_CONTENT_PLACEMENT', 'MODULE_BOXES_ADSENSE_SORT_ORDER', 'MODULE_BOXES_ADSENSE_CODE');
    }

Last thing to do is, to set our box to display whatever we entered into the text box. This we do in function dataF() that will look after our changes, just like this

    function dataF() {

      $data = '';
      $data .= MODULE_BOXES_ADSENSE_CODE;
      $data .='';

	  return $data;
    }

Please note that if you did not do the changes as described here you will not find such a function in your box. You will need to do that changes to function execute() accordingly

Guess what?

We are done ! Really !

Lets go to the administration panel to see what we did. We will find our box under modules>boxes, we will need to install it, and by clicking on “edit” we have following

and a preview in the admin

And that is how the box look like on my clients site

If you like this idea too, then go ahead and do it, and if you ge rich because of your ads, you can buy me a beer :)

In the same way you can create of course any box. Even this bo here can be used for other purposes too, for example to display plain text (just add plain text into the textarea in admin instead of the adsense code) or images or anything like that