DocumentationJourney OptimizerJourney Optimizer - Challenges

Create an order confirmation email

Last update: October 16, 2023
  • Topics:
  • Journeys

CREATED FOR:

  • Beginner
  • User
ChallengeCreate an order confirmation transactional email
PersonaJourney Manager
Required skills
  • Create email content with the message editor
  • Use contextual event information for personalization
  • Use helper functions for personalization
Assets to downloadOrder 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.

Task

  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.
Success Criteria

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

Check your work

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

recommendation-more-help
04826c94-302b-4257-9125-eb84103f67d1