[MODULE] Infinite Ajax Scroll - Défilement Infini en Ajax

Mellow · March 17, 2013

Initialement ce module a été créé sur ce topic http://www.prestasho...ilement-infini/ il y a déjà quelques mois.

Je me suis rendu compte que les modules commerciaux existants (et vendus parfois assez cher...) ne semblent pas faire mieux. Alors autant faire connaitre celui là...

Ce module permet donc une pagination automatique des listes de produits, les pages suivantes apparaissant en dessous au fur et à mesure du défilement de la page (façon facebook).

Le défilement infini est actif sur les pages qui affichent une liste de produits (page de catégorie, de fabricant, de fournisseur, page de recherche, nouveaux produits, promotions, meilleurs ventes)

Caractéristiques :

Compatible PS1.4 et PS1.5 (Testé de 1.4.7 à 1.5.6)
Image de chargement et texte de chargement (v0.7) personnalisable dans la configuration du module.
Compatible avec le panier en ajax et la comparaison de produits. Les pages générées par le module conservent les fonctionnalités d'ajout au panier en ajax et de comparaison de produits. (ça ne semble pas être le cas sur les deux modules commerciaux que j'ai recensé)
Fonction de rappel configurable. Le module exécute une fonction javascript à la fin du chargement de chaque nouvelle page (justement pour conserver le panier ajax et la comparaison de produits) Si vous avez d'autres scripts actifs sur votre liste de produits (genre effet de survol en jquery) cette fonction peut être complétée dans la configuration du module.
A l'installation, le module est configuré pour le thème par défaut de Prestashop. Si vous utilisez un autre thème, et si ce thème possède une structure différente, vous pouvez configurer le module en fonction des éléments de votre thème. Les explications sont sur la page de configuration.
v0.8 : Le module est désactivé pour les téléphones portables, mais pas pour les tablettes (problème de compatibilité avec certains navigateurs mobiles)
v1.0 : Possibilité de limiter le chargement automatique à X pages, avec ensuite un lien manuel (configurable) pour charger les pages suivantes.
v1.0 : Possibilité d'ajouter un texte à afficher lorsque la dernière page est atteinte (avec un lien "Scroll to Top" optionnel)
v1.0 : A partir de cette version le module peut être compatible avec la navigation à facettes, à condition de modifier votre fichier blocklayered.js ou d'utiliser le fichier modifié fourni sur le post #18 (à ma connaissance aucun autre module de scroll infini pour Prestashop n'est compatible avec la navigation à facettes)

Le module a été créé à l'aide du plugin jquery Infinite Ajax Scroll https://github.com/w...ite-ajax-scroll

Merci à kickflowers d'avoir déniché ce plugin, et d'avoir proposé l'idée du module.

La configuration est en FR, EN, et ES.

~~infiniteajax_v1.1.zip~~

(26/05/2013 amélioration de la compatibilité avec la navigation à facettes)

Update v1.2 (18/07/2013) :

- Compatibilité avec jquery 1.4.4 (pour les version de Prestashop inférieurs à 1.4.9)

- Affichage des numéros de page (et du total si modif pagination.tpl. Voir plus bas)

~~infiniteajax_v1.2.zip~~

Update v1.3 (15/11/2013) :

Compatibilité PS1.5.5 et 1.5.6 (nouvelle gestion de la pagination des catégories)

Pour ceux qui utilisent la navigation à facettes il y a aussi un nouveau blocklayered.js modifié. Voir post #18

~~infiniteajax_v1.3.zip~~

infiniteajax_v1.3.1.zip

(02/01/2014) Correction d'un conflit avec le module Thème Mobile de PS1.4

Русский перевод (traduction russe) => http://www.prestashop.com/forums/topic/232911-module-infinite-ajax-scroll-défilement-infini-en-ajax/page-4#entry1471024

Pour les versions à partir de 1.2, je n'ai trouvé aucun moyen pour récupérer automatiquement le nombre total de pages avec javascript / jquery.

Pour avoir l'affichage du total de pages il faudra donc rajouter cette info dans un élément caché du fichier pagination.tpl :

juste après

{if $pages_nb > 1 AND $p != $pages_nb}
{assign var='p_next' value=$p+1}
<li id="pagination_next"><a {$no_follow_text} href="{$link->goPage($requestPage, $p_next)}">{l s='Next'} »</a></li>
{else}
<li id="pagination_next" class="disabled"><span>{l s='Next'} »</span></li>
{/if}

ajouter

<li id="pagination_nbpages" style="display:none;">{$pages_nb|intval}</li>

Edited January 25, 2014 by Mellow (see edit history)

Raph59 · March 17, 2013

Bonjour,

Déjà merci pour la contribution, je vais essayer de le rendre compatible avec la navigation à facette on verra bien... si certain veule participer

Même si vous n'avez pas complètement résolue certain preoblème, n'hésitez pas à nosu faire partager vos pistes

Problème:

1 - Forcer le fonctionnement du module même si le module à facette est activé

Résolu

Dans /modules/infiniteajax/infiniteajax.php à la ligne 82, commenter ceci

//return ;

