Croissant Toggle PDP

by alexkates

HTML

<script src="https://cdn.int.croissant.com/croissant-toggle-web-components/dist.js"></script>
<!DOCTYPE html>
<html>

  <head>
    <title>Product Page</title>
  </head>

  <body>
    <div class="product-container">
      <h1 class="product-name">Croissant Cardigan</h1>
      <p class="product-description">Stay cozy and stylish with the luxurious Croissant Cardigan. Made with premium materials, this cardigan offers unmatched comfort and warmth. Perfect for any occasion, whether it's a casual outing or a formal event.</p>
      <div class="product-attributes">
        <div class="size-options">
          <button class="size-option" data-sku="43934840553723">S</button>
          <button class="size-option" data-sku="43935043256571">M</button>
          <button class="size-option" data-sku="43935556894971">L</button>
        </div>
      </div>
      <div class="quantity-selector">
        <button class="quantity-btn" id="decrement">-</button>
        <span class="quantity-display" id="quantity">1</span>
        <button class="quantity-btn" id="increment">+</button>
      </div>
      <croissant-toggle-pdp merchant-id="65662681339" pricing-url="https://api.retailer.sbx.croissant.com/v0/prices" display-settings='{"pdp":{"justifyContent":"left"}}'></croissant-toggle-pdp>
      <button class="add-to-cart" id="add-to-cart">Add to Cart</button>
    </div>

  </body>

</html>

CSS

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

/* Container for the product page */
.product-container {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  background-color: #f9f9f9;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

/* Product image */
.product-image {
  max-width: 100%;
  height: auto;
  margin-bottom: 20px;
}

/* Product name */
.product-name {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

/* Product description */
.product-description {
  margin-bottom: 20px;
}

/* Product attributes */
.product-attributes {
  margin-bottom: 20px;
}

/* Size options */
.size-options {
  margin-bottom: 10px;
}

.size-option {
  display: inline-block;
  margin-right: 5px;
  padding: 5px 10px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* Selected size option */
.size-option.selected {
  background-color: #0006E1;
  color: #fff;
}

/* Quantity selector */
.quantity-selector {
  margin-bottom: 20px;
}

.quantity-btn {
  padding: 5px 10px;
  font-size: 16px;
  cursor: pointer;
}

.quantity-display {
  display: inline-block;
  padding: 0 10px;
  font-size: 16px;
}

/* Add to cart button */
.add-to-cart {
  background-color: #0006E1;
  color: #fff;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  var incrementBtn = document.getElementById('increment');
  var decrementBtn = document.getElementById('decrement');
  var quantityDisplay = document.getElementById('quantity');
  var croissantToggle = document.querySelector('croissant-toggle-pdp');
  var selectedSize = null;

  var quantity = 1;
  croissantToggle.setAttribute('quantity', quantity);

  // Increment quantity
  incrementBtn.addEventListener('click', function() {
    quantity++;
    quantityDisplay.textContent = quantity;

    // Update the croissantToggle with the new quantity
    croissantToggle.setAttribute('quantity', quantity);
  });

  // Decrement quantity
  decrementBtn.addEventListener('click', function() {
    if (quantity > 1) {
      quantity--;
      quantityDisplay.textContent = quantity;

      // Update the croissantToggle with the new quantity
      croissantToggle.setAttribute('quantity', quantity);
    }
  });

  // Select size
  var sizeOptions = document.querySelectorAll('.size-option');
  sizeOptions.forEach(function(sizeOption) {
    sizeOption.addEventListener('click', function() {
      sizeOptions.forEach(function(option) {
        option.classList.remove('selected');
      });
      this.classList.add('selected');
      selectedSize = this.getAttribute('data-sku');

      // Update the croissantToggle with the selected product ID (size)
      croissantToggle.setAttribute('product-id', selectedSize);
    });
  });

  // Set the first size option as selected on load
  sizeOptions[0].classList.add('selected');
  selectedSize = sizeOptions[0].getAttribute('data-sku');

  // Update the croissantToggle with the initial selected product ID (size)
  croissantToggle.setAttribute('product-id', selectedSize);
});