Abandoned Cart Service
The Abandoned Cart Service app can be used to trigger abandoned cart emails.
Usage
To use it in your account, run the vtex install vtex.abandoned-cart-service command.
You should follow the documentation to Setting up Cart Abandonment (Trigger) but in the Action tab you should select Send an HTTP Request with the follow configuration:
- The URL field is https://{{account}}.myvtex.com/_v/abandoned-cart.
- Method field is POST.
- Header fields:
_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}
Like the example bellow:
The template field in the JSON above depends on the template id configured in the message center
The app installation should automatically generate a new template in the message center with the id vtexcommerce-abandoned-cart and this 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}
You can use the following template as an example:
_140<!DOCTYPE html_140PUBLIC"-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">_140<html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office"_140xmlns:v="urn:schemas-microsoft-com:vml"_140style="-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;">_140_140<head>_140<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>_140<meta http-equiv="X-UA-Compatible" content="IE=edge" />_140<meta name="viewport" content="width=device-width, initial-scale=1.0"/>_140<title>{{_accountInfo.TradingName}}</title>_140_140<style>_140a[x-apple-data-detectors] {_140color: inherit !important;_140text-decoration: none!important;_140font-size:inherit!important;_140font-family:inherit!important;_140font-weight:inherit!important;_140line-height:inherit!important;_140}_140</style>_140<style>_140@media(max-width:600px){_140_140img{_140max-width:100%!important;_140height: auto!important;_140}_140}_140</style>_140<style>_140@media screen and (min-width:30em){_140_140.w-50-ns{_140width:50%!important;_140}_140_140.pr4-ns{_140padding-right:2rem!important;_140}_140_140.ph4-ns{_140padding-left:2rem!important;_140padding-right:2rem!important;_140}_140_140.mv1-ns{_140margin-top:.25rem!important;_140margin-bottom:.25rem!important;_140}_140_140.mv4-ns{_140margin-top:2rem!important;_140margin-bottom:2rem!important;_140}_140}_140</style>_140</head>_140_140<body_140style="-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;">_140<table width="100%" border="0" cellpadding="0" cellspacing="0"_140style="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;">_140<tr style="box-sizing: border-box !important;">_140<td align="left" valign="top"_140style="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;">_140<table class="mv4-ns" width="100%" align="center" border="0" cellpadding="0" cellspacing="0"_140style="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;"_140bgcolor="#fff">_140_140<tr style="box-sizing: border-box !important;">_140<td class="ph4-ns"_140style="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;"_140align="center">_140<div_140style="box-sizing: border-box; width: 8rem; margin-bottom: 1rem; margin-top: 2rem; margin-right: auto; margin-left: auto !important;">_140<a href="http://{{_accountInfo.HostName}}.com.br" style="box-sizing: border-box !important;">_140<img alt="" border="0" width="auto" src="http://licensemanager.vtex.com.br/api/site/pub/accounts/{{_accountInfo.Id}}/logos/show" style={{ verticalAlign: "top", outline: "none", textDecoration: "none", MsInterpolationMode: "bicubic", maxWidth: "100%", border: "none", maxHeight: "80px !important", }}/>_140</></a>_140</div>_140<h1 style="margin: 0; font-size: 50px; line-height: 58px; box-sizing: border-box !important;">Abandoned Cart</h1>_140</td>_140</tr>_140_140<tr style="box-sizing: border-box !important;">_140<td class="ph4-ns"_140style="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;"_140align="left">_140<div style="box-sizing: border-box; clear: both; float: none; padding-top: 1rem !important;">_140_140<table width="100%" border="0" cellpadding="0" cellspacing="0"_140style="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;">_140<thead>_140</thead>_140<tbody>_140{{#each items}}_140<tr style="box-sizing: border-box !important;">_140<td_140style="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;"_140align="left" valign="top"><img alt="" src="{{image}}"_140style="vertical-align: top; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; max-width: 100% !important;" />_140</td>_140<td_140style="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;"_140align="left" valign="top">_140<div class="mv1-ns"_140style="box-sizing: border-box; line-height: 1.25; font-size: 1rem!important;">{{productName}}</div>_140<div style="box-sizing: border-box; color: #777 !important;">_140{{quantity}} un._140{{#if sellingPrice}}_140${{formatCurrency sellingPrice}}_140{{else}}_140Grátis_140{{/if}}_140</div>_140</td>_140</tr>_140{{/each}}_140</tbody>_140</table>_140</div>_140</td>_140</tr>_140_140<tr style="box-sizing: border-box!important;">_140<td class="ph4-ns"_140style="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;"_140align="left">_140<a style={{ color: "black" }} href="http://www.FINALURL.com/checkout/cart/{{addToCartURL}}">Link to the cart</a>_140</td>_140</tr>_140_140</table>_140</td>_140</tr>_140</table>_140</body>_140_140</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.