Auf der Suche nach einem Skript welches mir dynamisch die News (tx_news) nachlädt, stößt man leider immer auf viele Ergebnisse die nicht weiterhelfen.
Daher habe ich hier einen Artikel aufgearbeitet um die News dynamisch per Ajax nachzuladen. Wie sieht das Ergebnis es aus? » Link
Alle Daten zum Herunterladen
Was wird benötigt?
- News (tx_news)
- News (templates)
- Javascript
- TypoScript
Page-TS Erweiterung für News
# ----------------------------------------------------------------------------- # tx news # ----------------------------------------------------------------------------- tx_news { templateLayouts { 1 = Accordeon News 2 = Slider News 3 = Isotope News 4 = Top News } }
Javascript
Das Beispiel ist dafür auslegt, dass die News beim scrollen nachgeladen werden. Wenn man dieses verhalten nicht möchte, muss das Script an sich optimieren.
var newsContainer, newsButton, newsPagination, newsToLoad = [], newsCall = false, lastPage = 0; function readLastPageination(){ // Paginationslinks auslesen newsPagination = newsContainer.find('.page-navigation').last(); newsPagination.find('li:not([class])').each(function() { var curPage = parseInt($(this).find('a').text()); if(curPage > lastPage){ lastPage = curPage; newsToLoad.push($(this).find('a').attr('href')); } }); newsPagination.remove(); } function loadMoreNews() { // fill vars newsContainer = $('.news-topteaser'); newsButton = newsContainer.find('.load-more'); newsPagination = newsContainer.find('.page-navigation').last(); if(newsContainer.length < 1) { $('body').find('.load-more').hide(); return; } // Verstecke newsButton wenn keine Pagination if (newsPagination.length < 1) { newsButton.hide(); } // Paginationslinks auslesen readLastPageination(); // remove navigation newsContainer.find('.page-navigation').remove(); // newsButton Event & Ajax-Request newsButton.not('.loading').on('click', function(e){ e.codeventDefault(); if(newsButton.hasClass('loading')){ return; } if(newsCall == false){ newsCall = true; loadMoreNewsCall(); } }); loadMoreNewsByScrolling(); $(window).scroll(function(){ loadMoreNewsByScrolling(); }); } /* * News nachladen, per scrollposition. * Wenn man das nicht möchte, muss man diese Funktion ausbauen ************************************************************* */ function loadMoreNewsByScrolling(){ var newsC = $('.news'), dH = $(document).scrollTop(), nH = newsC.height() - newsC.offset().top; // scrollpos if(dH > nH){ if(newsCall == false){ newsCall = true; newsButton.button('loading'); loadMoreNewsCall(); } } } function loadMoreNewsCall(){ if(typeof newsToLoad[0] !== "undefined"){ $.ajax({ async: 'true', url: newsToLoad[0] + '&type=1984', type: 'POST', dataType: 'html', success: function (data) { newsContainer.find('.news-list-content').append($(data).find(".ajax-content").html()); newsToLoad.shift(); // Paginationslinks auslesen readLastPageination(); newsContainer.find('.news-list-content').find('.page-navigation,.news-clear').remove(); newsButton.button('reset'); newsCall = false; if(newsToLoad.length == 0) { newsCall = true; newsButton.remove(); } // matchHeigt if(typeof $.fn.matchHeight == "function"){ $('.news-top-content-inner').matchHeight(); } }, error: function (error) { newsButton.removeClass('loading'); } }); } } $(function(){ loadMoreNews(); });
TyopScript (Setup)
Das TyopScript schaut auf den Type 1984 und liefert dann die gleiche Seite mit den News aus. Aufgrund der GET-Parameter an der URL, aber dann die Seite X+1
# News Ajax-Call ############################# [globalVar = TSFE:type = 1984] config { disableAllHeaderCode = 1 xhtml_cleaning = none admPanel = 0 metaCharset = utf-8 additionalHeaders = Content-Type:text/xml;charset=utf-8 disablecodefixComment = 1 } news = PAGE news { typeNum = 1984 10 < styles.content.get # Contentbereich aus den Backend-Layout-Daten 10.select.where = colPos=2 } #tt_content.stdWrap.innerWrap > plugin.tx_news { settings { format = html myLayout = ajax list { paginate { #itemsPerPage = 10 } } } } [end]
Templates
Die Templates an sich sind sehr auf den Kunden gemünzt. Daher schaut einfach rein und optimiert dies, wie ihr braucht.
Was man aber noch dazu sagen sollte, ist das man in der Listenansicht noch ein besonderes Templates mitgeben muss.
Daher habe ich die komplette Ausgabe der Listenansicht optimiert und in einem Switch-Case-Szenario umgebaut.
Das was ihr aber Final braucht ist folgender Teil
{namespace n=GeorgRinger\News\ViewHelpers} <f:layout name="General" /> <!-- ===================== Templates/News/List.html --> <f:section name="content"> <f:if condition="{news}"> <f:then> <f:switch excodession="{settings.myLayout}"> <f:case value="ajax"> <n:widget.paginate objects="{news}" as="paginatedNews" configuration="{settings.list.ajax.paginate}" initial="{offset:settings.offset,limit:settings.limit}"> <div class="ajax-content"> <f:for each="{paginatedNews}" as="newsItem" iteration="iterator"> <f:render partial="List/Item" arguments="{newsItem: newsItem,settings:settings,iterator:iterator}" /> </f:for> </div> </n:widget.paginate> </f:case> <f:case default="TRUE"> <div class="news-list-view default-view"> <f:if condition="{settings.hidePagination}"> <f:then> <f:for each="{news}" as="newsItem" iteration="iterator"> <f:render partial="List/Item" arguments="{newsItem: newsItem,settings:settings,iterator:iterator}" /> </f:for> </f:then> <f:else> <n:widget.paginate objects="{news}" as="paginatedNews" configuration="{settings.list.paginate}" initial="{offset:settings.offset,limit:settings.limit}"> <div class="news-list-content"> <f:for each="{paginatedNews}" as="newsItem" iteration="iterator"> <f:render partial="List/Item" arguments="{newsItem: newsItem,settings:settings,iterator:iterator}" /> </f:for> </div> </n:widget.paginate> </f:else> </f:if> </div> </f:case> </f:switch> </f:then> <f:else> <div class="alert "> <f:translate key="list_nonewsfound" /> </div> </f:else> </f:if> </f:section>
Hallo,
Danke für Deine Erklärungen und für den Baukasten.
Den Baukasten habe ich herunter geladen, leider fehlen bei den Templates alle Partials unter „List“, die im Template „List“ aufgerufen werden, wie z.B. „List/Item-slider“.
Hast Du diese bewusst nicht in den Baukasten gepackt oder kannst Du mir sagen, wie ich da ran komme?
Hallo Marc,
dein Beispiel Ergebnis es aus? » Link funktioiert leider nicht. 🙁
Viel Erfolg
# —————————————————————————–
# Page-TS-tx news
# —————————————————————————–
tx_news {
templateLayouts {
1 = Accordeon News
2 = Slider News
3 = Isotope News
4 = Top News
}
}
Hier ist noch der cHash falsch. Habe ich geändert.