Request a Call Back

Enter your number and one of our friendly ecommerce experts will be in touch. All fields are required.

Speak to our experts today 0333 004 0333
Speak to one of our experts today or Request a Callback
User Guides

EKM Tag: [ekm:addtocart]

This tag will output the "Add To Cart" button for the product page you are currently viewing. If the product is out of stock it will also output a message and/or hide the button.

This tag can only be used within the product page. This tag MUST be placed within the [ekm:productstart] and [ekm:productend] tags in order to work.

  • Tag Information
  • Nesting This Tag
  • Examples
Basic Use
This tag is used to output a basic add to cart button on your product page. The image or text can be changed in the design section of your EKM shop.

[ekm:addtocart][/ekm:addtocart]
                                
This would output something like...
Advanced Use
This tag will output an add to cart button on your product page with the alternative text reading "Buy Now" with no surrounding formatting.

[ekm:addtocart]
    output_start='<div class="ekmps-location">';
    alt_text='Buy Now';
    image_formatting='none';
    output_end='</div>';
[/ekm:addtocart]
                                
This would output something like...
Tag Attributes
Alternative Text
alt_text='Buy Now';

Specify the message you want to display when you hover your mouse over the button.

Value
Description
auto
Displays the default message "Add to Cart"
{user defined}
Define your own message.
Button Class
input_class='custom-class';

Specifies an additional class to be added to the button element.

Value
Description
{user defined}
Define any CSS class
Image Formatting
image_formatting='none';

Allows you to specify whether you want to prevent formatting, such as tables and font tags, from appearing around your add to cart button.

Value
Description
auto
Outputs a table surrounding your button. In some cases you may get an empty space to the right of your button.
none
Outputs only the input and cart message tags.
reduced
Outputs a table surrounding your button without the empty space to the right.
Output Start
output_start='<div>';

Specify any HTML to be output before the add to cart button.

Value
Description
{user defined}
Define any opening HTML to go before the add to cart button.
Output End
output_end='</div>';

Specify any HTML to be output after the add to cart button.

Value
Description
{user defined}
Define any HTML to go after the add to cart button.

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

Nesting This Tag

When nesting this tag you do not need to make any alterations.


[ekm:if]
    iftype='EQUALS';
    ifvalue='1';
    ifvalue2='1';
    ifthen='[ekm:addtocart][/ekm:addtocart]';
    ifelse='';
[/ekm:if]
                                

Three State Hover

This examples allows you to place a three state hover effect on your add to cart button. This will give you an effect on hover and a seperate effect when clicking.

This is done using a sprite image (like this) and can only be applied to a text button. If you wish to use this example and have uploaded an image you will need to change back to a text button.


<style type="text/css">
    /* Add to cart button */
    #add-to-cart input {background: url(/ekmps/shops/[ekm:siteusername][/ekm:siteusername]/resources/Design/add-to-cart-button.png) no-repeat right top; width: 181px; height: 45px; line-height: 300px; overflow: hidden; font-size: 0px; cursor: pointer; border: none 0;}
    #add-to-cart input:hover {background-position: right center;}
    #add-to-cart input:active {background-position: right bottom;}
</style>

<div id="add-to-cart">[ekm:addtocart]image_formatting='none';[/ekm:addtocart]</a>
                                
This outputs the following.