17

Add more buttons to your osCommerce header

multimixer | learn | Tuesday June 19 2012

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

The default osCommerce header with 3 buttons

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

osCommerce header with contact us button

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

osCommerce header with many 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

Click +1 to recommend this to your friends when they search.

multimixer

follow multimixer on Twitter

Follow me on twitter. I'm not tweeting all day long and guaranteed no spam and no advertising.

If you like what you read and if you think it will help you in your online business, then please consider a donation.

There is no obligation to do so and all information provided here is free to use.

It will however help to keep this blog alive, free of advertising and full of content.

  • shiry 20/06/2012 at 20:37

    Great blog!! I learned a lot from this. Thank you so much George.

    Shiry.

  • Victor 02/09/2012 at 16:18

    Hi, I was wondering if you could help me, I am working on a oscommerce 2.3.2 no template I downloaded it from the site, and I wan to ad a logo that is 190×200 px and it seems like the header is too small how can I modify the header so I can put a bigger logo on top?? Thank you for your time and hope to hear soon from you.

  • Mathias 23/06/2013 at 21:04

    Hi,
    I’ve tryed to implement buttons in header the way you advise. This is code which was put to my includes/header.php file:

    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’));
    }
    ?>

    $(“#headerShortcuts”).buttonset();

    Changes were done also in includes/languages/english.php as discribed above (and in my local language). I have followed your instruction exacely as you adveise in your blog.

    But I can not figure out why than blank page comes out. I think something wrong have been done in header.php file, because whene I reload old header.php file the page is here again. Do you have any suggestions?
    Regards,
    Mathias

  • multimixer 24/06/2013 at 08:07

    A “white page” means mostly that there is some error in your code that is not printed to the screen because of your error reporting settings

    One error I can see here is a missing closing ) in the button you added

    You have:

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

    It should be:

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

    Notice the second closing ) at the end?

    You can also just copy paste the code that I posted

  • Alexandra 23/02/2014 at 12:18

    Hi,
    Is there a way to add the search box within the header?
    Can you give us some styling tips perhaps?
    Thank you in advance

  • multimixer 24/02/2014 at 14:22

    Hi Alexandra

    Yes, it is possible to add a search field to the header area, I wouldn’t call it a “box”.

    I’ll make a quick post about, in the meantime you could check maybe the add ons area

    Styling tips, yes, it would help to know what about :)

    • Alexandra 24/02/2014 at 17:14

      Thank you very much for your quick reply.

      I am looking at different Oscommerce sites and I like the way some have used Jquery for their search field. It would be nice to see how to do this.

      Styling tips: I like what you have done with Mognetti bicycle shop and Bakeria.
      :)

      Thanks again,
      Alexandra

      • multimixer 24/02/2014 at 20:56

        Hello Alexandra

        I’m not sure in what way I can help exactly, since I don’t know your website.

        Please feel free to contact via email/contact form

  • Kevin 18/03/2014 at 22:57

    My problem is that when I have logged in, the buttons move slightly down over other text?? When I log out the problem corrects itself as it should be, but it is annoying. I am using the original pages from OS Commerce 2.3. I have no idea, but it looks like it something with the stylesheet or headers.

    Help.

  • Kevin 18/03/2014 at 23:32

    Resolved, I have changed the logo last week and I increased the size. When I reduced the size to under 500px the issue was resolved.

  • Ray 12/05/2014 at 02:02

    Hi,
    Is there any way to control the size of the button icons or the button text, that have been downloaded from jQuery UI, using PHP or altering the style sheet? I just want to increase the size of the icons and the text without altering other elements.

    • multimixer 23/05/2014 at 13:56

      You can change the text size, and text style of the buttons using css as follows

      .ui-button-text{font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:400;}

      The icons shown are images, so you would need to change that images. That is a bit complicated, since all icons are part of a single image, that is positioned on the button via css

  • Alex 29/02/2016 at 19:56

    I need edit but in admin order, to fix the product.

    • multimixer 01/03/2016 at 12:09

      If you need anything not covered in this post, feel free to ask your question on the osCommerce forum, try to make clear what exactly you want to achieve

  • RADS 22/08/2016 at 07:45

    Hi, I use this code for update cart quantity-
    ‘. tep_draw_button(IMAGE_BUTTON_UPDATE, ‘refresh’) . ‘
    But it refreshes the SSL shopping_cart.php to NON SSL version thereby showing a warning before navigating that it is transferring the page to a insecure page.
    Can you guide how to fix this issue, Thanx in Advance…
    Regds/
    RADS

  • RADS 22/08/2016 at 09:10

    Hi,
    Sorry for the trouble….
    I also posted to your website

    My QUANTITY UPDATE BUTTON refreshes the SSL shopping_cart.php to NON SSL version thereby showing a warning before navigating that it is transferring the page to a insecure page.

    I use this code for update cart quantity-
    I changed div tag phrases for pasting…

    |div class=”shopping_cart_input”| . tep_draw_input_field(‘cart_quantity[]‘, $products[$i]['quantity'], ‘size=”4″‘) . tep_draw_hidden_field(‘products_id[]‘, $products[$i]['id']) .’ |/div|
    |div class=”shopping_cart_refresh”|. tep_draw_button(IMAGE_BUTTON_UPDATE, ‘refresh’) . |/div|

    Can you guide how to fix this issue,
    Thanx in Advance…
    Regds/
    RADS

Leave a Reply