Nota: Se você tiver o tema Dawn versão 2.5 e superior, este código não funcionará. Para código atualizado, verifique isto .
Você estreia o controle deslizante de produto do tema? Crie uma página de produto semelhante ao tema Debut.
Tenho trabalhado no controle deslizante de produto do tema Dawn e encontrei alguns problemas com ele. Uma coisa é que o contador numérico não faz sentido. Minha maneira de criar um controle deslizante de produto no tema Dawn é copiar o tema Debut.
Tenha uma página de produto de estreia em seu tema Dawn com botões de opção funcionais, zoom e controle deslizante de produto.
NOTA: Você precisa fazer login antes de ver o código.
Siga as instruções abaixo.
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. Para simplificar as coisas, substituiremos o main-product.liquid
4. Vá para a pasta da seção e abra main-product.liquid."
5. Exclua o código dentro do arquivo, cole o código abaixo
6. Em seguida, precisamos criar um novo arquivo de ativos. Vá para a pasta Ativos e clique em “Adicionar um novo ativo”. Certifique-se de que seja um arquivo CSS. Chame-o de "controle deslizante de produto"
7. Abra o arquivo e cole o código abaixo e clique em SALVAR
8. Em seguida, precisamos ajustar o arquivo global.js na pasta Asset.
9. Ajustaremos o controle deslizante primeiro. Encontre o componente deslizante. Após " this.nextButton = this.querySelector('button[name="next"]');", cole o código abaixo. Veja a imagem e o vídeo para referência.
O código deve ficar assim:
10. Em seguida, precisamos encontrar e substituir a função onButtonClick(event) pelo código abaixo. Por favor, certifique-se de verificar o vídeo sobre isso para não excluir outras coisas.
O código deve ficar assim:
12. Último. Encontre VariantSelects e adicione o código em updateMedia(), antes de "window.setTimeout(()". Veja a imagem abaixo e o vídeo para obter instruções.
É isso! Espero que não tenha sido muito difícil. Se sim, siga o vídeo. (",)
Atualização 08/11/21: Corrija o problema no Mozilla com a exibição da barra de rolagem. Acabei de excluir o CSS overflow no contêiner deslizante. Adicionado código para ocultar os botões sempre que as imagens variantes forem menores que três.
Copied!
12 comentários
@NUNYA BIDNESS
Please be aware that this does not work on Dawn version 2.5 or higher as mentioned above. We have encountered that error before this due to the app installed. Please check your app that interfer with the cart.
This ruined add to cart option on my product page, now when i try to add to cart i get:
Required parameter missing or invalid: items
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!————-
DON’T USE IF YOU HAVE DAWN THEME
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!————-
THIS IS A LIFE-SAVER!! So happy I came across your tutorial
If you replace the OnButtonClick coding with yours, the mobile menu button becomes disabled…i had to revert to the original….
For me the image doesn’t switch when I select a different color in the variant selector?