Hi!
The alpha version of CS-Cart 4.4.1 is coming in the closest time, and the production release will be available this fall. Two main changes in the new version are the new logic of theme functioning and the updated email and document template editor.
In this post, we’d like to share with you the information about the updated email and document template editor. The editor has been a prototype for a long time. Now, it will be released as a ready-to-go feature built into CS-Cart 4.4.1. Store administrators will be able to edit email notifications, plus these documents via the new editor:
- Invoices
- Packing slips
- Packing slips of the RMA add-on
- Supplier invoices of the Suppliers add-on
- Gift certificates of the Gift certificates add-on
Read general information about the editor in our old post.
<span><span style="font-size:26.6667px;font-family:Arial;color:rgb(0,0,0);font-weight:400;background-color:transparent;">Quick Introduction to the Editor</span></span>
In CS-Cart 4.4.1, store administrators will be able to edit and construct email notifications, invoices, packing slips, and gift certificates right in their admin panels using a visual text editor.
Basically, two key elements of the editor are variables and snippets:
- A variable is a dynamic component of a template. A template fetches all the necessary information through variables. For example, the {{ order.total }} variable added to the invoice template displays the total order price in the invoice. Developers will be able to expand the list of available variables via add-ons.
-
A snippet is a separate part of a template to quickly insert the same information to different invoices or email notifications. Often the footer and header of email notifications or invoices must look the same. Store admins construct a snippet in the Code snippets tab when editing an invoice or email and then add the whole snippet by simply inserting the function to the invoice or email. For example, this function {{ snippet("footer") }} fetches the footer snippet to email notifications. Developers will be able to expand the list of available snippets via add-ons.
The new template editor works on the template engine called Twig (version 1.24). Developers can take advantage of all the Twig features.
Key Insights for Developers
- Since the editor is based on WYSIWYG, you won’t be able to insert conditions, loops, or other logical constructions to invoices and email notifications—WYSIWYG cuts them off.
- Use snippets to add conditions, loops, and that kind of constructions to templates. Snippet editing window doesn’t use WYSIWYG—you’ll be able to work with snippets just like with SMARTY templates.
- There will be no hooks for documents—use snippets instead.
- You’ll be able to add new variables, snippets, and, probably, invoices via add-ons.
- Store administrators will manually insert variables and snippets to documents.
- Backward compatibility will be fine—if your add-on uses email notifications or invoices, it will still work in CS-Cart 4.4.1. Templates will be fetched same as before.
- After the upgrade to CS-Cart 4.4.1, the new template editor will be disabled. Store admins will be able to activate it on the Settings → Appearance page of their admin panels. After a clean CS-Cart 4.4.1 installation, the new editor will be active by default. Store admins will also be able to choose the old template editor on the clean installation.
We’ve prepared detailed developer docs describing the whole workflow and examples. Check them out.
For now, you can test the new editor in our developer demo stores: CS-Cart and Multi-Vendor. To edit email notifications or documents, go to Design in the admin panel and select Email templates or Documents:
Please ask any questions about new document template editor in this topic, our developers will kindly answer them.