Search the Documentations
CloudCart Integration
Go to shop and select custom CSS/JS
Add this code at the top of the page:
<script type="text/javascript" src="https://releva.ai/sdk/v0/js/releva-sdk-js.min.js"></script>Add this code at the bottom of the page and change your access token and page tokens with the ones given to you by your account manager::
<!-- Releva Push -->
<script>
// CONSTANTS: please change for each customer
var accessToken = ''; // TODO: add your access token
var homePageToken = ''; // TODO: add your home page token
var categoryPageToken = ''; // TODO: add your category page token
var productPageToken = ''; // TODO: add your product page token
var cartPageToken = ''; // TODO: add your cart page token
var searchPageToken = ''; // TODO: add your search page token
var shopLocale = document.getElementsByTagName('html')[0].getAttribute('lang');
var cartCurrencyString = 'лв';
// END CONSTANTS
var tempCategoryArray = [];
var customerObj = {};
var productObj = {};
window.relevaPushObject = {
page: {
locale: shopLocale
}
};
var pageType = '';
var cartProducts = [];
console.log('Releva SDK loaded');
//collect page data
for (const e of dataLayer.entries()) {
for (const obj of e) {
if (!obj.cc_page_data) {
continue
}
var pageData = obj.cc_page_data
pageType = pageData.type
if (pageType == 'category') {
for (const tempCat of pageData.breadcrumb) {
tempCategoryArray.push(tempCat.name)
}
window.relevaPushObject.page.categories = tempCategoryArray;
}
if (pageType == 'product') {
window.relevaPushObject.product = {
id: pageData.id.toString()
}
}
if (pageType == 'checkout') {
for (const product of pageData.products) {
var tempPrice = product.price;
if (product.discount_price > 0) {
tempPrice = product.discount_price;
}
cartProducts.push({
id: product.id.toString(),
price: parseFloat(tempPrice),
currency: product.currency,
quantity: parseFloat(product.quantity),
})
}
window.relevaPushObject.cart = {
products: cartProducts
}
}
}
}
//collect customer data
var originalPush = dataLayer.push
dataLayer.push = function(...args) {
// console.log(args);
for (const arg of args) {
if (arg.cc_customer_data) {
var customer = arg.cc_customer_data;
window.relevaPushObject.profile = {
firstName: customer.first_name,
lastName: customer.last_name,
email: customer.email
}
}
// we need this for popup product view push
if (arg.cc_page_data) {
pageType = 'product';
window.relevaPushObject.product = {
'id': arg.cc_page_data.id.toString()
}
pagePush();
delete window.relevaPushObject.rid;
delete window.relevaPushObject.rpid;
}
}
}
document.addEventListener('click', function(e) {
var target = e.target;
if (target.getAttribute('data-modal-class') !== 'product-details') {
target = e.target.closest('[data-modal-class="product-details"]');
}
if (target && window.relevaPushObject) {
var searchParams = new URL(target.href).searchParams;
window.relevaPushObject.rid = searchParams.get('rlv_rid');
window.relevaPushObject.rpid = searchParams.get('rlv_rpid');
}
});
//page push
var pagePush = function() {
if (pageType == 'category') {
window.relevaPushObject.page.token = categoryPageToken;
window.relevaPushObject.page.categories = [tempCategoryArray.join('/')];
}
if (pageType == 'home') {
window.relevaPushObject.page.token = homePageToken;
}
if (pageType == 'search') {
window.relevaPushObject.page.token = searchPageToken;
}
if (pageType == 'product') {
window.relevaPushObject.page.token = productPageToken;
$('.add-to-cart-form-js').on('submit', function() {
var cartEl = document.getElementsByClassName('_cart-compact-products-list')
var cartItems = cartEl[0].getElementsByTagName('li');
var products = [];
for (var i = 0; i < cartItems.length; i++) {
var itemPrice = cartItems[i].getElementsByClassName('_cart-compact-products-list-item-price')[0].innerHTML.split('x')[1].split(cartCurrencyString)[0].replace(/\s/g, '')
var itemId = cartItems[i].getElementsByClassName('product-cart-product-image')[0].getAttribute('src').split('images/')[1].split('/')[0];
var itemQuantity = cartItems[i].getElementsByClassName('_cart-compact-products-list-item-price')[0].innerHTML.split('x')[0].replace(/\s/g, '');
products.push({
id: itemId.toString(),
price: parseFloat(itemPrice),
quantity: parseFloat(itemQuantity),
})
}
if (products.length > 0) {
window.relevaPushObject.cart = {
products: products
}
}
//push for add to cart
Releva.push(accessToken, window.relevaPushObject);
})
}
if (pageType == 'checkout') {
window.relevaPushObject.page.token = cartPageToken;
if (Object.keys(customerObj).length === 0) {
$('.cc-form-shipping-type').on("submit", function() {
var queryString = $('.cc-form-shipping-type').serializeArray();
$.each(queryString, function(index, fieldValuePair) {
if (fieldValuePair.name == 'email') {
customerObj['email'] = fieldValuePair.value;
}
if (fieldValuePair.name == 'checkout[shipping][address][first_name]') {
customerObj['firstName'] = fieldValuePair.value;
}
if (fieldValuePair.name == 'checkout[shipping][address][last_name]') {
customerObj['lastName'] = fieldValuePair.value;
}
});
window.relevaPushObject.profile = {
customerObj
}
//push for cart guest checkout
Releva.push(accessToken, window.relevaPushObject);
});
}
}
Releva.push(accessToken, window.relevaPushObject);
}
window.addEventListener('load', function () {
pagePush();
})
</script>
<!-- /Releva Push -->