Use Workflow and Autoresponder Emails to send confirmation messages to customers, including a detailed breakdown of their Order.

Prerequisites

• You have installed eCommerce Module v0.12.0 or later. Checkout Modules Overview to find out how you can install the latest version.

• You have set up a Checkout or Quote-only Form. Learn more about Checkout here: How to Set Up a Shopping Cart and Guest Checkout or learn more about the Quote-only feature here: eCommerce - Quote Only

Introduction

You can now add details of a customer's eCommerce Order to Workflow and Autoresponder transactional emails. Give your Client and the customer peace of mind, as well as valuable records for their safekeeping.

eCommerce Orders are created by Checkout and Quote-only Forms.

Within the email, you can also access any fields that were submitted along with the original Form. Learn more here: Dynamic Content in Workflow and Autoresponder Emails

Syntax

Add the following Liquid tag to include the details of the customer's most recent Order: <div data-gb-custom-block data-tag="include" data-0='ecommerce/order_details' data-1='email' data-2='email'></div>

In an email notification, this will always be based on the Form that triggered the email. Only an Order generated by that Form submission will be visible in this context. This means that Autoresponder emails will always show Form Submission data from the correct User.

Layouts

File Structure

You can use an existing Layout, or create a new one in this File Structure: layouts/modules/module_14/order/my_layout/ Within your Layout folder, you'll need:

• An item.liquid and a wrapper.liquid file

Developing the Layout

Inside your email notification file, you'll have access to the Form object: {{form.properties}} This contains the fields submitted with the Form. Learn more here:** **Dynamic Content in Workflow and Autoresponder Emails You'll still have access to these fields throughout the Order Details Layouts.

Inside your order_details layout you'll find an item.liquid and wrapper.liquid file.

Wrapper

You can use the wrapper.liquid file to build the main HTML structure of your Layout. When you're ready to include the Order Details, use the following Liquid to include the item.liquid file:

{%- include 'modules/siteglide_ecommerce/ecommerce/get/get_order_details'
    item_layout: 'item' 
-%}

Item

The item.liquid file will have access to the This object, which will contain details about the Order:{{this}}

Orders involve several different types of models and can be complex. When developing you will need to use loops to take into account each different eCommerce element which may be a part of the Order.

When developing a custom layout, it may be helpful to refer to the default Layout.

Looping over Products This loop will find any Products in the Order and loop over them.

{%- for product in this.order_products -%}
    <!-- Output {{product}} -->
{% endfor %}

*Looping over Products and accessing Fields *Within a Product Loop, you can access the fields associated with that Product.

• {{ product.product_name }}

• {{ product.quantity }}

• {{ product.product_code }}

• {{ product.currency_symbol }}

• {{ product.price }}

Looping over Products, then looping over Attributes

{%- for product in this.order_products -%}
    <!-- Output {{product}} -->
    {% for attribute in product.order_product_attributes -%}
         <!-- Output {{attribute }} -->
    {% endfor %}
{% endfor %}

Outputting Shipping Method The following fields are available relating to the Shipping Method:

• this['Shipping Method Name']

• this['Currency Symbol']

• this['Shipping Method Price']

• `

` - a formatted Shipping Price

Example of only including Shipping Information if it was set:

{% if this['Shipping Method Name'] != blank %}
     {{this['Shipping Method Name']}}
     {{ this['Currency Symbol'] }}
     {%- include 'modules/siteglide_ecommerce/ecommerce/price_formatter'   
                 price_data: this['Shipping Method Price'] -%}
{% endif %}

Outputting Totals

• {{ this['Currency Symbol'] }}

• this['Total Price']

• `

` - A formatted total price

Help customers find regular purchases and favourite products with the reorder button.

Introduction

Help customers find regular purchases and favourite products with the reorder button. The button can be added to a user_orders Layout or any other Layout where you have access to an Order ID.

For this reorder feature to work, the User:

• Must be logged in

• Must have been logged in when they originally made the Order

The feature fetches all Products from that Order and adds those that are still available to the Cart. This gives the User a chance to review and adjust quantities before Checkout.

A message can also be displayed to the User to detail any Products from that previous Order which are no longer available. Though, this is only possible where an Order still exists in the database and has not been deleted.

Developing the Order Button

Including the Button

The following Liquid will output the reorder button:<div data-gb-custom-block data-tag="include" data-0='ecommerce/reorder_button' data-1='default' data-2='default'></div>

Parameters:

• layout

• order_id

The button can be added in any Liquid Layout, but you'll need to have access to the ID for an Order belonging to that User- which is most easily available in the User Orders Layout or the Order Details Layout (note that a User can't be logged in when reading an email, so this feature will not work from an Order Details Layout in an email).

