Interactive Playground

Experience Campaign Cart features with live, interactive examples. Everything on this page is fully functional - try clicking the products and buttons!

🚀 Live Demo Status:Loading SDK...

Live Product Selection

Demo

Swap Mode Selection

Click any product to instantly replace your cart selection. Perfect for single-product funnels!

3x Mega Bundle

$47.97 $119.97

60% off • 3x units

2x Value Pack

$35.98 $79.98

55% off • 2x units

1x Starter

$19.99 $39.99

50% off • 1x unit

Code

<!-- Product Selector with Swap Mode -->
<div data-next-cart-selector
     data-next-selection-mode="swap"
     data-next-selector-id="drone-demo">

  <!-- Product Card 1 - Best Deal -->
  <div class="product-card"
       data-next-selector-card
       data-next-package-id="4"
       data-next-quantity="3"
       data-next-selected="true">

    <div class="badge">Best Deal</div>
    <h3 data-next-display="package.name">3x Mega Bundle</h3>

    <div class="pricing">
      <span class="retail" data-next-display="package.price_retail">$119.97</span>
      <span class="price" data-next-display="package.price_total">$47.97</span>
    </div>

    <div class="unit-price">
      <span data-next-display="package.price">$15.99</span>/each
    </div>

    <div data-next-show="package.hasSavings">
      <span class="savings-badge">
        SAVE <span data-next-display="package.savingsPercentage">60%</span>
      </span>
      <p>You save <span data-next-display="package.savingsAmount">$72.00</span></p>
    </div>
  </div>

  <!-- Product Card 2 -->
  <div class="product-card"
       data-next-selector-card
       data-next-package-id="3"
       data-next-quantity="2">

    <h3 data-next-display="package.name">2x Value Pack</h3>

    <div class="pricing">
      <span class="retail" data-next-display="package.price_retail">$79.98</span>
      <span class="price" data-next-display="package.price_total">$35.98</span>
    </div>

    <div class="unit-price">
      <span data-next-display="package.price">$17.99</span>/each
    </div>

    <div data-next-show="package.hasSavings">
      <span class="savings-badge">
        SAVE <span data-next-display="package.savingsPercentage">55%</span>
      </span>
      <p>You save <span data-next-display="package.savingsAmount">$44.00</span></p>
    </div>
  </div>

  <!-- Product Card 3 -->
  <div class="product-card"
       data-next-selector-card
       data-next-package-id="2"
       data-next-quantity="1">

    <h3 data-next-display="package.name">1x Starter</h3>

    <div class="pricing">
      <span class="retail" data-next-display="package.price_retail">$39.99</span>
      <span class="price" data-next-display="package.price_total">$19.99</span>
    </div>

    <div class="unit-price">
      <span data-next-display="package.price">$19.99</span>/each
    </div>

    <div data-next-show="package.hasSavings">
      <span class="savings-badge">
        SAVE <span data-next-display="package.savingsPercentage">50%</span>
      </span>
      <p>You save <span data-next-display="package.savingsAmount">$20.00</span></p>
    </div>
  </div>
</div>

Live Attribute Display

Selection Attributes

Attribute	Live Value
selection.{selectorId}.name Package name	3x Mega Bundle
selection.{selectorId}.packageId	4
selection.{selectorId}.quantity	3
selection.{selectorId}.totalUnits Total units	3
selection.{selectorId}.price Unit price	$15.99
selection.{selectorId}.total Total price	$47.97
selection.{selectorId}.compareTotal Retail price	$119.97
selection.{selectorId}.savingsAmount	$72.00
selection.{selectorId}.savingsPercentage	60%
selection.{selectorId}.hasSavings	true
selection.{selectorId}.isBundle	true

View all selection attributes →

Cart Attributes

Attribute	Live Value
cart.itemCount Number of items	0
cart.subtotal	$0.00
cart.total Cart total	$0.00
cart.compareTotal Retail total	$0.00
cart.savingsAmount	$0.00
cart.savingsPercentage	0%
cart.hasItems	false
cart.isEmpty	true
cart.hasDiscount	false
cart.hasShipping	false

View all cart attributes →

Shopping Cart

Demo

Cart Summary

0

Subtotal $0.00

Discount -$0.00

Shipping $0.00

Total $0.00

Checkout Clear

Cart is empty

Select products above

Code

