Os módulos padrões do layout recebem as informações da loja e geram todo HTML estrutural de cada sessão da página.
Porém é comum que você desenvolvedor eventualmente precise adicionar algum objeto, classe, ou alguma funcionalidade extra.
Para isso nem sempre o mais aconselhado é criar um módulo personalizado para a loja, mas sim, modificar o fluxo já existente.
Digamos que você deseja inserir uma tag escrito “Black Friday” em todos produtos que possuem preço promocional na loja. Basicamente você poderia criar uma função modificadora, configurada para ser executado após o término da listagem de produtos da tela ser encerrada e nessa função passar produto por produto analisando os elementos e fazendo algum procedimento, como incluir um elemento a mais por exemplo.
Para isso, siga o exemplo abaixo.
Você pode criar esse código tanto no arquivo functions.js que fica dentro da pasta assets do layout, quanto também criar um módulo personalizado para individualizar esse código.
let mod = '{{Nome do módulo}}'
let functToCall = () => { console.log('Uma ação foi executada! :)') };
window.addEventListener('load', () => {
isReady(mod, functToCall)
});
O nome do módulo usado na variável “mod” no exemplo acima seria o ID do módulo. Para saber o id do módulo desejado, clique aqui e veja todos os módulos.
Com isso você criou uma função javascript que é acionada ao término de um dos módulos da loja e realiza alguns procedimentos modificando da forma necessária os elementos.