webentwicklung-frage-antwort-db.com.de

Isotop mit unendlicher Schriftrolle

Verwenden von Jetpack Infinite Scroll & Isotope (Mauerwerk).

Ich stehe vor einem Problem, bei dem ich nach jedem neuen ajaxierten Satz von Posts erst destroy und dann build Isotopenlayout muss. Wenn ich mich nicht an diese Methode anschließe, werden die neuen Posts, die jedes Mal von Infinite Scroll geladen werden, vom Isotopen-Layout nicht als eigene Posts behandelt und es fehlt ihnen das Isotopen-Styling. Ich muss also jedes Mal Isotope neu aufbauen, wenn ich den post-load-Trigger der unendlichen Schriftrolle aktiviere.

Dieser Ansatz hinterlässt dem Benutzer tatsächlich einen Flick-Effekt und führt einen Bildlauf zum Anfang des Isotopenlayouts durch.

//In functions.php
function vg_infinite_scroll_init() {
    add_theme_support( 'infinite-scroll', array(
        'container'         => 'row-wrap',
        'type'               => 'scroll',
        'render'            => 'loop_p_Arch_infinite_scroll_render',
        'footer'            => false,
        'footer_widgets'     => false,
        'wrapper'            => false,
        'posts_per_page'    => 9,
    ) );
}

add_action( 'after_setup_theme', 'vg_infinite_scroll_init' );

function loop_p_Arch_infinite_scroll_render() {

    while( have_posts() ) {
        the_post();
            get_template_part( 'content', 'product' );
    }

}

function vg_get_prod_Arch_posts( $post_type = 'post' ) {

    $prodarch_posts = get_posts( array(
        'numberposts'     => 9,
        'paged'         => get_query_var( 'paged' ),        
        'post_type'       => $post_type
    ) );

    return $prodarch_posts;

}

// In archive-product.php
<!-- Isotope Grid -->
<section id="product_list">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="grid" id="row-wrap">
                        <div class="grid-sizer"></div>
                        <?php
                        $products = vg_get_prod_Arch_posts( 'product' );

                        if ( ! empty( $products ) ) {
                            foreach ( $products as $product ) { 

                            setup_postdata( $GLOBALS['post'] = $product );
                            get_template_part( 'content', 'product' );

                            }
                            wp_reset_postdata();
                        }
                        ?>
                </div>
            </div>
        </div>
    </div>
</section>

//In content-product.php
global $post;
?>
<div class="grid-item post product">
    <div class="item_content">
        <a href="#">
            <div class="item_name"> 
                <h4><?php the_title(); ?> </h4> 
            </div>
            <?php echo get_the_post_thumbnail( $post->ID, 'large', array( 'class' => 'image_width_set' ) ); ?>
        </a>
    </div>
</div>

//In JS file

jQuery(document).on("post-load", function(e) {
    jQuery('.grid').isotope('destroy');
    jQuery('.grid').isotope({
        itemSelector: '.grid-item',
        percentPosition: true,
        masonry: {
            columnWidth: '.grid-sizer',
            Gutter: 5
        }
    });
});

jQuery(window).load(function(){
    jQuery('.grid').imagesLoaded(function() {
        jQuery('.grid').isotope({
            itemSelector: '.grid-item',
            percentPosition: true,
            masonry: {
                columnWidth: '.grid-sizer',
                Gutter: 5
            }
        });
    })
})
2
vajrasar

Normalerweise erlaubt es Isotope, neue Elemente hinzuzufügen und das Mauerwerk dann erneut neu zu gestalten:

Irgendwo in Ihrer JS-Datei sollten Sie die Elemente, die Sie anhängen möchten, in eine Variable einfügen, z. new_elements

jQuery('.grid').append(new_elements)
    .isotope('appended', new_elements)
    .imagesLoaded( function() {
        jQuery('.grid').istotope('layout');
    });

Quelle: http://isotope.metafizzy.co/methods.html

Die Lösung

Danke an @vajrasar für den letzten Schliff.

Wenn Sie die Grid-Page-Schleife wiederholen, fügen Sie Folgendes hinzu:

function loop_p_Arch_infinite_scroll_render() {
    $paged = get_query_var( 'paged', 1 );
    ?>
    <div id="page-<?=$paged?>">
        <?php while( have_posts() ) {
            the_post();
            get_template_part( 'content', 'product' );
        }
        ?>
    </div>
    <script id="script-page-<?=$paged?>">
        jQuery('document').ready(function($) {
            var new_elements = $('#page-<?=$paged?>').children('.grid-item');
            $('.grid')
                .append(new_elements)
                .isotope('appended', new_elements)
                .imagesLoaded( function() {
                    $('.grid').isotope('layout');
                });
            $('#page-<?=$paged?>, #script-page-<?=$paged?>').remove();
        });
    </script>
    <?php
}
1
iantsch