Ricerca Prodotti Woocommerce

[costantonio11]

Buongiorno. Ho creato una scrollbar in HTML, CSS e JavaScript che mi consente, facendola scorrere, di vedere determinati valori (o punteggi). Quello che vorrei io e che non sto riuscendo a fare è che in base a determinati valori su cui l'utente mette la scrollbar vengano visualizzati alcuni prodotti presenti su Woocommerce tramite tag specifici assegnati a tali prodotti.
Esempio: se l'utente sceglie il punteggio 0.5 nei risultati devo avere quei prodotti con un tag specifico da me scelto. Se non c'è nessun prodotto associato a quel valore vorrei la scritta "nessun prodotto disponibile.

Di seguito i codici HTML e JavaScript che sto utilizzando.
HTML
<div id="switcher-punteggio" class="wrapper">
<div class="calculator">
<div class="scegli-ruolo">
<div class="segmented-control">
<input id="calc-ata" type="radio" name="ruolo" value="ATA" checked="">
<label for="calc-ata">ATA</label>
</div>
<div class="segmented-control">
<input id="calc-docenti" type="radio" name="ruolo" value="docenti">
<label for="calc-docenti">DOCENTI</label>
</div>
</div>
<label for="punteggio" id="mostra_punteggio">Punteggio: 0</label>
<input id="punteggio" type="range" value="0" min="0" max="12" step="0.5">
<div class="results"></div>
</div>
</div>



JavaScript
document.querySelectorAll('#switcher-punteggio input[name="ruolo"]').forEach(function(radio) {
radio.addEventListener("change", function() {
updatePunteggioLabel();
});
});

document.getElementById("punteggio").addEventListener("input", function() {
updatePunteggioLabel();
filterProductsByTag("punti 0.5");
});

function updatePunteggioLabel() {
var punteggioLabel = document.getElementById("mostra_punteggio");
var ruolo = document.querySelector('#switcher-punteggio input[name="ruolo"]:checked').value;
var punteggio = parseFloat(document.getElementById("punteggio").value);

if (ruolo === "ATA") {
punteggioLabel.textContent = "Punteggio ATA: " + punteggio;
if (punteggio === 0.5) {
filterProductsByTag("punti 0.5");
} else {
filterProductsByTag("");
}
} else if (ruolo === "docenti") {
punteggioLabel.textContent = "Punteggio Docenti: " + punteggio;
filterProductsByTag("");
}
}

function filterProductsByTag(tag) {
var resultsElement = document.querySelector("#switcher-punteggio .results");
resultsElement.innerHTML = "";

// Simulazione della funzione getProducts con l'array di prodotti
var products = [
{ name: "Prodotto 1", permalink: "link1.html" },
{ name: "Prodotto 2", permalink: "link2.html" },
// Aggiungi altri prodotti secondo necessità
];

var filteredProducts = products.filter(function(product) {
// Filtra i prodotti in base al tag
return product.tags.includes(tag);
});

if (filteredProducts.length > 0) {
for (var i = 0; i < filteredProducts.length; i++) {
var product = filteredProducts;
var productElement = document.createElement("div");
productElement.textContent = product.name;
resultsElement.appendChild(productElement);

var linkElement = document.createElement("a");
linkElement.href = product.permalink;
linkElement.textContent = "Visualizza prodotto";
productElement.appendChild(linkElement);
}
} else {
var noProductsElement = document.createElement("div");
noProductsElement.textContent = "Nessun prodotto trovato";
resultsElement.appendChild(noProductsElement);
}
}