How to change a item-line into italic with twig and css?

Self-Hosted | v5
1

Version ie <v5.10.30>

v5.11.80-L172

Environment <Docker/Shared Hosting/Zip/Other>

Docker

Greetings, earthlings! ^^

I’m lost with twig and css. I’d like to create a design which changes a complete table-row into italic, if for this special item a custom-value is set into a special value.

For example: I’m creating a quote. I offer a PC as a normal item (product-custom-value 1 = NULL). As an alternative item I offer a new item which gets the product-custom-value = “Alternative”. Now I’d like to format this whole line into italic font-design.

For info: I made a custom-design which is designed “row by row” for line-items. That means, I created the item-table manually and set every single column-variable.

Has anyone an idea how to realise this?

2

Hi,

Here’s what ChatGPT suggests:

You can achieve this by using a conditional check in your custom design’s Twig template and applying inline CSS (font-style: italic) if the custom value is set to “Alternative”.

:white_check_mark: Goal

Make an entire table row italic only if a custom field (e.g. product.custom_value1) equals "Alternative".

:puzzle_piece: Example Twig Code

Let’s say you are manually creating table rows like this in your custom design:

<tr>
    <td>{{ product.product_key }}</td>
    <td>{{ product.notes }}</td>
    <td>{{ product.cost }}</td>
</tr>

You can wrap it in a Twig if condition with an inline style:

{% if product.custom_value1 == 'Alternative' %}
<tr style="font-style: italic;">
{% else %}
<tr>
{% endif %}
    <td>{{ product.product_key }}</td>
    <td>{{ product.notes }}</td>
    <td>{{ product.cost }}</td>
</tr>

:repeat_button: If You’re Looping Items

If you are looping through line items manually, like this:

{% for product in products %}
    <tr>
        <td>{{ product.product_key }}</td>
        <td>{{ product.notes }}</td>
        <td>{{ product.cost }}</td>
    </tr>
{% endfor %}

You can modify it like this:

{% for product in products %}
    <tr{% if product.custom_value1 == 'Alternative' %} style="font-style: italic;"{% endif %}>
        <td>{{ product.product_key }}</td>
        <td>{{ product.notes }}</td>
        <td>{{ product.cost }}</td>
    </tr>
{% endfor %}

:test_tube: Tip: Debug the Field

If it’s not working, output the value to verify:

<td>{{ product.custom_value1 }}</td>

Make sure the value is exactly "Alternative" (no leading/trailing spaces, correct casing, etc).

Let me know if you want to highlight it differently (e.g. color, background, etc).