Eine vielseitig einsetzbare Extension für TYPO3 zur Anzeige von Listenansichten mit Detailseiten, z.B.: für News oder Blogartikel, ist die Extension tx_news. Tx_news ist eine Weiterentwicklung von tt_news und wurde in extbase und fluid geschrieben. Dank gut durchdachtem Konzept, ausführlicher Dokumentation und Erweiterbarkeit gilt die Extension als Standard für viele Anwendungsfälle.
Bei Webprojekten ist es oft gewünscht Inhalte wie Newsbeiträge ohne eigenen HTTP-Request nachzuladen. Anbei eine Variante wie man mit etwas Typoscript & Javascript tx_news dazu bringt, weitere Newsartikel per Ajax-Request nachzuladen.
Tx_news beinhaltet alles Nötige um die Inhalte in gewünschter Reihenfolge per Plugin-Settings auszugeben. In der Listenansicht werden standardmässig 10 Beiträge je Seite angezeigt. Weitere Beiträge werden über eine Paginierung angesteuert d.h. eine Navigation mit passenden Links zu weiteren 'Sub-Seiten' wird automatisch generiert (Seite1, Seite2,...). Diese Sub-Seiten beinhalten genau die Beiträge, die wir nachladen wollen.
Es besteht die Möglichkeit die gesamte Sub-Seite mit den neuen News-Beiträgen per Ajax-Request zu laden und die unnötigen Inhalte wie HTML-Gerüst, Navigation, Footer,... per jQuery zu entfernen. Die performantere Variante ist per Typoscript ein eigenes Page-Object mit spezifischen typeNum ohne HTML-Gerüst zu definieren und nur die relevanten News-Beiträge auszugeben.
[globalVar = TSFE:type = 1984]
config {
disableAllHeaderCode = 1
xhtml_cleaning = none
admPanel = 0
metaCharset = utf-8
additionalHeaders = Content-Type:text/xml;charset=utf-8
disablePrefixComment = 1
}
news = PAGE
news {
typeNum = 1984
10 < styles.content.get
}
tt_content.stdWrap.innerWrap >
plugin.tx_news.settings.format = ajax
[end]
Template für die Ausgabe der per Ajax geladenen Newsbeiträge anlegen (List.ajax)
{namespace n=Tx_News_ViewHelpers}
<n:widget.paginate objects="{news}" as="paginatedNews"
configuration="{settings.list.ajax.paginate}"
initial="{offset:settings.offset,limit:settings.limit}">
<f:for each="{paginatedNews}" as="newsItem" iteration="iterator">
<article>
<n:excludeDisplayedNews newsItem="{newsItem}" />
<h3>
<n:link newsItem="{newsItem}" settings="{settings}">{newsItem.title}
</n:link>
</h3>
.
.
.
</article>
</f:for>
</n:widget.paginate>
function loadMoreNews() {
if($('.news-list-view').length < 1) {
return;
}
var container = $('.news-list-view'),
button = container.find('.load-more'),
pagination = container.find('.page-navigation'),
newsToLoad = [];
// Verstecke Button wenn keine Pagination
if (pagination.length < 1) {
button.hide();
}
// Paginationslinks auslesen
pagination.find('li:not([class])').each(function() {
newsToLoad.push($(this).find('a').attr('href'));
});
// Button Event & Ajax-Request
button.not('.loading').on('click', function(e){
e.preventDefault();
if(button.hasClass('loading')){
return;
}
button.addClass('loading');
$.ajax({
async: 'true',
url: newsToLoad[0] + '?type=1984',
type: 'POST',
dataType: 'html',
success: function (data) {
container.find('article:last').append(data);
newsToLoad.shift();
button.removeClass('loading');
if(newsToLoad.length == 0) {
button.remove();
}
},
error: function (error) {
button.removeClass('loading');
}
});
});
}
$(function(){
loadMoreNews();
});
Die jQuery-Bibliothek muss natürlich geladen sein.
<n:includeFile path="path-to-script/loadMoreNewsArticles.js" />
<button type="button" class="load-more">Mehr anzeigen</button>
plugin.tx_news.settings.list.paginate.itemsPerPage = 10
Traraaa - mit wenig Aufwand und ohne zusätzlicher Extension kann man mit dem gelieferten Funktionsumfang von tx_news und Typoscript das Laden von News-Beiträgen in der Listenansicht per Ajax-Request umsetzen.