In the User Orders Layout, the exact Liquid for the ID will depend on the variable you've set in the loop. In the following example, the variable assigned to each iteration of the loop is this. so the Order ID is available inside the loop as this.id.

{% for this in orders %}

  {% include 'ecommerce/reorder_button'
     layout: 'default'
     order_id: this.id 
  %}

{% endfor %}

The button will only work if the User is logged in, so you may wish to add the following logic to an Order Details Layout to make sure the User is logged in before displaying:

{% if context.current_user.id %}
<!-- Code only runs if User is logged in -->
{% endif %}

The Button Layout

Adding the button will load a small button layout. You can find the default Layout or create a custom Layout at the following path: layouts/modules/module_14/components/reorder_button/my_layout_name.liquid

***Adding the function ***The styling of the button is completely up to you. To carry out its main functionality, the button requires an event to be attached to it which will run a JavaScript function:

onclick="s_e_reorder({ order_id: '{{order_id}}'
                        token: '{{token}}'
                        cart_url: '/cart'
                        error_cb: error
                        success_cb: success})"

The function takes a single argument containing an options object. The available arguments are as follows:

***Adding a Custom Error Function ***The Custom Error function will be called in the following circumstances (the table also shows the value of the "error" parameter passed back when this occurs):

Parameters returned:

1. error - see above

2. reorder_unavailable_products - an object containing all Products which could not be added to the Cart from the Order. Looping over this object can allow you to display the ID and/or name of these Products. Expiry dates are also provided, where they exist, for context.

The default error behaviour is to display an "alert" containing the error message.

***Adding a Custom Success Function ***If you add a Custom Success Function, you must add a Custom Error Function.

The custom success function will run if an Order was successfully found and at least one Product was successfully added to the Cart. Not all Products related to the Order may have been available.

Parameters returned:

1. cart_url - The URL of the Cart that you passed into the function originally.

2. reorder_unavailable_products - An Object containing the Products which are no longer available and couldn't be added to the Cart.

3. reorder_added- an integer representing the number of unique products with either a different Product ID or the same Product ID but different Attributes, that were successfully added to Cart. The number ignores the actual quantity of each product added and is more useful as a measure of successfully added rows.

The default success behaviour is to re-direct the Page to the Cart URL.

You can choose whether to display a message about the unsuccessful items before that, using JavaScript or display that information via Liquid when the User arrives at the Cart.

Adding a Message to the Cart to List the Unavailable Products

Successfully added Products are automatically added to the User's Cart. When they arrive at their Cart Page- they can review the quantities and Check Out when ready.

The following Liquid tags can be used to either confirm the Order ID which has been added to the Cart, or present a detailed breakdown of the Products which were not successfully added; this is an alternative to showing this information in the Custom Success Function.

| By looping over the unavailable Products and accessing the \[0] index, you can access their key: - the Product ID. | "123" | || By looping over the unavailable Products and accessing the \[1] index, you can access their fields: - the Name- the expiry date of the Product- the expiry date of the Product (formatted) | * "Classical Summer"

• "2145916800"

• "01/11/2020" | |

  | Clear the reorder_unavailable_products data from the session This would only happen automatically if another Order is reordered, the Cart is emptied, or Checkout is completed. | | || Clear the reorder_added_to_cart data from the session.This would only happen automatically if another Order is reordered, the Cart is emptied, or Checkout is completed. | |

The above Liquid tags are accessing the User's session. This means they are temporary messages for that User. Each time an order is reordered the old message will be replaced.

Example of Cart Liquid after Partially or Fully Successful Reorder

This example will, if an Order was successfully reordered -display a message to Users confirming the Order ID which was reordered. If any Products were not available, these are displayed in a table. Finally, the session is cleared, so the User only sees this once.

{% if context.session.reorder_added_to_cart != blank %} 
  <div class="alert alert-warning">

    <h3>Previous Order #{{context.session.reorder_added_to_cart}} added to Cart</h3> 
    <p>You can review quantities and head to Checkout to complete the Order.</p>

    {% if context.session.reorder_unavailable_products != blank %} 
      <h4>Unavailable Products</h4>

      <p>Sorry, the following Products were no longer available:</p>

      <table>

        <tr>

          <th>Product ID</th>

          <th>Name</th>
 
        </tr>

        {% for this in context.session.reorder_unavailable_products %} 
          <tr>

            <td>{{this[0]}}</td>

            <td>{{this[1].name}}</td>
 
          </tr>

        {% endfor %}

      </table>

    {% endif %}

  </div>

{% endif %}

Orders Detail Layout

Within the Orders Detail Layout you will have access to the orders array variable. To display a list of items in the single order, you should add a Liquid loop like this:

{% for order in orders %}
  <!-- {{order.id}} etc. -->
{% endfor %}

Within the loop, you can use properties of the object within the loop iteration as detailed in the table: