Real Infinite Scroll for Shopify Collection Page

Rolagem infinita real para a página de coleção do Shopify

Log in or Sign up to ensure access to purchased code across multiple devices.

Como ver o código

1. Faça login/crie uma conta primeiro. Isso é para garantir que todas as compras estejam conectadas a uma conta e possam ser visualizadas em diferentes dispositivos.

2. Adquira o código através da “caixa de compras” na página específica do código desejado.

3. Após a compra, atualize a página.

Compatibilidade: todos os temas do Shopify

Este código substitui a paginação padrão na página da coleção e carrega os produtos quando eles rolam para baixo, por isso é uma rolagem infinita real. Sem clicar em um botão. Nenhum aplicativo ou biblioteca está sendo usado.

O código escrito usa a API Intersection Observer, que é melhor do que ouvir o evento scroll.

“A API Intersection Observer fornece uma maneira de observar de forma síncrona mudanças na interseção de um elemento de destino com um elemento ancestral ou com a janela de visualização de um documento de nível superior.” -Mozilla _

O desempenho do site não está sendo afetado pelo código. Veja a imagem abaixo (resultado do farol) após a instalação do código.

desempenho

Isso também é compatível com dispositivos móveis e funciona bem com dispositivos com tela de toque. Também adicionei um botão de rolagem para cima.

Você pode conferir a loja de demonstração aqui . Senha: made4uo

Limitações: certifique-se de ter mais de 10 produtos em cada página de paginação para carregar o outro conjunto de produtos.

O que você está comprando:

  • O produto carrega quando o usuário rola até o final da página
  • Sem clicar no botão
  • Código bem escrito sem nenhuma biblioteca externa sendo usada

O que torna nosso código melhor:

  • Não usamos bibliotecas externas, com isso dito, nosso código não terá nenhum efeito mínimo no desempenho de velocidade do seu site
  • Não deixamos nem adicionamos códigos para anunciar em 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 customização de código. Basta entrar em contato conosco em "Converse conosco". Estamos a apenas um botão de distância.

Para iniciar:

1. Vá para a página Admin > Loja online > Temas > Ações > Editar código

2. Abra a pasta Snippet e clique em "Adicionar um novo snippet", nomeie-a como "rolagem infinita" e cole o código abaixo.

 { % Comente % } 
{ % render 'rolagem infinita' , next_page : paginate. próximo . url , page_size : paginar. pages , end_text : "Não há mais produtos para carregar" % }
 { % comentário final % } 
< infinito - dados de rolagem - próximo = " {{ next_page }} " dados - página - size = " {{ page_size }} " dados - end - text = " {{ end_text }} " > 
{ % se tamanho_da_página > 1 % }
 < div class = "loadingBox" >
 < 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> _ _
 { % fim se % }
 </ infinito - rolagem > 
< div class = "scrollToTopButton" > Rolar para o topo </ div >
 <estilo> _
 Rolagem infinita {
 posição : relativa ;
 largura : 100 %;
 peso da fonte : 600 ; 
exibição : flexível ;
 alinhar - itens : centro ;
 justificar - conteúdo : centro ;
 transição : todos os 0,5s de facilidade ;
 }
 . carregandoCaixa {
 posição : relativa ;
 largura : 234px ;
 altura : 28px ;
 margem : automática ;
 } 
. carregandoScroll {
 posição : absoluta ;
 topo : 0 ;
 cor de fundo : rgb ( 0 , 0 , 0 ) ;
 largura : 28px ;
 altura : 28px ; 
nome da animação : loading_animation ;
 -o - animação - nome : loading_animation ;
 -ms - animação - nome : load_animation ;
 - webkit -animação -nome : load_animation ; 
-moz - animação - nome : load_animation ;
 animação - duração : 1,5s ;
 -o - animação - duração : 1,5s ;
 - ms - animação - duração : 1,5s ;
 - webkit - animação - duração : 1,5s ; 
- moz - animação - duração : 1,5s ;
 animação - iteração - contagem : infinito ;
 -o - animação - iteração - contagem : infinito ;
 -ms - animação - iteração - contagem : infinito ; 
-webkit -animação -iteração -contagem : infinito ;
 -moz - animação - iteração - contagem : infinito ;
 direção da animação : normal ;
 -o - animação - direção : normal ; 
-ms - animação - direção : normal ;
 -webkit -animação -direção : normal ;
 -moz - animação - direção : normal ;
 transformar : escala ( 0,3 ) ; 
-o - transform : escala ( 0,3 ) ;
 -ms - transform : escala ( 0,3 ) ;
 -webkit - transform : escala ( 0,3 ) ; 
-moz - transform : escala ( 0,3 ) ;
 }
 . scrollToTopButton {
 posição : fixa ;
 inferior : 20px ;
 direita : 149px ;
 histórico : #ececec;
 preenchimento : 5px 10px ; 
índice z : 1 ;
 cursor : ponteiro ;
 raio da borda : 5px ;
 }
 #carregando_1 {
 esquerda : 0 ;
 animação - atraso : 0,6s ;
 -o - animação - atraso : 0,6s ; 
