Beta: Quote Template Customisation

Developer Support CMS Development
1

Using the new beta feature we can finally customise templates to reflect our 14 brands and numberous worldwide locations. Everything is perfectly set except when displaying the line item table and specifically line item discounts. THe following was pulled from the modern template/proposals tall where the quote discount is written under the line item total and displays fine in the preview function. See the highlighted section for the issue

<h1 style=“margin-top: 50px; text-align: left;”>Products & Services</h1>
<table>
<thead>
<tr>
<th>Item & Description</th>
<th>Quantity</th>
<th>Unit price</th>
<th>Total</th>
</tr>
</thead>
<tbody class=“line-items”>
{% for item in LINE_ITEMS|sort(False, False, ‘hs_position_on_quote’) %}
<tr>
<td>
{{ item.name }}
<br>
{{ item.description }}
</td>
<td>{{ item.quantity }}</td>
<td>{{ item.price|format_currency(LOCALE, CURRENCY, true) }}</td>
<td>
{{ item.amount|format_currency(LOCALE, CURRENCY, true) }}
{% if item.recurringbillingfrequency %}
/ {{ item.recurringbillingfrequency }}
{% endif %}

{% if item.discount %}

<br>

after {{ item.discount|format_currency(LOCALE, CURRENCY, true) }} discount

{% endif %}

</td>

</tr>
{% endfor %}
</tbody>
</table>
<div style=“flex-direction: column;”>
{% if SUB_TOTALS|length > 0 %}
<h3>Subtotals</h3>
<table>
<tbody>
{% if SUB_TOTALS.one_time %}
<tr>
<td>
One-time subtotal
</td>
<td>
{{ SUB_TOTALS.one_time.subTotal|format_currency(LOCALE, CURRENCY, true) }}</td>
</tr>
{% endif %}

{% if SUB_TOTALS.monthly %}
<tr>
<td>
Monthly recurring subtotal
</td>
<td>
{{ SUB_TOTALS.monthly.subTotal|format_currency(LOCALE, CURRENCY, true) }} / month
</td>
</tr>
{% endif %}

{% if SUB_TOTALS.quarterly %}
<tr>
<td>
Quarterly recurring subtotal
</td>
<td>
{{ SUB_TOTALS.quarterly.subTotal|format_currency(LOCALE, CURRENCY, true) }} / quarter
</td>
</tr>
{% endif %}

{% if SUB_TOTALS.per_six_months %}
<tr>
<td>
Monthly recurring subtotal
</td>
<td>
{{ SUB_TOTALS.per_six_months.subTotal|format_currency(LOCALE, CURRENCY, true) }} / six months
</td>
</tr>
{% endif %}

{% if SUB_TOTALS.annually %}
<tr>
<td>
Annually recurring subtotal
</td>
<td>
{{ SUB_TOTALS.annually.subTotal|format_currency(LOCALE, CURRENCY, true) }} / per year
</td>
</tr>
{% endif %}

{% if SUB_TOTALS.per_two_years %}
<tr>
<td>
Per two years recurring subtotal
</td>
<td>
{{ SUB_TOTALS.per_two_years.subTotal|format_currency(LOCALE, CURRENCY, true) }} / per two years
</td>
</tr>
{% endif %}

{% if SUB_TOTALS.per_three_years %}
<tr>
<td>
Per three years recurring subtotal
</td>
<td>
{{ SUB_TOTALS.per_three_years.subTotal|format_currency(LOCALE, CURRENCY, true) }} / per three years
</td>
</tr>
{% endif %}
</tbody>
</table>
{% endif %}

{% if ADDITIONAL_FEES|length > 0 %}
<h3>Other fees</h3>
<table>
<tbody>
{% for fee in ADDITIONAL_FEES %}
<tr>
<td>
{{ fee.name }}
</td>
<td>
{{ fee.category == “DISCOUNT” ? “-” : null }}
{% if fee.isPercentage %}
{{ fee.amount }} %
{% else %}
{{ fee.amount|format_currency(LOCALE, CURRENCY, true)}}
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endif %}
<div style=“text-align: right;”>
<h3>Total {{ QUOTE_TOTAL|format_currency(LOCALE, CURRENCY, true) }}</h3>
The total doesn’t include any applicable taxes.
</div>
</div>
</div>
</div>
<!-- QUOTE SECTION END -->
When a discount either perfectage or set amount is entered into the line item field “unit discount” when creating a quote this does not display. Possibly this HubSpot Created property isn’t actually identified as “item.discount” but as I have no access to this property I can’t check.
Any ideas or work arounds? It is essential that my sales team can show line item discounts when given on specific products but not have it displayed when no discount is provided.

2

Hi @KezzaM, if nothing displays it means the if statement is evaluating false, i.e. item.discount doesn’t exist. So it must be called something else. You could find out what it is actually called by console logging (or use console table for easier to read data) the item and finding the value you input into “unit discount”. Add this somewhere in your HubL template:

<script>
console.table(`{{item}}`);
</script>
3

I’m not sure how to do this (Biochemist by training not programmer). I tried changing it as unit.discount to no avail. The issue was raised with the support team of which I got the unsatisfactory reply. Basically I need to know what hubspot idenfies this box as in their code. (see image)

34903i13BF7545A235FA98.png
34903i13BF7545A235FA98.png998×377 69.4 KB

Per the message below there isn’t an obvious reason as to why it wouldn’t work in a custom template when the script is identical to the modern or long proposal template created within HubSpot.

"

Hi Kerianne,

Thank you for your patience while I investigated this issue.

After speaking with the backend team about this, I found out this is a known issue.

At this time, it is not possible to show discounts when using a custom quote template. Custom templates don’t show discounts at all yet, just the calculated amount.

The team is planning on making a change in the future, but there isn’t an immediate plan to change this functionality.

If you would like to, you can post this as a feature request in our Ideas Forum. This is a great platform for communicating feature requests to our Product Team. It also allows other customers to up-vote and comment on the idea. As a result, it helps us better prioritize features that are having the greatest impact on our customers.

I have also made the team aware of this use case.

Let me know if you have any additional questions!

Thanks,"

4

Well according to the support response this is simply not possible at the moment. If you need to display the discount you’ll have to use a non-custom template that has it integrated.

If you want to double check, copy paste the console.table script into your table, just beneath the “for item in LINE_ITEM” like this:

<tbody class="line-items">
{% for item in LINE_ITEMS|sort(False, False, 'hs_position_on_quote') %}
<script>
console.table(`{{item}}`);
</script>
// rest of your code

Then open or refresh the page the table appears on (may need a hard refresh to clear the cache: ctrl+shift and R on windows or cmd+shift and R on mac) and then right-click somewhere on the page and click Inspect. Click Console at the top of the dev tools window that pops up and you should see a table with all the data that Hubspot generates for each item including, hopefully, the discount.

5

HOw much work was it to do? I am trying to fgind a devlopmer who can help us add bi-weekly and weekly billing frequencies in the the proposals.

6

How do I get the Beta?