Filter a Product Collection using AJAX and Not Reloading Page

Technical Q&A
1

Calling in a product collection with AJAX using the following:

{% layout none %}
{% paginate collection.products by 50 %}
{
  [{% for product in collection.products %}
	{
  	"available": {{ product.available }},
  	"title": "{{ product.title }}",
  	"vendor": "{{ product.vendor }}"
	}{% unless forloop.last %},{% endunless %}{% endfor %}
  ]
}
{% endpaginate %}

As well as rendering the collection-filters.liquid file:

When selecting a filter, the page reloads. Is there any way in the code to have it so when a filter is selected, the products will update and the page will not reload?

Any help is appreciated. Thank you.

2

Hi @hellodigitalwpg ,

Have you tried install and test with Dawn theme? It will use filter 2.0 like the code you sent and everything will be loaded ajax. Refer https://github.com/Shopify/dawn/blob/main/assets/facets.js

Hope it helps!

3

Thanks for the suggestion @LitExtension .
We prefer to use our current theme that we customized for specific features. But I will refer to the attached JS file you mentioned and see if anything from there is worth implementing.

4

Hi @hellodigitalwpg ,

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.