Infinite Scroll / Automatische nachladende Listen

Hallo ihr Lieben,

als kleines Wochend Gimmick haben wir das jquery infinitescroll plugin mit oxid verheiratet. Dadurch spart sich der User so einige klicks und das Shopping Erlebnis wird einfach ein bisschen besser:

http://oxidtemplate.aggrosoft.de/Alles/

Einfach mal runter scrollen, die Artikel werden automatisch nachgeladen.

Falls jemand Interesse hat veröffentlichen wir es auf github, ist wirklich eine minimal Änderung die mit allen Templates funktionieren sollte.

Servus Aggrosoft,

genau das, was ich noch benötige :wink:

Hallo,

das sieht ja wirklich sehr gut aus.

VG Thomas

Moin aggrosoft,

sehr gute Idee und schön ungesetzt…
Na das wäre dann doch noch was für Roxid Two :smiley:

Beste Grüsse

Thomas

haben will
Sehr geil :slight_smile:

Ok, ich hab jetzt keine Lust das auf github zu packen - aber vorab mal:

tpl/widget/locator/paging.tpl:

Vor dem abschließenden [{/if}]


[{if $listId && $place == 'bottom'}]
[{capture assign=infiniteScroll}]
	$(function(){
		$('#[{$listId}]').infinitescroll({ 
			navSelector  : "div.refineParams.bottomParams",            
						   // selector for the paged navigation (it will be hidden)
			nextSelector : "div.pager a.next",    
						   // selector for the NEXT link (to page 2)
			itemSelector : "#[{$listId}] li.productData",         
						   // selector for all items you'll retrieve
			path: function(page){
				[{assign var=fp value='&'|str_replace:'&':$pages->firstpage}]
				[{if $fp|stristr:'index.php' === FALSE}]
				return '[{$fp}]'+page;
				[{else}]
				return '[{$fp}]&pgNr='+(page-1);						
				[{/if}]
			},
			loading: {
				msgText: 'Lade Daten ...',
				finishedMsg: 'Keine weiteren Produkte gefunden',
				finished: function(){
					$('#infscr-loading').remove();
					initHoverPicture();
				}
			}
		});
	})
[{/capture}]
[{oxscript include="js/jquery.infinitescroll.min.js"}]
[{oxscript add=$infiniteScroll}]
[{/if}]

Und dann in allen Listen die das kriegen sollen, für normale Artikel liste:

tpl/page/list/list.tpl

Suchen nach:

[{include file="widget/locator/listlocator.tpl" locator=$oView->getPageNavigationLimitedBottom() place="bottom"}]

und das dazu, drüber aus dem include kopieren:

[{include file="widget/locator/listlocator.tpl" locator=$oView->getPageNavigationLimitedBottom() place="bottom" listId="productList" }]

Anschließend noch die javascript Bibliothek von hier laden und nach out/azure/js/ kopieren:

https://raw.github.com/paulirish/infinite-scroll/master/jquery.infinitescroll.min.js

Das sollte alles gewesen sein, um das in der Suche auch zu haben dann eben halt auch dort die listId an den locator anhängen.

Wer es nicht hinkriegt soll warten bis es jemand auf github stellt.

unter welcher Lizenz wollen wir denn das veröffentlichen? :smiley:

