Twig iteration on a table

Product Support
1

Your software
My Mautic version is: 6.0.0
My PHP version is: 8.3.20
My Database type and version is: mariadb 10.11.10

Hello there,I’m creating an email, i use Mautic Twig bundle, and i try to create a table.So, this is the “basic code” which should works

  {% TWIG_BLOCK %}

		
			  <table>
				<thead>
				  <tr>
					<th>Nom
					</th>
				  </tr>
				</thead>
				<tbody>
			      {% for package in tokens["packages"] %} 
				  <tr>
					<td>{{package}} 
					</td>
				  </tr>
	            {% endfor %}
				</tbody>
			  </table>
			  {% END_TWIG_BLOCK %}

But when i save this, it’s converted to this


  {% TWIG_BLOCK %}
			  {% for package in tokens["packages"] %} 
			  {% endfor %}
			  <table>
				<thead>
				  <tr>
					<th>Nom
					</th>
				  </tr>
				</thead>
				<tbody>
				  <tr>
					<td>{{package}} 
					</td>
				  </tr>
				</tbody>
			  </table>
			  {% END_TWIG_BLOCK %}

As you can see, the “for” loop is moved outside the table, which is precisely my need.Do you have an indea ? :visage_légèrement_souriant:

2

Hello @henri9813,

GrapeJS does indeed modify your MJML code when you open your custom template. This is quite common, but there are workarounds to fix it.

I have written an explanation on how to prevent GrapeJS from automatically changing your code for your exact situation. If you use {% verbatim %} before opening your Twig block, and close it after the last {% endverbatim %}, GrapeJS will handle your code correctly.

You can find the full explanation here:

Best regards,
Ricardo

3

Hello,

thanks.

But

		<mj-table>
		  {% verbatim %}
		  COUCOU
		  {% TWIG_BLOCK %}
		  {% for package in tokens["server_packages"] %}
		  <tr><td>{{package}}</td></tr>
		  {% END_TWIG_BLOCK %}
		  {% endverbatim %}
		</mj-table>

Is still changed to

		<mj-table>
		  {% verbatim %}
		  COUCOU
		  {% TWIG_BLOCK %}
		  {% for package in tokens["server_packages"] %}
		  {{package}}
		  {% END_TWIG_BLOCK %}
		  {% endverbatim %}
		</mj-table>```
4

Hello @henri9813,

If you want to add more rows to a table dynamically with Twig, that’s a different story! I haven’t done exactly this before, so we’re both exploring new ground here eheh :grinning_face_with_smiling_eyes:

My suggestion would be to avoid using <mj-table> and instead use <mj-raw> to declare your table with plain HTML. For example:

<mj-raw>
  <table>
    <tr>
      <td>Item</td>
      <td>Price</td>
    </tr>
    <!--
    {% TWIG_BLOCK %}
    {% set items = 'RSS URL HERE' | rss %}
    {% for item in items | slice(0, 5) %}
    -->
    <tr>
      <td>{{ item.name }}</td>
      <td>{{ item.price }}</td>
    </tr>
    <!--
    {% endfor %}
    {% END_TWIG_BLOCK %}
    -->
  </table>
</mj-raw>

This is just a basic example: start simple, use as little Twig logic as possible at first, and iterate step by step until you find the approach that works for your needs!

If you find the solution, please share it with the community, I would really appreciate it!

Best regards,
Ricardo

5

Hello,

This result a “blank”.

The whole mj-raw make me an empty things, whereas in the editor, it appear.

( all the rest of the mail is okay, except this which is "empty’.

6

Hi,
Which plugin is this, can you link it here? There are multiple iterations.
J

7

Hello,

Here is my working solution

<mj-section>
	  <mj-column width="550px" padding-right="25px" padding-left="25px">
		<mj-raw>
		  <table style="width:100%;">
			<thead style="border:1px solid;border-color:#FF9F68;">
			  <tr style="border-radius:14px;">
				<th style="font-size:12px;background:#FF9F68;color:white;">Name
				</th>
				<th style="font-size:12px;background:#FF9F68;color:white;">Value
				</th>
			  </tr>
			</thead>
			<tbody style="border-right:1px solid #e5e7eb;border-left:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb;">
			  <!--
{% TWIG_BLOCK %}
{% set items = tokens['items'] %}
{% for item in items %}
-->
			  <tr>
				<td style="font-size:12px;">{{ item.name }}
				</td>
				<td style="font-size:12px;">{{ item.value }}
				</td>
			  </tr>
			  <!--
{% endfor %}
{% END_TWIG_BLOCK %}
-->
			</tbody>
		  </table>
		</mj-raw>
	  </mj-column>
	</mj-section>

I use the twig GitHub - Logicify/mautic-advanced-templates-bundle: Plugin extends default email template capabilities with TWIG block so you can use advanced scripting techniques like conditions, loops etc

Best regards

1 Like
8

This topic was automatically closed 36 hours after the last reply. New replies are no longer allowed.