Product Image slider for Shopify Dawn theme - version 2.4 and lower

Controle deslizante de imagem do produto para o tema Shopify Dawn - versão 2.4 e inferior

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

Isso funciona apenas com Dawn 2.4 e inferior. Confira neste vídeo como ver o link da versão do seu tema.
Você usou o tema Dawn e ficou desapontado por eles não terem um controle deslizante de produto?
Não se preocupe. Neste tutorial, criaremos um.
Recomendações: Também criei um código para transformar a página do produto Dawn como o tema Debut com um controle deslizante. Verifique link .
  1. Vá para sua loja online > Temas > Ações > Editar código
  2. Vá para a pasta Seção e abra main-product.liquid
  3. Encontre o bloco <slider-component> e comente-o ou exclua-o se desejar

Comente colocando “<!--” antes do componente deslizante e “-->” após o componente deslizante. O código deve ficar como abaixo

4. Antes do <slider-component> comentado, adicione o código abaixo



5. Na parte superior cole o código abaixo e clique em SALVAR

6. Vejo que o componente-slider.css também está sendo usado para seções multicolunas, portanto, temos que criar um novo arquivo .css. Vá para a pasta Ativos, clique em 'criar novo ativo' e crie um espaço em branco. Nomeie o arquivo como 'produto deslizante'. O arquivo deve aparecer como abaixo

7. Agora abra a pasta CSS criada e cole o código abaixo.


8. Em seguida, volte para o produto principal.líquido. Na parte superior, comente este código. Você também pode simplesmente excluí-lo. Para comentar, coloque (<!-- ) antes do código e (--->) depois. Assim como fizemos no componente deslizante. O código deve ficar assim.

adicione isso depois.

9. Precisamos ir para a pasta Asset novamente e abrir global.js. Encontre o componente deslizante. Como o componente slider é um código global, ou seja, algumas seções também usam o mesmo código. Temos que adicionar uma instrução if. Desconsidere o vídeo referente a esta seção em global.js.

No construtor SliderComponent adicione o código abaixo.

10. Na função initPages precisamos alterar o totalPages. Substitua o código abaixo:

 com isso

11. Por último, na função de atualização precisamos alterar a currentPage, alterar 1 para 4. Substitua o código abaixo e clique em SALVAR

para isso

O código global.js deve ficar assim:

É isso! Você acabou de transformar a página do produto do tema Dawn. Deixe-me saber se você tiver dúvidas ou problemas com o código para que possamos corrigi-lo e ter um código atualizado. (",)

Atualização 22/09/21: acabo alterando o código no Asset/global.js para não quebrarmos o componente slider se usarmos na outra seção

Eu mudo o código CSS e removo o observador de redimensionamento. A imagem grande terá a mesma altura do item de imagem grande.

Atualização 23/09/21: Corrigidos problemas de falta de duas imagens grandes e controle deslizante. Código atualizado para usar o recurso hide_variants

Atualização 25/09/21: Correção do problema com o desaparecimento da miniatura ao adicionar uma seção que usa um componente deslizante. Atualizado o código na etapa 4.

Atualização 26/09/21: Adicionado um botão de reprodução de vídeo quando a imagem em miniatura é um vídeo

Atualização 30/09/21: Corrija o problema relacionado ao botão de vídeo. Reposicione os códigos do video-btn e adicione alguns códigos css

Atualização 01/10/21: Corrigido o problema de empilhamento de imagens grandes no celular. Adicionei um resizeObserver no Javascript para corrigir o problema de grandes lacunas entre a imagem grande e o controle deslizante. Se você não quiser, basta deletar o código

Atualização 03/10/21: Adicionado overflow: oculto em CSS de imagem grande. Eu recomendaria não ter imagens de produtos com altura extrema como imagem de primeira variante. Também foi adicionado algum CSS para que, quando ativa, a imagem em miniatura tenha uma caixa de borda e a opacidade seja 1. Veja o código em verde. A cor da borda da miniatura depende do seu var(--gradient-base-accent-1) .

Atualização 04/10/21: Altere o v-btn no arquivo product-slider.css devido a um problema ao ter um vídeo móvel

Atualização 10/10/21: Sei que resolvi o problema de espaço entre a imagem grande e o controle deslizante. Eu removi o resizeObserver e também o preenchimento inferior da imagem grande para corrigir isso. Eu atualizei o código

Atualização 11/10/21: alterei a forma como a borda e a opacidade são aplicadas. Por favor, veja o código verde destacado

Atualização 15/10/21: adicionei uma função onload para que quando a janela carregasse a primeira imagem da miniatura obtivesse a propriedade ativa. O código é rosa.

Também foi adicionado um código para quem ainda deseja a opção de ocultar as variantes quando as variantes forem selecionadas. (NOTA: este é o código original do Dawn). Veja o código em azul.

Copied!

Lutando com instruções?

Não se preocupe, nós oferecemos cobertura por um preço razoável. Entre em contato conosco através de "Converse conosco" para obter um orçamento.

Relaxe enquanto nós cuidamos disso para você!

Voltar para o blogue

44 comentários

Hi, this is working well, but there is a lot of space between my image and my slider. It seems to be adjusting for my longest vertical image, even though my first image is always square. Can this be fixed?

Shannon van Duijvendijk

the arrows are not working can you please check and help me with the arrows.

Kavita Parmar

Hello , thank u so much for this. but these arrows were not working https://prnt.sc/254myu5

John Doe

Code works perfect but i didn’t want to show product thumbnail slider in mobile. i want to just turn product image area into slider. How can i do it ?

muhammad asad ullah baig

For all the people is asking about the large image having a side navigation bar. It is possible, but needed to do more CSS and javascript customizations

Made4Uo

Deixe um comentário