Hi,
wow, zunächst mal vielen Dank, das ist wirklich eine sehr schöne Sache. Hab das mal getestet und der Code funktioniert so nicht, es wird nur einmal nachgeladen, dann kommt ein Fehler.
So funktioniert es (Quelle http://oxidtemplate.aggrosoft.de/Alles/):


     [{if $listId && $place == 'bottom'}]
[{capture assign=infiniteScroll}]
	$(function(){
		$('#[{$listId}]').infinitescroll({
			navSelector  : "div.refineParams.bottomParams",
						   // selector for the paged navigation (it will be hidden)
			nextSelector : "div.pager a.next",
						   // selector for the NEXT link (to page 2)
			itemSelector : "#[{$listId}] li.productData",
						   // selector for all items you'll retrieve
			path: function(page){
				[{assign var=fp value='&'|str_replace:'&':$pages->firstpage}]
				[{if $fp|stristr:'index.php' === FALSE}]
				return '[{$fp}]'+page;
				[{else}]
				return '[{$fp}]&pgNr='+(page-1);
				[{/if}]
			},
			loading: {
				msgText: 'Lade Daten ...',
				finishedMsg: 'Keine weiteren Produkte gefunden',
finished: function(){
							$('#infscr-loading').remove();
							$('a.js-external').attr('target', '_blank');
							try{
								$('div.dropDown p').oxDropDown();
							}catch(e){}
							try{
								$( '.pictureBox' ).oxCenterElementOnHover();
							}catch(e){}
				}
			}
		});
	})
[{/capture}]
[{oxscript include="js/jquery.infinitescroll.min.js"}]
[{oxscript add=$infiniteScroll}]
[{/if}]

Auch der Pfad zur js-Datei ist nicht korrekt, der müsste lauten: out/Themename/src/js.

Ich bekomme es leider nicht in die Suchergebnisse eingebaut, das Anhängen der listId=“productList” in der search.tpl bewirkt nichts.
Wahrscheinlich stell ich mich einfach zu “ungeschickt” an, so kurz vor dem Wochenende, evtl hat ja jemand einen Tipp :slight_smile:

Ich habe die Änderungen in Blocks verschoben und als Modul verpackt.
Und es funktioniert in der Suche und auf den Artikelseiten.
Bei den Herstellern müsste es eigentlich auch gehen, aber ich habe in keinem der Shops mehr als 10 Produkte von einem Hersteller :frowning:

getestet unter 4.7.3 dürfte aber auch bei 4.6 funktionieren.
=> https://github.com/vanilla-thunder/ag-isal

sauber aufgeräumt!

Da muss aber ein Fehler drin sein, bei mir funktioniert das Modul nicht (frischer Azureshop).
Fehler: Uncaught TypeError: [object Object] has no method “infinitescroll”

Ah, habe den Fehler schon gefunden:
In der base.js.tpl Zeil 32 stimmt der Modulordner nicht. Müsste [{oxscript include=$oViewConf->getModuleUrl(‘ag-isal’,‘out/src/jquery.infinitescroll.min.js’) }] heissen, dann funktioniert es.

Danke nochmal an Marat fürs aufräumen und hochladen, ich hatte vorhin einfach keine Zeit - außerdem hat er noch einen intelligenten Selektor für die Liste an sich hinzugefügt der das ganze noch einfacher macht sowie es in Modulform gebracht. Jetzt kann es jeder nutzen :slight_smile:

ah, den Modulnamen habe ich vergessen anzupassen. Habs aktualisiert, danke!

Super modul. Habe es gerade angepasst. Mehr oder weniger. Wenn es auch für TAGS funktionieren soll dann einfach in der Datei base_ks.tpl zweite Zeile

$oView->getClassName() eq “tag”

einfügen. Und da der Loader nicht richtig angezeigt wurde, der setzt in obiger Datei noch ein

loading: {
img: ‘deinabsoluterpfad/spinner.gif’,

Leider funktioniert das Anpassen des pagings nicht. An den Klassen der divs und a’s wurde nichts verändert. Mmmhh. Azure 4.6.2

Moin.

Danke für das Modul! Macht es für den User noch hübscher :slight_smile:

Klasse!
funktioniert auch bei 4.6.1

was noch interessant wäre ist, wenn man da noch so ein button hätte wo einem nach oben wieder bringt…

kompliziert umzusetzen?

Hallo Leute

Hat sich nun erledigt. Ich habe mir die Funktion von Aggrosoft einbauen lassen.

Beste Grüsse
Avni

[QUOTE=avnikaba;122367]Hallo Leute

Hat sich nun erledigt. Ich habe mir die Funktion von Aggrosoft einbauen lassen.

Beste Grüsse
Avni[/QUOTE]

Da avni so nett war das ganze als Open Source freizugeben kann es jetzt jeder verwenden. Marat muss nur noch den Pull Request annehmen.