Hi all,
I have a function that I would like to return products based on a usermade filter via check boxes.
Basically:
Each product has multiple data-attributtes, for example: data-brand="acer", data-price="2995", data-screensize="15.6", data-processor="intel"
So say i'm lining up 40 products, the users need to be able to narrow down the product listing.
At the moment my function, shows all that is clicked, and doesnt narrow down the product listing.
Not being a JQuery shark, I could use som input on how I can filter the products.
This is what I have at the moment:
function filterFunction()
{
//if( $( "input[name='screen_group[]']:checked" ).length > 0 )
if( $( "input[type='checkbox']:checked" ).length > 0 )
{
$( '.produkt_gruppe_div' ).hide();
searchScreens = $( "input[name='screen_group[]']:checked" ).map( function() { return $( this ).val(); }).get(); // <----
searchBrands = $( "input[name='brand_group[]']:checked" ).map( function() { return $( this ).val(); }).get(); // <----
// Combine marked filters (checkboxes)
var params = searchScreens.concat( searchBrands );
// Available data-atr, from the first product element
filterAttributtes = $( '.product_gruppe_div:first' ).data();
var searchValues = [];
// Loop marked checkboxes,display products that has a matching data-atr="value"
$.each( params, function( key, value )
{
$('[data-screensize="' + value + '"]').show();
$('[data-brand_name="' + value + '"]').show();
//$( '.produkt_gruppe_div' ).filter('[data-screensize="' + value + '"]').addClass('screen').fadeIn(300);
//$( '.produkt_gruppe_div' ).filter('[data-brand_name="' + value + '"]').addClass('brand').fadeIn(300);
});
}
else
{
// Vis alle, hvis der ikke er afmærket noget
$('.produkt_gruppe_div').show();
}
}
So when a user selects "Acer and Lenovo" as Brand, and "15.6 and 14" as screensize, I need to only display the products which data-brand="acer of lenove" and data-screensize="15.6 or 14" and so on.
There is at the moment 6 filteres to each products, which defines the product details. And I have tjeckboxes that has an ID corresponding to the data-atr="value".
Hope someone can see how I can hide all, and then only show products that contains either of the values.
Best regards, Klemme