Filter Code

Shopify Discussion
,

Topic summary

A user is troubleshooting a product filtering system for iPhone cases on their Shopify store. The code includes a dropdown menu with various iPhone models (iPhone 7/8 through iPhone 15 series) and a JavaScript function intended to filter products based on the selected model.

Technical Details:

  • The filter fetches product data from /collections/all/products.json
  • It attempts to match product variants against the selected iPhone model
  • The filtered results should display in a container with product images, titles, prices, and links

Issue:
The filtering mechanism isn’t working correctly—when a specific model is selected, the appropriate product options don’t appear as expected.

Code Structure:
Part of the JavaScript code appears corrupted or reversed (possibly encoding issues), making it difficult to identify the exact logic error. The user is seeking help to modify the code so the correct product options display when filtering by iPhone model.

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
1

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>