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.
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 %}