News in bestehenden container hinzu laden

[GMTeams]

Hallo, danke für die tolle Erweiterung.

Ich versuche das ganze mit einem masonry grid umzusetzen und habe das Problem, dass die hinzugeladenen Newsbeiträge immer in einem neuen div-container geladen werden, anstatt im bestehenden hinzugefügt zu werden. Es erzeugt mir jedesmal ein div class="mod_newslist_infinite_scroll grid block" welches exakt die gleichen Klassen des Original containers sind.

Für das masonry grid müssten jedoch alle items schön hintereinander in einem container liegen.

Für Hilfe wäre ich sehr dankbar.

[proplab]

Als Modultyp mal "Newslist Infinite Scroll" auswählen. Das war es bei mir. Kann man leicht übersehen, zumal es in der Doku nicht erwähnt ist.

[GMTeams]

Der entsprechende Modultyp ist ausgewählt. Das Modul funktioniert auch genau wie es soll, lediglich der zusätzliche div-container stört in Bezug auf das masonry-grid.

[proplab]

Schau mal, ob mod_newslist irgendwie vorher schon umgebogen wurde. Möglicherweise muss <?= $this->pagination ?> noch mal gewrappt werden. Ich gebe <?= implode('', $this->articles) ?> und <?= $this->pagination ?> jeweils in einem eigenen div aus. Die Struktur sieht dann ungefähr so aus:

<div class="mod_newslist_infinite_scroll block">
<div class="listbody">
<?= implode('', $this->articles) ?>
</div>
<div class="listpagination">
<?= $this->pagination ?>
</div>
</div>

Die Liste läuft dann sauber in "listbody", ohne neuen div-container.

[GMTeams]

Danke für deine Hilfe. Habe das mal so implementiert, die Newsartikel und die Pagination werden auch sauber getrennt, jedoch wird nach wie vor ein neues div erzeugt. Die Struktur die ich erhalte sieht so aus:

<div class="mod_newslist_infinite_scroll block"><div class="listbody"><div class="layout_latest arc_1 block"></div></div><div class="listpagination"></div><div class="mod_newslist_infinite_scroll block"><div class="listbody"><div class="layout_latest arc_1 block"></div></div><div class="listpagination"></div></div></div>

Mhm sorry komme mit diesem Editor nicht so zurecht - immer wenn ich Zeilenumbrüche mache löscht er mir den Code. Ich hoffe man kann trotzdem nachvollziehen was ich meine.

Wie man sieht sind zudem die Newslisten verschachtelt, was auch nicht sein sollte?

[markocupic]

@GMTeams Und? Problem gelöst? Lg Marko

[GMTeams]

Leider noch nicht. Wie gesagt spielt es mir "mod_newslist_infinite_scroll" in einem neuen div aus anstatt im bestehenden (Quellcode s.o.). Dies lässt dann die Darstellung im masonry grid nicht zu, bzw. wird es schon bei einem mehrspaltigem Layout zum Problem.

[markocupic]

Habe hier infinite scroll mit masonry grid umgesetzt. Unten siehst du die angepasste j_news_infinite_scroll.html5. Hoffe, es hilft ;-) Liebe Grüsse Marko

<script>

    (function ($) {
        $(document).ready(function () {

            // Global grid container element
            var $grid = $('.mod_newslist_infinite_scroll');

            /**
             * Generate the ContaoNewsInfiniteScroll object
             * requires news_infinite_scroll.js
             * @type {ContaoNewsInfiniteScroll}
             */
            var contaoNewsInfiniteScroll = new ContaoNewsInfiniteScroll({
                // CSS selector: Append loaded items to this container
                newsContainer: '.mod_newslist_infinite_scroll',
                // CSS selector: Default to $(window)
                scrollContainer: $(window),
                // CSS selector: Pagination links (<a href="infinite?page_n193=5" class="link page-link" title="Gehe zu Seite 5">5</a>)
                paginationLinks: '.pagination .link',
                // When set to true, this will disable infinite scrolling and start firing ajax requests on domready with an interval of 3s
                loadAllOnDomready: false,
                // Use a "load more button" (Preserve the accessibility of the footer)
                // !!!! Important Set loadMoreButton to false, if you want to autoload items
                loadMoreButton: true,
                // Load more button
                loadMoreButtonMarkup: '<div class="mt-2 inf-scr-load-more-btn-container text-center"><button class="btn btn-primary w-100">Weitere Beitr&auml;ge laden</button></div>',
                // CSS selector: When you scroll and the window has reached the anchor point, requests will start
                anchorPoint: '.mod_newslist_infinite_scroll',
                // Distance in px from the top of the anchorPoint
                bottomPixels: 100,
                // Integer: Fading time for loades news items
                fadeInTime: 400,
                // HTML: Show this message during the loading process
                loadingInProcessContainer: '<div class="inf-scr-loading-in-process-container text-center"><i class="fal fa-5x fa-spinner fa-spin"></i><br><br>Lade...</em></div>',

                // Callbacks
                /**
                 *
                 * @param instance
                 * @return bool
                 */
                onInitialize: function (instance) {

                    // Add empty grid-sizer element
                    $('<div class="grid-sizer col-sm-6 col-lg-3">').prependTo('.mod_newslist_infinite_scroll');

                    $('.mod_newslist_infinite_scroll .pagination').parent('').children().hide();
                    $('.mod_newslist_infinite_scroll .pagination').hide();

                    var i = 0;
                    $('.mod_newslist_infinite_scroll .card').each(function (el) {
                        i++;
                        //$('<span class="item-number">#' + i + '</span>').prependTo($(this));
                        $(this).closest('.news_card').addClass('added-to-masonry-grid');
                    });

                    $grid.masonry({
                        horizontalOrder: true,
                        itemSelector: '.news_card',
                        columnWidth: '.grid-sizer',
                        percentPosition: true
                    });

                    // Return false to abort initialization
                    return true;
                },

                /**
                 *
                 * @param instance
                 */
                onXHRStart: function (instance) {
                    // Do some actions
                },

                /**
                 *
                 * @param html
                 * @param instance
                 * @returns string
                 */
                onXHRComplete: function (html, instance) {
                    // Do some actions
                    return html;
                },

                /**
                 *
                 * @param instance
                 */
                onXHRFail: function (instance) {
                    console.log('No response from server with address: ' + instance.currentUrl);
                },

                /**
                 *
                 * @param instance
                 */
                onAppendCallback: function (instance) {

                    var i = 0;
                    $('.mod_newslist_infinite_scroll .card .item-number').remove();
                    $('.mod_newslist_infinite_scroll .card').each(function (el) {
                        i++;
                        //$('<span class="item-number">#' + i + '</span>').prependTo($(this));
                    });

                    // Find new elements
                    var $newElements = $('.mod_newslist_infinite_scroll .news_card:not(.added-to-masonry-grid)');

                    // Append new elements to the masonry grid
                    $grid.append($newElements).masonry('appended', $newElements);
                    $('.mod_newslist_infinite_scroll .news_card').addClass('added-to-masonry-grid');
                    setTimeout(function() {
                        $grid.masonry();
                    }, 200);
                }
            });
        });
    }(jQuery));
</script>

[GMTeams]

Tausend Dank damit hab ich es hinbekommen!