<!-- Shopping Cart Display -->
<div class="cart">
  <div class="cart-header">
    <h3>🛒 Shopping Cart</h3>
    <span class="badge" data-next-display="cart.itemCount">0</span>
  </div>

  <!-- Show when cart has items -->
  <div data-next-show="cart.hasItems">
    <div class="cart-summary">
      <div class="line-item">
        <span>Subtotal:</span>
        <span data-next-display="cart.subtotal">$0.00</span>
      </div>

      <div class="line-item" data-next-show="cart.hasDiscount">
        <span>Discount:</span>
        <span class="discount" data-next-display="cart.discountAmount">-$0.00</span>
      </div>

      <div class="line-item" data-next-show="cart.hasShipping">
        <span>Shipping:</span>
        <span data-next-display="cart.shipping">$0.00</span>
      </div>

      <div class="line-item total">
        <span>Total:</span>
        <span data-next-display="cart.total">$0.00</span>
      </div>
    </div>

    <button class="btn-primary" data-next-action="checkout">
      Proceed to Checkout
    </button>

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

  <!-- Show when cart is empty -->
  <div data-next-show="cart.isEmpty" class="empty-state">
    <div class="icon">🛒</div>
    <h4>Your cart is empty</h4>
    <p>Select a product package above to get started!</p>
  </div>
</div>

Selection Modes

Swap Mode

<!-- Click to replace current selection -->
<div data-next-cart-selector
     data-next-selection-mode="swap">
  <div data-next-selector-card
       data-next-package-id="1">
    Product Option 1
  </div>
  <div data-next-selector-card
       data-next-package-id="2">
    Product Option 2
  </div>
</div>

Use when: You want customers to choose ONE option from multiple choices (e.g., subscription tiers, product variants)

Add Mode

<!-- Click to add to existing cart -->
<div data-next-cart-selector
     data-next-selection-mode="add">
  <div data-next-selector-card
       data-next-package-id="1">
    Add Product 1
  </div>
  <div data-next-selector-card
       data-next-package-id="2">
    Add Product 2
  </div>
</div>

Use when: Customers can select multiple products (e.g., building a bundle, adding accessories)

Toggle Mode

<!-- Click to toggle in/out of cart -->
<div data-next-cart-selector
     data-next-selection-mode="toggle">
  <div data-next-selector-card
       data-next-package-id="1">
    Toggle Product 1
  </div>
  <div data-next-selector-card
       data-next-package-id="2">
    Toggle Product 2
  </div>
</div>

Use when: Building custom bundles where items can be added/removed freely

Advanced Examples

Conditional Display

Show/hide content based on cart state:

<!-- Show when cart is empty -->
<div data-next-show="cart.isEmpty">
  Your cart is empty - select a product above!
</div>

<!-- Show when cart has items -->
<div data-next-show="cart.hasItems">
  <button data-next-action="checkout">
    Checkout Now
  </button>
</div>

<!-- Show based on total -->
<div data-next-show="cart.total > 50">
  🎉 You qualify for free shipping!
</div>

<!-- Show when specific product selected -->
<div data-next-show="selection.drone-demo.packageId == 4">
  Best choice! You're getting our best deal!
</div>

Dynamic Pricing Display

Display prices that update automatically:

<!-- Show selected product details -->
<div class="selected-product">
  <h3 data-next-display="selection.product.name">Product Name</h3>
  <p>
    Price: <span data-next-display="selection.product.price">$0</span>
    <s data-next-display="selection.product.comparePrice">$0</s>
  </p>
  <p>
    You save: <span data-next-display="selection.product.savings">$0</span>
    (<span data-next-display="selection.product.savingsPercent">0%</span>)
  </p>
</div>

Multi-Step Forms

Create checkout flows with form integration:

<form data-next-form="checkout">
  <!-- Step 1: Product Selection -->
  <div data-next-step="1">
    <h3>Choose Your Package</h3>
    <!-- Product selector here -->
    <button data-next-action="next-step">Continue</button>
  </div>

  <!-- Step 2: Customer Info -->
  <div data-next-step="2" data-next-show="step == 2">
    <h3>Your Information</h3>
    <input name="email" type="email" required>
    <input name="phone" type="tel">
    <button data-next-action="checkout">Complete Order</button>
  </div>
</form>

Component Playground

Buttons & Actions

Test different button actions and states Try Buttons →

Display Elements

Dynamic content that updates automatically Try Display →

Form Components

Input fields and form integration Try Forms →

Conditionals

Show/hide content based on conditions Try Conditionals →

Tip

Pro tip: Open your browser’s developer console to see SDK events and debug information as you interact with the components.

Copy & Customize

All examples on this page are ready to use. Simply:

1. Copy the HTML code
2. Replace the API key with yours
3. Update product IDs to match your dashboard
4. Customize the styling to match your brand

Need help? Check our API Reference or contact support.