1

I want to filter entries by the tags they contain.

This works nice, when only one tag is queried, but I need to be able to add several tags to the URL by clicking on them in the front-end and have the list of entries drill down accordingly.

Ideally I'd also be able to remove already present tags from the URL by clicking the same link again. Think of toggling a tag on and off from a query, like this:

http://www.ralphmedia.co.uk/reefine/demo_basic

I guess this has to be achieved using JavaScript/AJAX, but I have no idea where to start building something like this.

So, can anyone please steer me in the right direction?

1

One method is to check which checkboxes are checked, build a URL containing multiple tags which is recognized by Tag (see the Tag documentation about multiple tags in the URL when using {exp:tag:entries}), and redirect to this URL. Here's an example:

Assuming you have these three example tag checkboxes:

<input type="checkbox" name="tag[]" value="foo"> Foo<br/>
<input type="checkbox" name="tag[]" value="bar"> Bar<br/>
<input type="checkbox" name="tag[]" value="baz"> Baz<br/>

The following script will check if you checked the checkbox you just clicked, and if you did, build a string of tags to use when redirecting to the new URL:

$(document).ready(function (){

    $("input[name='tag[]'").click(function(e) {
        if($(this).is(":checked"))
        {
            tagUrlString = ''; 

            $("input[name='tag[]'").each( function (index) {
                console.log($(this));
                if($(this).is(":checked"))
                {
                    tagUrlString = tagUrlString + $(this).val() + ',';
                }
            });

            window.location.href = 'http://mysite.com/template-group/template/tag/' + tagUrlString;
        }
    })

});

Of course, you could remove the outer if($(this).is(":checked")) conditional so that the above redirection is triggered even when unchecking a checkbox (i.e. simply by clicking a checkbox).

Hope this helps moving you ahead. (Note: the above code was minimally tested. Tweak for your needs).

1
  • Thanks for the in depth explanation! I'm gonna try this and report back as soon as I can. :) – shyko Apr 17 '14 at 15:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.