@cascayd/experiment 0.3.0 → 0.3.2

package/dist/shopify-handler-browser.js

@@ -18,10 +18,16 @@
 (function() {
   'use strict';
 
+  console.log('[cascayd-shopify] 🚀 Handler script starting...');
+  console.log('[cascayd-shopify] Document readyState:', document.readyState);
+  console.log('[cascayd-shopify] Window object available:', typeof window !== 'undefined');
+
   // Cookie helper functions (matching SDK's cookie logic)
   function getCookie(name) {
     const match = document.cookie.match(new RegExp('(?:^|; )' + name.replace(/[.$?*|{}()\[\]\\\/\+^]/g, '\\$&') + '=([^;]*)'));
-    return match ? decodeURIComponent(match[1]) : null;
+    const value = match ? decodeURIComponent(match[1]) : null;
+    console.log('[cascayd-shopify] 📦 getCookie:', name, '=', value);
+    return value;
   }
 
   function setCookie(name, value) {
@@ -33,11 +39,15 @@
   }
 
   function readVariantChoice(experimentId) {
-    return getCookie(getVariantCookieKey(experimentId));
+    const choice = getCookie(getVariantCookieKey(experimentId));
+    console.log('[cascayd-shopify] 📖 Read variant choice:', { experimentId, choice });
+    return choice;
   }
 
   function persistVariantChoice(experimentId, variantId) {
-    setCookie(getVariantCookieKey(experimentId), variantId);
+    const key = getVariantCookieKey(experimentId);
+    console.log('[cascayd-shopify] 💾 Persisting variant choice:', { experimentId, variantId, cookieKey: key });
+    setCookie(key, variantId);
   }
 
   // API configuration (same as SDK)
@@ -54,16 +64,22 @@
 
   // Direct API call functions (same logic as SDK)
   async function getVariantStatus(experimentId, variantId) {
-    const res = await fetch(
-      BASE_URL + '/experiments/' + encodeURIComponent(experimentId) + '/variants/' + encodeURIComponent(variantId) + '/status'
-    );
-    const data = await res.json();
-    if (!res.ok) {
-      const err = new Error('Variant status failed: ' + res.status);
-      err.payload = data;
-      throw err;
+    const url = BASE_URL + '/experiments/' + encodeURIComponent(experimentId) + '/variants/' + encodeURIComponent(variantId) + '/status';
+    console.log('[cascayd-shopify] 🌐 Fetching variant status:', { experimentId, variantId, url });
+    try {
+      const res = await fetch(url);
+      const data = await res.json();
+      console.log('[cascayd-shopify] ✅ Variant status response:', { status: res.status, data });
+      if (!res.ok) {
+        const err = new Error('Variant status failed: ' + res.status);
+        err.payload = data;
+        throw err;
+      }
+      return data;
+    } catch (error) {
+      console.error('[cascayd-shopify] ❌ getVariantStatus error:', error);
+      throw error;
     }
-    return data;
   }
 
   function chooseByWeight(variants) {
@@ -91,26 +107,33 @@
 
   // Assign variant using same logic as SDK
   async function assignVariantDirect(experimentId) {
+    console.log('[cascayd-shopify] 🎲 assignVariantDirect called for:', experimentId);
     const baseStatus = await getVariantStatus(experimentId, 'control');
+    console.log('[cascayd-shopify] 📊 Base status received:', baseStatus);
     const weights = baseStatus.weights || {};
     const variants = Object.entries(weights).map(function(entry) {
       return { id: entry[0], weight: entry[1] };
     });
+    console.log('[cascayd-shopify] 📋 Variants from weights:', variants);
 
     const allVariants = variants.length > 0 ? variants : baseStatusToVariants(baseStatus);
+    console.log('[cascayd-shopify] 🎯 All variants for selection:', allVariants);
     let candidate = chooseByWeight(allVariants);
+    console.log('[cascayd-shopify] 🎲 Selected candidate:', candidate);
     let finalStatus = null;
 
     if (candidate) {
       try {
         finalStatus = await getVariantStatus(experimentId, candidate);
+        console.log('[cascayd-shopify] ✅ Final status for candidate:', finalStatus);
       } catch (error) {
-        console.error('[cascayd-shopify] getVariantStatus failed', { experimentId: experimentId, candidate: candidate, error: error });
+        console.error('[cascayd-shopify] ❌ getVariantStatus failed for candidate', { experimentId: experimentId, candidate: candidate, error: error });
         // Fall back to candidate
       }
     }
 
     const serving = (finalStatus && finalStatus.serving_variant_id) || candidate || 'control';
+    console.log('[cascayd-shopify] ✅ Final serving variant:', serving);
     return { variantId: serving };
   }
 
@@ -171,33 +194,53 @@
   async function waitForSDK(maxAttempts, interval) {
     maxAttempts = maxAttempts || 10;
     interval = interval || 100;
+    console.log('[cascayd-shopify] ⏳ Waiting for SDK...', { maxAttempts, interval });
     
     return new Promise(function(resolve) {
       let attempts = 0;
       const checkSDK = function() {
         attempts++;
+        console.log('[cascayd-shopify] 🔍 Checking for SDK (attempt ' + attempts + '/' + maxAttempts + ')');
+        
         // Check if SDK functions are available on window
         let assignVariantFn = null;
         let recordFn = null;
         
         if (typeof window !== 'undefined') {
-          if (window.assignVariant) assignVariantFn = window.assignVariant;
-          if (window.record) recordFn = window.record;
+          console.log('[cascayd-shopify] 🪟 Window available, checking functions...');
+          console.log('[cascayd-shopify]   - window.assignVariant:', typeof window.assignVariant);
+          console.log('[cascayd-shopify]   - window.record:', typeof window.record);
+          console.log('[cascayd-shopify]   - window.Cascayd:', typeof window.Cascayd);
+          console.log('[cascayd-shopify]   - window.initCascayd:', typeof window.initCascayd);
+          
+          if (window.assignVariant) {
+            assignVariantFn = window.assignVariant;
+            console.log('[cascayd-shopify] ✅ Found window.assignVariant');
+          }
+          if (window.record) {
+            recordFn = window.record;
+            console.log('[cascayd-shopify] ✅ Found window.record');
+          }
           // Try Cascayd namespace
           if (!assignVariantFn && window.Cascayd && window.Cascayd.assignVariant) {
             assignVariantFn = window.Cascayd.assignVariant;
+            console.log('[cascayd-shopify] ✅ Found Cascayd.assignVariant');
           }
           if (!recordFn && window.Cascayd && window.Cascayd.record) {
             recordFn = window.Cascayd.record;
+            console.log('[cascayd-shopify] ✅ Found Cascayd.record');
           }
         }
         
         if (assignVariantFn && recordFn) {
+          console.log('[cascayd-shopify] ✅ SDK functions found! Using SDK.');
           resolve({ assignVariant: assignVariantFn, record: recordFn });
         } else if (attempts >= maxAttempts) {
+          console.log('[cascayd-shopify] ⚠️ SDK not found after ' + maxAttempts + ' attempts. Using direct API calls.');
           // Use direct API calls as fallback
           resolve({ assignVariant: assignVariantDirect, record: recordDirect });
         } else {
+          console.log('[cascayd-shopify] ⏳ SDK not ready, retrying in ' + interval + 'ms...');
           setTimeout(checkSDK, interval);
         }
       };
@@ -207,8 +250,9 @@
 
   // Record impression event
   async function recordImpression(experimentId, variantId, sdk) {
+    console.log('[cascayd-shopify] 📝 Recording impression:', { experimentId, variantId, hasSDK: !!sdk, hasRecordFn: !!(sdk && sdk.record) });
     if (!sdk || !sdk.record) {
-      console.debug('[cascayd-shopify] Record function not available, skipping impression tracking');
+      console.warn('[cascayd-shopify] ⚠️ Record function not available, skipping impression tracking');
       return;
     }
 
@@ -217,25 +261,32 @@
         experimentId: experimentId,
         variantId: variantId
       });
+      console.log('[cascayd-shopify] ✅ Impression recorded successfully');
     } catch (error) {
-      console.error('[cascayd-shopify] Failed to record impression', error);
+      console.error('[cascayd-shopify] ❌ Failed to record impression:', error);
     }
   }
 
   // Process a single experiment
   async function processExperiment(experimentId, variantElements, sdk) {
+    console.log('[cascayd-shopify] 🔬 Processing experiment:', { experimentId, variantElementCount: variantElements.length, hasSDK: !!sdk });
+    
     // Check if we already have a variant choice stored
     let variantId = readVariantChoice(experimentId);
+    console.log('[cascayd-shopify] 📖 Variant choice from cookie:', variantId);
 
     // If no stored choice, assign a variant
     if (!variantId) {
+      console.log('[cascayd-shopify] 🆕 No stored variant, assigning new one...');
       if (sdk && sdk.assignVariant) {
         try {
+          console.log('[cascayd-shopify] 🎲 Calling SDK assignVariant...');
           const result = await sdk.assignVariant(experimentId);
           variantId = result.variantId;
+          console.log('[cascayd-shopify] ✅ SDK assigned variant:', variantId);
           persistVariantChoice(experimentId, variantId);
         } catch (error) {
-          console.error('[cascayd-shopify] Failed to assign variant', error);
+          console.error('[cascayd-shopify] ❌ Failed to assign variant via SDK:', error);
           // Fallback: use first available variant or control
           const variants = [];
           variantElements.forEach(function(el) {
@@ -245,51 +296,88 @@
             }
           });
           variantId = variants.indexOf('control') >= 0 ? 'control' : (variants[0] || 'control');
+          console.log('[cascayd-shopify] 🔄 Using fallback variant:', variantId, 'from available:', variants);
           persistVariantChoice(experimentId, variantId);
         }
       } else {
-        console.error('[cascayd-shopify] No assignVariant function available');
+        console.error('[cascayd-shopify] ❌ No assignVariant function available');
         // This shouldn't happen since waitForSDK always returns functions (direct API or SDK)
       }
+    } else {
+      console.log('[cascayd-shopify] ✅ Using existing variant choice:', variantId);
     }
 
     // Show the selected variant, hide all others
+    console.log('[cascayd-shopify] 👁️ Showing/hiding variants. Selected:', variantId);
     let hasRecorded = false;
-    variantElements.forEach(function(el) {
+    variantElements.forEach(function(el, index) {
       const elVariantId = el.getAttribute('data-cascayd-variant');
+      console.log('[cascayd-shopify]   Element ' + (index + 1) + ':', { variantId: elVariantId, matches: elVariantId === variantId });
+      
       if (elVariantId === variantId) {
+        console.log('[cascayd-shopify]   ✅ Showing element with variant:', elVariantId);
+        // Remove CSS hiding and mark as visible
+        el.classList.remove('cascayd-hidden');
+        el.classList.add('cascayd-visible');
+        // Detect if element should be inline or block based on original display
+        const computedStyle = window.getComputedStyle(el);
+        if (computedStyle.display === 'inline' || computedStyle.display === 'inline-block') {
+          el.classList.add('cascayd-visible-inline');
+        }
         el.style.display = '';
         el.removeAttribute('hidden');
+        console.log('[cascayd-shopify]   ✅ Element shown, classes:', el.className);
         // Record impression only once for the shown variant
         if (!hasRecorded) {
           recordImpression(experimentId, variantId, sdk);
           hasRecorded = true;
         }
       } else {
+        console.log('[cascayd-shopify]   🚫 Hiding element with variant:', elVariantId);
         el.style.display = 'none';
         el.setAttribute('hidden', 'hidden');
+        el.classList.add('cascayd-hidden');
+        el.classList.remove('cascayd-visible', 'cascayd-visible-inline');
       }
     });
+    console.log('[cascayd-shopify] ✅ Finished processing experiment:', experimentId);
   }
 
   // Main initialization function
   async function initCascaydExperiments() {
+    console.log('[cascayd-shopify] 🎯 initCascaydExperiments called');
+    console.log('[cascayd-shopify] 📄 Document readyState:', document.readyState);
+    
     // Wait for SDK to be loaded (with timeout)
+    console.log('[cascayd-shopify] ⏳ Waiting for SDK...');
     const sdk = await waitForSDK(50, 100);
+    console.log('[cascayd-shopify] ✅ SDK ready:', { hasSDK: !!sdk, hasAssignVariant: !!(sdk && sdk.assignVariant), hasRecord: !!(sdk && sdk.record) });
 
     // Find all elements with data-cascayd-experiment attribute
     const allExperimentElements = document.querySelectorAll('[data-cascayd-experiment]');
+    console.log('[cascayd-shopify] 🔍 Found experiment elements:', allExperimentElements.length);
 
     if (allExperimentElements.length === 0) {
+      console.log('[cascayd-shopify] ℹ️ No experiment elements found, exiting');
       return; // No experiments to process
     }
 
+    // Log all found elements
+    allExperimentElements.forEach(function(el, index) {
+      const expId = el.getAttribute('data-cascayd-experiment');
+      const varId = el.getAttribute('data-cascayd-variant');
+      console.log('[cascayd-shopify]   Element ' + (index + 1) + ':', { experimentId: expId, variantId: varId, tagName: el.tagName });
+    });
+
     // Group elements by experiment ID
     const experiments = new Map();
 
     allExperimentElements.forEach(function(el) {
       const experimentId = el.getAttribute('data-cascayd-experiment');
-      if (!experimentId) return;
+      if (!experimentId) {
+        console.warn('[cascayd-shopify] ⚠️ Element missing experiment ID:', el);
+        return;
+      }
 
       if (!experiments.has(experimentId)) {
         experiments.set(experimentId, []);
@@ -297,27 +385,49 @@
       experiments.get(experimentId).push(el);
     });
 
+    console.log('[cascayd-shopify] 📊 Grouped experiments:', Array.from(experiments.keys()).map(function(id) {
+      return { experimentId: id, variantCount: experiments.get(id).length };
+    }));
+
     // Process each experiment
     const promises = [];
     experiments.forEach(function(variantElements, experimentId) {
+      console.log('[cascayd-shopify] 🚀 Processing experiment:', experimentId, 'with', variantElements.length, 'variants');
       promises.push(processExperiment(experimentId, variantElements, sdk));
     });
 
+    console.log('[cascayd-shopify] ⏳ Waiting for all experiments to process...');
     await Promise.all(promises);
+    console.log('[cascayd-shopify] ✅ All experiments processed!');
   }
 
   // Initialize when DOM is ready
+  console.log('[cascayd-shopify] 🔄 Setting up initialization...');
   if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', initCascaydExperiments);
+    console.log('[cascayd-shopify] ⏳ DOM still loading, waiting for DOMContentLoaded...');
+    document.addEventListener('DOMContentLoaded', function() {
+      console.log('[cascayd-shopify] ✅ DOMContentLoaded fired!');
+      initCascaydExperiments();
+    });
   } else {
     // DOM already ready
+    console.log('[cascayd-shopify] ✅ DOM already ready, initializing immediately');
     initCascaydExperiments();
   }
 
   // Handle Shopify's dynamic content (sections loaded via AJAX)
   if (typeof window.addEventListener !== 'undefined') {
-    document.addEventListener('shopify:section:load', initCascaydExperiments);
-    document.addEventListener('shopify:section:reorder', initCascaydExperiments);
+    console.log('[cascayd-shopify] 🛒 Setting up Shopify section event listeners...');
+    document.addEventListener('shopify:section:load', function() {
+      console.log('[cascayd-shopify] 🔄 shopify:section:load event fired, re-initializing...');
+      initCascaydExperiments();
+    });
+    document.addEventListener('shopify:section:reorder', function() {
+      console.log('[cascayd-shopify] 🔄 shopify:section:reorder event fired, re-initializing...');
+      initCascaydExperiments();
+    });
   }
+  
+  console.log('[cascayd-shopify] ✅ Handler script initialization complete');
 })();
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cascayd/experiment",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "A lightweight A/B testing SDK for React applications with server-side analytics integration",
   "keywords": [
     "ab-testing",