Make all your buttons “Primary”

osCommerce uses two types of display buttons named “Primary buttons and secondary buttons”.
Primary buttons appears active and stronger on the page. Secondary buttons are little bit faded out .
But they can be easily recognized.

Use of Primary and Secondary Buttons:

Primary buttons are used for those definitions which belongs to highest priority and has more importance in overall store.
We can define highest and lowest priority using primary and secondary buttons.

You can be clear after referring the below screenshot.
We will take an example on it.

You can see in our default oscommerce on the product information page “add to cart” button is a primary button. This is the main and most important button on that page and that’s the reason to make it primary ,while the other like reviews button is a secondary one.

Button performing main and important action use a “primary” button, while any others use a “secondary” one.

Pictures2014-06-16_11-55_Microsoft IntelliMouse

  • The file: Each button must appear with its priority in the definition.

    The addtocart button:

    • See the example, we can see in file catalog/product_info.php

    tep_draw_button(IMAGE_BUTTON_IN_CART, ‘cart’, null, ‘primary’);

    Add to cart

    Here Priority is defined as primary for add to cart button.

    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()));

    review buttons code

    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

    Other button example for a secondary button on the store

    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’)

    Primary button

    A secondary button:

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

    Secondary button code

    There are also some more buttons that appears secondary in our store for example “details” and “buy now” buttons.

    2014-06-16_12-22_Gadgets, osCommerce

    How these parameters works and display on frontend

  • the function:

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

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


    Here you can see 4th parameter in the function is $priority this is where the primary parameter is set.This parameter specifies the highest priority of the buttons

    The detail description of a function:

    if (!isset($priority)) {
    $priority = ‘secondary’;

    code for priority

    If there is no priority set,the priority will automatically set to be secondary by default.

    Here next step,is to add ui-priority class to the button using function and also remove the parent class tdbLink

    $button .= ‘).addClass(“ui-priority-‘ . $priority . ‘”).parent().removeClass(“tdbLink”);‘;

    js code for priority

    It add the class “ui-priority-primary” or “ui-priority-secondary” to the “jQuery function“used with each button, depending on how $priority was defined before.

  • Next is some actions are also set through css:

  • the css

    In the css file of there are rules regarding the priority for each ui-theme used:

    *Priority wise css used for primary and secondary */
    .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; }


    For applying same effects to primary and secondary buttons you can do this:
    Add and modify everything in css by adding new rules to your stylesheet.css file. This will can help you a lot.

    You can find your file ,follow this path catalog/stylesheet.css

    For example if you want both the buttons to be same, you can use he rules as follows:
    Suppose we have to apply on buy now button.

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

    secondary css

    This will look like this:

    Drama, osCommerce 2014-06-16 13-04-52

By |2018-04-21T05:27:54+00:00July 10th, 2014|Blogs, osCommerce, Oscp-Blog|0 Comments

Share This Story, Choose Your Platform!