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:
<div id="CartDrawerA" class="cart-drawer cart-drawer-a hidden">
{% render 'cart-drawer' %}
</div>
<div id="CartDrawerB" class="cart-drawer cart-drawer-b hidden">
{% render 'cart-drawer-variant' %}
</div>
