Create an order confirmation email

Last update: 2023-10-16
  • Created for:
  • Beginner
    User
Challenge Create an order confirmation transactional email
Persona Journey Manager
Required skills
Assets to download Order confirmation assets

The story

Luma is launching their online store and want to ensure a good customer experience. They are providing an order confirmation email once a customer has placed an order.

Your challenge

Create a journey that sends an order confirmation email when a Luma customer completes an online order.

  1. Create a journey called Luma - Order Confirmation.

  2. Use the event: LumaOnlinePurchase.

  3. Create a transactional email called Luma - Order Confirmation.

    • The subject line “Thank you for your purchase, FirstName”

    • Use the Luma - Order summary template and modify it:

      • Remove the You may also like sections

      • Add the unsubscribe link at the bottom of the email

The email should be structured as follows:

Header section

  • luma_logo.png
  • It should link to the luma website: https://luma.enablementadobe.com/content/luma/us/en.html

    		•
    Order confirmation section

    Text

    Hey {firstName},

    Your order has been placed.

    Once your package ships, we will send you an email with a tracking number so you can track your order.

    Ship to section

  • First name and last name are from the profile
  • Replace the hard-coded address in the template with the shipping address
  • The address details are contextual attributes from the event (street 1, city, postal code, state)
  • Remove Discount, Total, Arriving

    		•

    Ship to:

    {firstName} {lastName}
    {Street 1}
    {City}, {State} {postalCode}
    Order details section

  • Add this section below the Ship to section.


    Tips:

  • Use the structure component 1:2 column left for this section
  • This is contextual event information.
  • Use the helper function: Each
  • Switch to the code editor format to add the contextual data.
    		• Header

    Order: {purchaseOrderNumber}

    List of products that were ordered:

    List each product in the order with an image, the price, and the name.

    The layout of each item should look like this: order

    Add the link to the cart

    Replace the order ID in the URL with the purchase order number: https://luma.enablementadobe.com/content/luma/us/en/user/account/order-history/order-details.html?orderId=90845952-c2ea-4872-8466-5289183e4607

    TIP

    To allow you to troubleshoot your journeys, best practice is to add an alternative path to all message actions if there is a timeout or error.

    Trigger the Journey that you created in test mode and send the email to yourself:

    1. Before you switch to test mode, override the email parameters to send to the test email to your email address:
      1. Open the email details view.
      2. In the Email parameters section, click on the T symbol (enable parameter override
      3. Click into the Address field
      4. On the next screen add your email address in parentheses: “yourname@yourdomain” in the expression editor and click ok.
    2. Put the journey into test mode
    3. Trigger the event with the following parameters:
      • Set the profile identifier to: Identity value:a8f14eab3b483c2b96171b575ecd90b1
      • Event Type: commerce.purchases
      • Quantity: 1
      • Price Total: 69
      • Purchase Order Number: 90845952-c2ea-4872-8466-5289183e4607
      • SKU: LLMH09
      • City:San Jose
      • Postal Code: 95119
      • State: CA
      • Street: 245 Park Avenue

    You should receive the personalized purchase confirmation email.

    • The subject line should have the test profile’s first name: Leora

    • This is what your email body should look like:

    Email

    Journey

    Journey

    Email

    Subject line:

    Thank you for your purchase, {{ profile.person.name.firstName }}!

    Ship to section:

    This is what your code should look like:

    {{ profile.person.name.firstName }} {{ profile.person.name.lastName }}
{{context.journey.events.454181416.commerce.shipping.address.street1}}
{{context.journey.events.454181416.commerce.shipping.address.city}}, {{context.journey.events.454181416.commerce.shipping.address.state}} {{context.journey.events.454181416.commerce.shipping.address.postalCode}}

    event.45481416 is a different number for you.

    TIP: Personalize each line separately

    Order detail section:

    This is what your code should look like:

    Header:

    Order #: {{context.journey.events.1627840522.commerce.order.purchaseOrderNumber}}

    List of products:

    Use the helper function “each” to create the list of products. Display them in a table. This is what your code should look like (with your specific variables such as your event ID - instead of 454181416 and your Organization I instead of techmarketingdemos ):

    {{#each context.journey.events.454181416.productListItems as |product|}}<tr> <th class="colspan33"><div class="acr-fragment acr-component image-container" data-component-id="image" style="width:100%;text-align:center;" contenteditable="false"><!--[if mso]><table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td style="text-align: center;" ><![endif]--><img src="{{context.journey.events.454181416.productListItems.VYG__902489191a0a40e67f51f17f3ea9e2dfaf2dea3bd0bebe8b._techmarketingdemos.product.imageUrl}}" style="height:auto;width:100%;" height="233" width="233"><!--[if mso]></td></tr></table><![endif]--></div></th> <th class="colspan66"><div class="acr-fragment acr-component" data-component-id="text" contenteditable="false"><div class="text-container" contenteditable="true"><p><span style="font-weight:700;">{{context.journey.events.454181416.productListItems.VYG__902489191a0a40e67f51f17f3ea9e2dfaf2dea3bd0bebe8b._techmarketingdemos.product.name}}</span></p></div></div><div class="acr-fragment acr-component" data-component-id="text" contenteditable="false"><div class="text-container" contenteditable="true"><p>${{context.journey.events.454181416.productListItems.VYG__902489191a0a40e67f51f17f3ea9e2dfaf2dea3bd0bebe8b._techmarketingdemos.product.price}}.00</p></div></div></th></tr> {{/each}}

    View order button:

    https://luma.enablementadobe.com/content/luma/us/en/user/account/order-history/order-details.html?orderId={{context.journey.events.454181416.commerce.order.purchaseOrderNumber}}

    Price total:

    Total:${{context.journey.events.1627840522.commerce.order.priceTotal}}.00
    Previous page
    Next page

    On this page