Speak to our experts today 0333 004 0333
burger-menu-iconMenu
Trustpilot
Speak to one of our experts today
0333 004 0333
User Guides

EKM Tag: [ekm:productoptions]

This tag outputs all product options and variants for the current product being viewed.

This tag can only be used on the product page. This tag MUST be placed within the product start and end tags.

  • Tag Information
  • Nesting This Tag
  • Examples
Basic Use
In its basic use the tag will output your product options and variants in the predefined EKM style.

 [ekm:productoptions][/ekm:productoptions]
This would output something like...
Colour

Gift Message

Text Area
Full Use

If you would prefer to customise how your product options/variants appear you can use this full use tag. This allows you to specify how your options will be ordered and the styling around the options. You are also able to order the items within a dropdown by value and name.

For the example below view the examples tab for the CSS styling.


[ekm:productoptions]
    font_formatting='no';
    remove_formatting='yes';
    orderby='name ASC';
    orderbyitems='name ASC, amount DESC';

    template_start='<div id="product-options">';
    textfield_content='<div class="option-row textfield-option cf" id="textfield-[option_counter]"><label for="options_[option_counter]">[option_title]</label> [option_item]</div>';
    textarea_content='<div class="option-row textarea-option cf" id="textarea-[option_counter]"><label for="options_[option_counter]">[option_title]</label> [option_item]</div>';
    dropdown_content='<div class="option-row select-dropdown cf" id="select-[option_counter]"><label for="options_[option_counter]">[option_title]</label> [option_item]</div>';
    template_end='</div>';
[/ekm:productoptions]
This would output something like...




Tag Attributes
Font Formatting
font_formatting='no'';

Specify whether or not you want the product option labels to have font formatting.

Value
Description
yes
Formatting will be applied
no
Formatting will not be applied
Remove Layout Formatting
remove_formatting='no'';

Specify whether you want to remove all default layout styling from around the options. This removes all tables and label tags.

Value
Description
yes
All layout styling is removed.
no
No styling is removed and the options will take the default options layout style.
Order Options By
orderby='name ASC';

Specify the order you would like your product options and variants to be output. You can order by the option's name or by the order they were added in the backend of your EKM shop.

Value
Description
auto
Options will be ordered by when they were added.
name
Options will be ordered by name.
Order Option Items By
orderbyitems='amount ASC';

Specify the order you would like items within a dropdown menu to appear. You can order by when they were added, name or amount (price).

This works on options only. The order of variant items are unaffected.

Value
Description
auto
Orders by the date they were added to the product.
name
Orders by the name of the item. Add ASC to DESC to the end to order by ascending and decending respectivly.
amount
Orders by the additional amount the option will add to the price. Add ASC to DESC to the end to order by ascending and decending respectivly.
Template Start
template_start='<div id="product-options">';

Specify any HTML or Text you want to be outputted when the product options begin to output. This will display once and will go before the option items are output. This works in the same way html_before and output_start do in other tags.

Value
Description
{user defined}
Specify your own HTML or Text
Text Field Content
textfield_content='<div class="option-row textfield-option cf" id="textfield-[option_counter]"><label for="options_[option_counter]">[option_title]</label> [option_item]</div>';

Specify the HTML or Text you want to output when a textfield option is displayed.

Value
Description
{user defined}
Specify your own HTML or Text

This attribute has some attribute tags to display the fields and labels.

Value
Description
[option_title]
Outputs the name of the option/variant. This is to be used to label the field.
[option_item]
Outputs the HTML for the field.
[option_counter]
Outputs an integer value which increments by one for each option on the page.
Text Field Content Formatting
textfield_content_formatting='no';

Specifies whether or not to remove extra HTML formatting around the textfield element.

Value
Description
yes
Includes the default additional formatting.
no
Removes the extra default formatting.

This attribute has some attribute tags to display the fields and labels.

Value
Description
[option_title]
Outputs the name of the option/variant. This is to be used to label the field.
[option_item]
Outputs the HTML for the field.
[option_counter]
Outputs an integer value which increments by one for each option on the page.
Text Area Content
textarea_content='<div class="option-row textarea-option cf" id="textarea-[option_counter]"><label for="options_[option_counter]">[option_title]</label> [option_item]</div>';

Specify the HTML or Text you want to output when a text area option is displayed.

Value
Description
{user defined}
Specify your own HTML or Text

This attribute has some attribute tags to display the fields and labels.

Value
Description
[option_title]
Outputs the name of the option/variant. This is to be used to label the field.
[option_item]
Outputs the HTML for the field.
[option_counter]
Outputs an integer value which increments by one for each option on the page.
Dropdown Content
dropdown_content='<div class="option-row select-option cf" id="select-[option_counter]"><label for="options_[option_counter]">[option_title]</label> [option_item]</div>';

