Easy Editing Of Invoices And Email Notifications

Hi!

We're very pleased to present this prototype, which allows you to edit invoices and email templates using the text editor in the admin panel. Which means you can easily:

  • construct your own invoice templates by inserting variables and editing tables right on the invoice

  • edit invoices of particular orders and save them without changing invoices of other orders

  • see the list of all the email notification templates that CS-Cart has

  • modify an email template in the text editor

  • create code snippets for email templates to quickly insert similar pieces of code

We plan to include this invoice and email template editor in the next major CS-Cart version. For now, you can test the editor on this demo site.

Please tell us what you think about the new invoice editor and share your ideas about how to improve it. We’ll consider all the suggestions and incorporate the best ones.

TOO LAZY TO READ FURTHER…?

Click these links to open the demo site now: building the invoice template, editing the invoice of a particular order, list of all the email notifications, editing an email notification.

How to Construct an Invoice Template

The new invoice editor allows you to construct your own invoice templates. Build an invoice template on the Design → Invoice page of the admin panel:

The invoice editor gives you plenty of rope for template construction: you can insert variables and langvars to any location on the invoice, plus add, edit, delete, and move all the tables.

To preview the modified invoice template without saving the changes, click the gear button at the top right and choose Preview.

Editing the Product Information Table

The product info table in an invoice contains the name of the purchased product, its quantity in the order, its price, and other information. Add the product info table by entering the {{product_info}} variable to any location of the invoice:

To add, edit, or remove table columns, switch to the Product info tab on the invoice editing page. On the Product info tab, click the name of the existing column to edit or click + at the top right to add a new column to the product info table:

On the column editing pop-up you can see the list of available variables. Enter the desired variable to the Template field and save:

To preview the modified invoice template, switch back to the General tab, click the gear button at the top right, and choose Preview.

Editing Invoice for a Particular Order

When you’re finished with constructing the invoice template, you can edit the text of invoices via the WYSIWYG editor right on an order details page.

To edit text in an invoice, go to Orders → View orders, click an order, click the gear button at the top right, and choose Edit invoice:

FDNJK5g.gif

When you save the changes, they only affect the current invoice—invoices of other orders are not changed.

How to Modify Email Notifications

CS-Cart sends email notifications to both customers and to administrators. Before, you couldn’t see the list of all email notifications in the admin panel. Now, on the Design → Email templates page you see the list of all email notifications and find out in what cases CS-Cart sends them. Handy!

All the email notifications are divided into two tabs—Customer notifications and Administrator notifications:

Click a notification to open the editor:

Inserting Similar Parts to Emails Using Code Snippets

Often you need some parts of all the email notifications look the same. For example, you need the same header and footer for every email. To save you time adding header and footer code in each email, we created code snippets. Manage snippets on the Code snippets tab:

Use snippets from the Code snippets tab to quickly insert the same code into every email:

--

We’ll be very happy to hear your opinions on the new invoice editor and your ideas about how to improve it. Please do consider testing the invoice editor on our demo site and tell us what you think.

Thank you!

hello,

can you recheck if in chrome-windows 10 inserting a variable into product info is possible. in my case the cursor jumps to the name field.


after addin a new row

great job by the way. this makes a cs cart complete and outstanding business system.

Wow, perfect!!!

This looks amazing.. wish I had this functionality now! I'm editing the email templates as we speak and it is incredibly cumbersome and there doesn't appear to be an easy way to preview/test the emails, understand how they are triggered, or disable ones we don't need. All of those issues seem like they are addressed with this enhancement.

Since we're on the topic, does anyone know of an addon that would help facilitate the editing process while we wait for this to be released?

hello,

can you recheck if in chrome-windows 10 inserting a variable into product info is possible. in my case the cursor jumps to the name field.


after addin a new row

Hello!

This issue is confirmed. As soon as we collect feedback, we start polishing the editor. For now, just enter variables manually.

Thanks for your report!

hello,

can you recheck if in chrome-windows 10 inserting a variable into product info is possible. in my case the cursor jumps to the name field.


after addin a new row

A major step forward for CS Cart, at most times features added are often under shadowed with the removal of others.

Alan

I never used default cs-cart invoice without modification. Maybe I am missing something but why is invoice presented with surounding gray border and not normal size in print preview?

there is a difference between downloaded .pdf file and the on above. i have also never figured out why is this presented in this way. probably minor issue

So how come nobody complains about this since 2x cs-cart?

there is a difference between downloaded .pdf file and the on above. i have also never figured out why is this presented in this way. probably minor issue

PS no mater you hit print or download pdf I get same grey huge borders.. I need just plain white paper and text with no borders or grey sides.. Same on Firefox and Chrome..

Excellent. Fully endorses.
Then the files in the folder "themes -> your theme -> mail" can be deleted.

FANTASTIC!! FINALLY!

So how come nobody complains about this since 2x cs-cart?



PS no mater you hit print or download pdf I get same grey huge borders.. I need just plain white paper and text with no borders or grey sides.. Same on Firefox and Chrome..

I'm anoying :) it seems that some people simply adjust and wait for someone else to report :) laziness is a modern :p

Dear Sir/Madam,

Is the template independent to each storefront or the whole cs-cart. For different storefront, we want to have different logo and different invoice/email layout.

Best regards,

Kelvin

Hi,

Can this be as an add-on rather than a full upgrade to version 4.3.5+ etc.

Thanks

Hi,

Can this be as an add-on rather than a full upgrade to version 4.3.5+ etc.

Thanks

I second that suggestion. I'd love to get access to this without upgrading, as we're stuck on 4.3.4 for a while (had to edit a bunch of core files)

In MV can vendors edit their invoices - or only store admins?

This is absolutely awesome!

hi,

pertect

Why is there a similar application for print packing slip
I think there should be a button to send to the printer individually or collectively