ondc-campaign-sdk/test-output/luxury-premium.html

[](https://www.npmjs.com/package/ondc-campaign-sdk) [](LICENSE) [![Made with ❤️](https://img.shields.io/badge/Made%20with-%

    <style>
      @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
      
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      
      body {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        line-height: 1.6;
        color: #1a1a1a;
        background: #fafafa;
      }
      
      .modern-template {
        background: #ffffff;
        min-height: 100vh;
      }
      
      /* Hero Section */
      .hero-section {
        position: relative;
        height: 500px;
        overflow: hidden;
        margin-bottom: 80px;
      }
      
      .hero-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
      }
      
      .hero-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: white;
      }
      
      .hero-content h1 {
        font-size: 4rem;
        font-weight: 800;
        margin-bottom: 1.5rem;
        letter-spacing: -0.02em;
        text-shadow: 0 4px 20px rgba(0,0,0,0.3);
      }
      
      .hero-content p {
        font-size: 1.4rem;
        font-weight: 400;
        opacity: 0.95;
        max-width: 600px;
        line-height: 1.6;
        text-shadow: 0 2px 10px rgba(0,0,0,0.2);
      }
      
      /* Categories Section */
      .categories-section {
        padding: 0 60px 80px;
        max-width: 1400px;
        margin: 0 auto;
      }
      
      .section-header {
        text-align: center;
        margin-bottom: 60px;
      }
      
      .section-title {
        font-size: 3rem;
        font-weight: 700;
        color: #1a1a1a;
        margin-bottom: 16px;
        letter-spacing: -0.025em;
      }
      
      .section-subtitle {
        font-size: 1.2rem;
        color: #6b7280;
        font-weight: 400;
        max-width: 500px;
        margin: 0 auto;
      }
      
      .categories-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 24px;
        margin-bottom: 80px;
      }
      
      .modern-category-card {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 20px;
        padding: 32px;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
      }
      
      .modern-category-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
        transform: scaleX(0);
        transition: transform 0.3s ease;
      }
      
      .modern-category-card:hover::before {
        transform: scaleX(1);
      }
      
      .modern-category-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        border-color: #d1d5db;
      }
      
      .category-header {
        display: flex;
        align-items: center;
        gap: 20px;
      }
      
      .category-icon {
        font-size: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 70px;
        height: 70px;
        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
        border-radius: 16px;
        flex-shrink: 0;
      }
      
      .category-details {
        flex: 1;
      }
      
      .category-name {
        font-size: 1.5rem;
        font-weight: 600;
        color: #1a1a1a;
        margin-bottom: 4px;
        letter-spacing: -0.01em;
      }
      
      .product-count {
        font-size: 1rem;
        color: #6b7280;
        font-weight: 500;
      }
      
      .category-arrow {
        font-size: 1.5rem;
        color: #9ca3af;
        transition: all 0.3s ease;
        font-weight: 600;
      }
      
      .modern-category-card:hover .category-arrow {
        color: #374151;
        transform: translateX(4px);
      }
      
      /* Products Section */
      .products-section {
        padding: 0 60px 80px;
        background: linear-gradient(180deg, #fafafa 0%, #ffffff 100%);
        max-width: 1400px;
        margin: 0 auto;
      }
      
      .products-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 32px;
        margin-top: 60px;
      }
      
      .modern-product-card {
        background: #ffffff;
        border-radius: 24px;
        overflow: hidden;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        position: relative;
      }
      
      .modern-product-card:hover {
        transform: translateY(-12px);
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
      }
      
      .product-image-container {
        position: relative;
        height: 280px;
        overflow: hidden;
        background: #f8fafc;
      }
      
      .modern-product-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
        transition: transform 0.4s ease;
      }
      
      .modern-product-card:hover .modern-product-image {
        transform: scale(1.08);
      }
      
      .modern-discount-badge {
        position: absolute;
        top: 16px;
        right: 16px;
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
        color: white;
        padding: 8px 16px;
        border-radius: 20px;
        font-size: 0.875rem;
        font-weight: 600;
        z-index: 2;
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
      }
      
      .modern-product-info {
        padding: 28px;
      }
      
      .modern-product-brand {
        font-size: 0.875rem;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 8px;
        font-weight: 500;
      }
      
      .modern-product-name {
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 12px;
        color: #1a1a1a;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      
      .modern-product-rating {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 16px;
      }
      
      .modern-stars {
        color: #fbbf24;
        font-size: 1rem;
        letter-spacing: 1px;
      }
      
      .modern-rating-value {
        font-size: 0.875rem;
        color: #6b7280;
        font-weight: 500;
      }
      
      .modern-product-price {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 24px;
      }
      
      .modern-current-price {
        font-size: 1.75rem;
        font-weight: 700;
        color: #1a1a1a;
      }
      
      .modern-original-price {
        font-size: 1.125rem;
        color: #9ca3af;
        text-decoration: line-through;
        font-weight: 400;
      }
      
      .modern-product-btn {
        width: 100%;
        background: linear-gradient(135deg, #1a1a1a 0%, #374151 100%);
        color: white;
        border: none;
        padding: 16px 24px;
        border-radius: 12px;
        font-weight: 600;
        font-size: 1rem;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
      }
      
      .modern-product-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
        transition: left 0.5s ease;
      }
      
      .modern-product-btn:hover::before {
        left: 100%;
      }
      
      .modern-product-btn:hover {
        background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
      }
      
      /* Responsive Design */
      @media (max-width: 1200px) {
        .categories-section,
        .products-section {
          padding: 0 40px 60px;
        }
        
        .hero-content h1 {
          font-size: 3.5rem;
        }
        
        .section-title {
          font-size: 2.5rem;
        }
      }
      
      @media (max-width: 768px) {
        .categories-section,
        .products-section {
          padding: 0 20px 40px;
        }
        
        .hero-section {
          height: 350px;
          margin-bottom: 60px;
        }
        
        .hero-content h1 {
          font-size: 2.5rem;
        }
        
        .hero-content p {
          font-size: 1.125rem;
        }
        
        .section-title {
          font-size: 2rem;
        }
        
        .categories-grid {
          grid-template-columns: 1fr;
          gap: 20px;
        }
        
        .modern-category-card {
          padding: 24px;
        }
        
        .category-name {
          font-size: 1.25rem;
        }
        
        .products-grid {
          grid-template-columns: 1fr;
          gap: 24px;
        }
      }
    </style>

    <div class="modern-template">
      <!-- Hero Section -->
      <div class="hero-section">
        <img src="https://childfoundation.org/wp-content/uploads/2024/06/20230822-B2S-email-to-sponsors.jpg" alt="Campaign Banner" class="hero-image" />
        <div class="hero-overlay">
          <div class="hero-content">
            <h1>Back to School Drive</h1>
            <p>Join us in providing essential school supplies to underprivileged children. Help them start the academic year with confidence and hope</p>
          </div>
        </div>
      </div>

      
    <!-- Categories Section -->
    <div class="categories-section">
      <div class="section-header">
        <h2 class="section-title">Shop by Category</h2>
        <p class="section-subtitle">Browse through our diverse collection of categories</p>
      </div>
      <div class="categories-grid">
        
    <div class="modern-category-card" onclick="
      (function(event) {
        event.preventDefault();
        
        var campaignId = '684974687df302329d8753ea';
        var categoryName = 'Stationery';
        var affiliateId = '';
        var userId = 'undefined';
        
        fetch('https://ondc-sdk.samhita.org/api/transactions/update', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            campaign_id: campaignId,
            category_name: categoryName,
            affiliate_id: affiliateId || undefined,
            status: 'initiated',
            user_id: userId
          })
        })
        .then(function(response) {
          var categoryUrl = 'https://shop.samhita.org/products-near-me' + '?affiliate_id=' + affiliateId + '&user_id=' + userId + '&campaign_id=' + campaignId + '&category=' + encodeURIComponent(categoryName) + '&pageId=1';
          if (response.ok) {
            window.open(categoryUrl, '_blank');
          } else {
            window.open(categoryUrl, '_blank');
            console.error('Failed to track category click');
          }
        })
        .catch(function(err) {
          var categoryUrl = 'https://shop.samhita.org/products-near-me' + '?affiliate_id=' + affiliateId + '&user_id=' + userId + '&campaign_id=' + campaignId + '&category=' + encodeURIComponent(categoryName) + '&pageId=1';
          console.error('Error tracking category click:', err);
          window.open(categoryUrl, '_blank');
        });
        
        return false;
      })(event);
    ">
      <div class="category-header">
        <span class="category-icon">📝</span>
        <div class="category-details">
          <h3 class="category-name">Stationery</h3>
          <span class="product-count">25,926 items</span>
        </div>
      </div>
      <div class="category-arrow">→</div>
    </div>
  
    <div class="modern-category-card" onclick="
      (function(event) {
        event.preventDefault();
        
        var campaignId = '684974687df302329d8753ea';
        var categoryName = 'T Shirts';
        var affiliateId = '';
        var userId = 'undefined';
        
        fetch('https://ondc-sdk.samhita.org/api/transactions/update', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            campaign_id: campaignId,
            category_name: categoryName,
            affiliate_id: affiliateId || undefined,
            status: 'initiated',
            user_id: userId
          })
        })
        .then(function(response) {
          var categoryUrl = 'https://shop.samhita.org/products-near-me' + '?affiliate_id=' + affiliateId + '&user_id=' + userId + '&campaign_id=' + campaignId + '&category=' + encodeURIComponent(categoryName) + '&pageId=1';
          if (response.ok) {
            window.open(categoryUrl, '_blank');
          } else {
            window.open(categoryUrl, '_blank');
            console.error('Failed to track category click');
          }
        })
        .catch(function(err) {
          var categoryUrl = 'https://shop.samhita.org/products-near-me' + '?affiliate_id=' + affiliateId + '&user_id=' + userId + '&campaign_id=' + campaignId + '&category=' + encodeURIComponent(categoryName) + '&pageId=1';
          console.error('Error tracking category click:', err);
          window.open(categoryUrl, '_blank');
        });
        
        return false;
      })(event);
    ">
      <div class="category-header">
        <span class="category-icon">👕</span>
        <div class="category-details">
          <h3 class="category-name">T Shirts</h3>
          <span class="product-count">13,812 items</span>
        </div>
      </div>
      <div class="category-arrow">→</div>
    </div>
  
    <div class="modern-category-card" onclick="
      (function(event) {
        event.preventDefault();
        
        var campaignId = '684974687df302329d8753ea';
        var categoryName = 'Home Decor';
        var affiliateId = '';
        var userId = 'undefined';
        
        fetch('https://ondc-sdk.samhita.org/api/transactions/update', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            campaign_id: campaignId,
            category_name: categoryName,
            affiliate_id: affiliateId || undefined,
            status: 'initiated',
            user_id: userId
          })
        })
        .then(function(response) {
          var categoryUrl = 'https://shop.samhita.org/products-near-me' + '?affiliate_id=' + affiliateId + '&user_id=' + userId + '&campaign_id=' + campaignId + '&category=' + encodeURIComponent(categoryName) + '&pageId=1';
          if (response.ok) {
            window.open(categoryUrl, '_blank');
          } else {
            window.open(categoryUrl, '_blank');
            console.error('Failed to track category click');
          }
        })
        .catch(function(err) {
          var categoryUrl = 'https://shop.samhita.org/products-near-me' + '?affiliate_id=' + affiliateId + '&user_id=' + userId + '&campaign_id=' + campaignId + '&category=' + encodeURIComponent(categoryName) + '&pageId=1';
          console.error('Error tracking category click:', err);
          window.open(categoryUrl, '_blank');
        });
        
        return false;
      })(event);
    ">
      <div class="category-header">
        <span class="category-icon">🏠</span>
        <div class="category-details">
          <h3 class="category-name">Home Decor</h3>
          <span class="product-count">24,366 items</span>
        </div>
      </div>
      <div class="category-arrow">→</div>
    </div>
  
      </div>
    </div>
  

      <!-- Products Section -->
      <div class="products-section">
        <div class="section-header">
          <h2 class="section-title">Featured Products</h2>
          <p class="section-subtitle">Handpicked products that you'll absolutely love</p>
        </div>
        <div class="products-grid">
          
    <div class="modern-product-card">
      <div class="modern-discount-badge">71% OFF</div>
      <div class="product-image-container">
        <img src="https://cdnaz.plotch.io/image/upload/w_300,h_450/C/V/PLOxRkPgsR1749470634_aeded53ce707691ba0ef36fd59f79377a965a5b5f7f0a527b52ab30e37d9a838.png?product_id=1170742963&s=1&tf=vt" alt="MG246 Life is a Journey Story Cushion Cover  Cushion Cover only 12x12" class="modern-product-image" loading="lazy" onerror="this.onerror=null;this.src='https://via.placeholder.com/320x280?text=Product';" />
      </div>
      <div class="modern-product-info">
        <div class="modern-product-brand">ARNI ARTS</div>
        <h3 class="modern-product-name">MG246 Life is a Journey Story Cushion Cover  Cushion Cover only 12x12</h3>
        <div class="modern-product-rating">
            <div class="modern-stars">★★★☆☆</div>
            <span class="modern-rating-value">3.0</span>
          </div>
        <div class="modern-product-price">
          <div class="modern-current-price">₹230</div>
             <div class="modern-original-price">₹798</div>
        </div>
        <button class="modern-product-btn" onclick="
          (function(event) {
            event.preventDefault();
            
            var campaignId = '684974687df302329d8753ea';
            var productId = '1170742963';
            var affiliateId = '';
            var targetUrl = 'https://shop.samhita.org/product/mg246-life-is-a-journey-story-cushion-cover-cushion-cover-only-12x12/1170742963?affiliate_id=undefined&user_id=undefined&campaign_id=684974687df302329d8753ea';
            var userId = 'undefined';
            
            fetch('https://ondc-sdk.samhita.org/api/transactions/update', {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify({
                campaign_id: campaignId,
                product_id: productId,
                affiliate_id: affiliateId || undefined,
                status: 'initiated',
                user_id: userId
              })
            })
            .then(function(response) {
              if (response.ok) {
                window.open(targetUrl, '_blank');
              } else {
                console.error('Failed to update transaction');
                window.open(targetUrl, '_blank');
              }
            })
            .catch(function(err) {
              console.error('Error updating transaction:', err);
              window.open(targetUrl, '_blank');
            });
            
            return false;
          })(event);
        ">
          View Product
        </button>
      </div>
    </div>
  
    <div class="modern-product-card">
      <div class="modern-discount-badge">71% OFF</div>
      <div class="product-image-container">
        <img src="https://cdnaz.plotch.io/image/upload/w_300,h_450/C/V/PLOIHLJdMR1749470640_847ce311ba72985799baec54f594abbdb52d74ae874b447462a103a0ae48cd2b.png?product_id=1170742964&s=1&tf=vt" alt="MG260 My Little Star My Little Dream Baby To My Daughter Love Mom Cushion Cover 12x12" class="modern-product-image" loading="lazy" onerror="this.onerror=null;this.src='https://via.placeholder.com/320x280?text=Product';" />
      </div>
      <div class="modern-product-info">
        <div class="modern-product-brand">ARNI ARTS</div>
        <h3 class="modern-product-name">MG260 My Little Star My Little Dream Baby To My Daughter Love Mom Cushion Cover 12x12</h3>
        <div class="modern-product-rating">
            <div class="modern-stars">★★★☆☆</div>
            <span class="modern-rating-value">3.0</span>
          </div>
        <div class="modern-product-price">
          <div class="modern-current-price">₹230</div>
             <div class="modern-original-price">₹798</div>
        </div>
        <button class="modern-product-btn" onclick="
          (function(event) {
            event.preventDefault();
            
            var campaignId = '684974687df302329d8753ea';
            var productId = '1170742964';
            var affiliateId = '';
            var targetUrl = 'https://shop.samhita.org/product/mg260-my-little-star-my-little-dream-baby-to-my-daughter-love-mom-cushion-cover-12x12/1170742964?affiliate_id=undefined&user_id=undefined&campaign_id=684974687df302329d8753ea';
            var userId = 'undefined';
            
            fetch('https://ondc-sdk.samhita.org/api/transactions/update', {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify({
                campaign_id: campaignId,
                product_id: productId,
                affiliate_id: affiliateId || undefined,
                status: 'initiated',
                user_id: userId
              })
            })
            .then(function(response) {
              if (response.ok) {
                window.open(targetUrl, '_blank');
              } else {
                console.error('Failed to update transaction');
                window.open(targetUrl, '_blank');
              }
            })
            .catch(function(err) {
              console.error('Error updating transaction:', err);
              window.open(targetUrl, '_blank');
            });
            
            return false;
          })(event);
        ">
          View Product
        </button>
      </div>
    </div>
  
    <div class="modern-product-card">
      <div class="modern-discount-badge">73% OFF</div>
      <div class="product-image-container">
        <img src="https://cdnaz.plotch.io/image/upload/w_300,h_450/C/V/PLOzq2iBT61749470626_e7eb2a8835ded3b5fffdbad6f9f8e4ea4cea69cb607bc2fb29b558668246d260.png?product_id=1170742961&s=1&tf=vt" alt="MG191 Forever Linked Inspirational Love Cushion Cover Only 16 x16" class="modern-product-image" loading="lazy" onerror="this.onerror=null;this.src='https://via.placeholder.com/320x280?text=Product';" />
      </div>
      <div class="modern-product-info">
        <div class="modern-product-brand">ARNI ARTS</div>
        <h3 class="modern-product-name">MG191 Forever Linked Inspirational Love Cushion Cover Only 16 x16</h3>
        <div class="modern-product-rating">
            <div class="modern-stars">★★★☆☆</div>
            <span class="modern-rating-value">3.0</span>
          </div>
        <div class="modern-product-price">
          <div class="modern-current-price">₹273</div>
             <div class="modern-original-price">₹998</div>
        </div>
        <button class="modern-product-btn" onclick="
          (function(event) {
            event.preventDefault();
            
            var campaignId = '684974687df302329d8753ea';
            var productId = '1170742961';
            var affiliateId = '';
            var targetUrl = 'https://shop.samhita.org/product/mg191-forever-linked-inspirational-love-cushion-cover-only-16-x16/1170742961?affiliate_id=undefined&user_id=undefined&campaign_id=684974687df302329d8753ea';
            var userId = 'undefined';
            
            fetch('https://ondc-sdk.samhita.org/api/transactions/update', {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify({
                campaign_id: campaignId,
                product_id: productId,
                affiliate_id: affiliateId || undefined,
                status: 'initiated',
                user_id: userId
              })
            })
            .then(function(response) {
              if (response.ok) {
                window.open(targetUrl, '_blank');
              } else {
                console.error('Failed to update transaction');
                window.open(targetUrl, '_blank');
              }
            })
            .catch(function(err) {
              console.error('Error updating transaction:', err);
              window.open(targetUrl, '_blank');
            });
            
            return false;
          })(event);
        ">
          View Product
        </button>
      </div>
    </div>
  
    <div class="modern-product-card">
      <div class="modern-discount-badge">71% OFF</div>
      <div class="product-image-container">
        <img src="https://cdnaz.plotch.io/image/upload/w_300,h_450/C/V/PLOgeHolHU1749470614_2e29a72d2620f85101a0c9f8e5468dcc613cdb97640c3e8995cfc3e55ddcd242.png?product_id=1170742958&s=1&tf=vt" alt="MG262 Forever Loyal Caring Cushion Cover ONLY  16x16" class="modern-product-image" loading="lazy" onerror="this.onerror=null;this.src='https://via.placeholder.com/320x280?text=Product';" />
      </div>
      <div class="modern-product-info">
        <div class="modern-product-brand">ARNI ARTS</div>
        <h3 class="modern-product-name">MG262 Forever Loyal Caring Cushion Cover ONLY  16x16</h3>
        <div class="modern-product-rating">
            <div class="modern-stars">★★★☆☆</div>
            <span class="modern-rating-value">3.0</span>
          </div>
        <div class="modern-product-price">
          <div class="modern-current-price">₹230</div>
             <div class="modern-original-price">₹798</div>
        </div>
        <button class="modern-product-btn" onclick="
          (function(event) {
            event.preventDefault();
            
            var campaignId = '684974687df302329d8753ea';
            var productId = '1170742958';
            var affiliateId = '';
            var targetUrl = 'https://shop.samhita.org/product/mg262-forever-loyal-caring-cushion-cover-only-16x16/1170742958?affiliate_id=undefined&user_id=undefined&campaign_id=684974687df302329d8753ea';
            var userId = 'undefined';
            
            fetch('https://ondc-sdk.samhita.org/api/transactions/update', {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify({
                campaign_id: campaignId,
                product_id: productId,
                affiliate_id: affiliateId || undefined,
                status: 'initiated',
                user_id: userId
              })
            })
            .then(function(response) {
              if (response.ok) {
                window.open(targetUrl, '_blank');
              } else {
                console.error('Failed to update transaction');
                window.open(targetUrl, '_blank');
              }
            })
            .catch(function(err) {
              console.error('Error updating transaction:', err);
              window.open(targetUrl, '_blank');
            });
            
            return false;
          })(event);
        ">
          View Product
        </button>
      </div>
    </div>
  
    <div class="modern-product-card">
      <div class="modern-discount-badge">71% OFF</div>
      <div class="product-image-container">
        <img src="https://cdnaz.plotch.io/image/upload/w_300,h_450/C/V/PLOXZ53UEJ1749470618_821c933856e9596bf8245a09b29e3b11cba0ca23697ab98841f503108d50e086.png?product_id=1170742959&s=1&tf=vt" alt="MG238 Lives Together Couple Cushion Cover  Cushion Cover only 12x12" class="modern-product-image" loading="lazy" onerror="this.onerror=null;this.src='https://via.placeholder.com/320x280?text=Product';" />
      </div>
      <div class="modern-product-info">
        <div class="modern-product-brand">ARNI ARTS</div>
        <h3 class="modern-product-name">MG238 Lives Together Couple Cushion Cover  Cushion Cover only 12x12</h3>
        <div class="modern-product-rating">
            <div class="modern-stars">★★★☆☆</div>
            <span class="modern-rating-value">3.0</span>
          </div>
        <div class="modern-product-price">
          <div class="modern-current-price">₹230</div>
             <div class="modern-original-price">₹798</div>
        </div>
        <button class="modern-product-btn" onclick="
          (function(event) {
            event.preventDefault();
            
            var campaignId = '684974687df302329d8753ea';
            var productId = '1170742959';
            var affiliateId = '';
            var targetUrl = 'https://shop.samhita.org/product/mg238-lives-together-couple-cushion-cover-cushion-cover-only-12x12/1170742959?affiliate_id=undefined&user_id=undefined&campaign_id=684974687df302329d8753ea';
            var userId = 'undefined';
            
            fetch('https://ondc-sdk.samhita.org/api/transactions/update', {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify({
                campaign_id: campaignId,
                product_id: productId,
                affiliate_id: affiliateId || undefined,
                status: 'initiated',
                user_id: userId
              })
            })
            .then(function(response) {
              if (response.ok) {
                window.open(targetUrl, '_blank');
              } else {
                console.error('Failed to update transaction');
                window.open(targetUrl, '_blank');
              }
            })
            .catch(function(err) {
              console.error('Error updating transaction:', err);
              window.open(targetUrl, '_blank');
            });
            
            return false;
          })(event);
        ">
          View Product
        </button>
      </div>
    </div>
  
    <div class="modern-product-card">
      <div class="modern-discount-badge">71% OFF</div>
      <div class="product-image-container">
        <img src="https://cdnaz.plotch.io/image/upload/w_300,h_450/C/V/PLO5B3jFFC1749470622_f8c5338b70fcedca46ea14daecfe3be57fe2b2ecf278e0f7bbb8538ccfbedc9b.png?product_id=1170742960&s=1&tf=vt" alt="MG240 I Fell In Love Cushion Cover  Cushion Cover 16x16" class="modern-product-image" loading="lazy" onerror="this.onerror=null;this.src='https://via.placeholder.com/320x280?text=Product';" />
      </div>
      <div class="modern-product-info">
        <div class="modern-product-brand">ARNI ARTS</div>
        <h3 class="modern-product-name">MG240 I Fell In Love Cushion Cover  Cushion Cover 16x16</h3>
        <div class="modern-product-rating">
            <div class="modern-stars">★★★☆☆</div>
            <span class="modern-rating-value">3.0</span>
          </div>
        <div class="modern-product-price">
          <div class="modern-current-price">₹230</div>
             <div class="modern-original-price">₹798</div>
        </div>
        <button class="modern-product-btn" onclick="
          (function(event) {
            event.preventDefault();
            
            var campaignId = '684974687df302329d8753ea';
            var productId = '1170742960';
            var affiliateId = '';
            var targetUrl = 'https://shop.samhita.org/product/mg240-i-fell-in-love-cushion-cover-cushion-cover-16x16/1170742960?affiliate_id=undefined&user_id=undefined&campaign_id=684974687df302329d8753ea';
            var userId = 'undefined';
            
            fetch('https://ondc-sdk.samhita.org/api/transactions/update', {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify({
                campaign_id: campaignId,
                product_id: productId,
                affiliate_id: affiliateId || undefined,
                status: 'initiated',
                user_id: userId
              })
            })
            .then(function(response) {
              if (response.ok) {
                window.open(targetUrl, '_blank');
              } else {
                console.error('Failed to update transaction');
                window.open(targetUrl, '_blank');
              }
            })
            .catch(function(err) {
              console.error('Error updating transaction:', err);
              window.open(targetUrl, '_blank');
            });
            
            return false;
          })(event);
        ">
          View Product
        </button>
      </div>
    </div>
  
        </div>
      </div>
    </div>