Jump to content

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


Mellow

Recommended Posts

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>
post-344943-0-84658200-1368496888_thumb.png post-344943-0-97843200-1374159174_thumb.png post-344943-0-09553400-1368496896_thumb.png post-344943-0-33536800-1368496902_thumb.png Edited by Mellow (see edit history)
  • Like 8
Link to comment
Share on other sites

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 by Raph59 (see edit history)
Link to comment
Share on other sites

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..

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 3 weeks later...
  • 3 weeks later...

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

Link to comment
Share on other sites

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... :blink:

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

Link to comment
Share on other sites

Salut Fehmi135,

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

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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...)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by Mellow (see edit history)
Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 2 weeks later...

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à :P

 

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 ?

Link to comment
Share on other sites

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)

Link to comment
Share on other sites

  • 2 weeks later...
  • 3 weeks later...
  • 2 weeks later...

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...)

Link to comment
Share on other sites

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)

post-344943-0-97843200-1374159174_thumb.png

Link to comment
Share on other sites

  • 2 weeks later...

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 :)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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...)

Link to comment
Share on other sites

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...)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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..

Link to comment
Share on other sites

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;

Link to comment
Share on other sites

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..

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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..

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 3 weeks later...

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>

 

 

post-344943-0-97843200-1374159174_thumb.png post-344943-0-84658200-1368496888_thumb.png post-344943-0-09553400-1368496896_thumb.png post-344943-0-33536800-1368496902_thumb.png

 

 

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 by PrestaFanBoy (see edit history)
Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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

post-494308-0-90798200-1377731847_thumb.png

post-494308-0-38305500-1377731858_thumb.png

Edited by PrestaFanBoy (see edit history)
Link to comment
Share on other sites

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

post-494308-0-59292600-1377768890_thumb.png

Link to comment
Share on other sites

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 by Mellow (see edit history)
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

 

post-494308-0-16388800-1378164624_thumb.png

post-494308-0-91922900-1378164634_thumb.png

Edited by PrestaFanBoy (see edit history)
Link to comment
Share on other sites

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

post-494308-0-42364400-1378169258_thumb.png

Edited by PrestaFanBoy (see edit history)
Link to comment
Share on other sites

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 ! :blink:

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

Link to comment
Share on other sites

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

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 by PrestaFanBoy (see edit history)
Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 2 weeks later...

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 ;)

Link to comment
Share on other sites

  • 4 weeks later...
  • 2 weeks later...

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 ?

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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.

 

post-704881-0-08642700-1384158249_thumb.png

 

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 by rrcholic (see edit history)
Link to comment
Share on other sites

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 !

Link to comment
Share on other sites

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... :(

Link to comment
Share on other sites

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...

Link to comment