EKM Tag Documentation - 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.

EKM Tag: [ekm:addtocart]