item_kitting

Returns kit options for a designated, kitted product.

Usage

The item_kitting function is used to display editable kit component items, e.g here on Skeletal.

The selected SKU is checked for nostock checkout options and if none are present, changes it so that when stock quantity is less than the specified minimum assemble amount, the corresponding fields change to un-selectable/inactive.

If the kit is non-editable, the item_kitting function can be used to list out the kit components within the kit.

Kitted Product Components

Individual kit components can be assigned to a kit group, allowing for kit group logic to occur and to group them on the product page. Individual limits can be set per group/per component, e.g: min/max purchase limits. Group panels and inputs can be applied in the group_header and hidden until necessary.

[%param *group_header%]
    <input type="hidden" id="model[@rndm@][@SKU@]" name="model" value="[@model@]">
    <input type="hidden" id="thumb[@rndm@][@SKU@]" name="thumb" value="[@thumb@]">
    <input class="input-tiny btn-large" id="qty[@rndm@][@SKU@]" name="qty" value="[%if [@min_qty@]%][@min_qty@][%else%]1[%/if%]" size="2" type="hidden">
    <input type="hidden" id="sku[@rndm@][@SKU@]" name="sku" value="[@SKU@]">
    <input type="hidden" id="sku[@rndm@][@SKU@]" name="sku" value="[@QTY@]">
    <div class="row">
        <div class="col-xs-12">
            <div class="panel panel-default">
                [%if [@assemble_group_fullname@]%]
                    <div class="panel-heading"><h3 class="panel-title">[@assemble_group_fullname@]</h3></div>
                [%/if%]
            </div>
        </div>
    </div>
[%/param%]

Regarding individual kit component quantity: If store quantity exceeds the allotted assembly quantity, default quantity will be used for kit components. Otherwise, minimum quantity will be used instead.

Editable Kit

Editable kits allow for the kit component quantities to be adjusted by the shopper. They can have variation products as kit components, and are created when you apply a parent product (product with variations) as a kit component item.

In Skeletal on the products/includes/components template, item_kitting includes an [%if ![@has_variation@]%] check in the body parameter, outputting a different product thumbnail to cater for the variation logic.

Standard product thumbnail in item_kitting

[%param *body%]
    [%if ![@has_variation@]%]
        <div class="col-xs-12 col-md-4 wrapper-components-thumbnail">
            <input type="checkbox" id="[@sku@]a" class="hidden" checked>
            <div class="components-thumbnail thumbnail component[@group_count@]">
                <img class="component-var-thumb" component-id="[@component_count@]" src="[%asset_url type:'product' id:'[@SKU@]' thumb:'thumb'%][%/asset_url%]" alt="[@model@]" border="0" id="main-image">
                <div class="caption">
                    <h4 class="title">[%format type:'text' maxlength:'50' rmhtml:'1'%][@model@][%/FORMAT%]</h4>
                    <p class="price">
                        [%if [@itm_price@]%][%format type:'currency'%][@itm_price@][%/ format%]
                        [%else%]
                            [%if [@inpromo@]%]<strong>Now</strong> [%format type:'currency'%][@promo_price@][%/format%]
                            [%else%][%format type:'currency'%][@store_price@][%/format%]
                            [%/if%]
                        [%/if%]
                    </p>
                    <div class="input-group">
                        <span class="input-group-addon">QTY</span><input type="number" min="[@min_assemble@]" [%if [@max_assemble@]%]max="[@max_assemble@]" [%/if%] id="productkitting[@rndm@][@kitting_sku@][@component_count@]" value="[@qty@]" ref="[@sku@]" class="component-config-input form-control" [%if [@fixed_assemble@]%]readonly[%/if%]>
                    </div>
                </div>
            </div>
        </div>
    [%else%]
        <!-- variation thumbnail -->
    [%/if%]
[%/param%]

The main difference to the variation kit component thumbnail is that it includes a section for the variation select as select inputs using the list_item_variations function:

[%list_item_variations id:'[@current_sku@]'%]
    [%param *variation_header%]
        <select class="component-var-opt form-control component-config-input" component-id="[@component_count@]" ref="[@specific_id@]">
            <option value="" disabled selected>[@specific_name@]</option>
    [%/param%]
    [%param *variation_body%]
            <option value="[@value_id@]">[@value_name@] [%IF ![@variation_qty@]%](Out of Stock)[%/IF%]</option>
    [%/param%]
    [%param *variation_footer%]
        </select>
    [%/param%]
[%/list_item_variations%]

Parameters

Data Tags (header / footer)

Data Tags (group header / group footer)

Data Tags (body)