web-dev-qa-db-fra.com

Isotope avec rouleau infini

Utilisation de Jetpack Infinite Scroll & Isotope (Maçonnerie).

Je suis confronté à un problème dans lequel, après chaque nouvel ensemble ajaxé de messages, je dois disposer de la disposition isotopique destroy, puis build. Si je ne vais pas avec cette approche, les nouveaux articles chargés à chaque fois par le défilement infini ne sont pas traités comme tels par la disposition des isotopes et manquent par conséquent par le style isotope. J'ai donc besoin de reconstruire l'isotope à chaque fois sur le déclencheur post-load du défilement infini.

En fait, cette approche laisse l'utilisateur avec un effet de scintillement et fait défiler jusqu'au début de la disposition des isotopes.

//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
            }
        });
    })
})
plugin-jetpackinfinite-scroll
2
vajrasar

Généralement, l'isotope permet d'ajouter de nouveaux éléments, puis de simplement remodeler la maçonnerie:

Quelque part dans votre fichier JS, vous devez placer les éléments que vous souhaitez ajouter dans une variable, par exemple. new_elements

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

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

La solution

Merci à @vajrasar pour les dernières retouches.

Lorsque vous faites écho à la boucle grille-page, ajoutez ce qui suit:

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