Contributors:

item_attributes

This component fetches all attributes/options for a specified product. By default, each attribute group is rendered, with its options and any prices, according to their specified form inputs.

{% component type: "item_attributes", module: "<Module name/ID>", itemId: "<Item Id>" %}

Parameters and Options

type

item_attributes

This is the name of the entity that needs to be used for the component retrieving function.

module

<Module name/ID>

The module’s entity/alias name or ID that the data is to be sourced from.

itemId

<Item ID>

The module item ID (specific Product) the data is to be sourced from

layout

<path/to/layout>

Path to file that will contain the Liquid layout content to be parsed.

If an empty string, nothing will be rendered.
If paramater is not included, the default virtual layout will be rendered (see below).

object

item
collection (default)

Determines the method for Liquid rendering.
item returns each item iteratively, one after another, for output (generally, output to a container element with no need for looping through the data).
collection returns all items as one collection for output (your container element and looping logic would be handled in the Components Layout).

includeTax

false (default)
true

When true, renders the attribute's display price inclusive of tax. If false, or the parameter is not included the display price will be exclusive of tax.

collectionVariable

<yourLiquidVariableName>

Assigns the data to a Liquid collection enabling further access to the data on the Page or Template using Liquid.

Your collectionVariable value must only contain English letters, numbers or underscores. Spaces or special characters are not supported.

Liquid Output

The below example shows the attributes available for the specified product ID. The Liquid data output from this example would look like the following (for example, when using a collectionVariable to create the collection):

{
  "Attributes": [
    {
      "Name": "Size",
      "Required": true,
      "AddToInventory": true,
      "Weight": 0,
      "Id": "3661",
      "Options": [
        {
          "Name": "Small",
          "Image": "/images/template-detail-crafter-mobile.png",
          "Country": "US",
          "Weight": 0,
          "Currency": {
            "Code": "USD",
            "Symbol": "$",
            "DigitalCode": "840",
            "Name": "US Dollar"
          },
          "Id": "3652",
          "FormattedPrice": "$0.00",
          "PriceValue": 0.0000,
          "TaxPrice": 0.0000,
          "TaxRate": 0.0,
          "Params": {}
        },
        {
          "Name": "Medium",
          "Image": "/images/template-crafter@2x.jpg",
          "Country": "US",
          "Weight": 1,
          "Currency": {
            "Code": "USD",
            "Symbol": "$",
            "DigitalCode": "840",
            "Name": "US Dollar"
          },
          "Id": "3653",
          "FormattedPrice": "$2.00",
          "PriceValue": 2.0000,
          "TaxPrice": 0.0000,
          "TaxRate": 0.0,
          "Params": {}
        },
        {
          "Name": "Large",
          "Image": "/images/template-detail-crafter-desktop@2x.jpg",
          "Country": "US",
          "Weight": 2,
          "Currency": {
            "Code": "USD",
            "Symbol": "$",
            "DigitalCode": "840",
            "Name": "US Dollar"
          },
          "Id": "3654",
          "FormattedPrice": "$4.00",
          "PriceValue": 4.0000,
          "TaxPrice": 0.0000,
          "TaxRate": 0.0,
          "Params": {}
        }
      ],
      "AttributeType": "dropdown",
      "ValueType": "FixedPrice",
      "Params": {}
    }
  ],
  "eCommerceItemId": 2535,
  "Params": {
    "type": "item_attributes",
    "module": "2485",
    "itemid": "2535",
    "layout": "",
    "collectionvariable": "attrCollection"
  }
}

Virtual Layout

Based on the above example, if not using any custom layout or collection, the default virtual layout will output as form elements (depending on their attributeType):

