{exp:store:product}
<!-- add to cart form / product details -->
{/exp:store:product}The product tag is usually placed inside an {exp:channel:entries} tag - either on a product list page, or an individual product page. It generates a form which is used to add products, along with any modifiers, to the cart.
Specify the entry ID of the product. Usually this is passed through from an {exp:channel:entries} loop. This would be achieved by using the {entry_id} parameter:
entry_id="{entry_id}"This parameter is optional. It will redirect the user to the specified page after the form is submitted - such as the Checkout page. If no redirect is specified, the form will display the current page (useful if you just wish to update a sidebar cart)
When set to yes, this empties the current cart before adding the selected product. Useful for single-product websites, or donations.
Set an id attribute on the generated HTML form.
Set a name attribute on the generated HTML form.
Set a class attribute on the generated HTML form.
When set to yes, this disables wrapping the output in an add to cart form. This parameter is usually used in conjunction with the Product Form Tag, to manually build an add to cart form which allows the customer to add multiple items to their cart at once.
When set to yes, this disables any automatic javascript output by the tag.
The input parameter allows you to use custom product modifiers defined in your template, rather than setting them up on a per-product basis. This is useful if you are selling a large number of similar products.
For example, to allow a Small, Medium and Large size option for every product in your store, add the following parameter to the product tag:
input:size="Size"Then, further down the form, you can use standard HTML to submit the modifier along with the rest of the form:
<select name="size">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
</select>These modifiers will behave like any other text modifiers, and display on the checkout and order details pages.
All price variables are pre-formatted according to your currency formatting settings. If you want the unformatted amount, simply append “_val” to the variable.
Most variables can also be used outside of the product form, inside a standard {exp:channel:entries} loop. For example, if your Store products custom field is named “product_details”, then the price is also accessible as:
{product_details:price}The entry id of the product. You probably already knew that.
The current applicable price of the product (equivalent to {if on_sale}{sale_price}{if:else}{regular_price}{/if}).
The regular price of the product, regardless of whether it is currently on sale.
The sale price entered for the product, regardless of whether it is currently on sale.
True if the product is currently on sale. You can use this in conditional statements:
{if on_sale}
Price: <del>{regular_price}</del> <ins>{price}</ins>!
{if:else}
Price: {price}
{/if}The absolute value (in currency units) saved by any applicable sale price.
The percent saved by any applicable sale price, relative to the regular price.
The sale start date specified for this product. Note that even if the product is not currently on sale, it may still have a sale end date specified. Use the ExpressionEngine format parameter to adjust the output:
{sale_start_date format="%Y-%m-%d"}The sale end date specified for this product. Note that even if the product is not currently on sale, it may still have a sale end date specified.
Loop through the applicable product modifiers. Inside the modifiers loop, the following variables are available:
This will display the name of the current modifier group.
This tag is used for setting the name attribute of the {modifiers} input or select field.
The instructions of the current modifier group if any were set.
The modifier type. One of “var”, “var_single_sku”, or “text”.
Loop through the applicable product modifier options. Inside the modifier options loop, the following variables are available:
This tag is used for {modifier_options} select option values.
This tag is used for {modifier_options} select option strings.
{modifier_options}
<option value="{option_id}">
{option_name}
{if price_mod_inc_tax_val} ({price_mod_inc_tax}) {/if}
</option>
{/modifier_options}The amount an option adds to the current product price, not including tax.
The amount an option adds to the current product price including tax.
The product price including this option (for example if a product costs \$20, and a modifier adds \$5 to it, {price_inc_mod} will return \$25).
The product price including this option, including tax.
True if this is the first option in the loop. If you are not using a select input, you may can use the boolean variables {if option_first} or {if option_last} to pre-select options.
<input type="radio" value="{option_id}" name="{modifier_input_name}" {if option_first} checked="checked" {/if} >{option_name}True if this is the last option in the loop.
When no element attributes need to be set you can use this tag to give an auto-generated select box filled with modifier options.
If {modifier_type} == “text” you can use an auto-generated input box.
True if the product has no modifiers.
The total stock available for the product. This can variable can also be used in a conditional:
{if total_stock} In Stock {if:else} Out of Stock {/if}The minimum order quantity for the product. If the product has more than one SKU, this will be the maximum of all minimum order quantities. If the product does not have any minimum order quantity, this will return 1. Useful for pre-populating the item_qty field:
<input type="text" name="item_qty" size="3" value="{min_order_qty}" />The quantity of this product already in the customer’s cart. Note if your product has multiple SKUs, this variable will take them all into account. It can also be used as a conditional:
{if qty_in_cart} This product is already in your cart. {if:else} Buy Now! {/if}The weight of the product.
The length of the product.
The width of the product.
The height of the product.
The handling charge of the product.
True if the product has free shipping.
True if the product is tax free.
Sometimes you want to update the product details when the user changes the modifiers (for example, update the price to reflect the currently selected options). To achieve this, you simply need to add one of our dynamic css classes to any html element within the product tag. For example, to display a dynamic price, you can simply use the following html:
<span class="store_product_price"></span>The price will be displayed using javascript when the page is first loaded, and updated when the product modifier options are changed. For graceful degradation, you can combine these classes with regular variables:
<span class="store_product_price">{price}</span>The following dynamic css classes are available:
The product price, including currently selected modifiers.
The product price, including currently selected modifiers and any applicable tax.
The currently selected SKU.
The stock level of the currently selected SKU.
The contents of this element will only be displayed if the currently selected SKU is in stock.
The contents of this element will only be displayed if the currently selected SKU is out of stock.
{exp:store:product entry_id="{entry_id}" return="store/checkout"}
<p>
{if on_sale}
<del>{regular_price}</del>
<strong>{sale_price}</strong><br />
Save {you_save}!
{if:else}
{price}
{/if}
</p>
{modifiers}
<p>
<label>{modifier_name}</label><br />
{if modifier_instructions}<small>{modifier_instructions}</small><br />{/if}
{if modifier_type == 'var' OR modifier_type == 'var_single_sku'}
<select name="{modifier_input_name}">
{modifier_options}
<option value="{option_id}">
{option_name}
{if price_mod_val} ({price_mod}) {/if}
</option>
{/modifier_options}
</select>
{if:else}
<input type="text" name="{modifier_input_name}" />
{/if}
</p>
{/modifiers}
<p>
<label>Quantity</label><br />
<input type="text" name="item_qty" size="3" value="1" />
</p>
<p>
<input type="submit" name="submit" value="Add to Cart" />
</p>
{/exp:store:product}