extra_options

Simple product options available for users to influence a SKU during purchase

Example

[%extra_options id:'[@sku@]'%]
    [%param *header%]
        <h4>Available Options</h4>
    [%/param%]
    [%param *number_option%]
        <label>[@name@]</label>
        <input name="extra[@count@]" id="productextra[@count@]" rel="[@SKU@]" value="">
    [%/param%]
    [%param *text_option%]
        <label>[@name@]</label>
        <textarea name="extra[@count@]" class="form-control" id="productextra[@count@]" rel="[@SKU@]" cols="20"></textarea>
    [%/param%]
    [%param *select_option%]
        <label>[@name@]</label>
        <select name="extra[@count@]" class="form-control" id="productextra[@count@]" rel="[@SKU@]">[@choices@]</select>
    [%/param%]
    [%param *choices%]
        <option type="text" class="form-control" value="[@option_id@]">
            [%nohtml%][@text@][%end nohtml%]
            [%if [@price@] != 0%]
                (+ [%FORMAT type:'currency'%][@price@][%END FORMAT%])
            [%/if%]
        </option>
    [%/param%]
    [%param *footer%]
        <input type="hidden" name="extras" value="[@total_options@]"/>
    [%/param%]
[%/extra_options%]

Usage

The extra options tag loads options loaded to a product that don't have inventoried options. By adding an extra option, lets say "Gift message" on the text_option type, this will accept user input for a single product on a single order. The sample code is how it appears in the default template set, and loads each option available for a product using extra products and repeats for each option of the same type.

If you'd like to show the user product options that do have inventory (Ie. Are their own SKU's in Maropost Commerce Cloud), you'll want to use the variations system and its relative tags.

Different formatting for the same extra options type

Frequently you may need to apply specific formatting to different options that share the same type. For minor changes, you can always rely on the [@name@] attribute to make a class that will identify that block. However, for more advanced formatting changes you can use an if statement to format a unique block.

In our example, we have 2 text options, "Name" and "Message" and we want to introduce a text block specific to the message, therefore our code would look like this :

[%extra_options id:'[@sku@]'%]
    [%param *header%]
        <h4>Available Options</h4>
    [%/param%]
    [%param *text_option%]
        [%if [@name@] eq 'Message'%]
            <label>[@name@]</label>
            <p>Text block specific to the "Message" option</p>
            <textarea name="extra[@count@]" class="form-control" id="productextra[@count@]" rel="[@SKU@]" cols="20"></textarea>
        [%else%]
            <label>[@name@]</label>
            <textarea name="extra[@count@]" class="form-control" id="productextra[@count@]" rel="[@SKU@]" cols="20"></textarea>
        [%/if%]
    [%/param%]
    [%param *footer%]
        <input type="hidden" name="extras" value="[@total_options@]"/>
    [%/param%]
[%/extra_options%]

Parameters

Data Tags (choices/number_option/text_option/select_option)

Data Tags (footer)