dynamo gold gmbh

TYPO 3 Extension tx_news: listView, load-more, ajax

12.11.2014

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.

Aufbau 

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.

Definition Page-Object mit typeNum ohne HTML-Gerüst

[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]

Extbase bietet die Möglichkeit in den Plugin-Settings das Format der Ausgabe zu definieren (default für die listAction in tx_news ist 'List.html')

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>

Javascript mit jQuery Http-Request (loadMoreNewsArticles.js)

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.

Button für den Ajax-Aufruf und das Javascript einfügen (List.html)

<n:includeFile path="path-to-script/loadMoreNewsArticles.js" />
<button type="button" class="load-more">Mehr anzeigen</button>

Anzahl der Beiträge je Seite einstellen

plugin.tx_news.settings.list.paginate.itemsPerPage = 10

Zusammenfassung

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.