AJAX Product Filter

[gizmo]

Hi There

I'm looking for a way to create an AJAX product filter. Currently to the whole page reloads when the filter form has been filled out and has been submitted.

I'd like to create an AJAX product filter so the whole page doesn't reload, which is a lot more user friendly, so we can keep the user more engaged.

Is there a built in function for an AJAX product filter? Or do I have to write it myself?

My Environment:
TYPO3 10.4.20
Aimeos 21.7.1
PHP 7.4
Currently running in an DDEV Container

Thanks for the reply

[aimeos]

It's not available yet but pretty easy:

Submit the form via JS like here:
https://github.com/aimeos/ai-client-htm ... s.js#L1490

Cut out the part with the ".catalog-list" selector and replace the node in the page with the same selector like there:
https://github.com/aimeos/ai-client-htm ... #L506-L512

We would love if you could contribute your code

[gizmo]

Thank you for your answer. I'll write my own AJAX Call and then I'll try to make an PR to the core.

[gizmo]

So I'm still working on this AJAX Solution, the AJAX Call it self works.

I want to load the attribute count and the catalog count directly with the AJAX call so it doesnt make an unnessecary call and it makes less Problems with initilizing the javascript after the AJAX call.

The Problem is, that I'm not able to get the count block into the filter comonent. I'm not sure if I'm doing something wrong or if its not made for that.

Here is the code in the client/html/templates/filter/attribute-body-standard.php File:

Code: Select all

<?= $this->block()->get( 'catalog/count/attribute' ) ?>

This should load the following file: client/html/templates/catalog/count/attribute-body-standard.php
--> but it doesnt

It it even possible to load that block from another component? So yes, what am I doing wrong? If not, is there another way to load this block?

Or do I have to declare the block somewhere in the config?

[aimeos]

You can't include blocks from other components, only from subparts of the current component. You would have to implement a subpart for the catalog list component that adds e.g. the stock levels.