Items shown and total items with infinite-scroll

Question

I'm implementing an infinite scroll with https://infinite-scroll.com/ at a prestashop for products list and I would like to show the items shown and the total items. I have a smarty variable with the total items and the items shown in first place. I'm using the "view more" button option and the problem is that, once the site is loaded, I can't change the smarty variables, I don't know how to do it with javascript and I think there's no infinite-scroll option for that.

{$listing.pagination['total_items']}
  
  {$listing.pagination['items_shown_to']}

  <button class="infinite-scroll-button" onclick=""> {* Can't increase items_shown_to at onclick becaus it's a smarty variable *}
    {l s='See more' d='Shop.Theme.Actions'}
  </button>
  <p class="items-shown">{l s='You have seen' d='Shop.Theme.Global'} {$items_shown_to} {l s='products of' d='Shop.Theme.Global'} {$listing.pagination['total_items']}

Answer 1

I finally sorted it out at the js event that shows more products when the button is clicked (append.infiniteScroll) which actually has the number of new items that have been displayed on each click (items.length). I have all this at themes/my_theme/templates/catalog/_partials/productlist.tpl

I've just used a span at the products.tpl with an attribute to get the current items shown.

<button class="infinite-scroll-button">
    {l s='See more' d='Shop.Theme.Actions'}
  </button>
  <p class="items-shown">{l s='Has visto' d='Shop.Theme.Global'} <span id="items_shown_to" items_shown="{$listing.pagination['items_shown_to']}">{$listing.pagination['items_shown_to']}</span>
   {l s='productos de' d='Shop.Theme.Global'} {$listing.pagination['total_items']} </p>

And I update the value at the append event:

$('#items_shown_to').attr('items_shown',parseInt($('#items_shown_to').attr('items_shown'))+parseInt(items.length));
        $('#items_shown_to').text($('#items_shown_to').attr('items_shown'));

I hope this is useful for someone else.

Thanks.