All things Shopify and commerce
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>
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024