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.
Hi @Embey
You want to load product on collection page with ajax so page cant load?
You can find this code in Section->collection-template.liquid file. its your collection page file.
@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
Hi @Jasoliya, thanks for everything. The load more botton works perfectely but I have two issues: 1. I still have those arrows which allow you to change the page to see more products, and 2. My load more botton is on my left, and I saw that you sent a code to solve this problem but I don´t know where I have to put it exactely. Can you help me?
This is my website link: https://fullofgrace.com.co/collections/aretes
I really will apreciate your help
@Jasoliya I worked on that and now I´ve solved all those issues, but I have a problem, at the end of the last "load more" there is still a button, but nothing loads because all products of that collection are already shown. What should I do?
Thanks.
Hi
You have to follow proper way it work, if you miss anything it will not work and need code check whats affecting. cant say direct.
Hi @AndyBerlin, you can replace the second code for this one, it worked for me:
$('.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');
} else {
$this.attr('disabled', true); $this.find('[load-more-text]').addClass('hide'); $this.find('[loader]').addClass('hide');
}
}
})
});
Thanks Jasoliya!!
This code work perfectly.
But one more thing. When I paste this code on multiple section and click for one section but load more all section.
Please see the attached.
Please help me for multiple section on same page.
The code snippets are cut off. Can you please provide the full snippet? Thanks.
Hi,
I implemented the code for collection-template.liquid but the 'Load More' button is not centered on the page, it is on the left. Can you please let me know how to fix this?
Thanks in advance!
Austin
Hi @AMarx_ , you can replace the first code for this one:
@Chicafull Thanks! I figured this out, but now I am having a similar issue as to what you previously posted where the load more button doesn't go away once you get to the bottom of the page. In my case, it is also repeating the first page over and over and doesn't display any products that were previously on page 2. https://antheianyc.com/collections/plants
Were you able to get your Load More button to go away?
I tired this code on debut theme seems like its getting the same first page products and loads them again and again so i update the code a little to make it work as it works for me
<input type="hidden" value="{{ paginate.next.url }}" data-next-link>
<input type="hidden" value="{{ paginate.pages }}" data-all-pages>
<input type="hidden" value="{{ paginate.current_page }}" data-this-page>
<input type="hidden" value="{{ collection.url }}" data-coll-url>
<div class="load-more_wrap">
<button class="btn js-load-more">
<span load-more-text>Load more</span>
<span class="hide" loader>
<img src="{{ 'loader.gif' | asset_url }}"/>
</span>
</button>
</div>
$('.js-load-more').on('click', function(){
var $this =$(this),
totalPages = parseInt($('[data-all-pages]').val()),
currentPage = parseInt($('[data-this-page]').val()),
datacollurl = $('[data-coll-url]').val();;
$this.attr('disabled', true);
$this.find('[load-more-text]').addClass('hide');
$this.find('[loader]').removeClass('hide');
var nextUrl = $('[data-next-link]').val();
var current_page_new = currentPage + 1;
var next_coll = currentPage + 2;
//alert(current_page_new)
//return false;
$.ajax({
url: nextUrl,
type: 'GET',
dataType: 'html',
success: function(responseHTML){
$('[data-next-link]').val(datacollurl + "?page="+next_coll);
$('[data-this-page]').val(current_page_new);
$('.grid--view-items').append($(responseHTML).find('.grid--view-items').html());
},
complete: function() {
if(current_page_new < totalPages) {
$this.attr('disabled', false); $this.find('[load-more-text]').removeClass('hide'); $this.find('[loader]').addClass('hide');
}
if(current_page_new >= totalPages) {
$this.find('[load-more-text]').text('Products Finished').removeClass('hide'); $this.find('[loader]').addClass('hide');
}
}
})
});
Hi, sir i tried your code and it worked
can you tell me the possible solution for after clicking it shows all products sudden as i attached the reference link below
https://www.ninelineapparel.com/collections/mens-apparel
if you can help me
This instruction is for debut theme so you can take idea. or need custom code for other theme.
I am using Debut and this does not work for me. When I click Load More nothing happens and I get an error: "Uncaught ReferenceError: $ is not defined"
for theme.js
$('.js-load-more').on('click', function(){
var $this =$(this),
totalPages = parseInt($('[data-all-pages]').val()),
currentPage = parseInt($('[data-this-page]').val()),
datacollurl = $('[data-coll-url]').val();;
$this.attr('disabled', true);
$this.find('[load-more-text]').addClass('hide');
$this.find('[loader]').removeClass('hide');
var nextUrl = $('[data-next-link]').val();
var current_page_new = currentPage + 1;
var next_coll = currentPage + 2;
//alert(current_page_new)
//return false;
$.ajax({
url: nextUrl,
type: 'GET',
dataType: 'html',
success: function(responseHTML){
$('[data-next-link]').val(datacollurl + "?page="+next_coll);
$('[data-this-page]').val(current_page_new);
$('.grid--view-items').append($(responseHTML).find('.grid--view-items').html());
},
complete: function() {
if(current_page_new < totalPages) {
$this.attr('disabled', false); $this.find('[load-more-text]').removeClass('hide'); $this.find('[loader]').addClass('hide');
}
if(current_page_new >= totalPages) {
$this.find('[load-more-text]').text('Products Finished').removeClass('hide'); $this.find('[loader]').addClass('hide');
}
}
})
});
A solution for Dawn theme
<load-more class="load-more_wrap"
data-next-url="{{ paginate.next.url }}"
data-current-page="{{ paginate.current_page }}"
data-total-pages="{{ paginate.pages }}"
data-page-size="{{ paginate.page_size }}"
data-total-items="{{paginate.items}}"
>
<script>console.log({{ paginate | json }})</script>
<div class="load-more_row">
Items shown
</div>
<div class="load-more_row">
<span load-items-count>{{ paginate.page_size }}</span> / {{paginate.items}}
</div>
<button class="load-more_row button button--secondary js-load-more" type="button">
Load more
</button>
</load-more>
class LoadMore extends HTMLElement {
constructor(){
super();
this.addEventListener("click", this.loadMoreItems);
}
loadMoreItems() {
const loadMoreBtn = this.querySelector('[type="button"]');
loadMoreBtn.setAttribute("disabled", true);
let { currentPage, pageSize, nextUrl, totalItems } = this.dataset
let nextPage = parseInt(this.dataset.currentPage) + 1
fetch(nextUrl.replace(/page=[0-9]+/,'page='+ nextPage))
.then(response => response.text())
.then((responseText) => {
const html = responseText;
$('#main-collection-product-grid').append($(html).find('#main-collection-product-grid').html());
}).catch((e) => {
// handle error
console.error(e);
})
.finally(() => {
loadMoreBtn.removeAttribute("disabled");
this.dataset.currentPage = parseInt(this.dataset.currentPage) + 1;
let isLastPage = parseInt(totalItems) - (nextPage * parseInt(pageSize) ) < 0
this.querySelector('[load-items-count]').innerHTML = isLastPage ? parseInt(totalItems) : nextPage * parseInt(pageSize)
isLastPage && loadMoreBtn.setAttribute("disabled", true);
});
}
}
customElements.define('load-more', LoadMore);
Hey @Kostop19 ,
It's not working for the dawn theme. Can you please recheck the code again and also suggest that where the code should be implemented means in which file and at which point. I had implemented the code after the condition {%- if paginate.pages > 1 -%} in the main-collection-product-grid.liquid but the doenst't worked for me.
User | RANK |
---|---|
145 | |
98 | |
78 | |
69 | |
65 |
This blog post is a recap of the webinar Getting Ready For BFCM: How To Run A Flash Sal...
By Jacqui Oct 3, 2023Explore 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, 2023