Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Add search filter to isotope search page.

I would like to add url filter functionality to this page: http://norwerk.dk/sammenlign-generatorer/

Login: funkl/norwerk

It's a combination of checkboxes and search a task solved here: https://www.codersclan.net/ticket/357

I am not looking for at url history just the ability to pass on some parameters and these parameters could check off a checkbox when loaded.

Let me know if any additional info is needed.

User Gravatar

funkl

Posted Jun 30 2014 2:27 UTC

$50


  • Assigned To Dearon
  • Solved
  • jquery
    isotope
  • 954 Views

20 Replies


If I am getting this right, you will need to work with GET method - at the end of url you put ? and then you put parameters that you need.

For example:

http://norwerk.dk/sammenlign-generatorer?ST├śRRELSE=1 (this is for the first checkbox).

User Gravatar

Brav

Posted Jun 30 2014 2:33 UTC

Exactly :-)

User Gravatar

funkl

Posted Jun 30 2014 2:34 UTC

Which backend language are you using?

User Gravatar

Brav

Posted Jun 30 2014 2:36 UTC

It's wordpress

User Gravatar

funkl

Posted Jun 30 2014 2:37 UTC

Never worked with WP, only pure PHP :D. This is not something difficult to do, you just need someone who knows how to work with WP modules/plugins.

User Gravatar

Brav

Posted Jun 30 2014 2:39 UTC

It should be possible to do with the isotope plugin: http://isotope.metafizzy.co/

User Gravatar

funkl

Posted Jun 30 2014 2:41 UTC

Try adding this to scripts.js:

var params = location.search;
params = params.substring(1);

for (var i = 0; i < params.length; i++) {
    params[i] = params[i].split('=');

    var dataGroupElem = $("input[data-group='" + params[i][0] + "']");
    var checkboxElem = dataGroupElem.find("#" + params[1]);

    checkboxElem.prop('checked', true);
}

I am not 100% certain it will work, but since I can only use the console to test it it is a bit of a pain in the ass

User Gravatar

Dearon

Posted Jun 30 2014 3:16 UTC

To clarify, that should allow you to use URL arguments in the following way: http://norwerk.dk/sammenlign-generatorer/?generator-brands=doosan&frequency=50-hz

So first the data-group that holds the checkboxes (e.g. generator-brands) and then the checkbox id (e.g. doosan).

User Gravatar

Dearon

Posted Jun 30 2014 3:19 UTC

Hi Dearon

I've added the script. But uncertain how to to construct the url to test it.

User Gravatar

funkl

Posted Jun 30 2014 3:20 UTC

I first saw your reply now. I've tested but without success.

User Gravatar

funkl

Posted Jun 30 2014 3:22 UTC

Yeah, I'll see if I can figure out where it is going wrong

User Gravatar

Dearon

Posted Jun 30 2014 3:23 UTC

Okay, this works for me:

var params = location.search;
params = params.substring(1);
params = params.split('&');

for (var i = 0; i < params.length; i++) {
    params[i] = params[i].split('=');

    var checkboxElem = $("#" + params[i][1]);
    checkboxElem.prop('checked', true).trigger("change");
    manageCheckbox( checkboxElem );
    comboFilter = getComboFilter( filters );
    $container.isotope();
}

I placed it before the

  // do stuff when checkbox change
  $('#options').on( 'change', function( jQEvent ) {
    var $checkbox = $( jQEvent.target );
    manageCheckbox( $checkbox );
    comboFilter = getComboFilter( filters );

    $container.isotope();
  });

bit of code.

I used these two urls for testing, one returns nothing and one returns all the Doosan generators:

http://norwerk.dk/sammenlign-generatorer/?generator-brands=doosan&voltages=1-x-230-volt

http://norwerk.dk/sammenlign-generatorer/?generator-brands=doosan&voltages=3-x-400-volt

User Gravatar

Dearon

Posted Jun 30 2014 3:40 UTC

Very nice. The url filters work now, but if you open the normal page without url filter: http://norwerk.dk/sammenlign-generatorer/

The checkboxes stopped working... Strange

User Gravatar

funkl

Posted Jun 30 2014 3:47 UTC

var params = location.search;
params = params.slice(1).split('&');

for (var i = 0; i < params.length; i++) {
    params[i] = params[i].split('=');

    var dataGroupElem = jQuery("div[data-group='" + params[i][0] + "']");

    var values = params[i][1].split(',');

    for (var e = 0; e < values.length; e++) {
        var checkboxElem = dataGroupElem.find("#" + values[e][1]);
        checkboxElem.parent('label').addClass('checked');
        checkboxElem.prop('checked', true).trigger('change');
    }
}

This allows to have multiple values for parameter.

Lis so: http://norwerk.dk/sammenlign-generatorer/?generator-brands=doosan&voltages=1-x-230-volt,3-x-400-volt

User Gravatar

renekorss

Posted Jun 30 2014 3:51 UTC

Nevermind, spoke too soon

User Gravatar

Dearon

Posted Jun 30 2014 4:06 UTC

var params = location.search;
params = params.substring(1);
params = params.split('&');

for (var i = 0; i < params.length; i++) {
    if (params[i] !== "") {
        params[i] = params[i].split('=');

        var checkboxElem = $("#" + params[i][1]);
        var checkboxLabel = $("label[for='" + params[i][1] + "']");

        checkboxElem.prop('checked', true);
        checkboxLabel.addClass("checked");

        manageCheckbox( checkboxElem );
        comboFilter = getComboFilter( filters );
        $container.isotope();
    }
}

There, I triple checked and it works for both when using url arguments and without them

User Gravatar

Dearon

Posted Jun 30 2014 4:11 UTC

Solution

This didn't solve your task? Get your own custom solution.

Looking good. I'll just test it.

User Gravatar

funkl

Posted Jun 30 2014 4:16 UTC

Thanks for your quick solution :-) Do you have the time for another task on the same page?

User Gravatar

funkl

Posted Jun 30 2014 4:39 UTC

What about multiple selections on one group? You can copy solution from my answer if needed.

User Gravatar

renekorss

Posted Jun 30 2014 4:42 UTC

I had to step out for a bit, but I figured I would take renekorss's suggestion on board and modify the code a bit. It should now support multiple selections in the url (e.g. http://norwerk.dk/sammenlign-generatorer/?generator-brands=doosan,perkins):

var params = location.search;
params = params.substring(1);
params = params.split('&');

for (var i = 0; i < params.length; i++) {
    if (params[i] !== "") {

        params[i] = params[i].split('=');
        params[i][1] = params[i][1].split(',');

        for (var j = 0; j < params[i][1].length; j++) {
            var checkboxElem = $("#" + params[i][1][j]);
            var checkboxLabel = $("label[for='" + params[i][1][j] + "']");

            checkboxElem.prop('checked', true);
            checkboxLabel.addClass("checked");
            manageCheckbox( checkboxElem );
        }

        comboFilter = getComboFilter( filters );
        $container.isotope();
    }
}
User Gravatar

Dearon

Posted Jun 30 2014 6:33 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions