News (tx_news) per Ajax nachladen

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>

4 Antworten auf „News (tx_news) per Ajax nachladen“

  1. 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?

  2. # —————————————————————————–
    # Page-TS-tx news
    # —————————————————————————–
    tx_news {
    templateLayouts {
    1 = Accordeon News
    2 = Slider News
    3 = Isotope News
    4 = Top News
    }
    }

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.