Contributors:

tax_codes

This component renders a form select element of all tax codes configured on the site, and can also be used to output tax code data to a Liquid collection.

{% component type: "tax_codes" %}

Parameters and Options

type

tax_codes

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

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).

filteredCountry

<COUNTRY CODE>

Returns only those options available for the defined country (by country code, ie: US, CA, AU, NZ, etc.) - since these items can belong to, or be restricted to, a specific country.

The default shopping cart setup will use the default domain country unless a country has been selected from the shipping country dropdown on the shopping cart page.

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 output shows the sample list of shipping options configured for the site:

{
  "Items": [],
  "Params": {
    "type": "tax_codes",
    "layout": "",
    "collectionvariable": "taxCollection"
  }
}

Virtual Layout

If not using any custom layout or collection, the default virtual layout will output as a form select element:

<div class="cms_fake_select">
    <select data-cms_cart_tax_codes="">
        <option value="">Please select</option>
        {% for item in this.items %}
            <option value="{{item.id}}" {% if shoppingCartData.taxCodeId == item.id %} selected="true" {% endif %}>{{item.taxCode}} ({{item.amount}}%)</option>
        {% endfor %}
    </select>
</div>

Rendering the form element:

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 also accessible directly on the Page or Template via a Liquid Collection by adding collectionVariable to the Component.

An example using collectionVariable with value "taxCollection":

{% component type: "tax_codes", collectionVariable: "taxCollection" %}

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

{{taxCollection.items[2]['taxCode']}}