Gift with Purchase Demo

Interactive Demo

Control the gift with purchase component in real-time. Adjust the cart amount and threshold to see how the component responds and automatically manages the gift.

Different Configurations

Examples of different gift configurations and visual styles.

Usage Examples

Basic Setup

<gift-with-purchase 
  threshold="75.00" 
  current="45.00"
  variant-id="12345678"
  message-above="🎉 Congratulations! You've qualified for your FREE gift!"
  message-below="Add ${ amount } more to unlock your free gift! 🎁">
  <div class="gwp-product">
    <img src="gift-image.jpg" alt="Free Gift" >
    <div class="gwp-content">
      <h4 class="gwp-title">Free Sample Set</h4>
      <p class="gwp-variant">Travel Size Collection</p>
    </div>
  </div>
  <p data-content-gwp-message></p>
</gift-with-purchase>

JavaScript API

const gwp = document.querySelector('gift-with-purchase');

// Update cart amount
gwp.setCurrentAmount(85.50);

// Change threshold
gwp.setThreshold(100.00);

// Update variant ID
gwp.setVariantId('87654321');

// Get current state
const state = gwp.getState();
console.log(state.isActive, state.isAdded, state.remainingAmount);

Cart Integration

<cart-panel>
  <gift-with-purchase 
    threshold="75.00"
    variant-id="12345678"
    message-above="🎉 Congratulations! You've qualified for FREE shipping!"
    message-below="Add ${ amount } more to get FREE shipping! 🚚">
    <!-- Gift content -->
  </gift-with-purchase>
</cart-panel>

Message Handling

<gift-with-purchase 
  threshold="75.00"
  variant-id="12345678"
  message-above="🎉 Congratulations! You've qualified for your FREE gift!"
  message-below="Add ${ amount } more to unlock your free gift! 🎁">
  <!-- Add a paragraph with data-content-gwp-message for the component to inject messages -->
  <p data-content-gwp-message class="your-custom-styles"></p>
</gift-with-purchase>

Event Handling

// Listen for gift events
gwp.addEventListener('gwp:added', (event) => {
  console.log('Gift added:', event.detail);
});

gwp.addEventListener('gwp:removed', (event) => {
  console.log('Gift removed:', event.detail);
});

gwp.addEventListener('gwp:error', (event) => {
  console.error('GWP Error:', event.detail);
});

Features