Modify invoice

webcasebv

Hi!

I would like to change the invoice template and add some fields. But any changes I make, disappear after I click the save button.
Also tried to first toggle the editor to HTML (so: changed the html and clicked Save) but that doesn't work either.

We use the default TinyMC editor.

Thanks,
Maurice

saguaros

Hi Maurice,

Here is default mockup of the invoice:

<table style="border-spacing: 0; border-collapse: collapse; color: #666; font-size: 14px; font-family: Arial, sans-serif; width: 850px; margin: 0 auto;">
<tbody>
<tr>
<td style="padding-bottom: 30px;">[LOGO]</td>
<td style="text-align: right; padding-bottom: 30px;">
<h2 style="text-transform: uppercase;">Invoice</h2>
</td>
</tr>
<tr>
<td style="padding: 10px;">
<h3 style="margin: 0;">Bill from</h3>
[SITENAME]<br /> [CADDRESS]<br /> [CCITY] [CSTATE] [CZIP]<br /> E-mail:[CEMAIL]<br /> Phone:[CPHONE]</td>
</tr>
<tr>
<td style="line-height: 1.6; font-size: 15px; font-weight: 400; color: #333; width: 50%;">
<h3 style="margin: 0;">Bill to</h3>
[ORGANISATION]<br /> [NAME]<br /> [ADDRESS]<br /> [CITY] [STATE] [ZIP]<br /> E-mail:[EMAIL]<br /> Phone:[CONTACT_NUMBER]</td>
<td>
<table style="font-size: 15px; font-weight: 400; color: #333; width: 100%;">
<tbody>
<tr>
<td style="text-align: right; padding: 7px 15px 7px 0; width: 50%;">Invoice#</td>
<td>[INVOICE_NUMBER]</td>
</tr>
<tr>
<td style="text-align: right; padding: 3px 15px 3px 0; width: 50%;">Invoice Date</td>
<td>[DATE]</td>
</tr>
<tr>
<td style="text-align: right; padding: 3px 15px 3px 0; width: 50%;">Due Date</td>
<td>[DUE_DATE]</td>
</tr>
<tr>
<td style="text-align: right; padding: 3px 15px 3px 0; width: 50%;">Terms</td>
<td>[TERMS]</td>
</tr>
<tr>
<td style="text-align: right; padding: 3px 15px 3px 0; width: 50%;">VAT / TaxId</td>
<td>[VAT_OR_TAXID]</td>
</tr>
<tr>
<td style="text-align: right; padding: 3px 15px 3px 0; width: 50%;">Amount Due</td>
<td>[DUE_AMOUNT]</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<table style="border-collapse: collapse; border-spacing: 0; margin-top: 20px; width: 100%;">
<tbody>
<tr style="border: 1px solid #ddd; color: #555; font-size: 15px; font-weight: 600;">
<th style="background-color: #f0f0f0; border: 1px solid #ddd; padding: 8px 10px; width: 40%;">Description</th>
<th style="background-color: #f0f0f0; border: 1px solid #ddd; padding: 8px 10px; width: 20%;">Quantity</th>
<th style="background-color: #f0f0f0; border: 1px solid #ddd; padding: 8px 10px; width: 20%;">Unit Price</th>
<th style="background-color: #f0f0f0; border: 1px solid #ddd; padding: 8px 10px; width: 20%;">Amount</th>
</tr>
<!--{PRODUCT_BLOCKS}-->
<tr style="font-size: 15px;">
<td style="border: 1px solid #ddd; padding: 8px 10px;">[PRODUCT_NAME]</td>
<td style="border: 1px solid #ddd; padding: 8px 10px;">[PRODUCT_QUANTITY]</td>
<td style="border: 1px solid #ddd; padding: 8px 10px; text-align: right;">[PRODUCT_PRICE]</td>
<td style="border: 1px solid #ddd; padding: 8px 10px; text-align: right;">[PRODUCT_TOTAL]</td>
</tr>
<!--{/PRODUCT_BLOCKS}-->
<tr>
<td style="padding: 7px 10px;"> </td>
<td style="padding: 7px 10px;"> </td>
<td style="padding: 7px 10px; text-align: right;">Paid</td>
<td style="padding: 7px 10px; text-align: right;">[AMOUNT]</td>
</tr>
<tr>
<td colspan="4"><hr /></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td style="padding: 10px; width: 50%; text-align: right;">Amount Due</td>
<td style="padding: 10px; width: 50%; text-align: right;">[DUE_AMOUNT]</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td style="padding: 0 0 20px;" colspan="2">
<table style="border-spacing: 0; border-collapse: collapse; border: 1px solid #ddd; width: 100%;">
<tbody>
<tr>
<td style="background-color: #f0f0f0; border: 1px solid #ddd; font-size: 15px; padding: 8px 10px; width: 50%; text-align: right;"><strong>Total</strong></td>
<td style="border: 1px solid #ddd; font-size: 15px; padding: 8px 10px; width: 50%; text-align: right;"><strong>[TOTAL]</strong></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="border-top: 1px solid #ddd; padding: 20px 10px 20px 0;" colspan="2"><strong>Notes:</strong>
<p style="display: inline-block; font-style: italic; padding-left: 10px;">[NOTE]</p>
</td>
</tr>
</tbody>
</table>

webcasebv

Thanks, I already have this.

My point is: when I change the invoice in Joomla, changes are not saved.

Do you mean all changes should happen in a HTML editor outside Joomla, then afterwards copy new code in Joomla?

saguaros

webcasebv

May I know which field you want to add to the invoice? Could you illustrate it via screenshot?

webcasebv

For example I would like to add the default field [EVENT_NAME]. Or the custom field [BIRTHDATE].

Point is: changes I make in the editor Joomla, even if it's just plain text, are not saved. No errors are shown. So I can't make a screenshot of anything.

Please answer my question: can I make changes in the editor in Joomla (if yes, there is a bug) OR should I change the HTML outside of Joomla and then copy/paste new code to the Invoice template?

saguaros

webcasebv

Of course, you can change with editor, with screenshot, I meant how/where you want to add field, I just tried to add a new column for event name and it saved normally: https://prnt.sc/qdfd49