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.
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".
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. 
{ % 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.