Forum

Thread tagged as: Question, Shop

User filtered products combined with categories and pagination

I've used the article here: https://docs.grabaperch.com/perch/content/functions/user-filtered-lists/ (with some modifications) to add the ability for a user to filter products by category using checkboxes. This works great.

I have a lot of products so I'm using pagination to show products in chunks of 60 in my case. This also works great.

However, when I have a filter selected and I select to load the next 60 products (i.e. page 2) I am running into issues with the pagination not respecting the filter, it currently just returns the next 60 products regardless of the filter applied.

When filtering a category my url looks something like this /products?category=categoryName.

When selecting the next page with a filter applied I have tried this /products?page=2?category=categoryName. However it returns products outside the filtered category. You can see it in action here: https://www.chase-erwin.com/fabrics if you select the White/Cream/Beige 'Colour' filter then scroll to the bottom of the list and click 'Load more' then you will see the next set of products clearly aren't all White/Cream/Beige. (All requests are handled via ajax)

Is it possible to combine user filtered content and paging?
Hamish Irving

Hamish Irving 1 points

  • 4 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

What can you tell us about how you're putting your links together?
Hamish Irving

Hamish Irving 1 points

4 years ago

I have a get-products.php page which I call via ajax to get perch_shop_products() with any filters applied.

The ajax url is /get-products?' + $('#form1_fabricFilter').serialize();

My get-products.php page looks like this:

<?php

    // Create an empty array ready to add our filters to
    $filters = array();

    if (perch_get('upholstery')) {
                $filters[] = 'usage/upholstery';
    }
    if (perch_get('drapery')) {
                $filters[] = 'usage/drapery';
    }

        ...

    // Default filter is everything except accessories
    if (!count($filters)) $filters = '!accessories';

        perch_shop_products([
      'template' => 'product-grid-item.html',
      'category' => $filters,
      'category-match' => 'any',
      'paginate' => true,
      'count' => 10,
      'page-links' => true,
      ]);

The paging template is this:

<perch:if exists="paging">
  <div class="paging">
    <perch:if exists="not_last_page">
      <a href="#" class="btn btn-outline" id="nextPage">Load more</a>
    </perch:if>
  </div>
</perch:if>

Then I use jquery to count the number of times the Load more button is clicked and increment a var pageNumber variable so I can pass it to the get-products.php page again using ajax.

With the page number added, the url looks like this:

/get-products?' + 'page=' + pageNumber + '?' + $('#form1_fabricFilter').serialize();
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

You can't have two ? chars - the second needs to be an & instead.

/get-products?' + 'page=' + pageNumber + '&' + $('#form1_fabricFilter').serialize();
Hamish Irving

Hamish Irving 1 points

4 years ago

Oh man, how did I miss that! Thanks so much, has been plaguing me for a while