Petite astuce: Si vous travailler sur votre boutique en production (oui c'est pas bien... ^^) plutôt que de commenter cette ligne et de laisser vos visiteurs avoir connaissance de vos test, faite plutôt ceci, en remplaçant 0.0.0.0 par votre IP

if ($_SERVER["REMOTE_ADDR"] != '0.0.0.0')
 return ;

2 - Dès qu'on arrive en bas de la page, on aperçoit l'autre page se charger mais tout remonte tout de suite!!

Résolue

Il suffit de désactiver "Historique" dans les réglages du module

3 - Quand on arrive en bas de la page, c'est de nouveau les produits de la page 1 qu'on voit une seconde fois, puis ensuite seulement c'est ok on voit bien les produits de la page 2, page 3, ect...

Non Résolue

Pour savoir quelle est la page suivante, il va chercher le numéro de la page suivant dans le lien de la page suivante ( id pagination_next ), mais quand le module à facette est activé, au lieu d'avoir href="/5-categorie?p=2" on a href"/5-categorie#/page-1", faudrais retravailler le js pour que si l'url existe mais qu'il ne trouve aucun numéro de page, que la page suivante par defaut soit la 2... perso le js c'est pas trop mon truc..

4 - Quand on choisie des options dans le filtre, les options du filtres ne sont pas appliqué lors du chargement de la page suivante

Non Résolue

Edited March 17, 2013 by Raph59 (see edit history)

Raph59 · March 17, 2013

3 - Quand on arrive en bas de la page, c'est de nouveau les produits de la page 1 qu'on voit une seconde fois, puis ensuite seulement c'est ok on voit bien les produits de la page 2, page 3, ect...

Non Résolue

Pour savoir quelle est la page suivante, il va chercher le numéro de la page suivant dans le lien de la page suivante ( id pagination_next ), mais quand le module à facette est activé, au lieu d'avoir href="/5-categorie?p=2" on a href"/5-categorie#/page-1", faudrais retravailler le js pour que si l'url existe mais qu'il ne trouve aucun numéro de page, que la page suivante par defaut soit la 2... perso le js c'est pas trop mon truc..

Mellow · March 17, 2013

Hé bien, on croit toujours avoir terminé, mais....

Update v0.7 : Ajout de la possibilité d'afficher un texte (multi langues) au chargement des nouvelles pages.

------------------------------------------------------------------------------------------------------------------------------------

@Raph59,

C'est une très bonne initiative, d'ailleurs j'espérais bien que ça intéresserait quelqu'un...

Pour aider, j'ai rajouté dans cette nouvelle version la possibilité de forcer l'activation du module sur la navigation à facettes, ce sera plus simple pour les testeurs.

Mais vu que la navigation à facettes prend le contrôle (en ajax) de la liste des produits, je pense que pour une cohabitation parfaite il faudra modifier blocklayered.js pour qu'il tienne compte de la présence de ce module. Mais peut-être qu'un compromis est possible.

En tout cas merci de te pencher sur le problème, à plusieurs on arrivera peut-être à faire quelque chose.

Fehmi135 · April 5, 2013

Salut à tous,

Vraiment un excellent module ! Merci pour ta contribution !

Prestaspirit · April 25, 2013

Grand module, Merci Mellow.

Fehmi135 · April 25, 2013

Salut à tous,

J'ai pu constater un manque également sur ce module après utilisation, je vous en fait donc part au cas ou une MAJ serait envisageable : sur les mobiles le module n'est pas détecté, de ce fait arrivé en bas de page, on ne peut plus rien faire, car les boutons pour changer de pages manuellement ne sont plus présents.

Merci

Mellow · April 25, 2013

J'ai pu constater un manque également sur ce module après utilisation, je vous en fait donc part au cas ou une MAJ serait envisageable : sur les mobiles le module n'est pas détecté, de ce fait arrivé en bas de page, on ne peut plus rien faire, car les boutons pour changer de pages manuellement ne sont plus présents.

Salut Fehmi135,

Merci du retour, je n'ai pas eu l'occasion de tester sur mobile, ni sur tablette d’ailleurs...

Pourrais-tu préciser sur quel type de mobile tu as constaté ce bug ?

( quel OS, quel navigateur, avec les versions se serait encore mieux )

Merci d'avance

Fehmi135 · April 25, 2013

Salut Fehmi135,

Merci du retour, je n'ai pas eu l'occasion de tester sur mobile, ni sur tablette d’ailleurs...

Pourrais-tu préciser sur quel type de mobile tu as constaté ce bug ?

( quel OS, quel navigateur, avec les versions se serait encore mieux )

Merci d'avance

Avec plaisir. J'ai pu tester pour le moment que sous Android 2.3.5 avec le navigateur par défaut sous HTC, je testerai sous iOS et Symbian pour voir. Mais je pense que le résultat sera identique.

Merci à toi.

Mellow · April 27, 2013

Ok, j'ai pu tester sur iPad et iPhone et ça fonctionne très bien.

Je suis assez confiant aussi pour les versions mobile (récentes) des principaux navigateurs, mais pour les navigateurs par défaut des smartphones c'est une autre affaire...

Je vais chercher comment on pourrait détecter ces navigateurs pour désactiver le module.

Fehmi135 · April 27, 2013

Ok, j'ai pu tester sur iPad et iPhone et ça fonctionne très bien.

Je suis assez confiant aussi pour les versions mobile (récentes) des principaux navigateurs, mais pour les navigateurs par défaut des smartphones c'est une autre affaire...

Je vais chercher comment on pourrait détecter ces navigateurs pour désactiver le module.

Nickel alors, merci du retour.

Mellow · May 2, 2013

Un autre petit bug m'a été reporté :

Si vous avez une longue liste de fabricants ou de fournisseurs, vous avez peut-être remarqué que le module était actif sur ces listes mais pas fonctionnel.

En effet, le module ne devrait être actif que sur les listes de produits. Donc sur les pages des différents fabricants, mais pas sur la liste des fabricants (idem pour les fournisseurs)

Pour corriger ça il suffit de rajouter ces deux lignes dans le fichier infiniteajax.php

Juste après

  	 if (in_array($page_name, $pages_with_productlist)) {

ajouter

	   if ($page_name == "manufacturer" AND !((int)Tools::getValue('id_manufacturer') > 0)) return;
	   if ($page_name == "supplier" AND !((int)Tools::getValue('id_supplier') > 0)) return;

Ça sera intégré dans une prochaine version...

Mellow · May 2, 2013

Pour le problème avec certains navigateurs mobiles, je recherche encore.

Mais il est quasi impossible de faire une sélection précise en fonction du navigateur ou de sa version (il y en a vraiment trop)

Au mieux il devrait être possible de détecter les téléphones et les tablettes. Dans ce cas le module pourra être désactivé uniquement pour les téléphones (considérant que les tablettes devraient tous embarquer un navigateur moderne...)

Mellow · May 6, 2013

Update v0.8 :

- Correction du petit bug qui faisait que le module était actif sur la liste de fabricants

- Désactivation du module pour les téléphones portables (mais pas pour les tablettes)

Pour la détection des téléphones portables, le module utilise le script Mobile_Detect.php déjà présent dans PS1.5.x

Pour PS1.5.x on utilisera donc /tools/mobile_Detect/Mobile_Detect.php

Pour PS1.4.x on utilisera la version incluse dans le module (issue de PS1.5.4.0)

Je précise que cette détection n'est pas parfaite, il est donc possible que le module reste actif sur certains smartphones qui seraient détectés comme tablette, et inversement.

lordbdp · May 8, 2013

C'est déjà bien que ça fonctionne sur 1.5.4.1 ^^

wakaka · May 9, 2013

Mellow, comment faire une pause et d'ajouter "viewmorebutton" tous les cinq ajax reload

Mellow · May 9, 2013

Mellow, comment faire une pause et d'ajouter "viewmorebutton" tous les cinq ajax reload

Bonjour,

J'ai vu que la dernière version du plugin IAS possède cette fonction, ainsi qu'une autre pour afficher "No more pages to load" lorsqu'on atteint la dernière page.

Quand j'aurais le temps je mettrais à jour le module avec cette nouvelle version et ces nouvelles fonctionnalités.

Mellow · May 14, 2013

Hé bien voila, update v1.0 :

- Mise à jour du plugin IAS (v1.0.2) avec ses nouvelles fonctionnalités

- Possibilité de limiter le chargement automatique à X pages, avec ensuite un lien manuel pour les pages suivantes

- Possibilité d'ajouter un texte à afficher lorsque la dernière page est atteinte

+ Ajout de quelques images de chargement sélectionnables en back office

__________________________________________

A partir de cette version le module est aussi compatible avec la navigation à facettes.

J'ai du modifié le javascript de la navigation à facettes (blocklayered.js) pour permettre cette compatibilité.

Il suffit de copier ce blocklayered.js modifié dans le dossier /js/modules/blocklayered/ de votre thème (à créer si nécessaire) et d'activer le module avec la navigation à facettes.

Pour PS de 1.4.9.0 jusqu'à 1.5.4

blocklayered.js.zip

Update 18/07/2013 : Correction compatibilité avec jquery 1.4.4 (versions de PS inférieurs 1.4.9, avec blocklayered mis à jour en 1.9.1)

Pour PS 1.5.5 et 1.5.6, et peut-être +...

blocklayered.js_PS1.5.5-1.5.6.zip

Edited November 15, 2013 by Mellow (see edit history)

Raph59 · May 14, 2013

Bonjour,

Désolé de n'avoir pu continuer mes recherches par manque de temps..

Je viens de tester et pour ma part et c'est parfait, tout fonctionne parfaitement!

Bravo Mellow et merci de partager ce module avec nous

Pour ceux qui souhaite voir le module en action, voici une page de mon site avec beaucoup de produit donc vous pourrez voir comment il réagit avec le mode facette activé

http://www.coffret-intime.fr/18-boxer-homme

Mellow · May 15, 2013

Bonjour,

Merci du retour Raph59, les autres n'hésitez pas...

Raph59 · May 25, 2013

Bonjour ,

Je rencontre un petit soucis avec le module donc si certain ont une petite idée qu'il n'hésite pas pour ma part le js n'est pas trop mon truc... pour le moment j'ai désactivé le module car après une chute des commandes, j'ai compris que le problème venais de là

Au chargement d'une page, le sablier de chargement charge parfois tout le temps, et pendant ce temps, impossible de descendre, dès qu'on essais, ca remonte tout seul en haut tout de suite! et quand sa finit de charger, voici l'erreur que sa affiche dans la console firebug

TypeError: onCompleteHandler.call is not a function

{$('html,body').scrollTop(0);if(!forceScrollTopIsCompleted){if(!wndIsLoaded){setTimeout(function(){self.forceScrollTop(onCompleteHandler);},1);}else{onCompleteHandler.call();forceScrollTopIsCompleted=true;[spam-filter]};this.getCurrentScrollOffset=function(container)

cette ligne se trouve dans le fichier /modules/infiniteajax/jquery-ias.js à la ligne 545

	/**
	 * Force browsers to scroll to top.
	 *
	 * - When you hit back in you browser, it automatically scrolls
	 *   back to the last position. There is no way to stop this
	 *   in a nice way, so this function does it the hard way.
	 *
	 * @param function onComplete callback function
	 * @return void
	 */
	this.forceScrollTop = function (onCompleteHandler)
	{
		$('html,body').scrollTop(0);
		if (!forceScrollTopIsCompleted) {
			if (!wndIsLoaded) {
				setTimeout(function () {self.forceScrollTop(onCompleteHandler); }, 1);
			} else {
				onCompleteHandler.call();
				forceScrollTopIsCompleted = true;
			}
		}
	};

Quelqu'un aurait une idée ?

Mellow · May 26, 2013

Au chargement d'une page, le sablier de chargement charge parfois tout le temps, et pendant ce temps, impossible de descendre, dès qu'on essais, ca remonte tout seul en haut tout de suite!

Bonjour,

Ah quand même!!! Je me disais bien aussi que ça ne pouvait pas être parfait du premier coup!

Bon, j'ai pu reproduire le problème, uniquement sur les pages avec navigation à facettes (lorsqu'on recharge une page ou qu'on revient sur la page après avoir cliquer sur un lien)

Je suppose que c'est également avec la navigation à facettes que tu as constater ce problème ?

Effectivement une fonction n'était pas appelée correctement lors du rechargement des pages avec blocklayered.

J'ai effectué quelques corrections et le problème ne semble plus se produire (version 1.1 ajouté au premier post)

Raph59 · May 27, 2013

Merci, tout fonctionne parfaitement maintenant à première vue

Mellow · May 28, 2013

Ok, on croise les doigts alors...

Soyons Solidaire · June 8, 2013

Bonjour ,

Merci pour ce partage, beau travail !!

Mns · June 29, 2013

Bonjour,

tout simplement génial ! un grand merci

Rolige · June 29, 2013

Great job, but personally i think the footer is lost and many customer use the footer like shortcuts, but nice job.

ajnglagla · July 12, 2013

How can i use this in home page? (in featured products)

Edited July 12, 2013 by ajnglagla (see edit history)

Mellow · July 12, 2013

How can i use this in home page? (in featured products)

Homefeatured is a module intended to display a few products. So it doesn't have pagination.

But there are several ways (modules) to enhance featured products display (slide shows, carrousels...)

Mellow · July 18, 2013

Update v1.2 :

- Petite correction de compatibilité avec jquery 1.4.4 (pour les versions de Prestashop inférieurs à 1.4.9)

- Affichage des numéros de page (modification de pagination.tpl nécessaire pour avoir également le nombre total de pages)

wiso · July 30, 2013

Super module,

Merci beaucoup au(x) développeur(s) et contributeur(s)....

Une petit remarque concernant l'activation du module "blocklayered" (navigation à facettes) sur le bo du module il est mentionné

"Avant d'activer cette option VOUS DEVEZ modifier votre fichier 'modules/blocklayered/blocklayered.js'

OU placer le fichier blocklayered.js modifié, dans le dossier 'themes/votre-thème/js/modules/blocklayered/'"

Mais quelle est la modification à faire ?

Cdt,

Merci encore pour le module

Mellow · July 30, 2013

Une petit remarque concernant l'activation du module "blocklayered" (navigation à facettes) sur le bo du module il est mentionné

"Avant d'activer cette option VOUS DEVEZ modifier votre fichier 'modules/blocklayered/blocklayered.js'

OU placer le fichier blocklayered.js modifié, dans le dossier 'themes/votre-thème/js/modules/blocklayered/'"

Mais quelle est la modification à faire ?

Le blocklayered.js modifié est à télécharger dans le message #18 du topic

Avec aussi quelques explications concernant les différentes versions de PS

skewo · August 3, 2013

Bonjour Mellow, désolé d'avoir pris du temps à revenir vers vous.

Alors de notre coté, il semble que tout fonctionne sur 1.4.5.1 excepté l'historique (blocklayered activé), lorsque l'on visite une fiche produit et que l'on retourne sur la product-list, on ne redescends plus à la page sur laquelle ont était.

Sinon, tout le reste est ok !

Tenez moi informé si vous avez également constaté ce bug.

Merci et bonne journée,

Cordialement,

Sune

ajnglagla · August 4, 2013

Is there any way to use "infinite scroll" on homepage?

Homefeatured is a module intended to display a few products. So it doesn't have pagination.

But there are several ways (modules) to enhance featured products display (slide shows, carrousels...)

ajnglagla · August 4, 2013

I just want endless scroll on homepage, it works perfect for category pages. but i need same for homepage.

Mellow · August 5, 2013

il semble que tout fonctionne sur 1.4.5.1 excepté l'historique (blocklayered activé), lorsque l'on visite une fiche produit et que l'on retourne sur la product-list, on ne redescends plus à la page sur laquelle ont était.

Bonjour,

C'est normal, cette fonctionnalité n'est pas gérable avec la navigation à facettes (à cause du mode de chargement initial parfois complexe de blocklayered)

Donc avec la navigation à facette, lorsqu'on recharge ou qu'on revient sur une page, la fenêtre défile jusqu'en haut et c'est la première page qui est affichée. (sauf lorsque le navigateur réaffiche la page à partir de son cache...)

Mellow · August 5, 2013

Is there any way to use "infinite scroll" on homepage?

I just want endless scroll on homepage, it works perfect for category pages. but i need same for homepage.

Yes, there is probably a way to do that, but surely not a simple way...

If you can find a way to display a category page inside your homepage half of the work will be done.

ysco · August 7, 2013

Hello Mellow,

I m using the latest version off your wonderful module on my test server now to see if all works correct but there is a small issue.

The older version that i had before on PS 1.4 worked without a problem but had less options then the latest version.

Congrats with this new version as i really like it and has some nice features

Well now about the problem.

On the iPad it works not correct, when you go down on category page then it takes some time before it shows the loading screen and it takes some time before it loads then the next set off products.

Also i had a few times after testing the module that instead it loads page 2 that it jumped to top again but page 2 was loaded when you scroll down again and when it try to loads page 3 same as before it jumped back to top.

Finally it seems after a few times jumping to top that infinityscroll does not work anymore, when refresh the page it worked again.

Any idea about these issues ?

Thanks.

Best regards,

ysco..

Mellow · August 7, 2013

On the iPad it works not correct, when you go down on category page then it takes some time before it shows the loading screen and it takes some time before it loads then the next set off products.

Also i had a few times after testing the module that instead it loads page 2 that it jumped to top again but page 2 was loaded when you scroll down again and when it try to loads page 3 same as before it jumped back to top.

Finally it seems after a few times jumping to top that infinityscroll does not work anymore, when refresh the page it worked again.

Hi ysco,

Sorry to hear that there are problems with tablets

I have only tested once on iPad, and I actually noticed a delay in the display, but I really don't see how it could be fixed...

But the jumping to top is a very strange issue !

Is it for categories with layered navigation that it happens ?

And on what version of iPad did you notice this behaviour ?

I will try to check this out, but unfortunately I don't own an iPad (nor any tablet or even a modern smartphone ) and its hard to check compatibility without the appropriate device.

Anyway, if it's really unusable on iPad (and so probably on some other tablets) it is best to disable the module also for tablets

in infiniteajax.php find

  	 if ($this->mobile_detect->isMobile() && !$this->mobile_detect->isTablet())
		$this->phone_device = true;

replace with

  	 if ($this->mobile_detect->isMobile())
		$this->phone_device = true;

ysco · August 7, 2013

Hello Mellow,

I have tested it on iPad 3 and probably the same issue as you mentioned, it has a delay and after some time the loading starts.

What do you mean exactly with layered navigation in categories ? You mean if my categories blok is layered ?

My categories pages uses grid and list feature could it be that it has to do something with that ?

I will test it also on a samsung smartphone and the iphone and a older iPad to see if the problem also persist on these devices, will let you know the results.

Will save your code for disable the function for smart devices , i assume that when changes this code it will show then normal pagination on the smart devices.

Still a wonderful module Mellow

Regards,

ysco..

Mellow · August 7, 2013

Hi,

I meant if you have activated the module with PS layered navigation module (blocklayered) and if it only happens on catégories that uses this feature.

But it doesn't seem to be the case...

It's interesting to know that you tested on an iPad 3 because my tests was with an iPad 4 and I didn't notice the jump to top problem.

Note that in the last versions the module is already disabled for phone devices (but not for tablets), so if you want to test on smartphones you will need to change this

in infiniteajax.php just comment or remove this line

  	 if ($this->isPhoneDevice()) return;

Regards

ysco · August 9, 2013

Hello Mellow,

Well after some testing with some idevices and other smartphone it is not working smooth so i changed the code like you suggested so that normal pagination shows on iPad as well.

This is not a big deal as it works just perfectly on PC, maybe you can fix it in future version

Only a question about a translation,

In BO in infinityscroll module there is no translation option for translate ^^page^^ that is show when it loads the next page to my own NL language, i know i manually could change that in .tpl but then the EN translation is not working.

How can i add translation the right way.

Thanks.

Best regards,

ysco..

Mellow · August 9, 2013

Sorry, it's an oversight from me, or maybe I thought the word page was the same in all languages...

To correct this :

in infiniteajax.php

after

              	 loadingtext: '".($loadingtext != '' ? addslashes($loadingtext) : '')."',

add

              	 pagetext: '".$this->l('Page')."',

and in jquery-ias.js

replace

      	 var interpage = $('<li id="ias_interpage" class="ajax_block_product"><span>Page ' + NextPage + EndPageNum + '</span></li>');

with

      	 var interpage = $('<li id="ias_interpage" class="ajax_block_product"><span>'+(opts.pagetext ? opts.pagetext  : 'Page')+' ' + NextPage + EndPageNum + '</span></li>');

And then translate the word in BO.

I will fix it next time

ysco · August 9, 2013

Hello Mellow

Thank you very much for the translation fix, will add it and see if it works

I said it before but again thanks for this away some module and support.

EDIT: Fix worked perfect.

Best regards,

ysco..

Edited August 9, 2013 by ysco (see edit history)

PrestaFanBoy · August 27, 2013

Initialement ce module a été créé sur ce topic http://www.prestasho...ilement-infini/ il y a déjà quelques mois.

Je me suis rendu compte que les modules commerciaux existants (et vendus parfois assez cher...) ne semblent pas faire mieux. Alors autant faire connaitre celui là...

Ce module permet donc une pagination automatique des listes de produits, les pages suivantes apparaissant en dessous au fur et à mesure du défilement de la page (façon facebook).

Le défilement infini est actif sur les pages qui affichent une liste de produits (page de catégorie, de fabricant, de fournisseur, page de recherche, nouveaux produits, promotions, meilleurs ventes)

Caractéristiques :

Compatible PS1.4 et PS1.5 (Testé sur PS 1.4.7 à 1.5.4.1)

Image de chargement et texte de chargement (v0.7) personnalisable dans la configuration du module.

Compatible avec le panier en ajax et la comparaison de produits. Les pages générées par le module conservent les fonctionnalités d'ajout au panier en ajax et de comparaison de produits. (ça ne semble pas être le cas sur les deux modules commerciaux que j'ai recensé)

Fonction de rappel configurable. Le module exécute une fonction javascript à la fin du chargement de chaque nouvelle page (justement pour conserver le panier ajax et la comparaison de produits) Si vous avez d'autres scripts actifs sur votre liste de produits (genre effet de survol en jquery) cette fonction peut être complétée dans la configuration du module.

A l'installation, le module est configuré pour le thème par défaut de Prestashop. Si vous utilisez un autre thème, et si ce thème possède une structure différente, vous pouvez configurer le module en fonction des éléments de votre thème. Les explications sont sur la page de configuration.

v0.8 : Le module est désactivé pour les téléphones portables, mais pas pour les tablettes (problème de compatibilité avec certains navigateurs mobiles)

v1.0 : Possibilité de limiter le chargement automatique à X pages, avec ensuite un lien manuel (configurable) pour charger les pages suivantes.

v1.0 : Possibilité d'ajouter un texte à afficher lorsque la dernière page est atteinte (avec un lien "Scroll to Top" optionnel)

v1.0 : A partir de cette version le module peut être compatible avec la navigation à facettes, à condition de modifier votre fichier blocklayered.js ou d'utiliser le fichier modifié fourni sur le post #18 (à ma connaissance aucun autre module de scroll infini pour Prestashop n'est compatible avec la navigation à facettes)

v1.2 : Affichage des numéros de page.

Le module a été créé à l'aide du plugin jquery Infinite Ajax Scroll https://github.com/w...ite-ajax-scroll

Merci à kickflowers d'avoir déniché ce plugin, et d'avoir proposé l'idée du module.

La configuration est en FR, EN, et ES.

infiniteajax_v1.1.zip

(26/05/2013 amélioration de la compatibilité avec la navigation à facettes)

Update v1.2 :

- Petite correction de compatibilité avec jquery 1.4.4 (pour les versions de Prestashop inférieurs à 1.4.9)

- Affichage des numéros de page (et du total si modif pagination.tpl)

infiniteajax_v1.2.zip

Je n'ai trouvé aucun moyen pour récupérer automatiquement le nombre total de pages avec javascript / jquery.

Pour avoir l'affichage du total de pages il faudra donc rajouter cette info dans un élément caché du fichier pagination.tpl :

juste après
{if $pages_nb > 1 AND $p != $pages_nb}
	{assign var='p_next' value=$p+1}
	<li id="pagination_next"><a {$no_follow_text} href="{$link->goPage($requestPage, $p_next)}">{l s='Next'} »</a></li>
{else}
	<li id="pagination_next" class="disabled"><span>{l s='Next'} »</span></li>
{/if}
ajouter
	<li id="pagination_nbpages" style="display:none;">{$pages_nb|intval}</li>

Hi,

This was the module I ve been looking for sometime. Thank you very much.

However, after I installed the latest version infiniteajax_1.2 in PS 1.5.3.1, I dont see any change in front office. Still pagination is there. Am I missing anything here?

Thanks for your suggestion.

PestaFanBoy

Edited August 27, 2013 by PrestaFanBoy (see edit history)

Mellow · August 28, 2013

after I installed the latest version infiniteajax_1.2 in PS 1.5.3.1, I dont see any change in front office. Still pagination is there. Am I missing anything here?

Hi,

If pagination is still present on category pages, search pages, new products, best sales... most probably it is a theme issue.

You should check if your theme has the same structure as the default one, and if no, change the settings in module configuration according to your theme's structure.

If pagination is only present on category pages, maybe you are using layered navigation module ?

If so, did you override blocklayered.js, and did you activate the module for layered navigation ?

But if you could provide a link it would be easier to check...

PrestaFanBoy · August 28, 2013

Hi,

If pagination is still present on category pages, search pages, new products, best sales... most probably it is a theme issue.

You should check if your theme has the same structure as the default one, and if no, change the settings in module configuration according to your theme's structure.

If pagination is only present on category pages, maybe you are using layered navigation module ?

If so, did you override blocklayered.js, and did you activate the module for layered navigation ?

But if you could provide a link it would be easier to check...

Hi Mellow,

Sorry for the delayed reply. Its nice to see your informative reply.

Yes, I do have layered navigation module installed.May be I need to do the list of changes you have suggested.

My shop is not yet live. I have attached the screenshots for my shop.

I noticed pagination still exist in category pages where layered navigation module is installed. And Infinite scroll is working in 'new products' page and 'search' page.

May be I need to do the changes that you have suggested to layered navigation block. Im using a custom layered navigation. So, if i override it, any impact on it.

Please suggest.

Thank you.

PrestaFanBoy

Edited August 28, 2013 by PrestaFanBoy (see edit history)

vekia · August 29, 2013

no worries, just "report" posts you want to hide - i will do that

sorry for offtopic.

PrestaFanBoy · August 29, 2013

Hi Mellow,

Sorry for the delayed reply. Its nice to see your informative reply.

Yes, I do have layered navigation module installed.May be I need to do the list of changes you have suggested.

My shop is not yet live. I have attached the screenshots for my shop.

I noticed pagination still exist in category pages where layered navigation module is installed. And Infinite scroll is working in 'new products' page and 'search' page.

May be I need to do the changes that you have suggested to layered navigation block. Im using a custom layered navigation. So, if i override it, any impact on it.

Please suggest.

Thank you.

PrestaFanBoy

Hi,

I see huge space between two pages where page number is indicated. How Can I remove this. I tried but it didnt work.

Thanks for any suggestion.

PrestaFanBoy

Mellow · August 29, 2013

Hi PrestaFanBoy,

I don't know what you mean by "Im using a custom layered navigation"

But If you use a compatible version of blocklayered (PS from 1.4.9 to 1.5.4) and if you haven't made previous modifications to blocklayered.js, you can safely override it as described in this post (in french)

For the space under page number you can set this div to a fixed height.

in /modules/infiniteajax/css/jquery.ias.css add

#ias_interpage {
height: 12px !important;
}

Edited August 29, 2013 by Mellow (see edit history)

PrestaFanBoy · August 30, 2013

Hi PrestaFanBoy,

I don't know what you mean by "Im using a custom layered navigation"

But If you use a compatible version of blocklayered (PS from 1.4.9 to 1.5.4) and if you haven't made previous modifications to blocklayered.js, you can safely override it as described in this post (in french)

For the space under page number you can set this div to a fixed height.

in /modules/infiniteajax/css/jquery.ias.css add
#ias_interpage {
height: 12px !important;
}

