1

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.

4

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 + "&amp;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);
    });
});

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.