- ms - animação - atraso : 0,6s ;
 - webkit - animação - atraso : 0,6s ;
 - moz - animação - atraso : 0,6s ;
 }
 #carregando_2 {
 esquerda : 29px ;
 animação - atraso : 0,75s ; 
-o - animação - atraso : 0,75s ;
 - ms - animação - atraso : 0,75s ;
 - webkit - animação - atraso : 0,75s ;
 - moz - animação - atraso : 0,75s ;
 }
 #carregando_3 { 
esquerda : 58px ;
 atraso de animação : 0,9s ;
 -o - animação - atraso : 0,9s ;
 - ms - animação - atraso : 0,9s ;
 - webkit - animação - atraso : 0,9s ; 
- moz - animação - atraso : 0,9s ;
 }
 #carregando_4 {
 esquerda : 88px ;
 animação - atraso : 1,05s ;
 -o - animação - atraso : 1,05s ;
 - ms - animação - atraso : 1,05s ; 
- webkit - animação - atraso : 1,05s ;
 - moz - animação - atraso : 1,05s ;
 }
 #carregando_5 {
 esquerda : 117px ;
 atraso de animação : 1,2s ;
 -o - animação - atraso : 1,2s ; 
- ms - animação - atraso : 1,2s ;
 - webkit - animação - atraso : 1,2s ;
 - moz - animação - atraso : 1,2s ;
 }
 #carregando_6 {
 esquerda : 146px ;
 animação - atraso : 1,35s ; 
-o - animação - atraso : 1,35s ;
 - ms - animação - atraso : 1,35s ;
 - webkit - animação - atraso : 1,35s ;
 - moz - animação - atraso : 1,35s ;
 }
 #carregando_7 { 
esquerda : 175px ;
 animação - atraso : 1,5s ;
 -o - animação - atraso : 1,5s ;
 - ms - animação - atraso : 1,5s ;
 - webkit - animação - atraso : 1,5s ; 
- moz - animação - atraso : 1,5s ;
 }
 #carregando_8 {
 esquerda : 205px ;
 atraso de animação : 1,64s ;
 -o - animação - atraso : 1,64s ;
 - ms - animação - atraso : 1,64s ; 
- webkit - animação - atraso : 1,64s ;
 - moz - animação - atraso : 1,64s ;
 }
 @keyframes carregando_animação {
 0 % {
 transformar : escala ( 1 ) ; 
cor de fundo : rgb ( 0 , 0 , 0 ) ;
 }
 100 % {
 transformar : escala ( 0,3 ) ; 
cor de fundo : rgb ( 255 , 255 , 255 ) ;
 }
 }
 @ - o - quadros-chave loading_animation {
 0 % { 
-o - transform : escala ( 1 ) ;
 cor de fundo : rgb ( 0 , 0 , 0 ) ;
 }
 100 % { 
-o - transform : escala ( 0,3 ) ;
 cor de fundo : rgb ( 255 , 255 , 255 ) ;
 }
 }
 @ - ms - quadros-chave loading_animation { 
0 % {
 -ms - transform : escala ( 1 ) ;
 cor de fundo : rgb ( 0 , 0 , 0 ) ;
 }
 100 % { 
-ms - transform : escala ( 0,3 ) ;
 cor de fundo : rgb ( 255 , 255 , 255 ) ;
 }
 }
 @ - webkit - quadros-chave loading_animation { 
0 % {
 -webkit - transform : escala ( 1 ) ;
 cor de fundo : rgb ( 0 , 0 , 0 ) ;
 }
 100 % { 
-webkit - transform : escala ( 0,3 ) ;
 cor de fundo : rgb ( 255 , 255 , 255 ) ;
 }
 }
 @ - moz - quadros-chave loading_animation { 
0 % {
 -moz - transform : escala ( 1 ) ;
 cor de fundo : rgb ( 0 , 0 , 0 ) ;
 }
 100 % { 
-moz - transform : escala ( 0,3 ) ;
 cor de fundo : rgb ( 255 , 255 , 255 ) ;
 }
 }
 </ estilo >
 <roteiro> _ 