<form name="productAttributeForm_{{this.eCommerceItemId}}" data-ecommerce_item="{{this.eCommerceItemId}}">
    {% for attribute in this.attributes %}
        <h3 >{{attribute.name}}</h3>
        {% case attribute.attributeType %}
            {% when 'dropdown' %}
                <div class="cms_fake_select" data-attr_group="{{attribute.id}}">
                   <select name="attr_{{this.eCommerceItemId}}_{{attribute.id}}">
                       <option value="">Please select</option>
                    {% for attrOption in attribute.options %}
                        <option value="{{attrOption.id}}" {% if attrOption.image != '' and attrOption.image != null %} style="background-image:url({{attrOption.image}});"{% endif %}>{{attrOption.name}} {{attrOption.formattedPrice}}</option>
                    {% endfor %}
                </select>
            </div>
            {% when 'checkbox' %}
             <div data-attr_group="{{attribute.id}}">
            {% for attrOption in attribute.options %}
            <div class="cms_custom_input">
                <label>
                    <input type="checkbox" name="attr_{{this.eCommerceItemId}}_{{attribute.id}}" value="{{attrOption.id}}">
                    {% if attrOption.image != '' and attrOption.image != null %}
                        <img src="{{attrOption.image}}?width=40&height=40" width="40" height="40" title="{{attrOption.name}}" alt="{{attrOption.name}}">
                    {% else %}
                        <span class="cms_fake_input"></span>
                     {% endif %}
                    <span class="cms_fake_label">{{attrOption.name}} {{attrOption.formattedPrice}}</span>
                </label>
            </div>
            {% endfor %}
            </div>
            {% when 'radiolist' %}
            <div data-attr_group="{{attribute.id}}">
                {% for attrOption in attribute.options %}
                <div class="cms_custom_input">
                    <label>
                        <input type="radio" name="attr_{{this.eCommerceItemId}}_{{attribute.id}}" value="{{attrOption.id}}">
                        {% if attrOption.image != '' and attrOption.image != null %}
                            <img src="{{attrOption.image}}?width=40&height=40" width="40" height="40" title="{{attrOption.name}}" alt="{{attrOption.name}}">
                        {% else %}
                        <span class="cms_fake_input"></span>
                        {% endif %}
                        <span class="cms_fake_label">{{attrOption.name}} {{attrOption.formattedPrice}}</span>
                    </label>
                </div>
                {% endfor %}
                </div>
            {% when 'numeric' %}
                <div style="text-align: center" data-attr_group="{{attribute.id}}">{% for attrOption in attribute.options %}
                    <label>{{attrOption.name}} {{attrOption.formattedPrice}}</label>
                    {% if attrOption.image != '' and attrOption.image != null %}
                        <img src="{{attrOption.image}}?width=40&height=40" width="40" height="40" alt="{{attrOption.name}}">
                    {% endif %}
                    <input type="number" {% if attribute.required == true %} required{% endif %} name="attr_{{this.eCommerceItemId}}_{{attribute.id}}" value="">
                {% endfor %}</div>
            {% when 'userinput' %}
                <div style="text-align: center" data-attr_group="{{attribute.id}}">
                     <input type="text" maxlength="250" {% if attribute.required == true %} required{% endif %} name="attr_{{this.eCommerceItemId}}_{{attribute.id}}" value="">
                </div>
            {% else %}
        {% endcase %}</br>
    {% endfor %}
</form>

Accessing the Data

JSON Output

You can output the full JSON for your component data by referencing the root Liquid object {{this}} in your module’s layouts, or directly on your page, if using the collectionVariable parameter in your component tag.

For example:

{% component type: ... collectionVariable: "myData" %}

You can then render the JSON like so:

{{myData}}

For more details on using this approach, see Part 2 of the free ‘Learning Liquid Course’.

Rendering Property Values

This data is accessible directly on the Page or Template via a Liquid Collection if collectionVariable was added to the Component.

An example using collectionVariable with value "attrCollection":

{% component type: "item_attributes", module: "2485", itemId: "2535", collectionVariable: "attrCollection" %}

Using the following forloop directly on the page:

<ul>
    {% for attr in attrCollection.attributes %}
        <li>{{attr['name']}}</li>
    {% endfor %}
</ul>

Renders all the item names in a list:

Size

Accessing a specific item within the collection. In this case the third attributes option (zero based index), which in our example would render the value Large

{{attrCollection.attributes[0].options[2]['name']}}