Controles para campo personalizado de produto

[colinatech]

Olá, pessoal!

Estou editando a página de produto da loja e criei alguns campos personalizados, ou seja, além dos predefinidos, para as categorias. Todos os produtos estão com esse campo, porém não estou conseguindo exibir na página.

Existe algum controle específico semelhante ao de descrição do produto (vtex.cmc:ProductDescription/) e especificação do produto (vtex.cmc:productSpecification/), mas para campos personalizados? Não encontrei na documentação atual.

Se não houver, como posso renderizar esse campo personalizado? Existe alguma técnica específica na comunidade?

Observações
Atualmente, está desta forma:

[ImediataDesign1]

Olá colinatech, tudo bem?

Você está utilizando (Legacy) CMS Portal?

[colinatech]

Isso mesmo! Teria algum padrão comumente utilizado para exibir na página? Vi que na documentação não há nenhum registro.

Valeu pela resposta!

[andremiani]

Olá Equipe @colinatech, tudo bom?

No CMS não lembro se esses dados retornam oculto na página ou se o caminho para exibir as especificações do produto seria usando javascript mesmo… Tipo primeiro criar um div no template e depois um script que vai pegar os dados do produto e então popular esta div com a informação desejada.

   $.ajax({
       url: 'https://accountName.vtexcommercestable.com.br/api/catalog_system/pub/products/search/?fq=productId:1',
       dataType: "json",
        success: function(produto){
                console.log(produto[0]["Mais Informações"][0]);
        }
    })

[colinatech]

Fala, @andremiani !

Fiz os testes com base no código que você me passou, porém não rolou, é possível até visualizar o erro no console. Basicamente, ele chega a printar o id do produto, porém não consegue puxar as informações.

Além do erro no console, a imagem do produto fica carregando infinitamente.

Segue o código que implementei na página:

<script>
        document.addEventListener('DOMContentLoaded', function() {
            function loadProductAccordion() {
                let productIdElement = document.querySelector(".product-title h1 #___rc-p-id");
                if (productIdElement) {
                    let currentId = productIdElement.value;
                    console.log(currentId);
                    $.ajax({
                        url: '/api/catalog_system/pub/products/search/?fq=productId:' + currentId,
                        dataType: "json",
                        success: function(produto){
                            console.log(produto[0]["Mais Informações"][0]);
                        }
                    })
                }
            }
            loadProductAccordion();
        });
    </script>

Essa é a única forma de implementar?

[andremiani]

Olá @colinatech,

Poderia passar por aqui ou em privado o accountName e um productId para eu dar uma olhada?

Minha sugestão foi com base num teste que fiz usando a conta da PowerLook e este endpoint público que retornou todos os dados do produto incluindo suas especificações.

https://powerlook.vtexcommercestable.com.br/api/catalog_system/pub/products/search/?fq=productId:1111

[colinatech]

Fala, @andremiani !

Verifiquei o endpoint e o erro foi de digitação kkk o certo era “Mais informações”, com a letra i minúscula. Obrigado pelos direcionamentos, ajudou demais!