Blocks

Reusable HTML (twig) components that render based on logic, parameters and data.

Depending of your use case you will expand your base template with these blocks.

In other words, you can make these blocks yourself and expand your template.

A good example here would be a table. It’s also technically one of the harder ones.

All Default functionality of twig can be used here. The render engine will convert it finally into plain HTML.

Twig template documentation https://twig.symfony.com/doc/2.x/templates.html

Default defined blocks

Mix these blocks with your fixed template.

XML tag Refers to parameters html elements Description
paragraph Paragraph.block label h2, p Renders a Label + description
summary Summary.block label h2, h3, dl, dt, dd Renders a summary of items
title Title.block Renders a header title

XML Config

All XML config nodes within the body node should refer to a referenced block.

<body link='template.html.twig'>

   <title>My Title</title>
 
   <blocks>
        <paragraph label="{{ trans('advantages') }}">
            {{ normalize('advantages') }}
        </paragraph>

     <summary label="{{ trans('legend') }}">
         <item label="{{ trans('attribute_code') }}">
             {{ normalize('attribute_code') }}
        </item>
         <item label="{{ trans('attribute_code') }}">
             {{ normalize('attribute_code') }}
         </item>
         ...
     </summary>

   </blocks>
</body>

Empty Values

No Top label is rendered when the value(s) are empty.

Between the code block tags {output value} we render the output value.

When no output value is set then when don’t need to render that block.

The same behaviour will happen in a summary block when a list of items has no set values.

Custom Defined blocks

More importantly you have full control of making your own blocks.

With basic HTML and twig knowledge you should be able to define these blocks.

Let’s make a table together, our net result will be a base table looking like this.

img

XML config

In the XML config we need to add a source and the table node as block.

<body link='template.html.twig'>

   <title>My Title</title>

   <sources>
      <source code='associations:pack'>
            <family code='smartphones' />
        </source>
   </sources>
   <blocks>
     <table source='associations:pack' column="reference,code,thickness_0,thickness_1,thickness_3,height"/>

...

   </blocks>
</body>

in your Assets zip file.

blocks/table.block.twig

Settings is where we dynamically inject the XML configuration table attributes into.

The FilterData will prepare the correct product data set, requires a source.

{# collect_data and filter #}
[[ settings ]]
{% set itemsCollection = filterData(settings) %}

{% for item in itemsCollection %}

{% set headers = items|first|keys %}

{% if items|length > 0 %}
    <div>
        <h2>{{ trans(settings.label) }}</h2>
 
        <table>
            <tr>
                {% for header in headers %}
                    <th data-index="{{ loop.index0 }}">{{ trans(header) }}</th>
                {% endfor %}
            </tr>
            {% for item in items %}
                <tr>
                    {% for field in fields %}
                        <td data-index="{{ loop.index0 }}">{{ normalize(field, settings, item) }}</td>
                    {% endfor %}
                </tr>
            {% endfor %}
        </table>
    </div>
 
{% endif %}
{% endfor %}