setCartItem
In This Article:
- Description
- Code Example
- Additional Options
- Inserting the Cart Items Variable Into an Email Template
- Testing the Cart Items Integration
Description
The setCartItem function allows you to pass the product data (eg: product name, image, price, etc.) to our system. You will need to call this function for each product in your visitor's cart. After this has been integrated, it can be used to display the user's actual cart items in the abandoned cart email they receive (see "Inserting the Cart Items Variable in an Email Template" below).
Function Call
_cartstack.push(['setCartItem', { 'quantity':'', 'productID':'', 'productName':'', 'productDescription':'', 'productURL':'', 'productImageURL':'', 'productPrice':'' }]);
Code Example
This shows an example where the website visitor has two items in their shopping cart.
<script data-siteid="XXXXXX" src="https://api.cartstack.com/js/customer-tracking/XXXXXXXXXX_222b5fb1025a6f580288f22cbd29c1bc.js" type="text/javascript"></script> <script type="text/javascript"> _cartstack.push(['setCartItem', { 'quantity':'1', 'productID':'100001', 'productName':'Amazing Product', 'productDescription':'This is the description for your amazing product.', 'productURL':'http://www.website.com/amazing-product', 'productImageURL':'http://www.website.com/images/product-1.jpg', 'productPrice':'79.99' }]); _cartstack.push(['setCartItem', { 'quantity':'1', 'productID':'100002', 'productName':'Cool Product', 'productDescription':'This is the description for your cool product.', 'productURL':'http://www.website.com/cool-product', 'productImageURL':'http://www.website.com/images/product-2.jpg', 'productPrice':'79.99' }]); </script>
Additional Options
Setting product thumbnail image size (Optional)
If you don't have a thumbnail sized image URL, you can use the imageWidth or imageHeight parameter in the cart items push. In most cases, you will want to use the imageWidth parameter with a value of "180" (pixels).
'imageWidth':'180'
Here is a full example:
_cartstack.push(['setCartItem', { 'quantity':'1', 'productID':'100002', 'productName':'Cool Product', 'productDescription':'This is the description for your cool product.', 'productURL':'http://www.website.com/cool-product', 'productImageURL':'http://www.website.com/images/product-2.jpg', 'productPrice':'79.99', 'imageWidth':'180' }]);
Custom Fields (Optional)
Using customFields, you can pass us additional information about each cart item.
Example:
_cartstack.push(['setCartItem', { 'quantity':'1', 'productID':'100002', 'productName':'Cool Product', 'productDescription':'This is the description for your cool product.', 'productURL':'http://www.website.com/cool-product', 'productImageURL':'http://www.website.com/images/product-2.jpg', 'productPrice':'79.99', 'imageWidth':'180', 'customFields':{'dimensions':'12 x 12'} }]);
customFields can be any number of name value pairs for each item in the cart, if you want to pass us something we don't already have a place for.
'customFields': { 'name' : value, 'name' : value, 'name' : value, ... } <br>
Emptying the Cart (Optional)
CartStack does not automatically empty the cart. You must push the empty cart. Simply not passing the cart items will not empty the cart.
_cartstack.push(['setCartItem', {}]);
Inserting the Cart Items Variable Into an Email Template
After you have integrated the cart items feature, you can simply include the below variable within your email template. If we've designed free email templates for you, just ask us to upload your thumbnail enabled templates to your CartStack account.%%cartitems%%
This will dynamically display the items that the user had in their shopping cart in this basic layout:
How Do I Test This?
To test your cart items integration, abandon a cart on your website (make sure you've added the "%%cartitems%%" variable to your email template). Then log into your account and go to the Reports > Send Queue report. Then click on the view icon (see screenshot below). You will see the actual email that will be sent out, so you can make sure the cart items are included.