En mi script a continuación puedes ver lo que he hecho. La idea es hacer este filtro de productos en la página agregando valores a la matriz y verificando la clase más tarde.

 // FILTERS var wybranyKolor = []; var wybranyRozmiar = []; function selectFilter(){ document.querySelectorAll(".grupa").forEach(group => { var colorFilter = group.querySelector('.button-group-color').querySelectorAll('.button') var sizeFilter = group.querySelector('.button-group-size').querySelectorAll('.button') // KOLORY colorFilter.forEach((button) => { button.addEventListener("click", (e) =>{ colorFilter.forEach((thisColor) => { thisColor.classList.remove("sg_active"); wybranyKolor.pop(filtr); }) button.classList.add("sg_active"); var filtr = button.getAttribute('data-filter'); wybranyKolor.push(filtr); showProducts(); console.log(wybranyKolor); }); }); // ROZMIAR sizeFilter.forEach((button) => { button.addEventListener("click", (e) =>{ sizeFilter.forEach((thisSize) => { thisSize.classList.remove("sg_active"); wybranyRozmiar.pop(filtr); }) button.classList.add("sg_active"); var filtr = button.getAttribute('data-filter'); wybranyRozmiar.push(filtr); showProducts(); console.log(wybranyRozmiar); }); }); }); }

Aquí me quedo atascado, ¿alguna idea de cómo consolar. registrar valores de la matriz igual que la clase en divs?

TypeError no detectado: boxPro.forEach no es una función

 function showProducts(){ document.querySelectorAll('.grid').forEach(gridDiv => { var boxPro = gridDiv.querySelector('.box_pro'); boxPro.forEach((elementDiv) => { if(elementDiv.classList.contains(wybranyKolor)){ console.log('MAM ' + wybranyKolor); } }); }); }