Basket Object includes the properties of the product(s) in the customer's basket. This object must be implemented on every page that contains the basket, except for the transaction page. After any action involving the basket (adding or removing a product), this object must be updated in every basket.
This guide answers the following questions:
- What are the prerequisites?
- What are the properties?
- What are the things to keep in mind?
- How can I monitor if it works correctly?
What are the prerequisites?
- The Insider tag must be implemented.
- The Insider object must be defined before the Insider tag. Otherwise, the Insider tag cannot read any information from the Insider object.
What are the properties?
The Basket object has the following properties.
| Key | Property | Type | Definition | Required |
|---|---|---|---|---|
| currency | Currency | String | Currency used for total basket price, in ISO 4217 format (e.g., USD) | Yes |
| total | Total price | Float | Total price of the transaction, including any shipping fees or taxes | Yes |
| line_items | Basket items | Array | An array containing the product item(s) in the basket | Yes |
| product | Product object | Object | Product object | Yes |
| id | Product ID | String | Unique product ID that should be the same as that on the product page | Yes |
| name | Product Name | String | Name of the product | Yes |
| taxonomy | Breadcrumb | Array | Category tree of the product | Yes |
| currency | Currency | String | Currency used for product pricing, in ISO 4217 format (e.g. USD) | Yes |
| unit_price | Product price without any discount(s) | Float | Price of the product without any discount(s) | Yes |
| unit_sale_price | Unit price | Float | Unit price of the product | Yes |
| url | Product page link | String | URL address of the product | Yes |
| stock | Stock information of the product | Number | Number of products left in stock | No |
| color | Product color | String | Color of the product (selected by the user) | No |
| size | Product size | String | Size of the product (selected by the user) | No |
| product_image_url | Product image link | String | URL address of the product image | Yes |
| quantity | Quantity | Number | Number of products | Yes |
| subtotal | Total sum | Float | Total sum of the unit sale prices of the products | Yes |
| shipping_cost | Shipping cost | Float | Shipping cost of the items in basket | No |
| custom | Custom | Object | Custom object that includes custom properties to be collected to Insider database as custom event parameters | No |
What are the things to keep in mind?
When integrating the object, the following factors should be considered.
- The page should return Basket for the type after running window.insider_object.page.type on the browser console.
- window.insider_object.basket.total should return the correct basket total.
- When a voucher is applied, the object should also be updated to display the correct value.
- window.insider_object.basket.currency should return the correct currency.
Sample Code
Below is a sample code for the Basket object.
window.insider_object = window.insider_object || {};
window.insider_object.basket = {
"currency": "USD",
"total": 277.9,
"shipping_cost": 9.9,
"line_items": [
{
"product": {
"id": "N1234",
"name": "Sleep Mask",
"taxonomy": [
"Skincare",
"Moisturizers",
"Night Creams"
],
"currency": "USD",
"unit_price": 100,
"unit_sale_price": 95.2,
"url": "https://www.mywebsite.com/en-us/sleep-mask/n1234/",
"stock": 150,
"color": "Blue",
"size": "S",
"product_image_url": "https://www.mywebsite.com/product_images/n1234.png/",
"custom": {
"season": "Winter",
"delivery_time": "In 5 days"
}
},
"quantity": 2,
"subtotal": 190.4
},
{
"product": {
"id": "M1234",
"name": "Beauty cream",
"taxonomy": [
"Skincare",
"Moisturizers",
"Day Creams"
],
"currency": "USD",
"unit_price": 90,
"unit_sale_price": 87.5,
"url": "https://www.mywebsite.com/en-us/beauty-cream/m1234/",
"stock": 112,
"color": "Clear",
"size": "S",
"product_image_url": "https://www.mywebsite.com/product_images/m1234.png/",
},
"quantity": 1,
"subtotal": 87.5
}
]
}In addition to the properties defined in the table above, you can add custom properties to any object. Such properties should be added under the custom object, as in the example above.
How can I monitor if it works correctly?
Once you deploy your integration, you can test it via the Website Integration Wizard. This wizard helps you complete your integration and test it afterwards. If you have already implemented the integration, you can use the wizard only to test it.