2

I've been pulling my head for the past day on how to filter products with multiple categories.

After a long search, I found and implemented on my project, Advanced Search with tags and categories It worked on single selection, but when I modified it for multiple categories selection I was not getting any result.

How can I pass through multiple values with Sort options? Here's what I have so far.

Any ideas?

Filter

<form action="" method="get">
<input type="search" name="query" placeholder="Search Products" style="width: 100%;">

<select name="brand[]" multiple>
    <option value="" selected>All Brands</option>
    {% set brands = craft.categories.group('brand') %}
    {% for supplier in brands %}
        <option value="{{ supplier.slug }}">{{ supplier.title }}</option>
    {% endfor %}
</select>

<select name="size[]" multiple>
    <option value="" selected>All Sizes</option>
    {% set sizes = craft.categories.group('size') %}
    {% for product in sizes %}
        <option value="{{ product.slug }}">{{ product.title }}</option>
    {% endfor %}
</select>

<select name="tag[]" multiple>
    <option value="">All Applications</option>
    {% set tags = craft.tags %}
    {% for delivery in tags %}
        <option value="{{ delivery.slug }}">{{ delivery.title }}</option>
    {% endfor %}
</select>

<div class="">
    <input type="submit" value="Apply">
</div>

{% set query = craft.request.getParam('q') %}
{% set brand = craft.request.getParam('brand') %}
{% set size = craft.request.getParam('size') %}
{% set tag = craft.request.getParam('tag') %}

{% set brandCat = brand ? craft.categories.group('brand').slug(brand).all() %}
{% set sizeCat = size ? craft.categories.group('size').slug(size).all() %}
{% set tagCat = craft.tags.slug(tag).all() %}


{% set brandParam = brandCat ? {targetElement: ['and']|merge(brandCat)} %}
{% set sizeParam = sizeCat ? {targetElement:['and']|merge(sizeCat) } %}
{% set tagParam = tagCat ? {targetElement: ['and']|merge(tagCat)} %}

{% set relationParams = [brandParam, sizeParam, tagParam]|filter %}

{% set productResults = craft.products({
    type: 'buildingMaterials',
    relatedTo: relationParams ? ['and']|merge(relationParams) : null,
    search: query
}) %}

Sort Options

% set sortOptions = [
    {
        label: 'Newest',
        value: 'postDate desc'
    },
    {
        label: 'Highest Rates',
        value: 'score desc'
    },
    {
        label: 'Price Low-High',
        value: 'defaultPrice'
    },
    {
        label: 'Price High-Low',
        value: 'defaultPrice desc'
    },
] %}
<div id="sortSelect" class="form-group">
<select class="selectpicker show-tick form-control" data-name="Sort" id="sortQuery"
        name="Sort" title="Sort By:">
    {% for sortOption in sortOptions %}
        <option value="{{ sortOption.value }}" {{ sortOption.value == selectedSortOption ? 'selected' }}>
            {{ sortOption.label }}
        </option>
    {% endfor %}
</select>

{% set orderJs %}
    $(function(){
    $('#sortQuery').on("change", function(e){
    // Get the value from the select
    var filter = $(this).val();
    location.href = location.origin + location.pathname + '?order=' + filter;
    });
    })
{% endset %}
    {% js orderJs %}

Get Entries

{% paginate productResults.orderBy(selectedSortOption).limit(12).with([
    'productImageGallery:image',
    'url:url',
    'title',
    'type:type',
    'defaultPrice',
    'productSummary|stiptags'
]) as pageInfo, products %}

{% for product in products %}
...
{% endfor %}

Pagination

{% if pageInfo.prevUrl %}
<li class="page-item">
    <a class="page-link prev" href="{{ pageInfo.prevUrl }}?orderBy={{ selectedSortOption }}">
        <span class="fa fa-angle-left"></span>
    </a>
</li>
{% endif %}

Your Answer

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

Browse other questions tagged or ask your own question.