macros

HTML macros are used to create a shorthand way of rendering HTML content. They help keep your code clean and tidy and easy to maintain.

HTML macros are defined in the html.twig view.

For example,

{{ html.input('quantity[' ~ item.id ~ ']', item.quantity) }}

returns...

<input type="text" name="quantity[52577]" value="1">

On the checkout/basket page when used to allow the user to change the quantity of an item they have in their basket.

The macro is defined in html.twig as follows:

{% macro input(name, value, class, placeholder, type, extra) %}
    <input type="{{ type|default('text') }}"{% if name %} name="{{ name }}"{% endif %}{% if value %} value="{{ value }}"{% endif %}{% if class %} class="{{ class }}"{% endif %}{% if placeholder %} placeholder="{{ placeholder }}"{% endif %}{% if extra %} {{ extra|raw }}{% endif %}>
{% endmacro %}

You can read more about macros here.

Theme macros

Theme macros are contained in the theme.twig view.

Like HTML macros, they create a shorthand way to include platform theme elements on another view.

For example, instead of using the full code to render a link list, i.e.

{% if global.theme.settings.list_footer.title %}
    <h2>
        {{ link_list.title }}
    </h2>
{% endif %}
<ul class="{{ class }}">
    {% for link in global.theme.settings.list_footer.links %}
        <li>
            <a href="{{ link.url }}">
                {{ link.title }}
            </a>
        </li>
    {% endfor %}
</ul>

a macro is defined in theme.twig that allows you to use the expression below instead.

{{ theme.link_list('footer') }}