I wanted to do A/B test on my Cart, so i made two variants of cart-drawer, both of them being snippets, i created a section where i can dynamically render my carts,
i have a function in custom.js, attached the code below:
everything is working, sessions are being pushed to clevertap but the actual rendering is not happening.
// Function to initialize the cart drawer monitoring
function initCartDrawerMonitoring() {
console.log(“Initializing cart drawer monitoring…”);
// Generate and retrieve the session ID
function generateSessionID() {
return ‘xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx’.replace(/[xy]/g, function (c) {
const r = (Math.random() * 16) | 0;
const v = c === ‘x’ ? r : (r & 0x3) | 0x8;
return v.toString(16);
});
}
// Retrieve or generate session ID
let sessionID = sessionStorage.getItem(‘sessionID’);
if (!sessionID) {
sessionID = generateSessionID();
sessionStorage.setItem(‘sessionID’, sessionID);
console.log(Session ID generated: ${sessionID});
} else {
console.log(Session ID retrieved: ${sessionID});
}
// Retrieve or assign cart variant
const variantKey = ‘cartDrawerVariant’;
let variant = localStorage.getItem(variantKey);
if (!variant) {
// Randomly assign ‘A’ or ‘B’ variant
variant = Math.random() < 0.5 ? ‘A’ : ‘B’;
localStorage.setItem(variantKey, variant);
console.log(Cart variant assigned: ${variant});
} else {
console.log(Cart variant retrieved: ${variant});
}
// Check if Alpine.js is available
if (typeof Alpine === ‘undefined’ || !Alpine.store) {
console.error(“Alpine.js is not initialized or available!”);
return;
}
// Get the xMiniCart store
const miniCartStore = Alpine.store(‘xMiniCart’);
if (!miniCartStore) {
console.error(“xMiniCart store not found!”);
return;
}
// Monitor the ‘open’ property
Alpine.effect(() => {
if (miniCartStore.open) {
console.log(“Cart Drawer is now visible (Alpine.js).”);
// Push CleverTap event with session ID and variant
clevertap.event.push(“Cart Drawer Displayed”, {
sessionID: sessionID,
variant: variant, // Include the cart variant
});
console.log(CleverTap event pushed with sessionID: ${sessionID} and variant: ${variant});
}
});
console.log(“Alpine.js effect attached to xMiniCart.open.”);
}
// Wait for Alpine.js to initialize, even on partial reloads
document.addEventListener(‘alpine:init’, () => {
console.log(“Alpine.js initialized.”);
initCartDrawerMonitoring();
});
// Fallback: Retry initializing the monitoring if Alpine.js is loaded late
setTimeout(() => {
if (typeof Alpine !== ‘undefined’ && Alpine.store) {
console.log(“Retrying Alpine.js initialization…”);
initCartDrawerMonitoring();
}
}, 3000);
Following attached code is for splitting the Cart loading:
READ