⚠️ Maintenance ⚠️
Starting June 1st 2023, this application will no longer be maintained by VTEX.
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.