Hello Mellow,

Thanks for your reply.

I did the css change. And I override the blocklayered.js in modules/blocklayered/ but it didnt work for my categories.

The Ajax loader is trying to load but again page numbers are getting appeared again. At any point, I can only see either #1 or #2..but not other pages. Strange behavior.

I can give my backoffice access if it is possible to check it.

No clue what might be the err.

Thanks for suggestion.

PrestaFanBoy

PrestaFanBoy · August 30, 2013

Hello Mellow,

Thanks for your reply.

I did the css change. And I override the blocklayered.js in modules/blocklayered/ but it didnt work for my categories.

The Ajax loader is trying to load but again page numbers are getting appeared again. At any point, I can only see either #1 or #2..but not other pages. Strange behavior.

I can give my backoffice access if it is possible to check it.

No clue what might be the err.

Thanks for suggestion.

PrestaFanBoy

Hi Mellow,

Im sorry, I placed the file in public_html/modules/blocklayered wrongly.

Now, I put the file in theme/js/blocklayered/ and it is working good.

Thank you very much once again.

PrestaFanBoy

PrestaFanBoy · September 2, 2013

Hi Mellow,

Im sorry, I placed the file in public_html/modules/blocklayered wrongly.

Now, I put the file in theme/js/blocklayered/ and it is working good.

