Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
VTEX IO Apps
Abandoned Cart Service
Official extension
Version: 3.1.7
Latest version: 3.1.7

Source code

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:


_10
vtex install vtex.abandoned-cart-service

Step 1 > Configure the email template in Message Center

  1. In the VTEX Admin, go to Store Settings > Email Templates > Templates, or type Templates in the search bar at the top of the page.
  2. Search for vtexcommerce-abandoned-cart.
  3. Select Enable Email Sending? and Use Default Sender.
  4. Fill in the Email Title field as desired.
  5. Fill in the Recipient (To) with {{email}}.
  6. 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,
_138
initial-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%;
_138
padding-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;
_138
max-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;
_138
line-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;
_138
line-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.

  1. 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
}

  1. Click Save.

Step 2 > Perform the SPF release

Step 3 > Follow below steps to Configure the trigger

  1. In the VTEX Admin, go to Store Settings > Storefront > Master Data.

  2. In Master Data, click Applications > Advanced Settings > Data structure.

  3. Click the Trigger tab.

  4. Click New button.

  5. Complete the following fields:

    1. Name: Enter the trigger name.
    2. Data Entity: Select the Customer entity.
    3. Status: Check the Enabled option.
  6. On the Rules tab, select An attribute value is changed.

  7. Under Field, select Last session.

  8. Click Add Filter five times to display the filter fields. Select them and complete the information as shown below:

    1. Checkout - Different from - Completed - and
    2. Checkout – Is not null – and
    3. Cart - Is not null - and
    4. Last cart - Is not null - and
    5. Receives newsletter? - Equal to - true
  9. 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.

  10. 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:

    _10
    content-type: application/json
    _10
    accept: 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
    }

    {"base64":"  ","img":{"width":1159,"height":627,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":47107,"url":"https://user-images.githubusercontent.com/67066494/184005464-d06e1cda-3b21-42ec-b020-d85d684e6b7c.png"}}
  1. Click Save.
  2. 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.

See also
VTEX App Store
VTEX IO Apps
Was this helpful?