3 replies to this topic

[kymation]

The last major difference in the catalog side files is the buttons. Fortunately the new 2.3x buttons are pretty easy to work with. No graphics program or third-party artwork is needed; all of the buttons and icons are drawn for you by the code, and can be changed using ThemeRoller.

To upgrade your buttons from 2.2x to 2.3x, all you need to do is figure out which basic type of button each one of yours is. There are two types: link and form submit buttons.

Let's start with a form button. A typical 2.2x form button looks like this:

Quote

<td align="right"><?php echo tep_image_submit('button_continue.gif', IMAGE_BUTTON_CONTINUE); ?></td>

The part in color is the button, while the part in black is just formatting. Yours may not look exactly like this, but the elements will be similar.

The part that we want are the constants, just like the boxes in Part 1. The filename here is FILENAME_DEFAULT (the front page of the store) and the name is IMAGE_BUTTON_CONTINUE. The name should always start with IMAGE_BUTTON_ followed by the name of the button. Some badly-coded Addons may have just the name in quotes: 'Continue'. Whatever you have, just use that.

Now here's the same thing in 2.3x:

Quote

  <div class="buttonSet">
    <span class="buttonAction"><?php echo tep_draw_button(IMAGE_BUTTON_CONTINUE, 'triangle-1-e', null, 'primary'); ?></span>
  </div>

As in the 2.2x example, part of this is formatting. However, this time the formatting is the part that draws the button, so we need to keep all of this. Note that this is the same button, so the filename and button name are the same. Let's look at the parts of the button itself:

1. The function that draws the button is now tep_draw_button().
2. The first parameter is the button name, in this case IMAGE_BUTTON_CONTINUE.
3. The second parameter is the icon. You can find a list of icons here near the bottom of the page. Just hover your mouse over the icon to see its name. Note that all of the icon names start with .ui-icon-. osCommerce doesn't use that part, so just copy the part of the name after that. Yes, the icon in our example is really .ui-icon-triangle-1-e. The name needs to be in single quotes, or you will get some odd errors.
4. The link. This type doesn't have a link, so the value is null.
5. This value is always primary*. Note the single quotes; again, these are important and must not be left out.

So here's the form submit button translated from 2.2 to 2.3:

Quote

<td align="right">
  <div class="buttonSet">
    <span class="buttonAction"><?php echo tep_draw_button(IMAGE_BUTTON_CONTINUE, 'triangle-1-e', null, 'primary'); ?></span>
  </div>
</td>

Note that I moved the formatting part onto separate lines for clarity. This is recommended but not essential.


Now let's look at a link button. This example is from the bottom of the Conditions page, but the same button is used at the end of many pages. This is the 2.2x version:

Quote

<td align="right"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image_button('button_continue.gif', IMAGE_BUTTON_CONTINUE) . '</a>'; ?></td>

Again, the part in color is the button, and the part in black is just formatting. Yours may have different formatting or none on that line.

The part in blue is the link. That's how you can tell this is a link button. Note that the link always starts with <a ...> and ends with </a>. The link wraps around the button itself.

The part in green is the button. It will always look like tep_image_button( ... ).

Now let's look at the new 2.3x button from the same location:

Quote

  <div class="buttonSet">
    <span class="buttonAction"><?php echo tep_draw_button(IMAGE_BUTTON_CONTINUE, 'triangle-1-e', tep_href_link(FILENAME_DEFAULT)); ?></span>
  </div>

This is all part of the code that draws the button, just like in the form submit button, so we need to keep all of this. This is also the same button as the 2.2x example, so the filename and button name are already the same. Let's look at the parts of the button itself:

1. The function that draws the button is still tep_draw_button().
2. The first parameter is the button name, still IMAGE_BUTTON_CONTINUE.
3. The second parameter is the icon name.
4. The third is the link. This will always be the tep_href_link() function. Just copy it from the old button as it is used there.
5. The forth has the value 'primary'. It may or may not exist; in our example it does not. Try without it, and leave it that way if it works.

You may have noticed one big difference between the 2.2x and the 2.3x buttons: in 2.2 the link wraps around the button, while in 2.3 the link is inside the button function. Don't wrap the 2.3x button in a link or you'll get some very strange results.

So let's see what our 2.2x link looks like when translated to 2.3x:

Quote

<td align="right">
  <div class="buttonSet">
    <span class="buttonAction"><?php echo tep_draw_button(IMAGE_BUTTON_CONTINUE, 'triangle-1-e', tep_href_link(FILENAME_DEFAULT)); ?></span>
  </div>
</td>

Again, I moved the formatting parts onto their own lines. As before, this could be all on one line and it would work the same.


That's it for the buttons. I'll cover the Admin boxes in a future Tip, and then we should be done.

Please keep any discussion here related to this Tip. I'm perfectly willing to answer questions if you're unclear about something I've said above, but I won't go off-topic.

Regards
Jim


* Actually not true: 'primary' is the icon as you see it on the ThemeRoller page, while 'secondary' is the same icon greyed out. I have no idea why you would want to do that, but feel free.

[Mort-lemur]

Hi Jim,
Trying to get my head round this, how would you suggest converting:

'action=buy_now&product_to_buy_id=' . $xsell['products_id'], 'NONSSL') . '">' . tep_image_button('button_buy_now.gif', TEXT_BUY . $xsell['products_name'] . TEXT_NOW) .'</a>';

Many Thanks

[kymation]

You're missing part of the link there. I think it should look something like this:

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

Regards
Jim

[SpecOpShop]

I'm getting this where my button should be: BOX_HEADING_OUTSIDE_THE_WIRE?>
All my code is posted in this thread: http://forums.oscommerce.com/topic/383316-opening-and-editing-pages/page__gopid__1621154
And you can see it firsthand here: www.specopshop.com
I've been limping through this and I think I'm almost there, but after reading this thread I think I might not be telling it to actually create a button.