Dynamic product configurator using JS

A Dynamic Product Configurator allows users to customize a product’s features (like size, color, accessories, etc.) and see the changes reflected in real-time. It’s ideal for industries such as automotive, furniture, electronics, apparel, and more. This guide walks you through creating a product configurator using HTML, CSS, and JavaScript.

---

Step 1: Define Your Objective

You want to create a product page where users can:

• Choose between various product options (e.g., color, material, size)
• See changes reflected live on screen (images, price, summary)
• Optionally add the product to cart or export configuration data

---

Step 2: Set Up the HTML Structure

<div id="product-configurator">
  <h2>Customize Your T-Shirt</h2>

  <label for="color">Color:</label>
  <select id="color" onchange="updateConfig()">
    <option value="red">Red</option>
    <option value="blue">Blue</option>
    <option value="black">Black</option>
  </select>

  <label for="size">Size:</label>
  <select id="size" onchange="updateConfig()">
    <option value="S">Small</option>
    <option value="M">Medium</option>
    <option value="L">Large</option>
  </select>

  <label for="print">Print Design:</label>
  <select id="print" onchange="updateConfig()">
    <option value="logo">Company Logo</option>
    <option value="quote">Quote Text</option>
    <option value="none">None</option>
  </select>

  <div id="product-preview">
    <img id="preview-image" src="images/red_tshirt_logo.png" alt="Preview" />
  </div>

  <div id="config-summary">
    <p><strong>Selected Color:</strong> <span id="summary-color">Red</span></p>
    <p><strong>Selected Size:</strong> <span id="summary-size">Small</span></p>
    <p><strong>Selected Design:</strong> <span id="summary-print">Company Logo</span></p>
    <p><strong>Total Price:</strong> $<span id="price">25</span></p>
  </div>
</div>

---

Step 3: Prepare the CSS (Optional but Recommended)

#product-configurator {
  width: 400px;
  font-family: Arial, sans-serif;
}
#product-preview img {
  width: 100%;
  border: 1px solid #ccc;
  margin-top: 10px;
}
#config-summary {
  margin-top: 15px;
  background: #f9f9f9;
  padding: 10px;
}

---

Step 4: Define the JavaScript Logic

const priceMap = {
  base: 20,
  size: {
    S: 0,
    M: 2,
    L: 4
  },
  print: {
    logo: 5,
    quote: 3,
    none: 0
  }
};

function updateConfig() {
  const color = document.getElementById("color").value;
  const size = document.getElementById("size").value;
  const print = document.getElementById("print").value;

  // Update text summary
  document.getElementById("summary-color").textContent = capitalize(color);
  document.getElementById("summary-size").textContent = size;
  document.getElementById("summary-print").textContent = print === "none" ? "None" : capitalize(print.replace("_", " "));

  // Update preview image based on combination (simulate with filename logic)
  const imagePath = `images/${color}_tshirt_${print}.png`;
  document.getElementById("preview-image").src = imagePath;

  // Calculate price
  const price =
    priceMap.base + priceMap.size[size] + priceMap.print[print];
  document.getElementById("price").textContent = price;
}

function capitalize(text) {
  return text.charAt(0).toUpperCase() + text.slice(1);
}

---

Step 5: Organize Your Image Assets

Ensure you have images that reflect each configuration. For simplicity:

• red_tshirt_logo.png
• red_tshirt_quote.png
• blue_tshirt_logo.png
• black_tshirt_none.png
• And so on…

This naming pattern is important if you’re dynamically referencing image sources based on selections.

---

Step 6: Optional – Add Cart or Export Configuration

You can collect the configuration data and send it via a form, or display it for download.

HTML for export:

<button onclick="exportConfig()">Export Configuration</button>

JavaScript function:

function exportConfig() {
  const config = {
    color: document.getElementById("color").value,
    size: document.getElementById("size").value,
    print: document.getElementById("print").value,
    price: document.getElementById("price").textContent
  };

  const blob = new Blob([JSON.stringify(config, null, 2)], {
    type: "application/json"
  });

  const link = document.createElement("a");
  link.href = URL.createObjectURL(blob);
  link.download = "product_config.json";
  link.click();
}

---

Step 7: Add Enhancements (Optional but Powerful)

• Real-time price comparison with discounts or upsells
• Preview overlays for logo placement or text styling
• Live 3D model viewer (using libraries like Three.js)
• Save/Load Configurations using local storage or backend database
• Integration with eCommerce platforms (Shopify, WooCommerce, Stripe Checkout)

---

Real-World Use Cases

• Custom Furniture Store – Fabric, finish, measurements
• Car Dealerships – Model, color, interior, add-ons
• Clothing Brand – Print-on-demand personalization
• Laptop/Electronics Sellers – RAM, SSD, processor

---

Security and Performance Tips

• Validate selections server-side if connecting to a cart system
• Compress images for fast previews
• Use lazy loading for asset-heavy setups
• Keep the UI accessible (contrast, keyboard navigation)