Specify the HTML or Text you want to output when a dropdown option is displayed.

Value
Description
{user defined}
Specify your own HTML or Text

This attribute has some attribute tags to display the fields and labels.

Value
Description
[option_title]
Outputs the name of the option/variant. This is to be used to label the field.
[option_item]
Outputs the HTML for the field.
[option_counter]
Outputs an integer value which increments by one for each option on the page.
Template End
template_end='</div>';

Specify any HTML or Text you want to be outputted when all product options have been output. This will display once and will go after the option items are output. This works in the same way html_after and output_end do in other tags.

Value
Description
{user defined}
Specify your own HTML or Text
Change Callback
change_callback='doChange';

Define a JavaScript function in global scope to be called when the product option has changed.

Value
Description
{user defined}
Define a JavaScript function at global scope.

The EKM system allows for some tags to be nested within other tags.

Nesting This Tag

When nesting this tag you need to prepend the tag with nested_ and replace all ' single quotes with double quotes "


[ekm:if]
    iftype='EQUALS';
    ifvalue='1';
    ifvalue2='1';
    ifthen='
    [ekm:nested_productoptions]
        font_formatting="no";
        remove_formatting="yes";
        orderby="name ASC";
        orderbyitems="name ASC, amount DESC";

        template_start="<div id="product-options">";
        textfield_content="<div class="option-row textfield-option cf" id="textfield-[option_counter]"><label for="options_[option_counter]">[option_title]</label> [option_item]</div>";
        textarea_content="<div class="option-row textarea-option cf" id="textarea-[option_counter]"><label for="options_[option_counter]">[option_title]</label> [option_item]</div>";
        dropdown_content="<div class="option-row select-option cf" id="select-[option_counter]"><label for="options_[option_counter]">[option_title]</label> [option_item]</div>";
        template_end="</div>";
    [/ekm:nested_productoptions]
    ';
    ifelse='';
[/ekm:if]

Below is an example of how you may want to customise your rpoduct options tag. This is complete with CSS.

Customised Options

Here is an example of how you may customise your product options.


<style type="text/css">
    /* .clear {clear: both; color: [ekm:colour_1][/ekm:colour_1]}  Use .cf instead */
    .cf:before, .cf:after {content:"";display:table;}
    .cf:after {clear:both;}
    .cf {zoom:1;}

    /* Product Options */
    #product-options br {display:none;}
    #product-options .option-row {margin: 10px 0;}
    #product-options .option-row label {display: block; width: 150px; font-size: 12px; padding: 5px 5px 0;}

    /* Text Field Styling */
    #product-options .textfield-option input {border: solid 1px #ccc; background: #efefef; border-radius: 2px; box-shadow: 0 1px 0 0 #fff inset; padding: 5px; color: #666; width: 200px;}
    #product-options .textfield-option input:focus {box-shadow: 0 -1px 0 0 #fff inset; outline: 0 none;}

    /* Text Area Styling */
    #product-options .textarea-option textarea {border: solid 1px #ccc; background: #efefef; border-radius: 2px; box-shadow: 0 1px 0 0 #fff inset; padding: 5px; color: #666; width: 200px;}
    #product-options .textarea-option textarea:focus {box-shadow: 0 -1px 0 0 #fff inset; outline: 0 none;}

    /* Select Box Styling */
    #product-options .select-option select {border: solid 1px #ccc; background: #efefef; border-radius: 2px; box-shadow: 0 1px 0 0 #fff inset; padding: 5px; color: #666; width: 200px;}
    #product-options .select-option select:focus {box-shadow: 0 -1px 0 0 #fff inset; outline: 0 none;}
</style>

[ekm:productoptions]
    font_formatting='no';
    remove_formatting='yes';
    orderby='name ASC';
    orderbyitems='name ASC, amount DESC';

    template_start='<div id="product-options">';
    textfield_content='<div class="option-row textfield-option cf" id="textfield-[option_counter]"><label for="options_[option_counter]">[option_title]</label> [option_item]</div>';
    textarea_content='<div class="option-row textarea-option cf" id="textarea-[option_counter]"><label for="options_[option_counter]">[option_title]</label> [option_item]</div>';
    dropdown_content='<div class="option-row select-dropdown cf" id="select-[option_counter]"><label for="options_[option_counter]">[option_title]</label> [option_item]</div>';
    template_end='</div>';
[/ekm:productoptions]
Designed & built UK ecommerce solution with love in the UK

Sitemap | Terms & Conditions | Privacy & Cookies

We use cookies on our site to help us improve your experience and for personalised advertising purposes. By using our website, you agree to our privacy and cookie policy.