Hey All,
I am tryiung to create a function that lets me filter products on the page, by using html5 data-attributtes. Each prodct can have multiple values, as in: data-brand="acer", data-screen="17" data-processor="blah" etc etc.
I am trying to make it work with two filter options at the moment, and then I want to expand the function later.
This is how I get the values of the checked checkboxes:
function GetSelectedCBValues()
{
var selectedOptions = {};
selectedOptions.Screen = $('input[name="screen_group[]"]:checked').map(function ()
{
return this.value;
}).get();
selectedOptions.Brand = $('input[name="brand_group[]"]:checked').map(function ()
{
return this.value;
}).get();
return selectedOptions;
}
And when I wantto either show/hide products on the page, I use this function:
function ShowHideProductDiv(div, show, hide)
{
if (show) $(div).show();
if (hide) $(div).hide();
}
And this one to show ALL products, if nothing is checked
function ShowAllProducts()
{
$('.produkt_gruppe_div').show();
}
-------------------------------------------------------------------
Here is the tough one, where I try to run through all the products on the page, and check which of the products has a data-attributte value, that is also in one of the arrays, which are holding the checked values. If it is not, then I simply want to hide the product div, otherwise show it - It sounds all so simple, but not really - This is what i have:
function ShowAvailableProducts()
{
var selectedOptions = GetSelectedCBValues();
console.log(selectedOptions);
$('.produkt_gruppe_div').each(function (k, div)
{
var divBrand = $(div).data("brand_name");
var divScreen = $(div).data("screensize");
// Hvis der er værdier i både brand og skærmstørrelse array
if (selectedOptions.Screen.length >= 1 && selectedOptions.Brand.length >= 1)
{
console.log("Der er valgt både brand og skærm");
var mergedArray = $.merge( selectedOptions.Screen, selectedOptions.Brand ); // Merge arrays, så der er en der indeholder de valgte values
console.log( mergedArray );
// Tjek om den aktuelle div har en attribut der også findes i array
if( $.inArray( divBrand, selectedOptions.Brand ) && $.inArray( divScreen, selectedOptions.Brand ) )
{
console.log( divBrand );
console.log( divScreen );
// Vis den div der har en af værdierne:
ShowHideProductDiv(div, true, false);
}
else
{
ShowHideProductDiv(div, false, true);
}
/*
if (selectedOptions.Screen == divScreen && selectedOptions.Brand == divBrand)
{
console.log("Der er fundet et/flere match");
ShowHideProductDiv(div, true, false);
}
else
{
ShowHideProductDiv(div, false, true);
}
*/
}
else if (selectedOptions.Screen.length >= 1)
{
if (selectedOptions.Screen == divScreen)
{
ShowHideProductDiv(div, true, false);
}
else
{
ShowHideProductDiv(div, false, true);
}
}
else if (selectedOptions.Brand.length >= 1)
{
if (selectedOptions.Brand == divBrand)
{
ShowHideProductDiv(div, true, false);
}
else
{
ShowHideProductDiv(div, false, true);
}
}
else
{
ShowAllProducts();
}
});
}
Anyone with experience on this?
Best regards, Klemme
