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
Please also make a video on how to make thumbnail sliders vertical on the side of product
your code on this page is not showing correctly, this tutorial is not useful like this.
Hi,
@KEVIN MCCULLAGH. Sorry, you need to explain more on your problem.
@SIMONE You might have done the steps wrong.
@Laura I think you need to elaborate also.
I hope you guys are doing well. Take note though, this code is good for a new DAWN theme. If you made alterations to the code or added an app, this code might not be the best for you, since those codes may alter the cart code and the code provided above is not made to accommodate with the changes you’ve made.
Hi, when I “Add media from URL” it shows up on product slider with an image on the top, then with the video down below it directly. This doesn’t occur with the actual Debut theme. Do you have any idea how to resolve. It only happens when on mobile display also.
I have a problem with the variants when I select them the photo does not change by itself and also the arrows to change the photo do not work