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
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
multimixer
Follow me on twitter. I'm not tweeting all day long and guaranteed no spam and no advertising.
Great blog!! I learned a lot from this. Thank you so much George.
Shiry.
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.
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
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
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
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 :)
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
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
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.
When I login in, I mean as a client pretending purchase an item. Thanks.
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.
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.
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
I need edit but in admin order, to fix the product.
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
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
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