0
  1. users often bookmark a search page after they have selected some facets to refine their search query. The refinements panel needs to be able to serialize the selected facets for inclusion in the URL each time a facet is selected or unselected.

http://jsfiddle.net/sk7pqf5c/

The serialization Method should be:

?refine=panelId:facet1id...
DDfrontenderLover
  • 470
  • 1
  • 4
  • 19

1 Answers1

0

You can extract the data representing what has been selected like this:

$('#getSelection').click(function(){
    var selection = $('.panel').map(function(_,e){
        var $e = $(e);
        return {
            panelId: $e.data('id'),
            selectedFacets: $e.find('input:checkbox:checked').map( function(_,i){
                return i.id;
            }).get()
        };
    }).get();
    console.log(selection)
});

That assumes a button with the id getSelection, and this code creates an array of objects with the following:

[Object { panelId="size", selectedFacets=[1]}, Object { panelId="base_colour", selectedFacets=[1]}, Object { panelId="brand", selectedFacets=[1]}]

In that example, each selectedFacets property is an array of the id attribute from the checkboxes.

Live example: http://jsfiddle.net/sk7pqf5c/4/

From there you just need to turn that array in to a string and pass it wherever you like on a quesrystring. Going the other way, you need to parse that string, turn it back into an array similar to what is produced above, and use it to pre-select the checkboxes on screen.

Jamiec
  • 118,012
  • 12
  • 125
  • 175
  • @epascarello - Im sorry, do you *know* this is homework? Plus this is far from the final solution, and just pushes the OP in the right direction. Plus I have a [history](http://stackoverflow.com/questions/26254474/using-javascript-for-arrays-and-loops/26254692#26254692) of giving people just the help they need without too much in the case of Homework. So, basically what Im saying is butt out! with respect. – Jamiec Oct 21 '14 at 13:07