search

markocupic / contao-news-infinite-scroll-bundle

Contao 4 module: Add Infinite Scroll to the Contao Newslist Module
4 stars 1 forks source link

ganze Seite nachgeladen #1

Closed netgroup-gmbh closed 4 years ago

netgroup-gmbh commented 6 years ago

Hallöchen, die Erweiterung klingt super, leider wird bei mir die ganze Seite nachgeladen und nicht nur die weitere News-Beiträge. Ich benutze Contao-4.4.6. Ich habe die Templates wie beschrieben eingebunden und das Template mod_newslist_infinite_scroll.html5 ergänzt, so dass die Klasse "mod_newslist_infinite_scroll" überhaupt vorhanden ist.

markocupic commented 6 years ago

Muss ich mir anschauen. Hast du die Seite irgendwo online? Meine E-Mail-Adresse findest du im Code in den PHPdoc Annotations.

markocupic commented 6 years ago

Übrigens hier mit contao 4.4 das Modul in Action. Das ganze ohne irgendwelche custom Anpassung. https://sac-kurse.kletterkader.com/news-infinite-scroll-test.html

rainermueller commented 5 years ago

Läuft die Erweiterung noch mit Contao 4.4.35? Die Website ob gibt es nicht mehr.

Weitere Beiträge laden wird angezeigt, es wird jedoch die ganze Webseite angezeigt.

markocupic commented 5 years ago

Kann an das irgendwo live sehen?

rainermueller commented 5 years ago

Na klar, kein Problem

[http://news.feuerwehr-tengen.de/news-list.html]()

Paging Get Request und XHR Request (Weitere Beiträge laden) sind identisch.

[http://news.feuerwehr-tengen.de/news-list.html?page_n13=2]()

markocupic commented 5 years ago

Eigentlich müsste das funktionieren auch unter contao 4.4

Schau mal hier:

http://contao44.kletterkader.com/newsliste.html

 

Bitte nimm für weitere Anfragen per E-Mail mit mir Kontakt auf. 

Du findest die Adresse im Code.

https://github.com/markocupic/gallery-creator-bundle/blob/f0652b4c1da5043826b8c8b7e9299b55ebcffbc2/src/Resources/contao/classes/GcHelpers.php#L25

 

Liebe Grüsse

 

Marko

 

Marko Cupic Surenweidstr. 2 CH-6208 Oberkirch

http://4ae-racing-team.ch http://kletterkader.com

   

Gesendet: Mittwoch, 27. Februar 2019 um 07:59 Uhr Von: "Rainer Müller" notifications@github.com An: markocupic/contao-news-infinite-scroll-bundle contao-news-infinite-scroll-bundle@noreply.github.com Cc: "Marko Cupic" m.cupic@gmx.ch, Comment comment@noreply.github.com Betreff: Re: [markocupic/contao-news-infinite-scroll-bundle] ganze Seite nachgeladen (#1)

Na klar, kein Problem

http://news.feuerwehr-tengen.de/news-list.html

Paging Get Request und XHR Request (Weitere Beiträge laden) sind identisch.

http://news.feuerwehr-tengen.de/news-list.html?page_n13=2

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

proplab commented 5 years ago

Hallo Marko, konnte dieses Problem gelöst werden? Ich habe es nämlich auch: Beim Nachladen der Inhalte wird immer das komplette Markup der Seite an den newsContainer angehängt. Das heißt: komplettes Markup mit der richtigen Seite der Paginierung. Ist bestimmt nur eine Einstellungssache. Konnte sie nur bisher nicht finden.

Edit: habe es gelöst! Ich hatte ein gewöhnliches Newsmodul verwendet und übersehen, dass es ein Newslist-Infinite-Scroll-Modul gibt. Vielleicht sollte das noch in die README aufgenommen werden.

Ansonsten: sehr gute Arbeit. Vielen Dank dafür!

rainermueller commented 5 years ago

Nach Implementation der Methode onXHRComplete in j_news_infinite_scroll.html5 funktioniert es perfekt 👍

Default Implementation liefert die ganze Seite

onXHRComplete: function (html, instance) {
    // Do some actions
    return html;
}
markocupic commented 5 years ago

Lege eine Kopie der j_news_infinite_scroll.html ins templates Verzeichnis und spiele ein wenig mit der Einstellung in Zeile 12. https://github.com/markocupic/contao-news-infinite-scroll-bundle/blob/c549348f24fa6b363223f2c3601cfd3e8310da84/src/Resources/contao/templates/jquery/j_news_infinite_scroll.html5#L12

Liebe Grüsse Marko

markocupic commented 5 years ago

Kann man deinen Versuch irgendwo live sehen?

Hier siehst du das plugin übrigens live mit masonry grid implementation (Contao 4.7.6): https://www.sac-pilatus.ch/publikationen.html Scrollen bis zur headline "Nachrichten":

So sieht die angepasste j_news_infinite_scroll.html5 aus.

<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>
markocupic commented 5 years ago

Müsste das live sehen.

Lg marko  

Marko Cupic Surenweidstr. 2 CH-6208 Oberkirch

http://4ae-racing-team.ch http://kletterkader.com

   

Gesendet: Donnerstag, 06. Juni 2019 um 15:47 Uhr Von: "Konstantin Urban" notifications@github.com An: markocupic/contao-news-infinite-scroll-bundle contao-news-infinite-scroll-bundle@noreply.github.com Cc: "Marko Cupic" m.cupic@gmx.ch, Comment comment@noreply.github.com Betreff: Re: [markocupic/contao-news-infinite-scroll-bundle] ganze Seite nachgeladen (#1)

Hi Marko!

Ich komme da nicht ganz mit! Es ladet wie eingeschtelt 3 beiträge, und am ende kommt dieser weiter laden button, nach man den klickt tut sich aber leider nichts! Ich wusste nicht wie ich das zum funktionieren bringen kann! Freue mich auf deine rückmeldung! Danke!

Lg! :)

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

markocupic commented 5 years ago

Müsste das live sehen.

Lg marko  

Marko Cupic Surenweidstr. 2 CH-6208 Oberkirch

http://4ae-racing-team.ch http://kletterkader.com

   

Gesendet: Donnerstag, 06. Juni 2019 um 15:59 Uhr Von: "pw17l008" notifications@github.com An: markocupic/contao-news-infinite-scroll-bundle contao-news-infinite-scroll-bundle@noreply.github.com Cc: "Marko Cupic" m.cupic@gmx.ch, Comment comment@noreply.github.com Betreff: Re: [markocupic/contao-news-infinite-scroll-bundle] ganze Seite nachgeladen (#1)

Hi Marko!

Echt super idee, allerdings funktioniert es noch nicht ganz bei mir! Hoffentlich kannst du mir helfen!

Es ladet the die 3 beiträge die eingestellt sind, und ganz unten kommt dann der "weiter laden button", aber nach man den klickt verschwindet der button aber sonst tut sich nichst!

Ich freue mich auf deine Rückmeldung! Danke!

Lg!

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.