Thank you very much once again.

PrestaFanBoy

Hello Mellow,

I was testing this module for a while. I noticed a inconsistent spacing between the products when Infinite scrolling is ON. And it is getting right in pagination mode.

Im not sure what I have missed, tried to check it..but couldnt

I have attached screenshots for my shop.

My shop URL: www.omytus.com

It would be great help if you can guide me in right direction so that I can investigate further..

Thank you.

PrestaFanBoy

Edited September 2, 2013 by PrestaFanBoy (see edit history)

PrestaFanBoy · September 3, 2013

Hello Mellow,

I was testing this module for a while. I noticed a inconsistent spacing between the products when Infinite scrolling is ON. And it is getting right in pagination mode.

Im not sure what I have missed, tried to check it..but couldnt

I have attached screenshots for my shop.

My shop URL: www.omytus.com

It would be great help if you can guide me in right direction so that I can investigate further..

Thank you.

PrestaFanBoy

Hi Mellow,

I have noticed one more thing while testing. When "instant search' is turned on...pagination still there again. And in one of my page, its odd.

I have attached a screenshot.

Is there any workaround for this..hopefully.

Thank you very much.

PrestaFanBoy

Edited September 3, 2013 by PrestaFanBoy (see edit history)

Mellow · September 3, 2013

