Skip to content
Campaign Cart JS SDK

Your First Product Page

Let’s build a complete product page from scratch in just 10 minutes. You’ll learn the core concepts of Campaign Cart while creating a fully functional e-commerce page.

Before We Start

Section titled “Before We Start”

Make sure you have:

  • ✅ Campaign Cart SDK installed (Installation Guide)
  • ✅ Your API key from the dashboard
  • ✅ A basic HTML page to work with

Step-by-Step Tutorial

Section titled “Step-by-Step Tutorial”

  1. Set Up the Basic Structure

    Start with a clean HTML page and add the Campaign Cart configuration:

    Basic HTML Structure
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Premium Course - Learn Web Development</title>
    

      <!-- Campaign Cart Setup -->
      <meta name="next-api-key" content="your-api-key-here">
      <meta name="next-page-type" content="product">
      <meta name="next-debug" content="true">
    

      <!-- Campaign Cart SDK -->
      <script src="https://cdn.jsdelivr.net/gh/NextCommerceCo/[email protected]/dist/loader.js" type="module"></script>
    </head>
    <body>
      <!-- We'll add content here -->
    </body>
    </html>

  2. Add Product Information

    Create the main product section with dynamic content display:

    Product Information Section
    <div class="product-container">
      <div class="product-info">
        <!-- Product title (will be populated from campaign data) -->
        <h1 data-next-display="package.name">Premium Web Development Course</h1>
    

        <!-- Product description -->
        <p data-next-display="package.description">
          Master modern web development with our comprehensive course.
        </p>
    

        <!-- Features list -->
        <ul class="features">
          <li>✅ 40+ hours of video content</li>
          <li>✅ Hands-on projects</li>
          <li>✅ Certificate of completion</li>
          <li>✅ Lifetime access</li>
        </ul>
      </div>
    </div>

  3. Create Pricing Options

    Add a pricing selector that lets customers choose between different plans:

    Pricing Options
    <div class="pricing-section">
      <h2>Choose Your Plan</h2>
    

      <!-- Product selector with multiple options -->
      <div data-next-cart-selector
           data-next-selection-mode="swap"
           class="pricing-grid">
    

        <!-- Basic Plan -->
        <div data-next-selector-card
             data-next-package-id="basic-course"
             class="pricing-card">
          <h3>Basic Course</h3>
          <div class="price">
            <span data-next-display="package.price">$99</span>
          </div>
          <ul>
            <li>Core curriculum</li>
            <li>Basic support</li>
            <li>3 months access</li>
          </ul>
        </div>
    

        <!-- Premium Plan (Most Popular) -->
        <div data-next-selector-card
             data-next-package-id="premium-course"
             class="pricing-card popular">
          <div class="badge">Most Popular</div>
          <h3>Premium Course</h3>
          <div class="price">
            <span data-next-display="package.price">$199</span>
          </div>
          <ul>
            <li>Complete curriculum</li>
            <li>Priority support</li>
            <li>Lifetime access</li>
            <li>1-on-1 mentoring</li>
          </ul>
        </div>
    

        <!-- Enterprise Plan -->
        <div data-next-selector-card
             data-next-package-id="enterprise-course"
             class="pricing-card">
          <h3>Enterprise</h3>
          <div class="price">
            <span data-next-display="package.price">$399</span>
          </div>
          <ul>
            <li>Everything in Premium</li>
            <li>Team access (5 seats)</li>
            <li>Custom branding</li>
            <li>Dedicated support</li>
          </ul>
        </div>
      </div>
    </div>

  4. Add Quantity Controls

    Let customers select how many licenses they want:

    Quantity Controls
    <div class="quantity-section">
      <h3>Quantity</h3>
    

      <!-- Quantity controls for the selected package -->
      <div data-next-quantity-controls
           data-next-package-id="selected"
           class="quantity-controls">
        <button data-next-quantity-decrease class="qty-btn">-</button>
        <input data-next-quantity-input
               type="number"
               value="1"
               min="1"
               max="10"
               class="qty-input">
        <button data-next-quantity-increase class="qty-btn">+</button>
      </div>
    

      <p class="quantity-note">
        Perfect for teams! Get <strong>20% off</strong> when you buy 3 or more licenses.
      </p>
    </div>

  5. Create Add to Cart Section

    Add the main call-to-action with dynamic pricing:

    Add to Cart Section
    <div class="add-to-cart-section">
      <!-- Dynamic total display -->
      <div class="price-summary">
        <div class="line-item">
          <span>Subtotal:</span>
          <span data-next-display="selection.subtotal">$199.00</span>
        </div>
        <div class="line-item discount" data-next-show="selection.hasDiscount">
          <span>Discount:</span>
          <span data-next-display="selection.discount">-$0.00</span>
        </div>
        <div class="line-item total">
          <span>Total:</span>
          <span data-next-display="selection.total">$199.00</span>
        </div>
      </div>
    

      <!-- Add to cart button -->
      <button data-next-action="add-to-cart"
              data-next-package-id="selected"
              data-next-quantity="1"
              class="add-to-cart-btn">
        Add to Cart - <span data-next-display="selection.total">$199.00</span>
      </button>
    

      <!-- Trust signals -->
      <div class="trust-signals">
        <p>🔒 Secure checkout • 💳 30-day money-back guarantee</p>
      </div>
    </div>

  6. Add Shopping Cart Display

    Show the current cart contents and allow checkout:

    Cart Display
    <div class="cart-sidebar">
      <h3>Your Cart</h3>
    

      <!-- Show when cart is empty -->
      <div data-next-show="cart.isEmpty" class="empty-cart">
        <p>Your cart is empty</p>
        <p>Select a course above to get started!</p>
      </div>
    

      <!-- Show when cart has items -->
      <div data-next-show="cart.hasItems" class="cart-contents">
        <!-- Cart summary -->
        <div class="cart-summary">
          <div class="cart-line">
            <span>Items:</span>
            <span data-next-display="cart.itemCount">0</span>
          </div>
          <div class="cart-line">
            <span>Subtotal:</span>
            <span data-next-display="cart.subtotal">$0.00</span>
          </div>
          <div class="cart-line total">
            <span>Total:</span>
            <span data-next-display="cart.total">$0.00</span>
          </div>
        </div>
    

        <!-- Checkout button -->
        <button onclick="proceedToCheckout()" class="checkout-btn">
          Proceed to Checkout
        </button>
    

        <!-- Clear cart option -->
        <button data-next-action="clear-cart" class="clear-cart-btn">
          Clear Cart
        </button>
      </div>
    </div>

  7. Add CSS Styling

    Make it look professional with some CSS:

    Styling
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      line-height: 1.6;
      margin: 0;
      padding: 20px;
      background: #f8fafc;
    }
    

    .product-container {
      max-width: 1200px;
      margin: 0 auto;
      background: white;
      border-radius: 12px;
      padding: 40px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    }
    

    .pricing-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 20px;
      margin: 30px 0;
    }
    

    .pricing-card {
      border: 2px solid #e2e8f0;
      border-radius: 8px;
      padding: 30px 20px;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s ease;
      position: relative;
    }
    

    .pricing-card:hover {
      border-color: #3b82f6;
      transform: translateY(-2px);
    }
    

    .pricing-card.selected {
      border-color: #3b82f6;
      background: #eff6ff;
    }
    

    .pricing-card.popular {
      border-color: #10b981;
    }
    

    .pricing-card.popular .badge {
      background: #10b981;
      color: white;
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 12px;
      position: absolute;
      top: -10px;
      left: 50%;
      transform: translateX(-50%);
    }
    

    .price {
      font-size: 2.5em;
      font-weight: bold;
      color: #1e293b;
      margin: 20px 0;
    }
    

    .quantity-controls {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 20px 0;
    }
    

    .qty-btn {
      width: 40px;
      height: 40px;
      border: 1px solid #d1d5db;
      background: white;
      border-radius: 6px;
      cursor: pointer;
      font-size: 18px;
      font-weight: bold;
    }
    

    .qty-input {
      width: 80px;
      height: 40px;
      text-align: center;
      border: 1px solid #d1d5db;
      border-radius: 6px;
      font-size: 16px;
    }
    

    .add-to-cart-btn {
      width: 100%;
      background: #3b82f6;
      color: white;
      border: none;
      padding: 16px 24px;
      border-radius: 8px;
      font-size: 18px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s ease;
    }
    

    .add-to-cart-btn:hover {
      background: #2563eb;
    }
    

    .checkout-btn {
      width: 100%;
      background: #10b981;
      color: white;
      border: none;
      padding: 12px 20px;
      border-radius: 6px;
      font-weight: 600;
      cursor: pointer;
      margin-top: 10px;
    }
    

    .cart-sidebar {
      position: fixed;
      top: 20px;
      right: 20px;
      width: 300px;
      background: white;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    

    .total {
      font-weight: bold;
      font-size: 1.1em;
      border-top: 1px solid #e2e8f0;
      padding-top: 10px;
      margin-top: 10px;
    }
    

    @media (max-width: 768px) {
      .cart-sidebar {
        position: relative;
        width: 100%;
        margin-top: 30px;
      }
    }

  8. Add JavaScript for Checkout

    Finally, add the checkout functionality:

    JavaScript Functionality
    // Wait for SDK to initialize
    document.addEventListener('next:initialized', function() {
      console.log('Campaign Cart SDK ready!');
    

      // Enable debug mode to see what's happening
      if (window.location.hostname === 'localhost') {
        next.enableDebug();
      }
    });
    

    // Checkout function
    function proceedToCheckout() {
      // Get current cart
      const cart = next.getCart();
    

      if (cart.isEmpty) {
        alert('Please add items to your cart first.');
        return;
      }
    

      // Generate checkout URL with current cart
      const checkoutUrl = next.generateCheckoutUrl({
        successUrl: window.location.origin + '/success',
        cancelUrl: window.location.href
      });
    

      // Redirect to checkout
      window.location.href = checkoutUrl;
    }
    

    // Optional: Track page view for analytics
    document.addEventListener('next:initialized', function() {
      next.track('page_view', {
        page_type: 'product',
        product_name: 'Web Development Course'
      });
    });

Complete Example

Section titled “Complete Example”

Here’s the complete HTML file combining all the steps above:

Click to view complete code
Complete Product Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Premium Course - Learn Web Development</title>


<!-- Campaign Cart Setup -->
<meta name="next-api-key" content="your-api-key-here">
<meta name="next-page-type" content="product">
<meta name="next-debug" content="true">


<!-- Campaign Cart SDK -->
<script src="https://cdn.jsdelivr.net/gh/NextCommerceCo/[email protected]/dist/loader.js" type="module"></script>


<!-- Styles -->
<style>
  /* Include all CSS from step 7 */
</style>
</head>
<body>
<div class="product-container">
  <!-- Product Info -->
  <div class="product-info">
    <h1 data-next-display="package.name">Premium Web Development Course</h1>
    <p data-next-display="package.description">Master modern web development with our comprehensive course.</p>
  </div>


  <!-- Pricing Options -->
  <div class="pricing-section">
    <h2>Choose Your Plan</h2>
    <div data-next-cart-selector data-next-selection-mode="swap" class="pricing-grid">
      <!-- Include all pricing cards from step 3 -->
    </div>
  </div>


  <!-- Quantity -->
  <div class="quantity-section">
    <!-- Include quantity controls from step 4 -->
  </div>


  <!-- Add to Cart -->
  <div class="add-to-cart-section">
    <!-- Include add to cart section from step 5 -->
  </div>
</div>


<!-- Cart Sidebar -->
<div class="cart-sidebar">
  <!-- Include cart display from step 6 -->
</div>


<!-- JavaScript -->
<script>
  /* Include all JavaScript from step 8 */
</script>
</body>
</html>

Test Your Page

Section titled “Test Your Page”
  1. Open in Browser: Load your HTML file in a web browser
  2. Check Console: Open developer tools and look for “Campaign Cart SDK ready!”
  3. Select Products: Click different pricing options to see selection change
  4. Add to Cart: Click the add to cart button and watch the cart update
  5. Test Quantities: Use the +/- buttons to change quantities

Next Steps

Section titled “Next Steps”

Troubleshooting

Section titled “Troubleshooting”

Cards not responding to clicks?

  • Check that package IDs in your dashboard match the data-next-package-id values
  • Verify SDK has loaded by checking for window.next in console

Prices not displaying?

  • Ensure packages are set up in your Campaign Cart dashboard
  • Check API key is correct and active

Cart not updating?

  • Look for JavaScript errors in browser console
  • Verify all data-next-display attributes are spelled correctly

Congratulations! You’ve built your first Campaign Cart product page. Ready to add more advanced features? Check out our Interactive Playground for more examples!