The Abandoned Cart Service app can be used to trigger abandoned cart emails.
Installation
Open the terminal and run the following command:
_10vtex install vtex.abandoned-cart-service
Usage
Follow the Setting up Cart Abandonment (Trigger) guide, but 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}
The template field in the JSON above depends on the template
idconfigured in the Message Center.
The app installation should automatically generate a new template in the message center with the id vtexcommerce-abandoned-cart, which can be edited to create the desired template. To style the email, the following JSON can be used 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-polo-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}
Use the following template as an example:
_142<!DOCTYPE html_142PUBLIC"-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">_142<html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office"_142xmlns:v="urn:schemas-microsoft-com:vml"_142style="-webkit-text-size-adjust:100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; box-sizing: border-box; width: 100%;height:100%; margin: 0; padding: 0; background: #f1f1f1!important;">_142_142<head>_142<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>_142<meta http-equiv="X-UA-Compatible" content="IE=edge" />_142<meta name="viewport" content="width=device-width, initial-scale=1.0"/>_142<title>{{_accountInfo.TradingName}}</title>_142_142<style>_142a[x-apple-data-detectors] {_142color: inherit !important;_142text-decoration: none!important;_142font-size:inherit!important;_142font-family:inherit!important;_142font-weight:inherit!important;_142line-height:inherit!important;_142}_142</style>_142<style>_142@media(max-width:600px){_142_142img{_142max-width:100%!important;_142height: auto!important;_142}_142}_142</style>_142<style>_142@media screen and (min-width:30em){_142_142.w-50-ns{_142width:50%!important;_142}_142_142.pr4-ns{_142padding-right:2rem!important;_142}_142_142.ph4-ns{_142padding-left:2rem!important;_142padding-right:2rem!important;_142}_142_142.mv1-ns{_142margin-top:.25rem!important;_142margin-bottom:.25rem!important;_142}_142_142.mv4-ns{_142margin-top:2rem!important;_142margin-bottom:2rem!important;_142}_142}_142</style>_142</head>_142_142<body_142style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -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;">_142<table width="100%" border="0" cellpadding="0" cellspacing="0"_142style="box-sizing: border-box; margin: 0; padding: 0; background: #f1f1f1; border-collapse: collapse; border-spacing: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: -apple-system, BlinkMacSystemFont, '''Segoe UI''', Roboto, Helvetica, Arial, sans-serif; width: 100%; height: 100%; line-height: 100% !important;">_142<tr style="box-sizing: border-box !important;">_142<td align="left" valign="top"_142style="font-size: 14px; line-height: 20px; box-sizing: border-box; border-collapse: collapse; text-align: left !important; font-family: -apple-system, BlinkMacSystemFont, '''Segoe UI''', Roboto, Helvetica, Arial, sans-serif;">_142<table class="mv4-ns" width="100%" align="center" border="0" cellpadding="0" cellspacing="0"_142style="box-sizing: border-box; max-width: 40rem; width: 100%; background-color: #fff; border-collapse: collapse; border-spacing: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt !important; font-family: -apple-system, BlinkMacSystemFont, '''Segoe UI''', Roboto, Helvetica, Arial, sans-serif;"_142bgcolor="#fff">_142_142<tr style="box-sizing: border-box !important;">_142<td class="ph4-ns"_142style="font-size: 14px; line-height: 20px; box-sizing: border-box; border-collapse: collapse; border-bottom-style: solid; border-bottom-width: 1px; border-color: #eee; width: 100%; padding-bottom: 2rem; text-align: center !important; font-family: -apple-system, BlinkMacSystemFont, '''Segoe UI''', Roboto, Helvetica, Arial, sans-serif;"_142align="center">_142<div_142style="box-sizing: border-box; width: 8rem; margin-bottom: 1rem; margin-top: 2rem; margin-right: auto; margin-left: auto !important;">_142<a href="http://{{_accountInfo.HostName}}.com.br" style="box-sizing: border-box !important;">_142<img alt="" border="0" width="auto"_142src="http://licensemanager.vtex.com.br/api/site/pub/accounts/{{_accountInfo.Id}}/logos/show"_142style="vertical-align: top; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; max-width: 100%; border: none; max-height: 80px !important;">_142</></a>_142</div>_142<h1 style="margin: 0; font-size: 50px; line-height: 58px; box-sizing: border-box !important;">Abandoned Cart</h1>_142</td>_142</tr>_142_142<tr style="box-sizing: border-box !important;">_142<td class="ph4-ns"_142style="font-size: 14px; line-height: 20px; box-sizing: border-box; border-collapse: collapse; text-align: left; border-top-style: solid; border-top-width: 1px; border-color: #eee; width: 100%; padding-top: 2rem; padding-bottom: 2rem !important; font-family: -apple-system, BlinkMacSystemFont, '''Segoe UI''', Roboto, Helvetica, Arial, sans-serif;"_142align="left">_142<div style="box-sizing: border-box; clear: both; float: none; padding-top: 1rem !important;">_142_142<table width="100%" border="0" cellpadding="0" cellspacing="0"_142style="box-sizing: border-box; border-collapse: collapse; border-spacing: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt !important; font-family: -apple-system, BlinkMacSystemFont, '''Segoe UI''', Roboto, Helvetica, Arial, sans-serif;">_142<thead>_142</thead>_142<tbody>_142{{#each items}}_142<tr style="box-sizing: border-box !important;">_142<td_142style="font-size: 14px; line-height: 20px; box-sizing: border-box; border-collapse: collapse; text-align: left; width: 4rem; padding-right: .5rem; padding-top: .5rem; padding-bottom: .5rem; vertical-align: top; font-family: -apple-system, BlinkMacSystemFont, '''Segoe UI''', Roboto, Helvetica, Arial, sans-serif;"_142align="left" valign="top"><img alt="" src="{{image}}"_142style="vertical-align: top; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; max-width: 100% !important;" />_142</td>_142<td_142style="font-size: 14px; line-height: 20px; box-sizing: border-box; border-collapse: collapse; text-align: left; padding-top: .5rem; padding-bottom: .5rem; vertical-align: top !important; font-family: -apple-system, BlinkMacSystemFont, '''Segoe UI''', Roboto, Helvetica, Arial, sans-serif;"_142align="left" valign="top">_142<div class="mv1-ns"_142style="box-sizing: border-box; line-height: 1.25; font-size: 1rem!important;">{{productName}}</div>_142<div style="box-sizing: border-box; color: #777 !important;">_142{{quantity}} un._142{{#if sellingPrice}}_142${{formatCurrency sellingPrice}}_142{{else}}_142Grátis_142{{/if}}_142</div>_142</td>_142</tr>_142{{/each}}_142</tbody>_142</table>_142</div>_142</td>_142</tr>_142_142<tr style="box-sizing: border-box!important;">_142<td class="ph4-ns"_142style="font-size: 14px; line-height: 20px; box-sizing: border-box; border-collapse: collapse; text-align: left; border-top-style: solid; border-top-width: 1px; border-color:#eee; width: 100%; padding-top: 2rem; padding-bottom: 2rem !important; font-family: -apple-system, BlinkMacSystemFont, '''Segoe UI''', Roboto, Helvetica, Arial, sans-serif;"_142align="left">_142<a style={{ color: "black" }} href="http://www.FINALURL.com/checkout/cart/{{addToCartURL}}">Link to the cart</a>_142</td>_142</tr>_142_142</table>_142</td>_142</tr>_142</table>_142</body>_142_142</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.