Filter Code

[ionutvlss]

I have this code below that doesn't work as it should, does anyone have any idea please how I can modify it so that the correct options appear when a particular model is selected?

<div style="text-align: center; margin: 50px 0;">
  <h1>Alege telefonul tău</h1>
  <p>Selectează modelul de iPhone pentru a vedea husele disponibile:</p>
</div>

<!-- Dropdown cu modelele de iPhone -->
<div style="text-align: center;">
  <label for="iphone-model">Selectează modelul tău de iPhone:</label>
  <select id="iphone-model" name="iphone-model" onchange="filterProductsByModel()">
    <option value="">-- Alege modelul --</option>
    <option value="iPhone 7/8">iPhone 7/8</option>
    <option value="iPhone X/XS">iPhone X/XS</option>
    <option value="iPhone 11">iPhone 11</option>
    <option value="iPhone 11 PRO">iPhone 11 PRO</option>
    <option value="iPhone 11 PRO Max">iPhone 11 PRO Max</option>
    <option value="iPhone 12">iPhone 12</option>
    <option value="iPhone 12 Mini">iPhone 12 Mini</option>
    <option value="iPhone 12 PRO">iPhone 12 PRO</option>
    <option value="iPhone 12 PRO Max">iPhone 12 PRO Max</option>
    <option value="iPhone 13">iPhone 13</option>
    <option value="iPhone 13 Mini">iPhone 13 Mini</option>
    <option value="iPhone 13 PRO">iPhone 13 PRO</option>
    <option value="iPhone 13 PRO Max">iPhone 13 PRO Max</option>
    <option value="iPhone 14">iPhone 14</option>
    <option value="iPhone 14 PRO">iPhone 14 PRO</option>
    <option value="iPhone 14 PRO Max">iPhone 14 PRO Max</option>
    <option value="iPhone 15">iPhone 15</option>
    <option value="iPhone 15 Plus">iPhone 15 Plus</option>
    <option value="iPhone 15 PRO">iPhone 15 PRO</option>
    <option value="iPhone 15 PRO Max">iPhone 15 PRO Max</option>
  </select>
</div>

<!-- Lista de produse filtrate -->
<div id="product-list" style="margin-top: 50px;">
  <h2>Produsele disponibile:</h2>
  <div id="products-container">
    <!-- Produsele vor fi afișate aici -->
  </div>
</div>

<script>
  function filterProductsByModel() {
    var model = document.getElementById('iphone-model').value;
    var productsContainer = document.getElementById('products-container');

    productsContainer.innerHTML = '';

    if (model !== '') {
      fetch('/collections/all/products.json')
        .then(response => response.json())
        .then(data => {
          var products = data.products;
          var filteredProducts = products.filter(product => {
            return product.variants.some(variant => variant.option1 === model);
          });

          if (filteredProducts.length > 0) {
            filteredProducts.forEach(product => {
              var productHTML = `
                <div class="product-item">
                  <h3>${product.title}</h3>
                  <img src="${product.images[0].src}" alt="${product.title}" style="width:200px;">
                  <p>Preț: ${product.variants[0].price} Lei</p>
                  <a href="/products/${product.handle}">Vezi detalii</a>
                </div>
              `;
              productsContainer.innerHTML += productHTML;
            });
          } else {
            productsContainer.innerHTML = '<p>Nu există produse disponibile pentru acest model de iPhone.</p>';
          }
        });
    }
  }
</script>