Implement Infinity.js with E-commerce catalogue

Hi , i’m generating a catalogue with this php

<div id="product-list">
   <div class="row">
   <?php for($i=0; $i<50; $i++) : ?>
        $n = rand(1, 8);
        $m = 6;

<div class="product-container col-lg-3 col-md-4 col-sm-4 col-xs-6">
    <a class="product-link" href="<?php echo base_url($site.'/'.$catalogue.'/'.$section.'/'.$n) ?>">

        <?php if(rand(1, 5) == 5) : ?>
            <span class="outofstocklabel label label-danger">Out of stock</span>
        <?php endif ?>

            <img src="<?php echo base_url('assets/img/catalogue/0'.$n.'/0'.$n.'-1.jpg') ?>" alt="" class="img-responsive" data-hover-link="<?php echo base_url('assets/img/catalogue/0'.$n.'/0'.$n.'-5.jpg') ?>">
            <figcaption class="product-caption text-center">
                <h3 class="text-uppercase bold">Saint Laurent</h3>
                <h4>Black Studded Lambskin</h4>
                <p  class="bold">
                    <span class="currency">&euro;</span>
                    <span class="price"><?php echo number_format(rand(90, 3500)) ?></span>
<?php endfor ?>

I’m using Airbnb Infinity.js to create the infinite scroll and my code:

var $newContent = $('.product-container');

var $el = $('#product-list .row');


var listView = new infinity.ListView($el);

    listView.append( $(this) );

var listItems = listView.find('.product-container');

for(var index = 0, length = listItems.length; index < length; index++) {

For now my code is not working correctly. When i start scroll the .product-container item sometimes disappear .

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.