Show the chosen date/time on the email sent to the shop's staff when receiving a new order

It's possible to show the date or time slot your customer have chosen in the "new order" email that is sent to your shop's staff when a customer makes an order. We can't automate this step within our application so this requires a little bit technical work, but all you need to do is to follow this guide.

1. In your shop's admin page, go to Notifications;
2. Next to Staff order notification, go to New order;
3. In Email body (HTML) insert the following code snippets as advised bellow.

If the date picker is placed in CART page

Note: If the date picker is placed in the product page of your shop, please scroll down. This step will only work if the calendar is in the cart page.

Insert the following code just before {% if gateway %} .

{% assign tag_names = "Method,Delivery Date,Delivery Time,Pickup Date,Pickup Time" | split: "," %}
{% for tag_name in tag_names %}
  {% if attributes[tag_name] %}
  <table class="row">
      <tr>
          <td class="customer-info__item customer-info__item--last">
              <strong>{{ tag_name }}</strong>
              <br>
              <p>{{ attributes[tag_name] }}</p>
          </td>
      </tr>
  </table><br>
  {% endif %}
{% endfor %}

Important: make sure to modify the first line to list all the possible attribute names you want to display. They need to be the exact same values that you've set in the app's Settings > Texts and Languages.

The values are defined in "Messages":

• Method tag label - Default value: Method
• Order tag date label (if applicable, check the value for both "Local delivery" and "Store pickup") - Default value: Delivery Date / Pickup Date
• Order tag time slot label (if applicable, check the value for both "Local delivery" and "Store pickup") - Default value: Delivery Time / Pickup Time

Make sure each tag labels are separated with a comma without any extra spaces. For example:

{% assign tag_names = "Method,Local Delivery Date,Time Slot,Store Pickup Date,Time Slot" | split: "," %}

If these values are not exactly the same as set in the admin the dates won't show up in the confirmation page.

Once the code has been added the date and/or time slots should then appear in the next order confirmation email like this:

For more context, please refer to this code example.

If the date picker is placed in PRODUCT page

Note: If the date picker is placed in the cart page of your shop, please scroll up.  This step will only work if the calendar is in the product page.

When the date picker is placed on the product page the chosen date and time slot is stored as a property on the order item. That means that we need to display the chosen date/time slot for each order item. For example:

To obtain this result, the following code snippets need to be placed within <td class="order-list__product-description-cell"></td> , at the end, just before </td> .

{% assign tag_names = "Method,Delivery Date,Delivery Time,Pickup Date,Pickup Time" | split: "," %}
{% for tag_name in tag_names %}
  {% if line.properties[tag_name] %}
      <p>{{ tag_name }}: {{ line.properties[tag_name] }}</p>
  {% endif %}
{% endfor %}

Important: make sure to modify the first line to list all the possible attribute names you want to display. They need to be the exact same values that you've set in the app's Settings > Texts and Languages.

The values are defined in "Messages":

• Method tag label - Default value: Method
• Order tag date label (if applicable, check the value for both "Local delivery" and "Store pickup") - Default value: Delivery Date / Pickup Date
• Order tag time slot label (if applicable, check the value for both "Local delivery" and "Store pickup") - Default value: Delivery Time / Pickup Time

Make sure each tag labels are separated with a comma without any extra spaces. For example:

{% assign tag_names = "Method,Local Delivery Date,Time Slot,Store Pickup Date,Time Slot" | split: "," %}

If these values are not exactly the same as set in the admin the dates won't show up in the confirmation page.

For more context, please refer to this code example.