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.
Hello Embey,
Check out this its exact same you are looking for, just you have to implement it in your theme code.
Thanks
Instructions depends on which theme you are using.
And if you are not aware about liquid, i suggest hire some one to do this.
@Jasoliya yes i have this section and see some of code available but not all, can you advice me please i have simple theme and want to set button that load more product.
Ok, You have Snippet->product-grid.liquid file on theme? or check in section->collection-template.liquid file inside bellow loop which file you have added.
{% for product in collection.products %} {% endfor%}
No i have product-card-grid.liquid this file in snippet. thank you
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'); } } }) });
Hi jasoliya
Thank you for your code and instructions its very helped me, but i am getting some issue like i have now 'icon-spinner' on my snippet what i need to add here ?
Thank you its work can you please check when i click on load button it load same product not next page product.thank you. url sent you
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'); } } }) });
Yes its worked fine,thank you
Can you see load button left aligned can i make it center ?
This is an accepted solution.
Thank you so much Jasoliya, its work very well. really appropriate
hi, that works very well.
but at the end of the last "load more" there is still a button, but nothings loads because all products of that collection are already shown.
thansk
andy
i will send shop url to your email
thanks Andy
User | RANK |
---|---|
121 | |
96 | |
77 | |
69 | |
38 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022