HTML Thank-You Emails

From NeuCart Documentation
Jump to: navigation, search

HTML Thank-You Emails are emails that, if configured, a NeuCart system sends to customers after an order has been placed. Unlike the plain-text Order Confirmation Emails that are sent by default (and that are mostly formulaic), HTML Thank-You Emails allow a store owner to present more store-specific information, branding, and images that will enhance the buyer's overall experience and store appearance. In addition, by using HTML in the thank-you emails, the confirmations to customers can be clearer to read and include modern layouts.

Desktop computer clipart - Yellow theme.svg
This page discusses a configuration page from the Admin Area.
Information icon.svg
This feature or functionality was introduced in version 9.00.
Php-square.jpg
This feature or functionality requires a minimum PHP version of 5.4.
Binary-icon.png
This article discusses a
technical topic that may not be
intended for all readers.

Configuration

Notepad icon.svg
This features is inherently technical in nature, as it involves some knowledge of HTML and CSS. NeuCart can provide guidance and support for your configuration, but ultimately the way in which your emails are designed is completely up to you.

The configuration for HTML Thank-You Emails is done in Order Notification Preferences on the HTML Email Format tab. On this tab, there is a large text box for configuring the HTML markup, as well as a section for configuring the rules for displaying certain parts of the HTML markup. For example, with proper configuration, information about downloading digital products will appear only when the order actually contains a downloadable product.

HTML Markup

The text box for HTML allows for any text; the default HTML that is shipped with the product includes somewhat standard HTML sections: 

 <html>
   <head>
     <style>
     </style>
   </head>
   <body>
   </body>
 </html>

The body section contains the HTML for your emails, as well as the special replaceable text that will be displayed based on the conditions of the order. The style section includes any CSS that relates to the HTML, using the usual "id" and "class" attributes. Important notes:

  • During the order creation and the email generation with this HTML, the CSS from this section is matched to the HTML and written "inline". (The process is called "CSS inlining".) Because many (if not most) email programs do not support actual CSS Stylesheets, this transformation needs to occur so that your emails will look as you expect them to.
  • The CSS Inlining process does not allow for pseudo classes (a:hover, for example), because most email applications do not support this.

Within the "body" section of the HTML, the default configuration provided by NeuCart includes many pieces of text like ~ship_message~ or ~order_number~. These replaceable snippets will be replaced with order-specific information at the time an order is generated. (The syntax of using ~ before and after a name is not necessary but it is helpful to easily identify the replaceable text within the HTML layout.)

Rules and Replaceable Text

The HTML section does not include all HTML. Much of the text block contains "replaceable text" that will display based on order-specific information (order number, customer name) or conditions within the order (if shippable products exist, or if downloadable products exist, etc.).

The default HTML that is configured within NeuCart, for example, includes the text ~ship_message~ and a rule is configured for that text to be replaced with the text... 

 <h2>Shipping</h2>
 <div id="shipping_section">
 Physical products in this order (CDs and/or Songbooks) will be shipped in 1-2 days and you should receive them soon!
 </div>

... when there is at least one product that needs to be shipped.

Default CSS classes used by NeuCart

While the CSS styling and HTML markup is completely defined by each store, there are some replaceable items that generate their own HTML, and the classes within that replacement text should be considered for styling:

Summary Totals
This is a block of text that includes:
  • summary_totals class, the table displaying totals.
  • summary_row class, each TR within the table.
  • summary_label class, the text column showing "subtotal", "discount", etc.
  • summary_value class, the text column showing the values for "subtotal" and "discount", etc.
  • discount_total and discount_value classes, specifically for the text within the discount row. (The row for discounts appears only if there are any coupons on the order.) Typically, this is formatted to display this text as red.
Address
There are no specific classes used by addresses, but it should be noted that addresses are displayed as multiple-line text with <br> at the end of each line.
List of Products
This is a block of text that includes:
  • product_list class, the table displaying the products.
  • product_row class, each TR within the table.
  • product_price_each_one class, used for the text ($XX.00 each) in the price column, any time a product has a quantity that is greater than one.
  • per_product_thanks class, used within the name column of products for any per-product thank-you text configured for the product.
  • product_options class, used within the name column of products to display the options of the product. When multiple options are present, they are separated by <br> tags.
List of Gift Cards Sold
  • gift_cards_sold_list class, the table displaying all the gift cards sold.
  • gift_card_sold_row class, each TR within the table.
  • gc_value class, the TD within the TR, displaying the amount on the card.
  • gc_number class, the TD within the TR, displaying the card number.

Sample Generation

The Order Notification Preferences page allows samples to be generated based on different settings. On the sample output page, the HTML will display information based on the faux conditions selected. Using Chrome Developer tools or a similar tool, you should inspect various elements to see the class and make changes as necessary.

Order Email Creation

When a customer places the order, the process for creating HTML emails is as follows:

  1. NeuCart scans the HTML text and checks for the conditions configured. Using the example above:
    • If there are shippable products, ~ship_message~ will be replaced with the custom-configured block of text as configured by the user.
    • If there are not shippable products, the text ~ship_message~ will simply be removed.
  2. After all the replacements are done, the "CSS Inlining" process occurs, moving the CSS rules into the HTML itself.
  3. The email is delivered.

In addition to the HTML email being sent to the customer, the email also includes the default text-only version for the rare email client that does not accept or allow HTML-based emails.

See also

Emails and Thank You Page

Order Notification Preferences • HTML Thank-You Emails •
Order Confirmation Email • Thank-You Page

Learning series: Emails and Thank You Page
Need a question answered about the HTML Thank-You Emails article? Want to offer a suggestion or correction? Click here to discuss this page.
Retrieved from "https://neucart.com/wiki/index.php?title=HTML_Thank-You_Emails&oldid=1172"