Custom design - how to add products?

v5 Self-hosted
#1

I am creating fully custom invoice template. And I am having trouble adding products. I’m guessing I need to add my design to “Products” tab, but whatever I put in “Products” tab does not get rendered.

Any hints on how to add products to a custom template?

#2

Hi,

Please check you’ve configured the custom product on Settings > Custom Fields > Product Fields and checked the column is included on Settings > Invoice Design > Product Columns

#3

I might have not explained myself very well.

I am not using html tags with id entity-details, company-details, company-address, client-details, product-table, task-table, table-totals… in my body of the template. I am using the variables directly like so:

<div class="uk-card uk-card-body uk-padding-remove">
    <div class="uk-text-lead uk-text-bold">$client.name</div>
        <div class="uk-text-meta">
          $client.address1 $client.city_state_postal $client.country<br>
        </div>
    <div class="uk-text-meta">$client.id_number</div>
  </div>

I don’t want to target the style of the table with css.
What remains is to list products. I have a design that I just need to replace hardcoded products with actual invoice products.

I am guessing that the “Products” tab on the “Edit Design” page is a place where I can put my html code for a single product.

#4

Hey there.

Output selector is hardcoded at the moment and it’s #product-table. You can check all selectors here:

The reason that table isn’t outputting is because you probably miss:

<table id="product-table"></table>

#5

This might be my lack of understanding but let’s try from the beginning.

What is the purpose of the “Products” tab shown here?

Screenshot from 2021-01-04 14-46-22
Screenshot from 2021-01-04 14-46-22883×218 7.88 KB

#6

Products tab is where I can put my own <tr> style. The preview PDF does not show the changes made on the Products tab, so I had to generate invoice PDF to view the changes. That was the source of my confusion.

Having said that, I would like not to have to use the <table id="product-table"></table> to show products but build my own table with custom columns and such. For example:

<!-- Body Tab -->
<table>
    <thead>
        <tr>
            <!-- custom header -->
            <!-- numerated product items (1,2,3,...) -->
            <th class="uk-text-right">#</th>
            <!-- have the label as a variable -->
            <th class="uk-text-left">$product.item_label</th>
            <th class="uk-text-center">+</th>
        </tr>
    </thead>
    <tbody id="products">
        <!-- here would be rows from the "Products" tab -->
    </tbody>
</table>

<!-- Products Tab -->
<tr>
    <!-- item array index (1,2,3,...) -->
    <td class="uk-text-left">$product.index</td>
    <td class="uk-text-right uk-text-nowrap">$product.item</td>
    <!-- custom value same for all rows -->
    <td class="uk-text-center">+</td>
</tr>

This would allow maximum flexibility with the design.

Opinions?

#7

Hey there.

Custom table markup is not supported at the moment, unfortunately. Most people are okay with only modifying styles.

@david What do you think?