Template Docs Commerce APIs Webhooks Tools
Get Started
Get Started

Template Partials

Partials allow you to reuse code inside your template, instead of having redundant code scattered throughout your files. This can make your template easier to maintain.

Creating a Partial

To create a partial add a .block file to your /blocks/ folder. This file can contain any kind of code used in template files, most commonly HTML and JSON-T.

To use a partial in a template add a JSON-T formatter with the block file name inside the tag, like the code example below demonstrates.

{@|apply some-block.block}

When Should I Use Partials?

Think of partials like classes in CSS. A class is typically something that is reused across your site; classes are also broad and can be used in analogous contexts. If you will use a piece of code in your template more than once in a similar setting you may want to consider making it a partial.

Example

For the purpose of example, let's build a line of metadata that can be used in several different collections on both .list and .item pages.

item-meta.block
----------------------------
<div class="item-meta">
      <p>Added on {addedOn|date %B %d, %Y} by {author.displayName}</p>
</div>

This partial can be rendered in either a .list or .item file in any collection type. The output changes depending on the context. For instance, we can render it in the following ways.

blog.list:
----------------------------
{.repeated section items}
  {@|apply item-meta.block}
{.end}

blog.item:
----------------------------
{.section item}
  {@|apply item-meta.block}
{.end}

gallery.list:
----------------------------
{.repeated section items}
    {@|apply item-meta.block}
{.end}

NOTE: Partials are dependent on scope. If you break up your site into modules, it allows you to use them in several different contexts. To learn how scoping works visit this page.