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

Baukasten

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>