JQuery checkbox product filter in DOM

[klemme]

Hi All

I have to create a filtering function for a webshop, and need to do it client side for performance reasons.

I load in x number of product, so I can get to them in the DOM - And after this I have a number of checkbox groups which lets me filter and only display relevant products.

At the moment I have this checkbox group, which works fine:

<input type="checkbox" name="brand[]" value="acer" id="acer" />&nbsp;<span class="filter_paragraphs">Acer</span><br />
<input type="checkbox" name="brand[]" value="lenovo" id="lenovo" />&nbsp;<span class="filter_paragraphs">Lenovo</span><br />
<input type="checkbox" name="brand[]" value="hp" id="hp" />&nbsp;<span class="filter_paragraphs">HP</span><br />
<input type="checkbox" name="brand[]" value="fujitsu" id="fujitsu" />&nbsp;<span class="filter_paragraphs">Fujitsu</span><br />
<input type="checkbox" name="brand[]" value="samsung" id="samsung" />&nbsp;<span class="filter_paragraphs">Samsung</span><br />

The products on the page are listed with several data-atr, that I want to use for filtering, like this.

<div class="product_div" data-brand="acer" data-price="xxxx" data-screen="15.6" data-show="TRUE">';

With this bit of Javascript, I am able to filter on the brand name, whenever a checkbos in that group is checked. And if nothing is checked, all products are displayed as default:

$(document).ready(function() 
{   
// Bind click event til checkbokse  
$( 'input[type="checkbox"]' ).click( function() 
{
    if( $( 'input[type="checkbox"]:checked' ).length > 0 ) 
    {
        // Remove all products
        $( '.product_div' ).fadeOut(300);

        // Loop through all checked check boxes
        setTimeout(function(){
        $( 'input[type="checkbox"]:checked' ).each( function() 
        { 
            // Display ONLY those product_divs that has a match in the data-atr, according to the id of the checkbox.
            $( '.product_div[data-brand = ' + this.id + ']' ).fadeIn( 100 );

            // IT DOESTN WORK WITH SCREEN SIZES.....
            //$( '.product_div[data-screen = ' + this.id + ']' ).fadeIn( 100 );


            // Align filtered products, run function
            alignFilteredProducts( this.id );
        });
        }, 300 )
    } 
    else 
    {
        // Default: show all
        $('.product_div').show();
    }
});

});

For screen sizes, the checkboxes I am using is setup like this:

<input type="checkbox" name="screen_group[]" value="15.6" id="15.6" />&nbsp;<span class="filter_paragraphs">15,6"</span><br />
<input type="checkbox" name="screen_group[]" value="15.5" id="15.5" />&nbsp;<span class="filter_paragraphs">15,5"</span><br />
<input type="checkbox" name="screen_group[]" value="15.4" id="15.4" />&nbsp;<span class="filter_paragraphs">15,4"</span><br />
<input type="checkbox" name="screen_group[]" value="14" id="14" />&nbsp;<span class="filter_paragraphs">14"</span><br />

But the above function, doesnt react on user input for screen sizes.

Do I need to create a function, for each checkbox group on the page: One for brands, and one for screen sizes and so on?

I need to apply many filters, so I would prefer to use one function that is strong enough to "simply": check all checked check boxes, and scan the page for each choise made, and display the products that has a data-atr="value" alike the check box id's.

Anyone who can see how I can modify the above JS function to work dynamic on all checkboxes i need to apply to the different categories?

Look forward to hear from you,

The best, Jan

[klemme]

Got it working now.

But the issue is that if I am checking 14" screen size, AND Lenovo as a brand - Then I get to display BOTH 14" AND ALL from the brand Lenovos that is not 14".

How can I change this bit of jquery to show only the product divs, that have the CONBINATION of the selected data-attributtes?

JS FUNCTION:

$(document).ready(function() 
{
$( 'input[type="checkbox"]' ).click( function( e ) 
{

// Find all marked check boxes
if( $( 'input[type="checkbox"]:checked' ).length > 0 ) 
    {
        // Remove all products from view
        $( '.produkt_gruppe_div' ).fadeOut(300);

        // Loop through marked checkboxes
        setTimeout(function(){
        $( 'input[type="checkbox"]:checked' ).each( function() 
        { 
            // Display product divs that has got a combination of the
            // selected checkboxes id, in their data-xxx="value". 
            // and doesnt just contain one of them...
        $( '.produkt_gruppe_div[data-brand="' + this.id + '"]' ).fadeIn( 100 );
        $( '.produkt_gruppe_div[data-screensize="' + this.id + '"]' ).fadeIn( 100 );

        //$( '.produkt_gruppe_div' ).filter(':contains(' + this.id + ')').show();

        // Kør funktion der placerer produkt divs ved siden af hinanden
            alignFilteredProducts( this.id );
        });
        }, 300 )
    } 
    else 
    {
        // Vis alle, hvis der ikke er afmærket noget
        $('.produkt_gruppe_div').show();
    }
});
});