This app is no longer maintained by VTEX. This means support and maintenance are no longer provided.
The Abandoned Cart Service app triggers abandoned cart emails.
Installation
Open the terminal and run the following command:
_10vtex install vtex.abandoned-cart-service
Step 1 > Configure the email template in Message Center
- In the VTEX Admin, go to Store Settings > Email Templates > Templates, or type Templates in the search bar at the top of the page.
- Search for
vtexcommerce-abandoned-cart. - Select Enable Email Sending? and Use Default Sender.
- Fill in the Email Title field as desired.
- Fill in the Recipient (To) with {{email}}.
- In
Html, enter the created or use the following default email template information.
_138<!DOCTYPE html_138 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">_138<html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office"_138 xmlns:v="urn:schemas-microsoft-com:vml"_138 style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;_138-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; box-sizing:border-box; width:100%; height:100%; margin:0; padding:0; background:#f1f1f1 !important;">_138_138<head>_138 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />_138 <meta http-equiv="X-UA-Compatible" content="IE=edge" />_138 <meta name="viewport" content="width=device-width,_138initial-scale=1.0" />_138 <title>{{_accountInfo.TradingName}}</title>_138_138 <style>_138 a[x-apple-data-detectors] {_138 color: inherit !important;_138 text-decoration: none !important;_138 font-size: inherit !important;_138 font-family: inherit !important;_138 font-weight: inherit !important;_138 line-height: inherit !important;_138 }_138_138 @media(max-width:600px) {_138 img {_138 max-width: 100% !important;_138 height: auto !important;_138 }_138 }_138_138 @media screen and (min-width:30em) {_138 .w-50-ns {_138 width: 50% !important;_138 }_138_138 .pr4-ns {_138 padding-right: 2rem !important;_138 }_138_138 .ph4-ns {_138_138 padding-left: 2rem !important;_138 padding-right: 2rem !important;_138 }_138_138 .mv1-ns {_138 margin-top: .25rem !important;_138 margin-bottom: .25rem !important;_138 }_138_138 .mv4-ns {_138 margin-top: 2rem !important;_138 margin-bottom: 2rem !important;_138 }_138 }_138 </style>_138</head>_138_138<body_138 style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;_138-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; box-sizing:border-box; width:100%; height:100%; margin:0; padding:0; background:#f1f1f1 !important; font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;">_138 <table width="100%" border="0" cellpadding="0" cellspacing="0"_138 style="box-sizing:border-box; margin:0; padding:0; background:#f1f1f1; border-collapse:collapse; width:100%; height:100%;">_138 <tr>_138 <td align="left" valign="top" style="font-size:14px; line-height:20px; text-align:left;">_138 <table class="mv4-ns" width="100%" align="center" border="0" cellpadding="0" cellspacing="0"_138 style="max-width:40rem; width:100%; background-color:#fff; border-collapse:collapse;"_138 bgcolor="#fff">_138_138 _138 <tr>_138 <td class="ph4-ns" align="center" style="font-size:14px; line-height:20px; border-bottom:1px solid #eee; width:100%;_138padding-bottom:2rem; text-align:center;">_138 <div style="width:8rem; margin:2rem auto 1rem;">_138 <a href="http://{{_accountInfo.HostName}}.com.br">_138 <img alt="" border="0" src="http://licensemanager.vtex.com.br/api/site/pub/accounts/{{_accountInfo_138_138.Id}}/logos/show" style="max-width:100%; border:none;_138max-height:80px !important;" />_138 </a>_138 </div>_138 <h1 style="margin:0; font-size:50px; line-height:58px;">Abandoned Cart</h1>_138 </td>_138 </tr>_138_138 _138 <tr>_138 <td class="ph4-ns" align="left" style="font-size:14px;_138line-height:20px; border-top:1px solid #eee; width:100%; padding:2rem 0;">_138 <div style="padding-top:1rem;">_138 <table width="100%" border="0" cellpadding="0" cellspacing="0"_138 style="border-collapse:collapse; width:100%;">_138 <tbody>_138 {{#each items}}_138 <tr>_138 <td align="left" valign="top"_138 style="width:4rem; padding:.5rem .5rem .5rem 0; vertical-align:top;">_138 <img alt="" src="{{image}}" style={{ maxWidth: "100% !important", }} />_138 </td>_138 <td align="left" valign="top" style="padding:.5rem 0; vertical-align:top;">_138 <div class="mv1-ns"_138 style="line-height:1.25; font-size:1rem !important;">{{productName}}_138 </div>_138 <div style="color:#777;">_138 {{quantity}} un._138 {{#if sellingPrice}}_138 ${{formatCurrency sellingPrice}}_138 {{else}} Grátis_138 {{/if}}_138 </div>_138 </td>_138 </tr>_138 {{/each}}_138 </tbody>_138 </table>_138 </div>_138 </td>_138_138 </tr>_138_138 _138 <tr>_138 <td class="ph4-ns" align="left" style="font-size:14px;_138line-height:20px; border-top:1px solid #eee; width:100%; padding:2rem 0;">_138 <a href="https://{{_accountInfo.AccountName}}.myvtex.com/checkout/cart/{{addToCartURL}}"_138 style="color:black; text-decoration:none;">_138 Link to the cart_138 </a>_138 </td>_138 </tr>_138 </table>_138 </td>_138 </tr>_138 </table>_138</body>_138_138</html>
The addToCartURL variable is formatted to work with the cart URL. Its purpose is to send the user back to the checkout with the items in the abandoned cart.
- In JSON Data, enter fthe ollowing JSON as an example of JSON Data:
_49{_49 "email": "teste@vtex.com.br",_49 "items": [_49 {_49 "id": "880010",_49 "productName": "adidas Men's Performance Polo - Blast Blue S",_49 "image": "https://bibi.vteximg.com.br/arquivos/ids/155405/adidas-mens-performance-p olo-blast-blue.jpg?v=637947886549170000",_49 "sellingPrice": "455.00",_49 "quantity": "1",_49 "link": "adidas-mens-performance-polo-blast-blue",_49 "availabilityQuantity": 1000000_49 }_49 ],_49 "addToCartURL": "add?sku=880010&qty=1&seller=1&sc=1",_49 "additionalFields": {_49 "firstName": "Teste VTEX"_49 },_49 "_accountInfo": {_49 "MainAccountName": "teste",_49 "AccountName": "teste",_49 "Cnpj": null,_49 "Id": "278fe15c-f0eb-4c30-81a2-f42b29113f1a",_49 "AppId": null,_49 "IsActive": true,_49 "IsOperating": false,_49 "CreationDate": "2022-06-21T19:58:01.3387095Z",_49 "OperationDate": null,_49 "CompanyName": "Companhia Brasileira de Tecnologia para ecommerce",_49 "TradingName": "VTEX",_49 "City": null,_49 "Complement": null,_49 "Country": null,_49 "State": null,_49 "Address": null,_49 "District": null,_49 "Number": null,_49 "PostalCode": null,_49 "Licenses": [_49 7_49 ],_49 "ParentAccountId": null,_49 "ParentAccountName": null,_49 "InactivationDate": null,_49 "Platform": "vtex",_49 "Privacy": null,_49 "HasPiiRestriction": false,_49 "Infra": null_49 }_49}
- Click Save.
Step 2 > Perform the SPF release
Step 3 > Follow below steps to Configure the trigger
-
In the VTEX Admin, go to Store Settings > Storefront > Master Data.
-
In Master Data, click Applications > Advanced Settings > Data structure.
-
Click the Trigger tab.
-
Click
New button. -
Complete the following fields:
- Name: Enter the trigger name.
- Data Entity: Select the Customer entity.
- Status: Check the Enabled option.
-
On the Rules tab, select An attribute value is changed.
-
Under Field, select Last session.
-
Click
Add Filterfive times to display the filter fields. Select them and complete the information as shown below:- Checkout - Different from - Completed - and
- Checkout – Is not null – and
- Cart - Is not null - and
- Last cart - Is not null - and
- Receives newsletter? - Equal to - true
-
Click the Schedule tab and select whether the email should be sent as soon as possible, on a specific date or on a dynamic date.
-
Click the If Positive tab.
In the Action tab, select Send an HTTP Request with the following configuration:
- URL:
https://{accountName}.myvtex.com/_v/abandoned-cart. - Method: POST.
- Header:
_10content-type: application/json_10accept: application/json
- Content as JSON field:
_10{_10"email": "{!email}",_10"skuURL": "{!rclastcart}",_10"template": "vtexcommerce-abandoned-cart",_10"additionalFields": {_10// In object you can add any additional field to send in the mail_10"firstName": "{!firstName}"_10}_10}
- Click Save.
- Create a cart and close the page to test the trigger.
A page session expires in 30 minutes. Only after this time does Master Data start counting the time scheduled for the Abandoned Cart trigger. Therefore, the time until the email arrives corresponds to the session time (30 minutes) plus the time scheduled in the trigger.