Infinite Scroll / Automatische nachladende Listen

Bei haufenweisen Artikeln kommst Du soooo schnell nicht unten an, da diese ja ständig nachladen. Okay, wenn Du schnell bist, dann klappt das mit dem Klick auf Impressum.

ich finde das klasse!
Da der Kunde kaum merkt, dass Seiten nachgeladen werden, kann man auch auf 24 Artikel pro Seite reduzieren. Und die Auswahl oben “Artikel pro Seite” macht jetzt keinen Sinn mehr.

Aber wie gesagt muss das ganze noch nach einer bestimmten Anzahl von Seiten abgebrochen werden, um den Fussbereich auch anschauen zu können - ähnlich wie bei der Google-Bildesuche.

…oder man tackert den Footer oder zumindest die wichtigsten Links am unteren Bildschirmrand fest.

das ist auch klasse!
Voraussetzung ist natürlich, dass der Footer möglichst niedrig ist. Ist ja bei coarsys shop so …

muss ich mal testen …

Mist, verdammt, der Filter macht mich fertig. Jetzt funktionierts wieder net mehr… Erstmal wieder rausgenommen das Ganze. Verrrdddddaaaammmich :slight_smile:

… nur nit huddele wie mer hesse sache :slight_smile:

:wink: So, ich lasses jetzt erstmal raus und heute Abend die Sau :slight_smile: Irgendwo verhaut sich das Script. Ich werde jetzt selbst eines basteln, Plugins sind nicht immer die allererste Wahl. Jetzt muss ich mich erstmal beruhigen, sonst wird das heute nix mehr. Ebbelwoi ich komme :slight_smile:

Hmmm, Enamora hat das Infinite Scrolling auch rausgenommen…

ich werde Ihn auch raus nehmen müssen. Habe noch Anfangsskript vom Aggrosoft drin und der wiederholt mir alle Artikel wenn die Liste beendet ist.

[B]Pralinen[/B]

Grüße
Rafig

So, dieser hier von mir funktioniert nun in allen Versionen und in sämtlichen Konstellationen:


function initListLoad() {

	if ($("#productlist").length >= 1) {
		$(".lochead").hide();
	}
	
	$(window).unbind('scroll');

  var killScroll = false;
	$(window).scroll(function() {
		if ($(window).scrollTop() + 200 >= ($(document).height() - ($(window).height()))){
	    if (killScroll == false) {
	    	killScroll = true;

				  var nextLinkClass = "a.next";
				  var nextLink = $(nextLinkClass).attr("href");
				  var thisList = $("#productlist");
				    
				  if (nextLink != "#" && nextLink != undefined) {
				  
				  thisList.append('<div class="listloading"><img src="/out/meine_struempfe/img/ajax-loader.gif" alt="" title="loading"></div>');
				          
				    $.ajax({
				      url: nextLink,
				      context: document.body,
				      success: function(result){          
				          thisList.append($(result).find("#productlist").html());
									if ($(result).find(nextLinkClass).attr("href") == undefined) {
				          	$(nextLinkClass).attr("href", "#");
				          } else {
				          	$(nextLinkClass).attr("href", $(result).find(nextLinkClass).attr("href"));
									}
				        	killScroll = false;
				      },
				      complete: function() { 
				      	$(".listloading").remove();
				      	initListBubbles();
				      }
				    });  
				  }
			}
	  }
  });
}

Somit ist das Ding wieder eingebaut :slight_smile:

und wer comitted das jetzt? :slight_smile:

Ray,
das hat mit der Anfangsskript wenig zu tun und Funktioniert auch nicht in jeder Shop. Coarsy hat Ihn nach seiner Bedürfnisse angepasst.

Grüße
Rafig

Das Ganze würde natürlich auch mit dem aktuellen Modul funktionieren. Hierfür müsste halt das JavaScript ausgewechselt und die Selektoren auf Azure angepasst werden, was allerdings ne Kleinigkeit ist. Habs gerade nochmal nem Browsercheck unterzogen und was soll ich sagen, yippe ya yeah :slight_smile:

UPDATE: IE7 hat auch bestanden :slight_smile:

Danke fürs teilen!

Habe jetzt den footer auf den Seiten mit infinite Scroll unten festgetackert (Danke nickname für den Tipp!). Auf der Startseite oder Details wird er jedoch ganz normal angezeigt.

