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).

3

Hello, @hillel ,

thank you for your very fast answer. Sorry that my reply comes lately. I had some things to do and then went on vacation.

I’ve already tried this before (thanks to Google’s AI) and again some minutes ago. This (again) results into all the rows to be printed italic, not only the one which shall be. :-/

4

I’m not sure, I suggest asking in a discussion on GitHub.

5

Ha, I guess I found the solution:

{# Row for item-details #}
{% if item.custom_value1 starts with "Alternativ" %}
     <tr class="items-first-row" style="font-style: italic;">
{% else %}
     <tr class="items-first-row">
{% endif %}

<td>
(…)
6

Glad to hear it, thanks for sharing it!

1 Like
7

Sharing is the best way to help other users to quickly find answers for their questions. So I try to do the best I can. :slight_smile:

1 Like