Product Compare

Documentation for the Product Comparison sample

Overview

The Product Comparison Tool allows users to select multiple products and compare them side-by-side. The comparison is displayed in a modal dialog that pops up when the user clicks the "Compare" button. The tool is integrated with the AI12Z platform to provide detailed comparisons.

Example Compare

Features

Comparison Modal: A modal dialog displays the comparison results when the "Compare" button is clicked. Using the RAG agent, which is called in parallel for each product selected then analyzed by the reasoning engine.
AI12Z Integration: The comparison data is fetched using the AI12Z platform via the knoweledge box control.

Code Implementation

Below is the complete code implementation for the Product Comparison Tool.

HTML and CSS

The HTML and CSS code is used to structure the page and style the elements.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Product Comparison</title>
    <style>
      body {
        background-image: url("tv-site.png");
        background-repeat: no-repeat;
        background-size: cover;
        font-family: Arial, sans-serif;
      }

      .compare-container {
        position: fixed;
        top: 280px;
        right: 100px;
        width: 330px;
        background-color: #f1f5f9;
        padding: 1rem;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        height: fit-content;
      }

      .compare-container h2 {
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
      }

      .compare-container select {
        width: 100%;
        padding: 0.5rem;
        margin-bottom: 1rem;
        border-radius: 4px;
        border: 1px solid #ccc;
      }

      .compare-container button {
        width: 100%;
        padding: 0.5rem;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }

      .compare-container button:hover {
        background-color: #0056b3;
      }

      .modal {
        display: none;
        position: fixed;
        top: 0;
        left: 50%;
        transform: translate(-50%, 0);
        width: 700px;
        height: 80%;
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        padding: 1rem;
        z-index: 1000;
        overflow-y: auto;
      }

      .modal h2 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
      }

      .modal p {
        font-size: 1rem;
        margin-bottom: 1rem;
      }

      .modal .close-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        background-color: transparent;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
      }

      .modal .close-btn:hover {
        color: red;
      }

      .modal-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 999;
      }

      .slider-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 1rem;
        margin-bottom: 1rem;
      }

      .slider-container label {
        font-size: 1rem;
      }

      .slider-container input {
        width: 25%;
      }

      .searchctl {
        position: fixed;
        top: 30px;
        left: 1000px;
      }
    </style>
    <link
      rel="stylesheet"
      href="https://unpkg.com/ai12z@latest/dist/library/library.css"
    />
  </head>
  <body>
    <div class="compare-container">
      <h2>Compare TVs</h2>
      <select id="products" multiple size="4">
        <option value="SAMSUNG 85-Inch Class 4K Crystal UHD DU8000">
          SAMSUNG 85-Inch Class 4K Crystal UHD DU8000
        </option>
        <option value="SAMSUNG 85-Inch Class Crystal UHD 4K DU7200">
          SAMSUNG 85-Inch Class Crystal UHD 4K DU7200
        </option>
        <option value="TCL 85-Inch QM7 QLED 4K Smart QD-Mini LED TV">
          TCL 85-Inch QM7 QLED 4K Smart QD-Mini LED TV
        </option>
        <option value="LG 65-Inch Class OLED evo C4">
          LG 65-Inch Class OLED evo C4
        </option>
      </select>

      <div class="slider-container">
        <label for="comparison-type">Full Comparison</label>
        <input type="range" id="comparison-type" min="0" max="1" step="1" />
        <label for="comparison-type">Key Differences</label>
      </div>

      <textarea
        id="important-text"
        placeholder="What is important to you"
        rows="3"
        style="width: 100%; margin-bottom: 1rem"
      ></textarea>

      <button onclick="compareProducts()">Compare</button>
    </div>

    <div class="modal-overlay" id="modal-overlay"></div>
    <div class="modal" id="modal">
      <button class="close-btn" onclick="closeModal()">×</button>
      <h2>Product Comparison</h2>
      <ai12z-knowledge-box
        data-key="4194458943ba781d9b80e35f294fadd72276e0def5306f748bafa274e8501302"
        data-mode="prod"
        feedback="false"
        thumbsUpDown="false"
      ></ai12z-knowledge-box>
    </div>

    <script
      type="module"
      src="https://unpkg.com/ai12z@latest/dist/esm/library.js"
    ></script>
    <script>
      function compareProducts() {
        const products = Array.from(
          document.getElementById("products").selectedOptions
        ).map((option) => option.value)

        const comparisonType = document.getElementById("comparison-type").value
        const importantText = document
          .getElementById("important-text")
          .value.trim()

        if (products.length > 0) {
          const modal = document.getElementById("modal")
          const modalOverlay = document.getElementById("modal-overlay")
          modal.style.display = "block"
          modalOverlay.style.display = "block"
          const knowledgeBox = document.querySelector("ai12z-knowledge-box")

          let question = `compare ${products.join(" to ")}`
          if (comparisonType == 1) {
            question += " and only return the key differences"
          }
          if (importantText) {
            question += ` that are important for the customer, specifically: ${importantText}`
          }

          knowledgeBox.setAttribute("question", question)
        }
      }

      function closeModal() {
        const modal = document.getElementById("modal")
        const modalOverlay = document.getElementById("modal-overlay")
        modal.style.display = "none"
        modalOverlay.style.display = "none"
      }
    </script>
  </body>
</html>

Selecting Products: Select multiple products from the list by clicking on them.
Comparing Products: Click the "Compare" button to open the modal dialog with the comparison results.
Full vs key Differences: Send to the knowledge box compare vs compare key diffences

tip

Ensure that reAct is enabled to allow dynamic content updates and proper functioning of the AI12Z integration.

This tool provides a user-friendly way to compare multiple products and see detailed results using the AI12Z platform.

Documentation for the Product Comparison sample​

Overview​

Features​

Code Implementation​

HTML and CSS​

Documentation for the Product Comparison sample

Overview

Features

Code Implementation

HTML and CSS