- Vá para sua loja online > Temas > Ações > Editar código
- Vá para a pasta Seção e abra main-product.liquid
- 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!
45 comentários
Hi,
Thanks for this imp article.
But color variant image change feature does not work.
Any suggestions ?
Thanks
How would you make the images in the slider the same size / ratio of the first picture so they all show uniform.
@Ikhlaque I hope you follow the global.js code instruction
@Larry Evans I do have this https://made4uo.com/blogs/dawn-theme-tweaks-and-trick/convert-dawn-to-debut-product-page. Dots for me is redundant to be honest when it comes to product page. Since you are calling stuff three times already, adding the dots would potentially have risk on breaking the code
@Barry Somebody was asking me that, stay tuned
@Syam Sundar. Please message me in “Chat with us.” I can do the code for you
It did not work for me. Please help
I am also looking for next and previous buttons for slideshow which is on top of the main image. Is this an easy implementation?