Como mostrar apenas imagens de variantes selecionadas - Dawn 2.5 abaixo

Compatibilidade: Compatível apenas com versões Dawn inferiores a 2.5

Se você tiver Dawn 2.5 e superior, siga estas etapas aqui .

Não sei por que o Shopify 2.0 ainda não ofereceu essa opção. O tema Shopify oculta apenas uma imagem quando você atribui a imagem a essa variante. E se quisermos ter várias imagens atribuídas à variante? Há várias maneiras de fazer isso. Podemos fazer isso SEM APP ou biblioteca EXTERBAL. Mas usaremos a maneira mais simples, que é usando a imagem alt. O código se ajusta ao layout da área de trabalho e ao tamanho da mídia da área de trabalho que você escolher. Isso funciona com layout empilhado e layout deslizante de miniatura.

Dito isto, atribua a imagem alt que corresponda à opção à qual deseja associar a imagem. Certifique-se de que o texto da variante seja o mesmo da imagem alt. Veja o vídeo para mais informações.

O que você está comprando:

• Mostrar apenas imagens atribuídas à variante
• Use a imagem alt para atribuir uma variante
• Funciona com layout empilhado e layout deslizante de miniatura

O que torna nosso código melhor:

• Não usamos bibliotecas externas, com isso dito, nosso código não terá nenhum efeito mínimo no desempenho de velocidade do seu site
• Não deixamos nem adicionamos códigos para anunciar em nosso site
• Nosso código é compatível com dispositivos móveis

Para iniciar.

1. Acesse Loja online > Temas > Ações > Editar código.

2. Abra main-product.liquid na pasta da seção. Encontre o <slider-component> e procure o <li>. Adicionaremos o código abaixo e o alteraremos para a variável de imagem correspondente. Certifique-se de que não haja espaços. Veja o vídeo para mais informações.

3. Em seguida, precisamos adicionar o código do script. Abra o "global.js." na pasta Ativos. Encontre o " updateMedia() {." Antes do colchete de fechamento, adicione o código abaixo. Veja o vídeo para mais informações sobre posicionamento

const varianteKeys = this . variante atual . título . dividir ( ' / ' ) ; esse . primeiroSlider =
 documento. querySelector ( '.product__media-list' ) ;
 
esse . primeiroSlider . querySelectorAll ( ` [ data - media - alt ] ` ) . forEach ( media => media.classList.add ( ' oculto' ) ) ; varianteKeys. mapa ( 
chave => { const mídia = isto . primeiroSlider . querySelectorAll ( ` [ data - media - alt = "${key}" ] ` ) ; 
esse . primeiroSlider . querySelectorAll ( ` [ data - media - alt = "${key}" ] ` ) . forEach ( media => { media.classList.remove ( 'oculto ' ) ; } ) 
} )

4. No Editor de temas, ao clicar em "Personalizar tema", certifique-se de desmarcar a opção " Ocultar mídia de outras variantes após selecionar uma variante".

É isso. Espero que não tenha sido demais para você (",)