0

I'm creating an ecommerce site that has infinite scroll in the catalog page. I want to know how many times each product is show to an user in the screen (impressions). The problem is how to get the new 12 elements that renders every time a user scrolls down to a new page. Than pass their ids to the server and stores their impressions. Is there a way to access the new elements? I checked laravel documentation and I saw nothing about this.

This is my code that renders the products array in the template:

<div class="product-one">
 @foreach($products as $product)
 <div class="col-md-3 product-left"> 

 <div class="p-one simpleCart_shelfItem"> 
 <a href="{{ route('getprodpage', ['id' => $product->id]) }}">
 <img src="{{ $product->image_url1}}" alt="" />
 <div class="mask">
 <span>Comprar</span>
 </div>
 </a>
 <h4>{{ $product->name }}</h4>
 <p><a class="item_add" href="#"><i></i> 
 <span class=" item_price">
 R$ {{$product->price_min}}
 </span></a>
 </p>

 </div>
 </div>
 @endforeach()
 <div class="clearfix"> </div>
 </div>
<?php echo $products->render(); ?>

And this is the infinite scroll javascript:

$(function() {
    $('.shoes').jscroll({

        loadingHtml: '<center><img src="{{ URL::asset('images/loading.gif') }}" alt="Loading" /> </center>',
        autoTrigger: true,
        padding: 0,
        nextSelector: '.pagination li.active + li a', 
        contentSelector: 'div.shoes',

        callback: function() {
            $('ul.pagination:visible:first').hide();
        }
    });
});
Filipe Ferminiano
  • 8,373
  • 25
  • 104
  • 174

1 Answers1

0

I believe this question has been asked and answered already.

jQuery: How can I trigger an event when a div comes into view?

This post has an answer to see if an element is in the view port and also another answer for an event for when elements are in the view port.

Community
  • 1
  • 1
Justin T. Watts
  • 547
  • 1
  • 4
  • 16