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:
_149<!DOCTYPE html_149PUBLIC"-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">_149<html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office"_149xmlns:v="urn:schemas-microsoft-com:vml"_149style="-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;">_149_149<head>_149<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>_149<meta http-equiv="X-UA-Compatible" content="IE=edge" />_149<meta name="viewport" content="width=device-width, initial-scale=1.0"/>_149<title>{{_accountInfo.TradingName}}</title>_149<!--[if gte mso 9]>_149<xml>_149<o:OfficeDocumentSettings>_149<o:AllowPNG/>_149<o:PixelsPerInch>96</o:PixelsPerInch>_149</o:OfficeDocumentSettings>_149</xml>_149<![endif]-->_149<style>_149a[x-apple-data-detectors] {_149color: inherit !important;_149text-decoration: none!important;_149font-size:inherit!important;_149font-family:inherit!important;_149font-weight:inherit!important;_149line-height:inherit!important;_149}_149</style>_149<style>_149@media(max-width:600px){_149_149img{_149max-width:100%!important;_149height: auto!important;_149}_149}_149</style>_149<style>_149@media screen and (min-width:30em){_149_149.w-50-ns{_149width:50%!important;_149}_149_149.pr4-ns{_149padding-right:2rem!important;_149}_149_149.ph4-ns{_149padding-left:2rem!important;_149padding-right:2rem!important;_149}_149_149.mv1-ns{_149margin-top:.25rem!important;_149margin-bottom:.25rem!important;_149}_149_149.mv4-ns{_149margin-top:2rem!important;_149margin-bottom:2rem!important;_149}_149}_149</style>_149</head>_149_149<body_149style="-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;">_149<table width="100%" border="0" cellpadding="0" cellspacing="0"_149style="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;">_149<tr style="box-sizing: border-box !important;">_149<td align="left" valign="top"_149style="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;">_149<table class="mv4-ns" width="100%" align="center" border="0" cellpadding="0" cellspacing="0"_149style="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;"_149bgcolor="#fff">_149_149<tr style="box-sizing: border-box !important;">_149<td class="ph4-ns"_149style="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;"_149align="center">_149<div_149style="box-sizing: border-box; width: 8rem; margin-bottom: 1rem; margin-top: 2rem; margin-right: auto; margin-left: auto !important;">_149<a href="http://{{_accountInfo.HostName}}.com.br" style="box-sizing: border-box !important;">_149<img alt="" border="0" width="auto"_149src="http://licensemanager.vtex.com.br/api/site/pub/accounts/{{_accountInfo.Id}}/logos/show"_149style="vertical-align: top; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; max-width: 100%; border: none; max-height: 80px !important;">_149</></a>_149</div>_149<h1 style="margin: 0; font-size: 50px; line-height: 58px; box-sizing: border-box !important;">Abandoned Cart</h1>_149</td>_149</tr>_149_149<tr style="box-sizing: border-box !important;">_149<td class="ph4-ns"_149style="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;"_149align="left">_149<div style="box-sizing: border-box; clear: both; float: none; padding-top: 1rem !important;">_149_149<table width="100%" border="0" cellpadding="0" cellspacing="0"_149style="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;">_149<thead>_149</thead>_149<tbody>_149{{#each items}}_149<tr style="box-sizing: border-box !important;">_149<td_149style="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;"_149align="left" valign="top"><img alt="" src="{{image}}"_149style="vertical-align: top; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; max-width: 100% !important;" />_149</td>_149<td_149style="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;"_149align="left" valign="top">_149<div class="mv1-ns"_149style="box-sizing: border-box; line-height: 1.25; font-size: 1rem!important;">{{productName}}</div>_149<div style="box-sizing: border-box; color: #777 !important;">_149{{quantity}} un._149{{#if sellingPrice}}_149${{formatCurrency sellingPrice}}_149{{else}}_149Grátis_149{{/if}}_149</div>_149</td>_149</tr>_149{{/each}}_149</tbody>_149</table>_149</div>_149</td>_149</tr>_149_149<tr style="box-sizing: border-box!important;">_149<td class="ph4-ns"_149style="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;"_149align="left">_149<a style="color: black" href="http://www.FINALURL.com/checkout/cart/{{addToCartURL}}">Link to the cart</a>_149</td>_149</tr>_149_149</table>_149</td>_149</tr>_149</table>_149</body>_149_149</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.