Loaded only one page and stop v.3

[XIOLog]

Hello.

I use the script v. 3 and Opencart.

I have pagination with products when the page loads normally. Your script works fine and everything looks good.

I also have several categories anchor tags with category_id in "href".

My html code:

<div class="categories">
    <div class="categories__wrap">
        <?php foreach ($categories as $category) : ?>
            <a 
                href="<?php echo $category['category_url']; ?>" 
                class="category__link"
                data-categoryId="<?php echo $category['category_id']; ?>"
             >
                 <?php echo $category['name']; ?>
             </a>
        <?php endforeach; ?>
     </div>
</div>
<div class="products">
    <?php foreach ($products as $product) : ?>
    <div class="product">
    	<div class="product__header"> <img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" class="product__image"> </div>
    	<div class="product__content">
    	    <h3 class="product__title">
                <a href="<?php echo $product['href']; ?>" class="product__link"><?php echo $product['name']; ?></a>
            </h3>
    		<div class="product__prices">
    		    <?php if (!$product['special']) : ?>
    		        <div class="product__price">
    			    <?php echo $product['price']; ?> <small class="product__price--small">/ шт.</small>
    			</div>
    		    <?php else : ?>
    			<div class="product__price">
    			    <?php echo $product['price']; ?> <small class="product__price--small">/ шт.</small>
			</div>
    			<div class="product__price product__price--old">
    			    <?php echo $product['special']; ?>
    			</div>
    		    <?php endif; ?>
    		</div>
    		<div class="product__info">
    		    <div class="product__quantity">
    			<?php echo $product['purchased']; ?>
    		    </div>
    		    <div class="product__rating">
    			<?php if ($product['rating']) : ?>
    			    <?php for ($i = 0; $i < 5; $i++) : ?>
    				<?php if ($i < $product['rating']) : ?>
    				    <div class="star star--gold"></div>
    				<?php else : ?>
    				    <div class="star"></div>
    				<?php endif; ?>
    			    <?php endfor; ?>
    			<?php endif; ?>
    		    </div>
    		</div>
    	</div>
    	<div class="product__footer">
    	    <div class="product__seller">Магазин:
    		<a href="<?php echo $product['seller_url']; ?>" class="seller__link">
    		    <?php echo $product['seller_name']; ?>
    		</a>
    	    </div>
    	    <button 
                class="product__button" 
                onclick="cart.add('<?php echo $product['product_id']; ?>', '<?php echo $product['minimum']; ?>');">
                 > 
            </button>
    	</div>
    </div>
    <?php endforeach; ?>
</div>

When I click on the button, the data is sent and I get the products of the desired category. Then I insert this data into the div:

const products = $('.products');

$.get(this.href, {category_id: $(this).attr('data-categoryId')}).done(function(data) {
    const product = $(data).find('.products');
    products.replaceWith(product);
});

All looking good.

But when I scroll down the page bellow, the items I have uploaded are deleted. In their place are loaded products from the second page. And the script stops.

My code is:

let ias = new InfiniteAjaxScroll('.products', {
    item: '.product',
    next: '.next__link',
    pagination: '.pagination',
    logger: true,
    spinner: {
        element: '.loader', // element
        delay: 600, // delay in milliseconds
        show: function(element) {
            $('<img>', {
                src: 'image/loader.gif',
                class: 'loader__image',
            }).appendTo(element);
        },
        hide: function(element) {
            $(element).find('img').remove();
        },
    },
});

Where did I go wrong?

[fieg]

Did you also update the pagination element? That’s what IAS is using to load the next page.

[XIOLog]

Yes, I did. I want to send a new url with category_id to the pagination element .

[XIOLog]

And when I clicked on the category button the page counter must be 0

[XIOLog]

I`m confused :-)

[XIOLog]

I generate pagination element in the Opencart controller and send it to the view.

$pagination = new Pagination();
$pagination->total = $productCount;
$pagination->page = $page;
$pagination->limit = $limit;
$pagination->url = $this->url->link('common/home', $url . '&page={page}');
$data['pagination'] = $pagination->render();

[XIOLog]

And got products from category via JQuery $.get

[fieg]

const products = $('.products');

$.get(this.href, {category_id: $(this).attr('data-categoryId')}).done(function(data) {
    const product = $(data).find('.products');
    products.replaceWith(product);
});

I only see you replacing the products, not the pagination element. If you change the cateogory, the next page url should also be changed, right?

[XIOLog]

Yes, it is. Category_id must be added to the url via &.

[XIOLog]

I take a category_id from data-categoryId in the category anchor tag:

<a href="<?php echo $category['category_url']; ?>"
    class="category__link"
    data-categoryId="<?php echo $category['category_id']; ?>"
>
<?php echo $category['name']; ?>
</a>

And pass it to the $.get

[XIOLog]

And products block has two states:

• when the category button is pressed and I got category_id
• when the category button is not pressed and I didn`t get category_id.

In both cases, the script should work.

[XIOLog]

Here is such a task :-)

[XIOLog]

Do you have any idea?

[fieg]

No sorry, just that you need to update the pagination after the $.get, just like you do with .products.

[XIOLog]

Ok. Thank you for all.