I have noticed one more thing while testing. When "instant search' is turned on...pagination still there again. And in one of my page, its odd.

Oh that's true, I had not noticed this !

But unfortunately I can only say that this module is not compatible with instant search feature.

As instant search generates product lists "on the fly" I can see no way to implement an infinite scroll on these lists.

Actually, you will have to make a choice : infinite scroll OR instant search

PrestaFanBoy · September 3, 2013

Oh that's true, I had not noticed this !

But unfortunately I can only say that this module is not compatible with instant search feature.

As instant search generates product lists "on the fly" I can see no way to implement an infinite scroll on these lists.

Actually, you will have to make a choice : infinite scroll OR instant search

Hi Mellow,

Thanks for your reply.

Thats sad part that it cant be implemented for instant search.

Is there any workaround for spacing issue..I couldnt get around it..no clue whats going on..only for some products, there is no space between them.

PrestaFanBoy

Edited September 3, 2013 by PrestaFanBoy (see edit history)

Mellow · September 3, 2013

This occurs when page number is inserted between product rows, and it's due to the way your theme displays the rows.
The only workaround I can see is to modify a bit your css.
in /themes/your-theme/css/alysum.css
change

div.view_grid ul#product_list li {
    width:164px;
    height:362px;
    float:left;
    margin-right:20px;
    position:relative;
}

to

div.view_grid ul#product_list li {
    width:164px;
    height:362px;
    float:left;
    margin-right:15px;
    position:relative;
}

and change

@media (min-width: 1024px) {
    div.view_grid ul#product_list li:nth-child(4n+4) {
        margin-right:0px;
    }
}

to

@media (min-width: 1024px) {
    div.view_grid ul#product_list li:nth-child(4n+4) {
        margin-right:15px;
    }
}

This is not perfect but it's the best I can do...

PrestaFanBoy · September 3, 2013

This occurs when page number is inserted between product rows, and it's due to the way your theme displays the rows.

The only workaround I can see is to modify a bit your css.

in /themes/your-theme/css/alysum.css

change
div.view_grid ul#product_list li {
    width:164px;
    height:362px;
    float:left;
    margin-right:20px;
    position:relative;
}
to
div.view_grid ul#product_list li {
    width:164px;
    height:362px;
    float:left;
    margin-right:15px;
    position:relative;
}
and change
@media (min-width: 1024px) {
    div.view_grid ul#product_list li:nth-child(4n+4) {
        margin-right:0px;
    }
}
to
@media (min-width: 1024px) {
    div.view_grid ul#product_list li:nth-child(4n+4) {
        margin-right:15px;
    }
}
This is not perfect but it's the best I can do...

Thank you Mellow.

Im impressed with this module, so dont want to remove. Instead thinking about removing ias_interpage if that solves spacing issue.

Is that correct..

How I can take away ias_interpage. I remember I did this once few days ago while testing, couldnt recollect it again..sorry for poor memory.

Thank you.

PrestaFanBoy

Mellow · September 4, 2013

Yes, removing page display will fix the spacing issue.

So you can use previous version (v1.1) of the module (or just take jquery-ias.js from previous version)

PrestaFanBoy · September 4, 2013

Yes, removing page display will fix the spacing issue.

So you can use previous version (v1.1) of the module (or just take jquery-ias.js from previous version)

Thank you..Mellow.

I like your helping hands..

PrestaFanBoy

restefano · September 9, 2013

MERCI !!!

I was just trying trying to adapt this exact JQuery wonderful component to Prestashop and, after hours having some troubles, luckly found your awesome work !

Many, many thanks !

Worked like a charm in my personalized template on Prestashop 1.5.4.1.

You can see it working at www.glossyme.com.br.

Awesome !

Ricardo

bera_ramazan · September 9, 2013

thanks for module

EnergieZ · September 13, 2013

Génial !

Marche du premier coups, malgré mon thème custom (qui garde les même id que le thème de base).

Un grand merci, c'est 2-3 heures de dev économisé, sans compter que c'est bien plus flexible grâce au panneau d'admin

Raph59 · September 26, 2013

J'utilise toujours autant le module et il est toujours aussi génial