classe InfiniteScroll estende HTMLElement {
 construtor ( ) {
 super ( ) ;
 esse . gridParent = isto . elementopai ;
 esse . gridContainer ; 
if ( this . gridParent . querySelector ( "#main-collection-product-grid" ) ) {
 esse . gridContainer = isto . gridParent . querySelector (
 "#grade-produto-coleção principal"
 ) ; 
} outro {
 esse . gridContainer = isto . gridParent . querySelector ( "#grade-produto" ) ;
 } 
esse . paginação = documento. querySelector ( '[class^="paginação"]' ) ;
 esse . iniciar ( ) ;
 esse . página = 1 ; 
esse . scrollToTopBtn = documento. querySelector ( ".scrollToTopButton" ) ;
 esse . scrollToTopBtn . addEventListener (
 "clique" ,
 esse . scrollToTopFx . vincular ( isto ) 
) ;
 }
 iniciar ( ) {
 const e = new IntersectionObserver ( este . revelarItem . vincular ( este ) , {
 raiz : nulo , 
limite : 0,05 ,
 } ) ;
 e. observe ( isto ) ;
 if ( ! this . pagination ) return ; 
esse . paginação . estilo . exibir = "nenhum" ;
 }
 buscarNextPage ( e ) {
 if ( e <= this . dataset . pageSize ) { 
const t = ` { { loja. url } } / $ { este . conjunto de dados . próximo } ` ;
 const i = nova URL ( t ) ; 
eu. searchParams . set ( "página" , e ) ;
 const r = eu. href ; 
fetch ( `$ { i } ` , { método : "GET" , cabeçalhos : { "Content-Type" : "text/html" } } ) 
. então ( ( e ) => e. texto ( ) )
 . então ( ( e ) => { 
const t = novo DOMParser ( ) . parseFromString ( e , "texto/html" ) ;
 deixe eu ;
 if ( t. querySelector ( "# main-collection-product-grid" ) ) { 
eu = t. querySelector ( "#main-collection-product-grid" ) . HTML interno ;
 } outro {
 eu = t. querySelector ( "#grade-produto" ) . HTML interno ;
 } 
esse . gridContainer . insertAdjacentHTML ( "antes do fim" , i ) ;
 } )
 [ "finalmente" ] ( ( ) => { } ) 
[ "pegar" ] ( ( e ) => {
 console. erro ( "Erro:" , e ) ;
 } ) ;
 } 
if ( e == este . conjunto de dados . pageSize ) {
 esse . innerHTML = ` < h2 > $ { this . conjunto de dados . endText } </ h2 > ` ;
 } 
}
 revelarItem ( e , t ) {
 const [ i ] = e ;
 if ( ! i. isIntersecting ) return ;
 if ( ou seja, alvo ) { 
esse . página ++;
 esse . fetchNextPage ( esta.página ) ; _
 }
 if ( esta.página == este.conjunto de dados.pageSize ) { _ 
t. não observar ( ou seja, alvo ) ;
 }
 }
 scrollToTopFx ( e ) {
 documento. corpo . scrollTop = 0 ;
 documento. documentElement . scrollTop = 0 ; 
e. atualTarget . estilo . exibir = "nenhum" ;
 }
 }
 elementos personalizados. define ( "rolagem infinita" , InfiniteScroll ) ;
 </roteiro> _

3. Abra o modelo de coleção do tema correspondente. Geralmente está na pasta Seção. Para temas gratuitos do Shopify 2.0, é "main-collection-product-grid.liquid".

Nome do tema | Nome da pasta | Nome da coleção

Qualquer tema GRATUITO do Shopify 2.0 | Seção | main-coleção-produto-grid.liquid

Estreia | Seção | modelo de coleção.liquid

Mínimo | Seção | modelo de coleção.liquid

Fornecimento | Seção | modelo de coleção.liquid

Empreendimento | Modelo | coleção.liquid

Impulso | Seção | coleção principal.liquid

Dividir | Seção | coleção principal.liquid

Simplificar | Seção | modelo de coleção.liquid

Seu tema não está na lista? Basta entrar em contato conosco usando "Converse conosco".

4. Em seguida, encontre " {%- endpaginate -%} ." Então acima dele, coloque o código abaixo. Em alguns temas, pode ser necessário encontrar o código " {% render 'pagination' %} " e colocar o código depois dele. Para Dawn versão 8 e superior atualizado, procure o {% render pagination... code and place the code after the {% endif %} . See image below. Posicionamento de rolagem infinita

{ % renderizar 'rolagem infinita' ,
 next_page : paginar. próximo . url ,
 page_size : paginar. Páginas ,
 end_text : "Não há mais produtos para carregar" % }

5. Certifique-se de SALVAR seu trabalho.

Atualização 01/09/2022: Encontrei uma diferença de código entre a versão 2.1 do Dawn abaixo e a versão atual. Código atualizado para funcionar com ambos

Atualização 20/08/2023: Encontrou um problema de posicionamento na versão mais recente do Dawn

Não hesite em entrar em contato comigo através do "Converse conosco", se tiver problemas.

Copied!
Voltar para o blogue

Deixe um comentário