Ao personalizar um template na Nuvem Shop, é importante saber que há componentes críticos para que as funcionalidades funcionem bem. Esses componentes agora são identificados com algo chamado JS Hooks.
Fique tranquilo porque isso não é nada de outro mundo. Nós simplesmente adicionamos um prefixo "js-" para associar uma classe a um componente que terá algum tipo de comportamento via JavaScript. Nós fazemos isso para separar como se vê de como se comporta um componente.
Uma classe para JS hook é usada quando se precisa associar uma função a um componente que se repete em uma página. Caso o componente seja único e não se repete, recomendamos que use um ID ao invés de uma Classe.
Para adicionar um JS hook, fazemos da mesma forma quando vamos adicionar uma classe de estilo:
<span class="js-alguma-funcionalidade"> </span>
Dessa forma, se você pode remover uma classe de estilo tendo a certeza absoluta de que o comportamento do componente continuará funcionando normalmente.
<span class="nome outra-classe uma-classe-estranha"> </span>
Por exemplo, se você apagar a classe "uma-classe-estranha" do <span> porque deixou de usar-la no CSS, mas a classe é usada para fazer algum cálculo ou alguma outra função, isso lhe causará problemas.
E é aqui que os Js hooks nos ajudam a diferenciar que componentes usam JavaScript e quais não usam:
<span class="js-alguma-funcionalidade outra-classe uma-classe-estranha"> </span>
No caso acima, você poderá remover a classe "uma-classe-estranha" sem que alguma função importante do template seja prejudicada.
Um ponto importante a ser considerado é: Nunca adicione estilo css a um Js hook. Dessa forma você manterá o estilo e comportamento completamente separados.
.js-hook{
your CSS properties...
}
Outra alternativa para separar comportamento e visual é utilizar IDs no lugar de Js hooks.
O mais importante dessa técnica é tentar sempre deixar o comportamento e estilo separados. Isso vai dará mais confiança a você e a sua equipe na hora de modificar o código do seu template =)