Juste une question, certain client trouve cela embêtant que lorsqu'il entre dans un produit, puis qu'ils reviennent en arrière, qu'il se retrouve tout en haut de la liste et qu'il faut tout redescendre.. quelqu'un à trouver une solution ? moi perso avec la navigation à facette activé je doit désactiver l'historique de navigation (il ajoute automatiquement #/page-x n descendant) sinon la navigation à facette ne fonctionne plus correctement.

Merci

Emzed · October 20, 2013

Had a quick look. Good work!

botmez · October 24, 2013

Fonctionne pour les branches 1.3.1 de prestashop ?

ShowYou · November 5, 2013

Bonjour,

Avec la version 1.2 du module sur PS1.5.6, cela fonctionne avec le thème par défaut et pas le thème customisé.

J'ai mis dans le thème customisé les fichiers product_list.tpl et pagination.tpl du module par défaut mais cela ne change rien.

Apparemment dans le thème customisé,la fonction infinitiajax n'est pas appelé.

Cela vient du thème pas du module Navigation à facette.

Le site n'est pas encore en production. Quels fichiers dois-je regarder pour résoudre le problème ?

Mellow · November 6, 2013

Avec la version 1.2 du module sur PS1.5.6, cela fonctionne avec le thème par défaut et pas le thème customisé.

J'ai mis dans le thème customisé les fichiers product_list.tpl et pagination.tpl du module par défaut mais cela ne change rien.

Apparemment dans le thème customisé,la fonction infinitiajax n'est pas appelé.

Cela vient du thème pas du module Navigation à facette.

Le site n'est pas encore en production. Quels fichiers dois-je regarder pour résoudre le problème ?

Bonjour,

Difficile à dire sans connaitre la structure du thème en question...

Mais il se peut que certains fichiers ne portent pas le même nom que dans le thème par défaut (product-list.tpl / product_list.tpl)

Voir quel fichier est effectivement appelé dans category.tpl, ensuite c'est la structure de ce fichier qu'il faudra regarder.

rrcholic · November 11, 2013

Hello,

I finally found what I'm looking for, but I have an issue...

I've installed this module, it does work, but, I have another module that shows discount countdown on each item in product_list called Countdown Specials.

this countdown module loads a Javascript on each item via tpl file.

On the 1st page, there's nothing wrong, but on the ajax page that loaded by Infinite Scroll module, the div container for the countdown timer is loaded but not the javascript.

can I somehow make this Infinite Scroll module loads a javascript on every item it renders?

FYI :

countdown.tpl

<div class="cspec">

{foreach from=$productlist item=productd}

{if $productd.id_product eq $product.id_product}

{literal}

<script type="text/javascript">

$(function () {

$('#defaultCountdownhp{/literal}{$productd.id_product}{literal}').countdown({

		 until: new Date({/literal}{$productd.reduction_to|date_format:"%Y"}{literal},{/literal}{$productd.reduction_to|date_format:"%m"}{literal}-1,{/literal}{$productd.reduction_to|date_format:"%d"}{literal},{/literal}{$productd.reduction_to|date_format:"%H"}{literal},{/literal}{$productd.reduction_to|date_format:"%M"}{literal},{/literal}{$productd.reduction_to|date_format:"%S"}{literal}),

		 timeSeparator: ':',

		 format: 'DHMS',

		 compact: true,

		 compactLabels:['y', 'm', 'w', '{/literal}{l s=' Days' mod='countdownspecials'}{literal}'],

		 labels: ['{/literal}{l s='Years' mod='countdownspecials'}{literal}', '{/literal}{l s='Months' mod='countdownspecials'}{literal}', '{/literal}{l s='Weeks' mod='countdownspecials'}{literal}', '{/literal}{l s=' Days' mod='countdownspecials'}{literal}', '{/literal}{l s='h' mod='countdownspecials'}{literal}', '{/literal}{l s='m' mod='countdownspecials'}{literal}', '{/literal}{l s='s' mod='countdownspecials'}{literal}'],

		  labels1:['{/literal}{l s='Year' mod='countdownspecials'}{literal}', '{/literal}{l s='Month' mod='countdownspecials'}{literal}', '{/literal}{l s='Week' mod='countdownspecials'}{literal}', '{/literal}{l s=' Days' mod='countdownspecials'}{literal}', '{/literal}{l s='h' mod='countdownspecials'}{literal}', '{/literal}{l s='m' mod='countdownspecials'}{literal}', '{/literal}{l s='s' mod='countdownspecials'}{literal}'],

		});



});

</script>


{/literal}

 <div id="defaultCountdownhp{$productd.id_product}" class="hasCountdownOri"></div>

{/if}

{/foreach}
</div>

and I just included this file in my product_list.tpl with smarty

<div style="padding: 0px; width: 100%">
 {include file="$tpl_dir/../../modules/countdownspecials/countdownspecials-list.tpl"}
</div>

Update:

I moved the code above directly to the product_list.tpl but the Javascript still not redered on the ajax page

Edited November 11, 2013 by rrcholic (see edit history)

takapa · November 11, 2013

A la lecture du premier post j'ai bavé !

Ca fait je ne sais combien de temps que j'essaie de créer ce module, mes maigres connaissances en dev ne m'ont mener que vers une impasse. Et je tombe sur ce post !

Évidement je me suis dépêché de télécharger le dit module et de l'installé.

Lorsque je vire la navigation à facette tout fonctionne pour le mieux sauf que l'image de loader prend environs la taille de l'écran et que ça fait moche, mais ça c'est modifiable je suppose.

Par contre avec la navigation c'est la cata.

Evidemment j'utilise la nav sur mon site, et difficile de s'en passé :'(

En fait le loader se déclenche bel et bien mais au lieu de m'afficher le reste de la page il scroll au top et m’affiche la page n°2... Frustration

J'ai bien essayer ton fichier post 18 mais étant en 1.5.6 avec un blocklayered 1.8.9. Ça n'a pas l'air de fonctionné malheureusement (surement un blocklayered.js à modifié mais j'ai pas compris ta modif)

Je te remercie, ton module à l'air super et visiblement il fonctionne chez les autres. Continue comme ça !

Mellow · November 12, 2013

I've installed this module, it does work, but, I have another module that shows discount countdown on each item in product_list called Countdown Specials.

this countdown module loads a Javascript on each item via tpl file.

On the 1st page, there's nothing wrong, but on the ajax page that loaded by Infinite Scroll module, the div container for the countdown timer is loaded but not the javascript.

can I somehow make this Infinite Scroll module loads a javascript on every item it renders?

Hello rrcholic,

I don't know this module, but I watched the code you provided and I'm afraid there is no way to load this kind of script.

Moving the code will not change anything, because the javascritps executed with the new page are not kept "alive" when the product list is extracted. Thats why we have a OnRenderComplete function.

But the OnRenderComplete function is fired only after the entire set of items is loaded and rendered in the page. Not for each item.

Moreover, this module runs a script based on Smarty calculations (ex: {/literal}{$productd.reduction_to|date_format:"%m"}{literal}), in a Smarty foreach loop. And also the Smarty variables loaded with the new page are not available after the new items are extracted.

So I can't see no way to perform these actions on the new pages (even if it was possible to run a script for each new item loaded).

In fact, I think these two modules can't work together...

Mellow · November 12, 2013

Lorsque je vire la navigation à facette tout fonctionne pour le mieux sauf que l'image de loader prend environs la taille de l'écran et que ça fait moche, mais ça c'est modifiable je suppose.

Par contre avec la navigation c'est la cata.

En fait le loader se déclenche bel et bien mais au lieu de m'afficher le reste de la page il scroll au top et m’affiche la page n°2... Frustration

J'ai bien essayer ton fichier post 18 mais étant en 1.5.6 avec un blocklayered 1.8.9. Ça n'a pas l'air de fonctionné malheureusement (surement un blocklayered.js à modifié mais j'ai pas compris ta modif)

Bonjour takapa,

Alors, je viens de tester le module sur une installation toute fraiche de PS1.5.6 et ça marche chez moi !

Par contre je me suis rendu compte que depuis PS1.5.5 il y a eu des modifs sur la pagination et sur la navigation à facettes.

- L'identifiant de la barre de pagination du bas dans l'affichage des catégories a été modifié.

- Et un override de blocklayered.js a été rajouté dans le thème (en rapport avec cette nouvelle pagination).

Si bien que dans ton cas :

Utilise-tu le thème par défaut ? Et n'aurais-tu pas placé le blocklayered.js modifié directement dans /modules/blocklayered/ ?

- Si c'est le cas, le fichier n'est pas pris en compte dans PS1.5.6, parce qu'il existe déjà un override de blocklayered.js dans /theme/default/js/modules/blocklayered/. Et c'est à cet endroit qu'il faudra placer le blocklayered.js modifié pour que ça marche.

- Si tu n'utilise pas le thème par défaut, il faudra placer le fichier dans /theme/ton-theme/js/modules/blocklayered/

- Si malgré ça le problème persiste, alors il y a peut-être un souci avec ton thème...

Au final, le module fonctionne quand même avec PS 1.5.5 et 1.5.6 (y compris avec la navigation à facettes)

Mais le seul problème constaté, c'est la barre de navigation du bas qui reste apparente et peut provoquer une erreur 404 si on clique dessus.

Il va donc falloir que je modifie un peu le module pour tenir compte de cette nouvelle pagination à partir de PS1.5.5

Je me penche la dessus des que possible...

rrcholic · November 13, 2013

Hello rrcholic,

I don't know this module, but I watched the code you provided and I'm afraid there is no way to load this kind of script.

Moving the code will not change anything, because the javascritps executed with the new page are not kept "alive" when the product list is extracted. Thats why we have a OnRenderComplete function.

But the OnRenderComplete function is fired only after the entire set of items is loaded and rendered in the page. Not for each item.

Moreover, this module runs a script based on Smarty calculations (ex: {/literal}{$productd.reduction_to|date_format:"%m"}{literal}), in a Smarty foreach loop. And also the Smarty variables loaded with the new page are not available after the new items are extracted.

So I can't see no way to perform these actions on the new pages (even if it was possible to run a script for each new item loaded).

In fact, I think these two modules can't work together...

Hello Mellow,

thanks for your reply and epic explanation!

Its sad, I loved this module, really do, but I have to let it go... I think I need a few packs of tissue to wipe my tears now... lol

thanks for making this module guys.

