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
There’s a problem with the codes to add and replace, I think ?
Hi, thank you for this tutorial. I cannot add product in the cart. Required parameter missing or invalid: items. On the YouTube comments, I did the whole steps again twice since you did some changes to the code for the global.js, and I still have the same problem. I tried without variant, and still the same issue. No apps installed yet to interfere. Thank you