How to insert the "Order" block in your own HTML-newsletter?

You can create a mailing in the Convead, based on templates (using a visual designer) or from scratch, using the HTML language.

In the visual designer of email mailing, the “Order” block is inserted by dragging the corresponding element from the sidebar. To insert the “Order” in the HTML newsletter you need to prescribe instructions on the Liquid - language of templates.

The use of Liquid language elements in the "Order" element in the HTML-newsletter allows you to send a fully customized trigger letter with the full composition and cost of the order.

The object of the order is available in the HTML template under the name of “order”. The following methods are available for this object:

* line_items - order goods collection;

  • display_revenue – the total amount of the order.
  • * revenue – total order amount without currency.

    * order_id - unique order number.

    The following methods are available for the product collection instance:

  • name - product name (from XML feed);
  • * url - link of the product card in the store (from the XML feed);

    * picture - link to product image (from XML feed);

    * qnt - quantity of goods in the order;

    * price - price of goods;

    * total – the total price of the goods in the order (Qty * price).

    The simplest example of displaying order lines in HTML-newsletter:

    <table>
      <tr>
        <td>Image</td>
        <td>Product</td>
        <td>Price</td>
        <td>Quantity</td>
        <td>Total</td>
      </tr> {% for line_item in order.line_items %}
      <tr>
        <td><img src="{{ line_item.picture }}" /></td>
        <td><a href="{{ line_item.url }}">{{ line_item.name }}</a></td>
        <td>{{ line_item.price }}</td>
        <td>{{ line_item.qnt }} шт.</td>
        <td>{{ line_item.total }}</td>
      </tr> {% endfor %} </table>
    <br>
    <b>Итого на сумму: {{ order.display_revenue }}</b><br>
    

    It shows how you can use all the available order attributes and the products that are present in the order.

    To customize order items, you can use any HTML and CSS constructs supported by mail clients. Please note that when layout HTML-newsletter you should be careful and adhere to a number of recommendations, because email clients are quite capricious and do not understand some of the modern standards of layout.

    For example, a customized link with a product name might look like this:

    <a href="{{line_item.url}}" style="text-decoration: none; color: #006699;">{{ line_item.name }}</a><br>
    

    Important point! In the preview mode when editing HTML emails, and when sending a test mail Convead draw order with two fictitious products and prices, but with all applied styles. This is done in order to be able to imagine what the real order will look like in the letter. When sending real trigger mailing to the client, your real goods from the XML-feed with the goods will be substituted in the letter. Styles of decoration of goods and other elements of the order will be the same as you set up in the mailing.

    To customise an order block in the style of template mailings, you can use the code below. In addition to setting the styles, a stub is used here in case if there is no picture of the product:

    	<table cellpadding="0" cellspacing="0" style="margin: 15px 0; font-size: 15px; line-height: 1.3em;" width="100%">
      <tr>
        <td colspan="5" style="padding: 0 0 10px 0;">
          <h4 style="font-size: 22px; line-height: 1.2em; font-weight: 400; margin: 0; padding: 4px 0;">Ваш заказ</h4>
        </td>
      </tr>
    {% for line_item in order.line_items %}
      <tr>
        <td colspan="5" style="border-top: 1px solid #e0e0e0;"></td>
      </tr>
      <tr>
        <td valign="middle" width="73" style="padding: 9px 14px 9px 0;">
          <a href="{{line_item.url}}">
            <br />{% assign line_item_image = line_item.picture %} {% if line_item_image == null %}
            <br />{% assign line_item_image = 'https://d2p70fm3k6a3cb.cloudfront.net/public/messages/common/product.jpg' %}
            <br />{% endif %} <img src="{{line_item_image}}" width="73"> </a>
        </td>
        <td valign="middle" style="padding: 9px 0; font-size: 16px; line-height: 1.3em;">
          <a href="{{line_item.url}}" style="text-decoration: none; color: #3e3e3e;">
            {{ line_item.name | truncate: 10, '...' }}
          </a>
        </td>
        <td valign="middle" width="140" align="right" style="padding: 9px 0; font-size: 16px; line-height: 1.3em; font-weight: bold; white-space: nowrap;">{{ line_item.price }}</td>
        <td valign="middle" width="40" align="right" style="padding: 9px 0; font-size: 16px; line-height: 1.3em; font-weight: bold; white-space: nowrap;">{{ line_item.qnt }} шт</td>
        <td valign="middle" width="40" align="right" style="padding: 9px 0; font-size: 16px; line-height: 1.3em; font-weight: bold; white-space: nowrap;">{{ line_item.total }}</td>
      </tr>
    {% endfor %}
      <tr>
        <td colspan="5" style="padding: 0 0 10px 0; border-top: 1px solid #e0e0e0;"></td>
      </tr>
      <tr>
        <td colspan="5">
          <table cellpadding="0" cellspacing="0" width="100%">
            <tr>
              <td valign="middle" style="padding: 20px 0;">
                <b>Order numberа: {{order.order_id}}</b>
              </td>
              <td valign="middle" style="padding: 20px 0; text-align: right; color: #30363c; font-size: 16px; line-height: 1.2em; text-align: right;">
                <b>Total: {{order.display_revenue}}</b>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table><br>
    

    You can use standard liquid filters when designing fields in mailings. Plus, Convead supports filter md5 (encode strings or numbers using the md5 algorithm).

    Example of using filters:

    	{% assign encoded_var = "Test" | downcase | md5 %}
    <p>
      <a href="http://example.com/?super_param={{encoded_var}}"></a>
    </p><br>
    

    Here, the Test string will first be lowercased using the downcase filter and then encoded with the md5 filter.

    Important point! Before sending a newsletter, be sure to see how it will look in the preview and send yourself a test email (buttons in the upper right part) to make sure that all the items are displayed correctly.

    Useful links:

    Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.