Shopify themes, liquid, logos, and UX
Hi community, can you help me with this.
I want to load product without going to next page.
Thank you
Solved! Go to the solution
This is an accepted solution.
ok,
Follow this:
1. open section->collection-template.liquid file and find ' paginate.pages > 1' condition.
then add bellow code in side this condition.
<input type="hidden" value="{{ paginate.next.url }}" data-next-url> <input type="hidden" value="{{ paginate.pages }}" data-total-pages> <input type="hidden" value="{{ paginate.current_page }}" data-current-page> <div class="load-more_wrap"> <button class="btn js-load-more"> <span load-more-text>Load more</span> <span class="hide" loader>{% include 'icon-spinner' %}</span> </but
2. Now add this js in Asset->theme.js
$('.js-load-more').on('click', function(){ var $this =$(this),totalPages = parseInt($('[data-total-pages]').val()),currentPage = parseInt($('[data-current-page]').val()); $this.attr('disabled', true); $this.find('[load-more-text]').addClass('hide'); $this.find('[loader]').removeClass('hide'); var nextUrl = $('[data-next-url]').val().replace(/page=[0-9]+/,'page='+currentPage); $('[data-current-page]').val(currentPage); $.ajax({ url: nextUrl, type: 'GET', dataType: 'html', success: function(responseHTML){ $('.grid--view-items').append($(responseHTML).find('.grid--view-items').html()); }, complete: function() { if(currentPage <= totalPages) { $this.attr('disabled', false); $this.find('[load-more-text]').removeClass('hide'); $this.find('[loader]').addClass('hide'); } } }) });
This is an accepted solution.
Replace with this Js code:
$('.js-load-more').on('click', function(){ var $this =$(this),totalPages = parseInt($('[data-total-pages]').val()),currentPage = parseInt($('[data-current-page]').val()); $this.attr('disabled', true); $this.find('[loader]').removeClass('hide');
currentPage = currentPage+1; var nextUrl = $('[data-next-url]').val().replace(/page=[0-9]+/,'page='+currentPage); $('[data-current-page]').val(currentPage); $.ajax({ url: nextUrl, type: 'GET', dataType: 'html', success: function(responseHTML){ $('.grid--view-items').append($(responseHTML).find('.grid--view-items').html()); }, complete: function() { if(currentPage <= totalPages) { $this.attr('disabled', false); $this.find('[load-more-text]').removeClass('hide'); $this.find('[loader]').addClass('hide'); } } }) });
This is an accepted solution.
It's not working for the dawn theme. Please share me perfect code.
Thanks!
This is working for Dawn theme. But keep in mind to change #main-collection-product-grid to your product list id if needed
Hi @Jasoliya,
I am using Debut theme and i followed every step of what you said.
I have customized my Collection page before and i have 2 popular collection showing before the main collection.
When clicking on "load more" i want to show every prduct of the main collection but not on the 2 popular collection.
The code is working except that when i clicked on "load more" it duplicate my first popular collection on the three collection at the same time.
Any help would be much appreciated here !
here is my page : https://geek-art.fr/collections/tableaux-naruto
Instructions depends on which theme you are using.
And if you are not aware about liquid, i suggest hire some one to do this.
Hello Embey,
Check out this its exact same you are looking for, just you have to implement it in your theme code.
Thanks
User | RANK |
---|---|
137 | |
97 | |
79 | |
62 | |
61 |
Explore the 30-30-30 rule, a dynamic social media strategy for new businesses. Learn how t...
By Trevor Sep 20, 2023Discover how to leverage the often overlooked footer of your ecommerce site to gain custom...
By Skye Sep 15, 2023In this blog, we’ll be shining a light on Shopify Partners, Experts, and Affiliates. Who a...
By Imogen Sep 13, 2023