Twig template structure reference

Template levels

Foxy templates exist at two levels, both rendered with Twig:

• Page templates — form the base of the actual page (html, head, body tags). These are the templates found under Templates in the Foxy admin, and represent the different steps of the checkout flow: Cart Include, Cart (full page), Checkout, Receipt, and Email (HTML and text). Cart Include is technically a partial, but functions as a page template for the Sidecart, and doesn’t include the standard html/head/body structure.

• Partial includes — smaller, reusable pieces included within page templates. Partials can include other partials.

Partial include hierarchy

cart.inc.twig
  ├── svg.inc.twig
  ├── errors.inc.twig
  └── postal_code.inc.twig
        └── regions.inc.twig

checkout.inc.twig
  ├── cart.inc.twig
  ├── errors.inc.twig
  └── address.checkout.inc.twig
        └── postal_code.inc.twig
              └── regions.inc.twig

receipt.inc.twig
  ├── cart.inc.twig
  └── address.receipt.inc.twig
        └── postal_code.inc.twig
              └── regions.inc.twig

address.email.inc.twig       — included in responsive.email.twig
address.email.inc.txt.twig   — included in email.txt.twig
cart.inc.txt.twig             — included in email.txt.twig

Outputting partial includes

include

{% include 'cart.inc.twig' %}

embed

{% embed 'checkout.inc.twig' %}
{% endembed %}

use

{% use 'cart.inc.twig' %}
{# Nothing output yet #}
{{ block('logo') }}
{# Logo block output into page #}

Blocks

Partial templates wrap chunks of markup in named block tags, so individual pieces can be overridden without copying the whole partial. For example, given a partial with block_a and block_b:

{% block block_a %}
    <div class="title-container">
        <h1>{{ widget_title }}</h1>
        <img src="{{ widget_image }}" />
    </div>
{% endblock block_a %}
{% block block_b %}
    <h2>{{ widget_subtitle }}</h2>
{% endblock block_b %}

Using embed to override just block_b:

{% embed 'widgets.inc.twig' %}
    {% block block_b %}
        <p>{{ widget_subtitle }}</p>
    {% endblock block_b %}
{% endembed %}

block_a renders as in the original file; block_b renders with the override. To keep the original block content and add to it, call {{ parent() }}:

{% embed 'widgets.inc.twig' %}
    {% block block_b %}
        {{ parent() }}
        <p>{{ widget_date }}</p>
    {% endblock block_b %}
{% endembed %}

Changes to how the cart displays on checkout or receipt should be made directly in the cart include template — embedding cart.inc.twig from within a checkout or receipt embed call isn’t supported.

Naming conventions

• Twig block names in the default templates must remain in place, even if you rewrite a template entirely. For example, the checkout template must keep a block named checkout, with a matching endblock checkout tag:

  Copy Copied

  {% block checkout %}
  {# stuff goes here #}
  {% endblock checkout %}
  

• Twig filenames follow the pattern partial.context.inc.twig, like address.checkout.inc.twig. The context piece is optional.