Linking to Search Results

Question

Ok what i'm trying to achieve is a set of links which have "search parameters" attached to them. Which would be a "category" and an "option.field".

Then when these links are clicked they display search results according to the parameters.

Not sure even where to start with something like this, could it be achieved with data attributes?

Is it even possible? Or have would I have to jerry-rig a form to do this via radio buttons?

Thanks for any help you can give.

Answer 1

You can use either get (via a direct link) or post (via javascript) which can be accessed in your search template using [craft.request.getParam(name)][1], and then either display the template (if a direct link) or return it (via ajax) to your original template.

For a full example using post and ajax see this question or this question. These examples use post and a form, but you could easily adapt this to place your variables in attributes and then retrieve and send those using javascript:

<a class="js-triggerhook" data-option="{{ field.option }}" data-category="{{ category }}" data-url="{{ siteUrl }}path/to/searchtemplate">Link</a>

In javascript:

$('.js-triggerhook').on('click', function(e) {
    e.preventDefault();
    var option = $(this).attr('data-option),
        category = $(this).attr('data-category'),
        url = $(this).attr('data-url'),
        data = "option=" + option + "&category=" + category;
    // send post data
    $.post(url, data, function(result) {
        $('#search-results').html(result);
    }, 'html');
})

Or for a direct link using get:

<a href="{{ siteUrl }}path/to/searchtemplate?option={{ option.field }}&amp;category={{ category }}">Link</a>

Or for a way to do either on the fly, just by including the class 'js-sendAsAjax':

<a class="js-sendAsAjax" href="{{ siteUrl }}path/to/searchtemplate?option={{ option.field }}&amp;category={{ category }}">Link</a>

Then in your javascript:

$('.js-sendAsAjax').on('click', function(e) {
   e.preventDefault();
   var href = $(this).attr('href').split('?'),
       url = href[0],
       data = href[1];
    $.post(url, data, function(result) {
        $('#search-results').html(result);
    });
});