Botão Carregar mais para a página de coleção com rolagem para cima

Load More Button for Collection Page with Scroll to Top

Compatibilidade: Todos os temas do Shopify

Adicione um botão "Carregar mais" com um botão "Rolagem para o topo". Eu criei uma rolagem infinita, confira o link para o código, mas se preferir um botão "Carregar mais", siga as instruções abaixo.

Altere o texto "Carregar mais" quando renderizar o código para o que você desejar.

Confira a loja DEMO aqui 💻. Senha: made4uo

O que você está adquirindo:

  • Carregar produtos na coleção usando um botão
  • Compatível com dispositivos móveis

O que torna nosso código melhor:

  • Não usamos bibliotecas externas, portanto, nosso código terá pouco ou nenhum impacto na velocidade de seu site
  • Não deixamos ou adicionamos códigos para fazer propaganda de nosso site
  • Nosso código é compatível com dispositivos móveis

Quaisquer problemas relacionados ao código serão corrigidos sem custo adicional, excluindo solicitações de personalização de código. Basta nos contatar com "Converse conosco". Estamos a apenas um clique de distância.

Para começar:

1. Na sua página de Administração, vá para Loja online > Temas
2. Escolha o tema que deseja editar e clique em Ação > Editar código.
3. Abra a pasta de Fragmentos e clique em "criar um novo fragmento", dê a ele o nome "load-more". Em seguida, cole o código abaixo e clique em SALVAR.

{% comment %}
  {% render 'load-more', next_page: paginate.next.url, page_size: paginate.pages, load_more_text: "Load more", end_text: "No more products to load" %}
{% endcomment %}
<load-more data-next="{{ next_page }}" data-page-size="{{ page_size }}" data-end-text="{{ end_text }}">
  {% if page_size > 1 %}
    <div class="loadingBox hide-loading">
      <span id="loading_1" class="loadingScroll">&nbsp</span>
      <span id="loading_2" class="loadingScroll">&nbsp</span>
      <span id="loading_3" class="loadingScroll">&nbsp</span>
      <span id="loading_4" class="loadingScroll">&nbsp</span>
      <span id="loading_5" class="loadingScroll">&nbsp</span>
      <span id="loading_6" class="loadingScroll">&nbsp</span>
      <span id="loading_7" class="loadingScroll">&nbsp</span>
      <span id="loading_8" class="loadingScroll">&nbsp</span>
    </div>
    <button class="loadMoreBtn btn button">{{ load_more_text }}</button>
  {% endif %}
