Code (HTML & CSS)

Attached are the HTML and CSS files for each of the 3 languages: English, Spanish and French. CSS files are separate, to be copied in the CSS box in the notification content template.

There is some CSS left in the HTML files, which will be extracted into the separate CSS in a later version, to make the HTML cleaner. Classes or IDs will need to be added to those HTML elements that still have some CSS directly in the code.

Subject Lines

Order Received

• EN - Order {0} has been received
• ES - Se ha recibido el pedido {0}
• FR - La commande {0} a été reçue

1-Hour ETA

• EN - Your Order {0} is 1 Hour Away
• ES - Falta 1 hora para tu pedido {0}
• FR - Votre commande {0} arrive dans 1 heure

Failed Attempt

• EN - Order {0} has been put on hold
• ES - No Se Pudo Completar El Intento de Entrega ({0})
• FR - Votre commande {0} a été mise en attente

Order Delivered

• EN - Order {0} has been delivered
• ES - El pedido {0} ha sido entregado
• FR - La commande {0} a été livrée

Editor Bug

The notification editor still has a bug as of today Nov 13th 2023 which on saving encodes the HTML and breaks some of the code, not allowing you to validate changes again after it is saved. Thus, the code should be modified and saved outside of the Notification Content Template editor, and copy-pasted into the editor.

This currently applied to the templates Order Received and Failed Attempt.

Modifying the Templates

The HTML files are a combination of HTML and Linq code, which you can notice by the @ symbols. For example:

The Linq code essentially grabs and manipulates the data properties that are available in the system. For example, @Model.OrderId shows the ID of the order.

Depending on your coding abilities, you may modify the Linq code and not only the HTML, as per your needs.

We're Here to Help

Modifying or adding new email notification content templates can be tricky. Please feel free to reach out to us for help in implementation them based on your needs.