Keep up the good work (:

Mellow · November 15, 2013

Update v1.3

Compatibilité PS1.5.5 et 1.5.6 (nouvelle gestion de la pagination des catégories) Voir post #1

Pour ceux qui utilisent la navigation à facettes il y a aussi un nouveau blocklayered.js modifié. Voir post #18

meditation · November 16, 2013

Bonjour,

j'ai testé la v1.3 sur ps 1.5.6, avec le blocklayered activé, il y a un petit problème chez moi, car la première page est toujours chargée 2 fois avec une erreur comme: Page undefined / 4. mais les pages suivantes sont correctes avec une pagination normal Page 2 / 4...

Si vous pouvez jetez un coup d'oeil?

par contre c'est un très bon travail, bravo pour votre contribution.

cdlt

Mellow · November 16, 2013

j'ai testé la v1.3 sur ps 1.5.6, avec le blocklayered activé, il y a un petit problème chez moi, car la première page est toujours chargée 2 fois avec une erreur comme: Page undefined / 4. mais les pages suivantes sont correctes avec une pagination normal Page 2 / 4...

Bonjour,

Désolé, mais je n'ai pas réussi à reproduire ça.

- Est-ce une nouvelle installation de PS1.5.6 ou une mise à jour ?

- S'agit-il du thème par défaut ? Modifié ?

- Si il y a eu mise à jour, depuis quelle version ? Le thème a t-il été mis à jour également ? (Ainsi que le module blockayered ?)

Je soupçonnerais bien un problème de thème, mais sans un lien pour constater il est difficile de se faire une idée précise...

meditation · November 17, 2013

Bonjour Mellow

Ce problème vient de mon thème, j'ai testé sans problème avec le thème par défaut, merci de votre réponse en tout cas.

cdlt

Mellow · November 17, 2013

OK, merci de la confirmation

Matrix-Kuban · November 26, 2013

Translation into Russian. Add this. For v1.3

translations.zip

Mellow · November 27, 2013

Translation into Russian. Add this. For v1.3

Thanks for sharing

Link added to the main post

Matrix-Kuban · November 27, 2013

Thanks for sharing

Link added to the main post

S'il vous plaît, remplacez 'Traduction Russe' par 'Русский перевод'. Pour les utilisateurs russes.

P.S: Excusez de la langue, si quelque chose est incorrect. Ce Google Translate.

Mellow · November 28, 2013

OK, it's done

Matrix-Kuban · November 28, 2013

OK, it's done

Thanks! And thanks for Module

flohen · December 28, 2013

Bonjour Top le module

merci

Edited December 28, 2013 by flohen (see edit history)

Tchupa · December 28, 2013

Bonjour,

j'étais sur la version 0.8 de votre module sous prestashop 1.4.9.0

J'ai mis à jour ma boutique vers la version 1.4.11.0 et de ce fait je me suis dis que j'allais aussi mettre à jour votre module vers la version 1.2

Mais quand je passe sur la 1.2 j'ai une page blanche à la place de la page article.

Si je regarde mes logs apache j'ai ce message d'erreur:

PHP Fatal error:  Cannot redeclare class Mobile_Detect in /www/modules/infiniteajax/Mobile_Detect.php on line 34

Auriez vous une idée d’où cela peut provenir?

Mellow · January 2, 2014

Bonjour Tchupa,

Il semble que tu ais activé le module Thème mobile sur ton site.
Effectivement, je n'avais pas pris en compte ce module (qui apparemment n'est livré par défaut qu'avec les versions 1.4.10 et 1.4.11)

Tu peux télécharger la version 1.3.1 ou j'ai corrigé cette erreur

infiniteajax_v1.3.1.zip

jerou · January 6, 2014

I m having an issue with the 1.3.1 version of this module of my installation of prestashop 1.5.6 i have modified the blocklayered.js file but when i configure and activate the module and i go to a category page it loads but it never stops to load and no more products are displayed. Here is an example page of the issue on my beta website: http://beta.jsfrance.com/index.php?id_category=10&controller=category

Some help would be very appreciated. Thanks a lot.

Mellow · January 6, 2014

I m having an issue with the 1.3.1 version of this module of my installation of prestashop 1.5.6 i have modified the blocklayered.js file but when i configure and activate the module and i go to a category page it loads but it never stops to load and no more products are displayed. Here is an example page of the issue on my beta website: http://beta.jsfrance.com/index.php?id_category=10&controller=category

Some help would be very appreciated. Thanks a lot.

I can't acces your site, it is in maintenance mode...

But didn't you place the modified blocklayered.js in /modules/blocklayered/ ?

If so, it is not the right place.

The file must be placed in /themes/name-of-your-theme/js/modules/blocklayered/

yomas · January 7, 2014

Hi there !!

Thank you for that great module !!!

I encounter some issue I can't fix :'(

- It's working just once : I can access to page2, but then the "see more products" button doesn't load for page 3...

- And if filter is selected the same button doesn't appear at all...

I'm using a custom theme, but things seems to be well configured.

- Classes of product list and product item are OK

- I overrided blocklayered.js in my theme and deleted the one in the default theme

I activated the PS_MODE_DEV to see but I have no php neither js error...

If someone can just have a quick look please ?

Here's the shop :

http://www.albertine-swim.com/dvlpt/index.php?id_category=6&controller=category&id_lang=1

Thanks in advance ^^

EDIT : I'm using product pack should the issue it come from here ?

PS : j'aurais pu écrire en français mais tellement l'habitude de poster en anglais sur les forums ^^

Merci pour ce module (enfin si j'arrive à le faire fonctionner ^^) !!

Edited January 7, 2014 by yomas (see edit history)

jerou · January 7, 2014

I can't acces your site, it is in maintenance mode...

But didn't you place the modified blocklayered.js in /modules/blocklayered/ ?

If so, it is not the right place.

The file must be placed in /themes/name-of-your-theme/js/modules/blocklayered/

Sorry for that now you have access to the site it is no more in maintenance mode.

I have placed the blocklayered.js file in the /themes/name-of-your-theme/js/modules/blocklayered/ directory and i think i have set up well the classes for the product list but it still not working the page keeps loading but nothing happens....

Mellow · January 7, 2014

Heuuu... les gars, j'ai comme l'impression qu'on est 3 français à discuter en anglais sur un forum français... Pas banale comme situations
Si un modérateur passe par là on va se faire taper sur les doigts (déjà qu'on vient de me faire la remarque sur le forum anglais...)

Alors si vous le voulez bien, continuons dans la langue de Molière ( moi je préfère )

I have placed the blocklayered.js file in the /themes/name-of-your-theme/js/modules/blocklayered/ directory and i think i have set up well the classes for the product list but it still not working the page keeps loading but nothing happens....

Désolé mais le blocklayered.js de ton thème semble être toujours l'original...
Si tu as effectué le bon remplacement, il y a peut-être un problème de cache. (à supprimer ou recompiler, mais c'est un domaine que je ne maitrise pas trop...)
De plus le module ne semble pas être activé sur ton site pour le moment, je n'en vois aucune trace dans le code source...
PS : If you really don't speak french, please tell me.

- It's working just once : I can access to page2, but then the "see more products" button doesn't load for page 3...
- And if filter is selected the same button doesn't appear at all...
- Classes of product list and product item are OK
- I overrided blocklayered.js in my theme and deleted the one in the default theme

Hé bien... pareil que jerou !

Le blocklayered.js de ton thème est toujours l'original, et le module ne semble pas activé pour le moment...

En plus ils y a déjà un module (ou un composant du thème...) "seemore" sur tes pages pour charger d'autres produits à la suite. Il est clair que si cette fonction est activée il y aura conflit avec le module infiniteajax, puisque les deux font à peu près la même chose.

Edited January 8, 2014 by Mellow (see edit history)

yomas · January 8, 2014

Re!!

Non en fait j'ai désactivé le module car trop buggy (sûrement à cause du thème...) mais ça m'aurait pris trop de temps à debugguer...

J'ai opté pour une autre solution : je récupère la liste des produits dans un tableau json, et je chargerait les produit dans le dom au fur et à mesure..

Comme ça pas de soucis avec la navigation à facette et pas de rechargement ajax ;-)

Mon tableau json est reconstruis à chaque fois qu'un filtre de la navigation est activé.

Seul hic c'est pas générique et trop long pour coder un module en ce sens mais je posterais la méthode pour ceux que cela intéresse;-)

jerou · January 8, 2014

Je parles Francais en fait desole j'avais l'habitude d'ecrire en Anglais sur les forums ^^

Effectivement j'avais desactive le module car il buggait trop mais la je l'ai reactivé j'ai bien refait la modif du blocklayered.js mais le probleme reste le meme. Le loading tourne en boucle...

Pourrais-tu rejeter un coup d'oeuil s'il te plait maintenant que je l'ai reactive et que le bug est visible? Merci

Mellow · January 8, 2014

@Yomas

OK, je comprend mieux. Ta méthode est sympa aussi, et ce sera surement plus pratique à implémenter qu'avec un script externe comme le fait ce module. En tout cas ça a l'air de bien fonctionner.

@Jerou

On a du encore se croiser car en retournant sur le site je n'ai pas constaté de changements...

Je t'ai envoyé un MP.

yomas · January 9, 2014

Re all ^^

Voilà un aperçu de la méthode, maintenant ça a été fait dans l'urgence, donc cela peut être largement optimisé et "généralisé ^^

Je commence par récupérer toutes les infos dont j'ai besoin dans un tableau smarty (php) :

	{foreach from=$products item=product name=products}
      {$jsonproducts[]= [
         'product_link'=>{$product.link|escape:'htmlall':'UTF-8'},
         'product_name'=>{$product.name|escape:'htmlall':'UTF-8'},
         'product_name_short'=>{$product.name|escape:'htmlall':'UTF-8'|truncate:35:'...'},
         'product_legend'=>{$product.legend|escape:'htmlall':'UTF-8'},
         'product_new'=>{isset($product.new) && $product.new == 1},
         'product_image_link'=>{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')},
         'product_image_width'=>{$homeSize.width},
         'product_image_height'=>{$homeSize.height},
         'product_on_sale'=>{"{if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class='on_sale'>{l s='On sale!'}</span>{/if}"},
         'product_reduction'=>{"{if isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class='discount'>{l s='Reduced price!'}</span>{/if}"},
         'product_price'=>{"{if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}{/if}"}
      ]}
		
	{/foreach}

Et ensuite je passe par json pour traiter les données en objet :

<script>
   var jsonproductlist = {$jsonproducts|@json_encode};
</script>

Reste plus qu'à reconstruire le dom en javascript ^^

Je détaille pas tout car chacun son theme et donc sa méthode, pour exemple voici mon code :

      <script>
         var jsonproductlist = {$jsonproducts|@json_encode};
         //je récupère le nombre de colonnes (paramètres de mon thème)
         //je me sert de bootstrap 2 donc j'ai besoin de crée des row-fluid
         var cols = parseInt({Configuration::get('productlistcols')});
         
         //ici je commence à créer mes blocks
         function displayProduct(parent,product){                  
            var center_block = $('<div class="center_block"/>');
            var right_block = $('<div class="right_block"/>');
            
            var conteneur = $('<div/>')
                    .addClass(product.class)
                    .append(center_block)
                    .append(right_block)
                    .wrapInner('<div class="list-products"><div class="product-container clearfix"/></div>')
                    .hide();

            //Puis petit à petit je re-crée mes éléments (ici le lien)            
            var product_link = $('<a/>').attr({
                     'title'  : product.product_name,
                     'href'   : product.product_link.replace(/&/g , '&')
            });
                    
            var product_img = $('<img/>');
            if(parseInt(product.product_image_width) > 0 && parseInt(product.product_image_height) > 0) $(product_img).attr({
                    'width'   : product.product_image_width,
                    'height'  : product.product_image_height
                 });
            $(product_img).attr({
                    'data-original'  : product.product_image_link,
                    'alt'  : product.product_name
                 });
            product_img.addClass('lazy');

            product_link
                    .clone()
                    .addClass('product_img_link')
                    .append($(product_img))
                    .appendTo($(center_block));
            
            $(product_link).text(product.product_name_short);

            $('<h3/>')
                    .addClass('s_title_block')
                    .html(product.product_on_sale,product.product_reduction)
                    .prepend($(product_link))
                    .appendTo($(right_block));

            $('<div/>')
                    .addClass('content_price')
                    .html(product.product_price)
                    .appendTo($(right_block));
            
            $(conteneur).appendTo($(parent)).fadeIn();
         }
                  
         $(document).ready(function(){
            row = 0;
            index = 0;

            function displayProducts(from,to){
               for(i=from;(i < to && i < jsonproductlist.length);i++){
                  if(i % cols == 0) row = $('<div/>').addClass('row-fluid').appendTo($('#product_list > .rows-fluid'));
                  index++;
                  displayProduct($(row),jsonproductlist[i]);                  
               }                
            }
            
            displayProducts(0,9);         
            
            $('#seemore').click(function(){
               displayProducts(index,(index+9));
               if(index >= jsonproductlist.length) $(this).hide();
               
            });
            
            
            
         });
         
      </script>

Voilà pour ceux que ça intéresse ^^

Attention c'est pas de l'infinite scroll !!!

J'ai juste paramétrer dans le BO pour que le nombre de produits à afficher soit grand (5000),

et je charge les produits dans le dom au fur et à mesure.

L'avantage est que je ne charge que le nombre de produits souhaité dans le dom, le reste des produits étant stocké dans mon tableau $jsonproducts.

C'est donc pas trop lourd à chargé, et j'évite les soucis de rechargements Ajax : lenteur et compat avec la navigation çà facette.

Voilà c'est un peu codé à l'ancienne avec les pieds mais au moins ça fonctionne parfaitement ^^

Vous êtes bien entendus le bienvenus pour des conseils et/ou améliorations.

Par exemple je sais déjà que pour faire plus propre je pouvais directement récupérer mes produits en json au lieu de passer par un tableau php mais bon...

@++

Mellow · January 11, 2014

Voilà un aperçu de la méthode, maintenant ça a été fait dans l'urgence, donc cela peut être largement optimisé et "généralisé ^^

Merci du partage, je pense que ça pourra intéresser du monde.

J'ai juste un doute concernant la façon dont les moteurs de recherche verront tes pages, vu qu'il n'y a plus du tout de pagination (avec le module les liens des différentes pages restent présentes dans le code source, même si il ne sont pas affichés)

Là je me demande si les moteurs ne verront pas une seule page avec 9 produits ?

A vérifier peut-être en surveillant le référencement...

Je rencontre un problème avec la fonction onRenderComplete

Edit : Problème résolu en modifiant mon code :

J'aime bien quand on pose une question et qu'on apporte soi-même la réponse, avant que les autres n'ai eu le temps de se creuser les méninges (il y en beaucoup qui oublient totalement leur question une fois qu'ils ont trouvé une solution...)

Merci donc pour la question et pour la solution, ça pourra servir à d'autres

Fred A · January 22, 2014

Bonjour, je suis en train de finaliser ma version 1.5.6. Ce module est il compatible ? Merci.

Mellow · January 25, 2014

Oui, le module est compatible avec PS1.5.6, mais attention à la compatibilité de vos thèmes.

Certains thèmes n'ont pas été mis à jour pour les petites modifs intervenues dans la pagination depuis PS1.5.5.

Il faudra parfois remplacer le pagination.tpl de votre thème par celui du theme par défaut...

White Lion · January 27, 2014

Hello all

this is very useful module. I'd like to thanks to you.

Is this working with Chrome Browser?

Maxxx33 · February 7, 2014

Hello all

this is very useful module. I'd like to thanks to you.

Is this working with Chrome Browser?

Yes It is!

Bonjour à tous,

Premièrement, MERCI beaucoup pour ce module!

J'ai téléchargé, installé et paramétré ce module et tout fonctionne bien du moment que la navigation a facette (blocklayered) n'est pas activée...

Voici mon problème :

Lorsque IAS et la navigation a facette sont activées, j'arrive a charger les 2 premières pages puis le message de fin apparaît... (alors qu'il me reste 180 produits a charger)

J'ai tenté pas mal de paramétrages et rien n'y fait.

Je m'en remet a vous... Car là, je suis complètement planté! A votre avis, d'où vient mon problème?

Quelques infos pouvant vous êtres utile a m'aider a trouver :

- Je tourne sous PRESTASHOP 1.5.6.1

- J'ai bien remplacé le fichier blocklayered.js dans theme/nom_de_mon_theme/js/module/blocklayered

- Mon ID de la liste produit et ma Class de block produit sont ceux par défaut

- Mon ID de pagination se nomme "pagination_bottom"

- Mon ID de buton suivant est "pagination_next_bottom"

- J'utilise un thème personnalisé (sur la base du théme AUTUMN) : http://themes.withinpixels.com/autumn/

Merci pour vos retours!

[MODULE] Infinite Ajax Scroll - Défilement Infini en Ajax

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment