DocumentationJourney OptimizerJourney Optimizer - Challenges

Create an order confirmation email

Last update: Mon Oct 16 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

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.

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:

table 0-row-2 1-row-2 2-row-2 3-row-2 html-authored no-header
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
note tip
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:

code language-javascript 
{{ 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:

code language-javascript 
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 ):

code language-javascript 
{{#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