Quote template customize display conditional columns

[MarketingEKDP]

My current quote line items table has this code:

<div class=“line-items__table-scrollable”>

<table class=“{{ table_class|escape_attr }}”>

<thead class=“line-items__table-header–main”>

<tr>

{% for title in module.line_item_column %}

<th scope=“col”>{{ title.column_title|sanitize_html }}</th>

{% endfor %}

</tr>

</thead>

<tbody id=“line-items__table-body”>

{% set has_present_line_items = LINE_ITEMS|length > 0 %}

{% set has_future_line_items = FUTURE_PAYMENTS|length > 0 %}

{% set has_both_line_items = has_present_line_items and has_future_line_items %}

{% if has_present_line_items %}

{{ line_items_table_rows(LINE_ITEMS, has_both_line_items ? module.line_item_subheadings.due_now_text : null) }}

{% endif %}

{% if has_future_line_items %}

{{ line_items_table_rows(FUTURE_PAYMENTS, has_both_line_items ? module.line_item_subheadings.due_later_text : null, true) }}

{% endif %}

</tbody>

</table>

</div>

{% endif %}

It looks like this:

I’m trying to figure out the code to make it where if there is nothing in the cells for the “prepaid frieght minimum” columns, for it to not display the column at all.

Is this possible?

This is the code I keep messing around with trying to get it to work:

{% set show_n12_cs_144_tubes_column = false %}

{# Step 1: Check if any unit has a non-empty ‘n12_cs___144_tubes’ property #}

{% for unit in line_items %}

{% if unit.n12_cs___144_tubes %}

{% set show_n12_cs_144_tubes_column = true %}

{% break %}

{% endif %}

{% endfor %}

{# Step 2: Conditionally render the column if ‘show_n12_cs_144_tubes_column’ is true #}

{% if show_n12_cs_144_tubes_column %}

<th class=“your-column-header-class”>12 CS / 144 Tubes</th>

{% for unit in line_items %}

<td class=“{{ cell_print_max_width_class|escape_attr }}”>

{% if unit.n12_cs___144_tubes %}

<strong>${{ unit.n12_cs___144_tubes|sanitize_html }}</strong>\ /\ unit

{% endif %}

</td>

{% endfor %}

{% endif %}

I’ve tried a number of different possibilities and I keep getting Error: Cannot resolve property. I have tried a number of different ways of typing the parts that are bolded in the above code too.

And I’ve tried doing the display conditions in the right panel of the design manager as well:

Any way to get this to work or another way to try it?

Thanks!

[Jaycee_Lewis]

@Hi, @MarketingEKDP Thanks for including all your details in your post. Let’s invite some of our community experts to the conversation — hey @Lucila-Andimol @james-portant @Anton do you have any custom quote wisdom you can share with @MarketingEKDP?

Thank you very much for taking a look! — Jaycee

[GiantFocal]

Hi @MarketingEKDP,

Hiding empty columns solely with Hudbl is quite complicated. As an easier workaround, we can try using JS.

Here is an example:

<script>
 // Get the table
 const table = document.querySelector(".line-items__table");

 // Loop through each column index based on <th> count
 table.querySelectorAll("th").forEach((th, colIndex) => {
 let allEmpty = true;

 // Check each <td> in the column
 table.querySelectorAll(`tbody tr td:nth-child(${colIndex + 1})`).forEach(td => {
 if (td.textContent.trim() !== "") {
 allEmpty = false;
 }
 });

 // Hide <th> and corresponding <td> cells if the entire column is empty
 if (allEmpty) {
 th.style.display = "none";
 table.querySelectorAll(`tbody tr td:nth-child(${colIndex + 1})`).forEach(td => {
 td.style.display = "none";
 });
 }
 });
 </script> 

[MarketingEKDP]

Hi, thanks for the reply. I tried placing this in the code and it still didn’t work unfornuately. We have 4 different price columns for each product, but sometimes in the quote, the sales reps may only use 2 columns on a quote, for example.

I could make multiple clones of the template with combos of including columns, or leave it with the four columns rather blank or not.