Blocks
Blocks

How do I display content blocks on the storefront?
The structure of the views for the block items is shown below. If you are creating your own theme or custom storefront, you must ensure these files are present in order for the content blocks to display correctly.
└─ resources
    └─ views
        └─ blocks
            └─ html.twig
            └─ image.twig
            └─ link.twig
            └─ menu.twig
            └─ text.twig
A single block item
To show a single block item, use the block's key:
{{ block_item('product-page.confidence-builder') }}
This will show the first available block item in the block. To show a different block item, provide the position as the second parameter:
{% if block_exists('homepage.brand-heroes') %}
    <div class="flex w-full flex-wrap">
        <div class="w-full md:w-1/2">
            {{ block_item('homepage.brand-heroes', 0) }}
        </div>
        <div class="w-full md:w-1/2">
            {{ block_item('homepage.brand-heroes', 1) }}
        </div>
    </div>
{% endif %}
Passing data to block items
In some cases, a block item may need data to be passed from the theme. This is especially useful for themes, which dictate the image dimensions.
{{ block_item('listings.loyalty-banner', 0, {
    sizes: {
        small: { width: 400, height: 200 },
        medium: { width: 600, height: 260 },
        large: { width: 1024, height: 300 },
    },
    options: ['contain', {quality: 90}],
}) }}
A collection of block items
To show all block items in a content block:
{{ block_items('product-page.confidence-builders') }}
Should you need to limit the number of items returned in the collection, pass a limit as the second parameter:
{{ block_items('product-page.confidence-builders', 3) }}
If the block items need to be wrapped in elements to style their position, the following approach can be used:
{% if block_exists('homepage.main-hero') %}
    {% set main_hero = block_items('homepage.main-hero', null, {
        sizes: {
            small: { width: 360, height: 360 },
            medium: { width: 660, height: 560 },
            large: { width: 1280, height: 600 }
        }
    }) %}
    <div class="flex w-full flex-wrap">
        {% for hero in main_hero %}
            <div class="w-full">{{ hero | raw }}</div>
        {% endfor %}
    </div>
{% endif %}
Remember to use the 
rawfilter to ensure the block item HTML isn't escaped.

How do I add additional information to block items?
In some cases, more data is needed than the default values provided on each block item. For example, a promotional image may require a call-to-action link, or a sale link in the header navigation needs a custom class to turn the text red. These features are possible through the use of custom attributes, which are set on each block item.
Once the attributes have been defined against an item, they can be accessed on the storefront:
{% set hero = block_item('homepage.hero') %}
<div class="relative w-full">
    {{ hero | raw }}
    <a href="{{ hero.href }}" class="absolute bottom-0 mb-10 mx-auto">{{ hero.additional('button_text') }}</a>
</div>