How to filter the output of materials using pdoResources on the fly without reloading the page?

Question

MODX

Hello.

There is a page on MODX, where material cards are displayed using pdoResources from different sections. Here is the output code (it is standard):

[[pdoResources?
    &parents=`195, 239, 271, 280, 297`
    &tpl=`brick_item`
    &includeTVs=`mini_image, priceSHT, sort, format, marka, zavod`
    &tvFilters=`format==Одинарный` 
    &limit = `0`
    &prepareTVs=`1`
    &processTVs=`mini_image`
]]

We are talking about bricks and by default we display all bricks with the parameter format==Single.

Also on the side of the page there is a filter with other parameters: color, size, factory, etc. The filter is implemented, perhaps not according to Feng Shui, but as it is, it is. Here is an example of the code for one section of the filter:

<div class="filter_block size">
        <ul>
            <li class="chkd">1х</li>
            <li>1,5х</li>
            <li>Евро 0,7</li>
            <li>Евро 0,9</li>
        </ul>
    </div>

Those. the filter is divided into filter_block blocks with additional classes size, color, etc. And li class="chkd" is a checked option.

That's actually the task. It is necessary to implement filtering by clicking on the parameters without reloading the page.
Output sorting is already implemented according to completely different criteria, and this is not needed here. Pagination was also written a long time ago and is not needed here. You only need output for the selected parameters.

I guess that we need to look towards ajax, but unfortunately, I have never worked with it and I have no idea where the legs grow from. I googled a lot and for a long time, found several similar tasks and solutions, but I could not apply them for this task, in view of the fact that everything related to Ajax is still a completely dark forest for me.

How I see this solution:
1. It is necessary to write a js script that would determine when clicking on which (what) parameter (s) were clicked and what value was selected (I can do it)))).
2. We need to pass these values ​​somewhere, so that later these values ​​​​are substituted into the output of pdoResources on the display page.
Where and how to transfer them is an open question for me. And how to make it all work even without reloading the page.

I would be very grateful for help.

Answer 1

For example https://webdesign-master.ru/blog/modx/2016-05-03-m...
for complex filters there is https://modstore.pro/packages/ecommerce/msearch2