Documentação para Web Designers

Crie seus próprios layouts na Nuvem Shop

Hooks de Javascript

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 =)