Dynamic loading of products instead of pagination

Questions around the TYPO3 integration and plugins
Forum rules
Always add your TYPO3, Aimeos and PHP version as well as your environment (Linux/Mac/Win)
Spam and unrelated posts will be removed immediately!
cnoelker
Advanced
Posts: 140
Joined: 20 Feb 2016, 18:21

Dynamic loading of products instead of pagination

Post by cnoelker » 05 Feb 2019, 09:46

Hello,
is there support for a dynamic loading of products (e.g. like on facebook. If the user scrolls down, more content is displayed)? I see only a pagination.

Claudia

User avatar
aimeos
Administrator
Posts: 7836
Joined: 01 Jan 1970, 00:00

Re: Dynamic loading of products instead of pagination

Post by aimeos » 06 Feb 2019, 10:25

Not yet, but it's pretty easy to implement. You only have to replace the pagination partial from the catalog/lists template and add a button at the bottom with the "next page" link from the pagination at the bottom. Add a JS method to your own JS file that listens to the new button and which prevents the browser from following the link. Instead, you fetch the content of the link via a XHR request and rip out the products via their CSS selector. Add the product HTML at the end of the current list and it's done :-)

Would be great if you could also create a pull request with your changes so we can add it to the ai-client-html repo :-)
Professional support and custom implementation are available at Aimeos.com
If you like Aimeos, Image give us a star

cnoelker
Advanced
Posts: 140
Joined: 20 Feb 2016, 18:21

Re: Dynamic loading of products instead of pagination

Post by cnoelker » 07 Feb 2019, 20:21

Thank you. I don't want a button but an automatic action when the user scrolls down the page, but I get the idea.
I'll see how this works out.

cnoelker
Advanced
Posts: 140
Joined: 20 Feb 2016, 18:21

Re: Dynamic loading of products instead of pagination

Post by cnoelker » 06 Jun 2019, 15:25

Hello,
I implemented this and it loads the products and adds them at the end of the list. :D

There is only one small problem: The stock of the products added by xhr is not updated. (The products displayed at the start do contain stock values.)
Is there an action which needs to be triggered after the products are on the page?

Claudia

User avatar
aimeos
Administrator
Posts: 7836
Joined: 01 Jan 1970, 00:00

Re: Dynamic loading of products instead of pagination

Post by aimeos » 06 Jun 2019, 18:29

You have to load the catalog stock URL for the new products and pass their SKUs as GET parameters so the stock levels for them are retrieved too.
Professional support and custom implementation are available at Aimeos.com
If you like Aimeos, Image give us a star

cnoelker
Advanced
Posts: 140
Joined: 20 Feb 2016, 18:21

Re: Dynamic loading of products instead of pagination

Post by cnoelker » 08 Jun 2019, 08:15

Thank you.
I had a bit of technical "fun" to get and request the URL of a script inside the xhr response, but I finally succeeded. 8-)

User avatar
aimeos
Administrator
Posts: 7836
Joined: 01 Jan 1970, 00:00

Re: Dynamic loading of products instead of pagination

Post by aimeos » 09 Jun 2019, 09:40

Maybe you want to share your code? :-)
Professional support and custom implementation are available at Aimeos.com
If you like Aimeos, Image give us a star

cnoelker
Advanced
Posts: 140
Joined: 20 Feb 2016, 18:21

Re: Dynamic loading of products instead of pagination

Post by cnoelker » 11 Jun 2019, 12:02

I can do so, when I am confident that I placed the code snippets at the right locations.
My JS is currently in a separate scripts.js file inside my extension. Where should I place this in the Aimeos code?

User avatar
aimeos
Administrator
Posts: 7836
Joined: 01 Jan 1970, 00:00

Re: Dynamic loading of products instead of pagination

Post by aimeos » 11 Jun 2019, 21:35

In the ./ai-client-html/client/html/themes/aimeos.js file please :-)
Professional support and custom implementation are available at Aimeos.com
If you like Aimeos, Image give us a star

Post Reply