Dazu in der footer.tpl am Ende folgenden Code eingefügt:


[{if $oView->getClassName() eq "alist" || $oView->getClassName() eq "search" || $oView->getClassName() eq "manufacturerlist" }]
    [{oxscript include="js/libs/footer_slide.js"  priority=10 }]
[{/if}]

Die footer_slide.js sieht so aus:


/* general settings */
var minHeight = "28px";
var maxHeight = 0;
maxHeight = $("#footer").css("height");

/* initial settings */
with (document.getElementById("footer").style) {
		 zIndex = 9999;
		 height = 0;
		 backgroundColor = "#fff"; 
		 position = "fixed";
		 bottom = "0px";
		 } 
/* some css stuff */
$("#content").css("marginBottom", minHeight);
		 
/* show headline of footer div after page loaded */		 
$("#footer").animate({height: minHeight});

/* show footer */
$("#footer").mouseenter( function () {
	 $("#footer").animate({height: maxHeight});
});

/* hide footer */
$("#footer").mouseleave( function () {
	 $("#footer").animate({height: minHeight});
});

Beim Überfahren der Kopfzeile des Footers wird er also vollständig angezeigt.

Leider ist mein Server zur Zeit noch etwas schwach auf der Brust, so dass das Nachladen nicht so flüssig geht, aber daran arbeiten wir :slight_smile:

PS: aus “rechtlichen” Gründen habe ich oben im Kopf noch einen Link zum Impressum eingebaut.

Danke an aggrosoft fürs script und an Vanilla fürs Verpacken als Modul.
Tolle Sache!

@ Patchwork: Wenn Du Dir die Requests beim Nachladen ansiehst, wirst Du feststellen, dass die Seiten zweimal aufgerufen werden. Das war auch ein Grund, weshalb ich das Ding selbst geschrieben hab… Ist jedes Mal ein unnötiger Request zuviel.

Danke coarsy
Habe auch wie markus26 festgestellt, dass Artikel doppelt geladen werden - zumindest wenn die Liste gefiltert wird.
Leider übersteigt es meine Fähigkeiten, dein Script auf Azur umzubauen :slight_smile:

@aggrosoft (hoffe dass Du hier noch mitliest):
ist es möglich Dein Modul noch mal upzudaten?

Die Anpassung ist nicht so schlimm… Du setzt einfach die richtigen CSS-Selektoren aus Azure in das Script, kannst ja beim anderen Infinite Scroll direkt abschreiben und setzt mein Script ein und rufst es in einem Document Ready Event auf. Das wärs dann auch schon gewesen :slight_smile:

Also dann so:


$(document).ready(function() {
    initListLoad();
});
                           
function initListLoad() {

	if ($("#productList, #searchList").length >= 1) {
		$("#itemsPager, #itemsPagerbottom").hide();
	}

  $(window).unbind('scroll');

  var killScroll = false;
    $(window).scroll(function() {
        if ($(window).scrollTop() + 200 >= ($(document).height() - ($(window).height()))){
        if (killScroll == false) {
            killScroll = true;

        var nextLinkClass = "div.pager a.next";
            var nextLink = $(nextLinkClass).attr("href");
            var thisList = '#' + $("ul[class*='View'][id*='List']").attr('id');
              
              if (nextLink != "#" && nextLink != undefined) {
              
              $(thisList).append('<div class="listloading"><img src="/out/meine_struempfe/img/ajax-loader.gif" alt="" title="loading"></div>');
                      
                $.ajax({
                  url: nextLink,
                  context: document.body,
                  success: function(result){          
                          var resultWrap = $(result).find(thisList).html();
                      $(thisList).append(resultWrap);
                if ($(result).find(nextLinkClass).attr("href") == undefined) {
                          $(nextLinkClass).attr("href", "#");
                      } else {
                          $(nextLinkClass).attr("href", $(result).find(nextLinkClass).attr("href"));
                }
                        killScroll = false;
                  },
                  complete: function() { 
                      $(".listloading").remove();
                      //initListBubbles(); init here whatever you want!
                  }
                });  
              
            } 
        }
      }
  });
} 		   

Danke für das Script!
aber es gibt Probleme:
es wird die var thisList nicht gefunden (ich glaube die * sind falsch gesetzt)
und dann kommt beim Aufruf von $(thisList).append “Objekt unterstützt diese Methode nicht” ?