Personalization use case: cart abandonment email personalization-use-case-helper-functions

Create an event whose schema includes the productListItems array.

Define all the fields from this array as payload fields for this event.

Learn more about the product list item data type in Adobe Experience Platform documentation.

Create a journey that starts with this event.

Add an Email activity to the journey.

In the Email activity, click Edit content, then click Email Designer.

From the left palette of the Email Designer home page, drag and drop three structure components onto the body of the message.

Drag and drop an HTML content component onto each new structure component.

On the Email Designer home page, click on the HTML component where you want to add the customer’s first name.

On the contextual toolbar, click Show the source code.

In the Edit HTML window, add the upperCase string function:

1. In the left menu, select Helper functions.

2. Use the search field to find “upper case”.

3. From the search results, add the upperCase function. To do this, click the Plus (+) sign next to {%= upperCase(string) %}: string.

   The Expression editor shows this expression:

   code language-handlebars
   {%= upperCase(string) %}

   

Remove the “string” placeholder from the expression.

Add the first name token:

1. In the left menu, select Profile attributes.

2. Select Person > Full name.

3. Add the First name token to the expression.

   The Expression editor shows this expression:

   code language-handlebars
   {%= upperCase(profile.person.name.firstName) %}

   

   Learn more about the person name data type in Adobe Experience Plaform documentation.

Click Validate, then click Save.

Save the message.

Reopen the message content.

On the Email Designer home page, click on the HTML component where you want to list the cart content.

On the contextual toolbar, click Show the source code.

In the Edit HTML window, add the each helper:

1. In the left menu, select Helper functions.

2. Use the search field to find “each”.

3. From the search results, add the each helper.

   The Expression editor shows this expression:

   code language-handlebars
   {{#each someArray as |variable|}} {{/each}}

   

Add the productListItems array to the expression:

1. Remove the “someArray” placeholder from the expression.

2. In the left menu, select Contextual attributes.

   Contextual attributes are available only after the journey context has been passed to the message.

3. Select Journey Optimizer > Events > event_name, then expand the productListItems node.

   In this example, event_name represents the name of your event.

4. Add the Product token to the expression.

   The Expression editor shows this expression:

   code language-handlebars
   {{#each context.journey.events.event_ID.productListItems.product as |variable|}} {{/each}}

   In this example, event_ID represents the ID of your event.

   

5. Modify the expression:

   1. Remove the “.product” string.
   2. Replace the “variable” placeholder with “product”.

   This example shows the modified expression:

   code language-handlebars
   {{#each context.journey.events.event_ID.productListItems as |product|}}

Paste this code between the opening {{#each}} tag and the closing {/each}} tag:

<table>
   <tbody>
      <tr>
         <td><b>#name</b></td>
         <td><b>#quantity</b></td>
         <td><b>$#priceTotal</b></td>
      </tr>
   </tbody>
</table>

Add the personalization tokens for the item name, the quantity, and the price:

1. Remove the placeholder “#name” from the HTML table.
2. From the previous search results, add the Name token to the expression.

Repeat these steps twice:

• Replace the placeholder “#quantity” with the Quantity token.
• Replace the placeholder “#priceTotal” with the Total price token.

This example shows the modified expression:

{{#each context.journey.events.event_ID.productListItems as |product|}}
   <table>
      <tbody>
         <tr>
         <td><b>{{product.name}}</b></td>
         <td><b>{{product.quantity}}</b></td>
         <td><b>${{product.priceTotal}}</b></td>
         </tr>
      </tbody>
   </table>
{{/each}}

Click Validate, then click Save.

On the Email Designer home page, click on the HTML component where you want to insert the note.

On the contextual toolbar, click Show the source code.

In the Edit HTML window, add the if helper:

1. In the left menu, select Helper functions.

2. Use the search field to find “if”.

3. From the search results, add the if helper.

   The Expression editor shows this expression:

   code language-handlebars
   {%#if condition1%} render_1 {%else if condition2%} render_2 {%else%} default_render {%/if%}

   

Remove this condition from the expression:

{%else if condition2%} render_2

This example shows the modified expression:

{%#if condition1%} render_1
   {%else%} default_render
{%/if%}

Add the product name token to the condition:

1. Remove the “condition1” placeholder from the expression.

2. In the left menu, select Contextual attributes.

3. Select Journey Orchestration > Events > event_name, then expand the productListItems node.

   In this example, event_name represents the name of your event.

4. Add the Name token to the expression.

   The Expression editor shows this expression:

   code language-handlebars
   {%#if context.journey.events.`event_ID`.productListItems.name%} render_1 {%else%} default_render {%/if%}

   

Modify the expression:

1. In the Expression editor, specify the product name after the name token.

   Use this syntax, where product_name represents the name of your product:

   code language-javascript
   = "product_name"

   In this example, the product name is “Juno Jacket”:

   code language-handlebars
   {%#if context.journey.events.`event_ID`.productListItems.name = "Juno Jacket" %} render_1 {%else%} default_render {%/if%}

2. Replace the “render_1” placeholder with the text of the note.

   Example:

   code language-handlebars
   {%#if context.journey.events.`event_ID`.productListItems.name = "Juno Jacket" %} Due to longer than usual lead times on the Juno Jacket, please expect item to ship two weeks after purchase. {%else%} default_render {%/if%}

3. Remove the “default_render” placeholder from the expression.

Click Validate, then click Save.

Save the message.

Turn on the Test toggle, then click Trigger an event.

In the Event configuration window, enter the input values, then click Send.

The test mode works only with test profiles.

The email is sent to the address of the test profile.

In this example, the email contains the note about the Juno Jacket because this product is in the cart:

Verify that there is no error, then publish the journey.