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");</script>';

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

]]> http://multimixer.gr/02/11/2012/make-all-your-buttons-primary/feed/ 0 http://multimixer.gr/19/06/2012/add-more-buttons-to-your-oscommerce-header/ http://multimixer.gr/19/06/2012/add-more-buttons-to-your-oscommerce-header/#comments Tue, 19 Jun 2012 13:15:05 +0000 multimixer http://multimixer.gr/?p=1220

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:

  <div id="headerShortcuts">
<?php
  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'));

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

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