Bom dia, então meu cliente pediu para instalar a ferramenta use insider no checkout da loja porém, eles pediram pra adicionar um atributo novo dentro do insider_object porém se eu tento colocar o método dentro do código do checkout ele roda antes do método ser criado.
const customFields = {
whatsapp_option: true,
custom: {
some_property: "value"
}
}
window.insertCustomAttrInsider("user", customFields)
Eu não sei aonde eu insiro isso, pela documentação ou é pelo aplicativo de eventos pixel dentro da função handleMessages() ou através de um component react. Mas sinceramente não sei aonde é.
A documentação em si: https://developers.vtex.com/docs/apps/codeby.useinsider@1.x#advanced-options
1 Like
Opa @Cristiano.reis tranquilo?
O método window.insertCustomAttrInsider deve ser chamado após a inicialização do insider_object. De acordo com a documentação, você pode usar a função handleMessages para chegar no resultado.
Aqui está um exemplo de como você pode fazer isso:
1// Dentro da função handleMessages
2 function handleMessages() {
3 // ...
4 window.insider('handleMessages', {
5 // ...
6 onReady: function() {
7 const customFields = {
8 whatsapp_option: true,
9 custom: {
10 some_property: "value"
11 }
12 };
13 window.insertCustomAttrInsider("user", customFields);
14 }
15 });
16}
Chamando window.insertCustomAttrInsider dentro do callback onReady, você garante que o insider_object esteja inicializado antes de adicionar o atributo personalizado.
Se você estiver usando um componente React, também pode usar o hook useEffect para alcançar isso:
1 import { useEffect } from 'react';
2 // ...
3 function MeuComponente() {
4 useEffect(() => {
5 const customFields = {
6 whatsapp_option: true,
7 custom: {
8 some_property: "value"
9 }
10 };
11 window.insertCustomAttrInsider("user", customFields);
12 }, []);
13
14 // ...
15}
Nesse caso, o hook useEffect executará o código dentro dele após o componente ter sido montado, o que deve ser após a inicialização do insider_object.
Lembrando que é só um exemplo e você precisa adaptar no que você está fazendo no seu código.
Espero que ajude.
Abs,
Four2One Team
Opa, essa função do handleMessages seria dentro do app pixel na pasta react/index.tsx ou no código do checkout?
De qualquer forma mesmo criando a função ou no checkout ou no pixel diz que a função window.insider não existe, só não dá erro quando eu chamo pelo console do navegador.
Acho que eu instalei o useinsider errado de alguma forma, não sei dizer
Oi @Cristiano.reis a função handleMessages não é uma função padrão do React ou do código do checkout. Ela parece ser uma função específica do aplicativo de eventos Pixel.
Porém, eu dei uma olhada mais profunda aqui sobre essa questão de adicionar atributo personalizado.
Você precisa definir o insider_object antes de inicializar o Insider Tag. Além disso, você precisa adicionar os sub-objetos (como user, page, product, etc.) ao insider_object.
Para adicionar um atributo personalizado ao insider_object, você pode fazer o seguinte:
1window.insider_object = {
2 user: {
3 whatsapp_option: true,
4 custom: {
5 some_property: "value"
6 }
7 }
8};
Essa é a forma correta de adicionar o atributo personalizado ao insider_object. Lembre-se de que você precisa definir o insider_object antes de inicializar o Insider Tag.
Não é necessário adicionar essa função dentro do app Pixel ou no código do checkout. Em vez disso, você pode adicioná-la em um arquivo JavaScript separado que seja carregado antes do Insider Tag.
Além disso, você não precisa da função handleMessages para adicionar atributos personalizados ao insider_object. Basta definir o insider_object com os sub-objetos e atributos desejados.
Qualquer coisa, para você trabalhar com essa questão de objetos, pode dar uma olhada aqui https://academy.useinsider.com/docs/insider-object-namespace
Documentação principal: UseInsider Documentation<!-- --> by <!-- -->codeby
Lembrando que precisa sempre adaptar do seu lado.
Veja se funciona pra você.
Pelo que eu vi a maneira mais correta é uma que eu não tenho acesso através do insider object integration wizard como mostrado no vídeo https://academy.useinsider.com/docs/insider-object-integration.
Vou ver com o cliente mas por enquanto fui autorizado a subir o código sem o o campo whatsapp_opt no objeto user.
De qualquer forma obrigado pelas respostas.
1 Like