</load-more>
<div class="scrollToTopButton">Scroll To Top</div>
<style>
load-more {
  position: relative;
  width: 100%;
  font-weight: 600;
  display: flex;
  gap: 1rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease;
}
.loadingBox {
  position: relative;
  width: 234px;
  height: 28px;
  margin: auto;
  opacity: 1;
  transition: opacity ease 0.5s;
}
.loadingScroll {
  position: absolute;
  top: 0;
  background-color: rgb(0, 0, 0);
  width: 28px;
  height: 28px;
  animation-name: loading_animation;
  -o-animation-name: loading_animation;
  -ms-animation-name: loading_animation;
  -webkit-animation-name: loading_animation;
  -moz-animation-name: loading_animation;
  animation-duration: 1.5s;
  -o-animation-duration: 1.5s;
  -ms-animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;
  -moz-animation-duration: 1.5s;
  animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-direction: normal;
  -o-animation-direction: normal;
  -ms-animation-direction: normal;
  -webkit-animation-direction: normal;
  -moz-animation-direction: normal;
  transform: scale(0.3);
  -o-transform: scale(0.3);
  -ms-transform: scale(0.3);
  -webkit-transform: scale(0.3);
  -moz-transform: scale(0.3);
}
.scrollToTopButton {
  position: fixed;
  bottom: 20px;
  right: 149px;
  background: #ececec;
  padding: 5px 10px;
  z-index: 1;
  cursor: pointer;
  border-radius: 5px;
  display: none;
}
.hide-loading {
  opacity: 0 !important;
}
#loading_1 {
  left: 0;
  animation-delay: 0.6s;
  -o-animation-delay: 0.6s;
  -ms-animation-delay: 0.6s;
  -webkit-animation-delay: 0.6s;
  -moz-animation-delay: 0.1s;
}
#loading_2 {
  left: 29px;
  animation-delay: 0.75s;
  -o-animation-delay: 0.75s;
  -ms-animation-delay: 0.75s;
  -webkit-animation-delay: 0.75s;
  -moz-animation-delay: 0.25s;
}
#loading_3 {
  left: 58px;
  animation-delay: 0.9s;
  -o-animation-delay: 0.9s;
  -ms-animation-delay: 0.9s;
  -webkit-animation-delay: 0.9s;
  -moz-animation-delay: 0.5s;
}
#loading_4 {
  left: 88px;
  animation-delay: 1.05s;
  -o-animation-delay: 1.05s;
  -ms-animation-delay: 1.05s;
  -webkit-animation-delay: 1.05s;
  -moz-animation-delay: 0.55s;
}
#loading_5 {
  left: 117px;
  animation-delay: 1.2s;
  -o-animation-delay: 1.2s;
  -ms-animation-delay: 1.2s;
  -webkit-animation-delay: 1.2s;
  -moz-animation-delay: 1.2s;
}
#loading_6 {
  left: 146px;
  animation-delay: 1.35s;
  -o-animation-delay: 1.35s;
  -ms-animation-delay: 1.35s;
  -webkit-animation-delay: 1.35s;
  -moz-animation-delay: 1.35s;
}
#loading_7 {
  left: 175px;
  animation-delay: 1.5s;
  -o-animation-delay: 1.5s;
  -ms-animation-delay: 1.5s;
  -webkit-animation-delay: 1.5s;
  -moz-animation-delay: 0.75s;
}
#loading_8 {
  left: 205px;
  animation-delay: 1.64s;
  -o-animation-delay: 1.64s;
  -ms-animation-delay: 1.64s;
  -webkit-animation-delay: 1.64s;
  -moz-animation-delay: 1.15s;
}
@keyframes loading_animation {
  0% {
    transform: scale(1);
    background-color: rgb(0, 0, 0);
  }
  100% {
    transform: scale(0.3);
    background-color: rgb(255, 255, 255);
  }
}
@-o-keyframes loading_animation {
  0% {
    -o-transform: scale(1);
    background-color: rgb(0, 0, 0);
  }
  100% {
    -o-transform: scale(0.3);
    background-color: rgb(255, 255, 255);
  }
}
@-ms-keyframes loading_animation {
  0% {
    -ms-transform: scale(1);
    background-color: rgb(0, 0, 0);
  }
  100% {
    -ms-transform: scale(0.3);
    background-color: rgb(255, 255, 255);
  }
}
@-webkit-keyframes loading_animation {
  0% {
    -webkit-transform: scale(1);
    background-color: rgb(0, 0, 0);
  }
  100% {
    -webkit-transform: scale(0.3);
    background-color: rgb(255, 255, 255);
  }
}
@-moz-keyframes loading_animation {
  0% {
    -moz-transform: scale(1);
    background-color: rgb(0, 0, 0);
  }
  100% {
    -moz-transform: scale(0.3);
    background-color: rgb(255, 255, 255);
  }
}
load-more {
  position: relative;
  width: 100%;
  font-weight: 600;
  display: flex;
  gap: 1rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease;
}
.loadingBox {
  position: relative;
  width: 234px;
  height: 28px;
  margin: auto;
  opacity: 1;
  transition: opacity ease 0.5s;
}
.loadingScroll {
  position: absolute;
  top: 0;
  background-color: rgb(0, 0, 0);
  width: 28px;
  height: 28px;
  animation-name: loading_animation;
  -o-animation-name: loading_animation;
  -ms-animation-name: loading_animation;
  -webkit-animation-name: loading_animation;
  -moz-animation-name: loading_animation;
  animation-duration: 1.5s;
  -o-animation-duration: 1.5s;
  -ms-animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;
  -moz-animation-duration: 1.5s;
  animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-direction: normal;
  -o-animation-direction: normal;
  -ms-animation-direction: normal;
  -webkit-animation-direction: normal;
  -moz-animation-direction: normal;
  transform: scale(0.3);
  -o-transform: scale(0.3);
  -ms-transform: scale(0.3);
  -webkit-transform: scale(0.3);
  -moz-transform: scale(0.3);
}
.scrollToTopButton {
  position: fixed;
  bottom: 20px;
  right: 149px;
  background: #ececec;
  padding: 5px 10px;
  z-index: 1;
  cursor: pointer;
  border-radius: 5px;
  display: none;
}
.hide-loading {
  opacity: 0 !important;
}
#loading_1 {
  left: 0;
  animation-delay: 0.6s;
  -o-animation-delay: 0.6s;
  -ms-animation-delay: 0.6s;
  -webkit-animation-delay: 0.6s;
  -moz-animation-delay: 0.1s;
}
#loading_2 {
  left: 29px;
  animation-delay: 0.75s;
  -o-animation-delay: 0.75s;
  -ms-animation-delay: 0.75s;
  -webkit-animation-delay: 0.75s;
  -moz-animation-delay: 0.25s;
}
#loading_3 {
  left: 58px;
  animation-delay: 0.9s;
  -o-animation-delay: 0.9s;
  -ms-animation-delay: 0.9s;
  -webkit-animation-delay: 0.9s;
  -moz-animation-delay: 0.5s;
}
#loading_4 {
  left: 88px;
  animation-delay: 1.05s;
  -o-animation-delay: 1.05s;
  -ms-animation-delay: 1.05s;
  -webkit-animation-delay: 1.05s;
  -moz-animation-delay: 0.55s;
}
#loading_5 {
  left: 117px;
  animation-delay: 1.2s;
  -o-animation-delay: 1.2s;
  -ms-animation-delay: 1.2s;
  -webkit-animation-delay: 1.2s;
  -moz-animation-delay: 1.2s;
}
#loading_6 {
  left: 146px;
  animation-delay: 1.35s;
  -o-animation-delay: 1.35s;
  -ms-animation-delay: 1.35s;
  -webkit-animation-delay: 1.35s;
  -moz-animation-delay: 1.35s;
}
#loading_7 {
  left: 175px;
  animation-delay: 1.5s;
  -o-animation-delay: 1.5s;
  -ms-animation-delay: 1.5s;
  -webkit-animation-delay: 1.5s;
  -moz-animation-delay: 0.75s;
}
#loading_8 {
  left: 205px;
  animation-delay: 1.64s;
  -o-animation-delay: 1.64s;
  -ms-animation-delay: 1.64s;
  -webkit-animation-delay: 1.64s;
  -moz-animation-delay: 1.15s;
}
@keyframes loading_animation {
  0% {
    transform: scale(1);
    background-color: rgb(0, 0, 0);
  }
  100% {
    transform: scale(0.3);
    background-color: rgb(255, 255, 255);
  }
}
@-o-keyframes loading_animation {
  0% {
    -o-transform: scale(1);
    background-color: rgb(0, 0, 0);
  }
  100% {
    -o-transform: scale(0.3);
    background-color: rgb(255, 255, 255);
  }
}
@-ms-keyframes loading_animation {
  0% {
    -ms-transform: scale(1);
    background-color: rgb(0, 0, 0);
  }
  100% {
    -ms-transform: scale(0.3);
    background-color: rgb(255, 255, 255);
  }
}
@-webkit-keyframes loading_animation {
  0% {
    -webkit-transform: scale(1);
    background-color: rgb(0, 0, 0);
  }
  100% {
    -webkit-transform: scale(0.3);
    background-color: rgb(255, 255, 255);
  }
}
@-moz-keyframes loading_animation {
  0% {
    -moz-transform: scale(1);
    background-color: rgb(0, 0, 0);
  }
  100% {
    -moz-transform: scale(0.3);
    background-color: rgb(255, 255, 255);
  }
}
</style>
<script>  
class LoadMoreComponent extends HTMLElement {
constructor() {
super();
this.gridParent = this.previousElementSibling;
this.gridContainer = this.gridParent.querySelector("#product-grid");
this.pagination = document.querySelector('[class^="pagination"]');
 
this.page = 1;
this.scrollToTopBtn = document.querySelector(".scrollToTopButton");
if(this.scrollToTopBtn) this.scrollToTopBtn.addEventListener("click", this.scrollToTopFx.bind(this)) 
this.loadMoreBtn = this.querySelector(".loadMoreBtn");
this.loadMoreBtn.addEventListener('click', this.pageSet.bind(this));
this.loading = this.querySelector('.loadingBox');
this.pagination.style.display = "none"; 
window.addEventListener('scroll', () => {
if(window.scrollY < 300){
this.scrollToTopBtn.style.display = "none"
} else {
this.scrollToTopBtn.style.display = "block"
}
})
}
pageSet() {
this.page++;
this.loading.classList.remove('hide-loading');
this.fetchNextPage(this.page);
} 
fetchNextPage(t) {
if (t <= this.dataset.pageSize) {
const pageUrl = `{{ shop.url }}/${this.dataset.next}`;
const url = new URL(pageUrl);
url.searchParams.set("page", t); // setting your param
const newUrl = url.href;
fetch(`${url}`, { method: "GET", headers: { "Content-Type": "text/html" } })
.then((t) => t.text())
.then((t) => {
const e = new DOMParser().parseFromString(t, "text/html");
this.gridContainer.insertAdjacentHTML("beforeend", e.querySelector("#product-grid").innerHTML);
})
["finally"](() => {
this.loading.classList.add('hide-loading');
if (t == this.dataset.pageSize) {
this.innerHTML = `<h2>${this.dataset.endText}</h2>`;
}
})
["catch"]((t) => {
console.error("Error:", t);
});
}
} 
scrollToTopFx(t) {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
}
customElements.define("load-more", LoadMoreComponent);
</script>

 

5. Em seguida, localize o {%- endpaginate -%}. Em seguida, coloque o código abaixo dele.

Em alguns temas, você pode precisar encontrar o código {% render 'pagination' %} e colocar o código após ele. Para a versão atualizada do Dawn 8 e acima, por favor, procure pelo código {% render pagination... e coloque o código após o {% endif %}. Veja a imagem abaixo:

Posicionamento do scroll infinito

{% render 'load-more', next_page: paginate.next.url, page_size: paginate.pages, load_more_text: "Load more", end_text: "No more products to load" %}

 

 

Adicione um botão 'Carregar mais' com um botão 'Rolar para o topo' à sua página de Coleção.

2 comentários

Thank you so much!
Works perfectly

Veronika •

How to create multiple Load More buttons on a page?

kabir sam •

Deixe um comentário