Serviços e API

[guilherme.lucashome]

pESSOAL, TODOS BEM. Estou usando o CMS e tentando trazer para o Front os dados de Serviços cadastrados, mas mexi muito pouco com API. Pelo postman ele puxa os dados cadastrados: [
{
“serviceId”: 6,
“valueId”: 3,
“fetchUrl”: “https://lucashome.vtexcommercestable.com.br/api/catalog/pvt/skuservicevalue/3”,
“status”: 200,
“Name”: “Vitalícia”,
“Price”: 500
},
{
“serviceId”: 7,
“valueId”: 2,
“fetchUrl”: “https://lucashome.vtexcommercestable.com.br/api/catalog/pvt/skuservicevalue/2”,
“status”: 200,
“Name”: “24 Meses”,
“Price”: 190
},
{
“serviceId”: 8,
“valueId”: 1,
“fetchUrl”: “https://lucashome.vtexcommercestable.com.br/api/catalog/pvt/skuservicevalue/1”,
“status”: 200,
“Name”: “12 Meses”,
“Price”: 99.99
}
]
Na pagina de produto eu coloquei o controle vtex.cmc:stockKeepingUnitService/ Ele me tras informações que nao preciso, mas eu queria que trouxesse o nome da garantia, valor e botao que vao junto produto + garantia, mas nao estou conseguindo. O produto exemplo é: Cama Box com Colchão de Molas Ensacadas Ortobom ISO SuperPocket Casal 138cm - lucashome
Estou usando tbm https://dash.cloudflare.com/ que me trouxe os dados da API por ser PRIVADA. Não sei se é o mElhor caminho tbm.
LINK : https://vtes-services.guilherme-barbeiro.workers.dev/?skuId=819

Se alguem puder me ajudar!!!.
Obrigado

[four2one]

Fala @guilherme.lucashome tudo certo?

Como você já consegue acessar os dados de serviços via uma API custom (.workers.dev). Assim, você pode criar um componente customizado no CMS (JS/HTML), escondendo o controle nativo vtex.cmc:stockKeepingUnitService/ e usar JavaScript puro ou jQuery no CMS para buscar seu endpoint .workers.dev e renderizar os serviços.

Exemplo funcional de script:

O exemplo é de teste e você precisa adaptar para sua versão.

<div id="vtex-services-box"></div>

<script>
  const skuId = skuJson_0.skus[0].sku; // Pega o SKU ID da página de produto
  const container = document.getElementById('vtex-services-box');

  fetch(`https://vtes-services.guilherme-barbeiro.workers.dev/?skuId=${skuId}`)
    .then(response => response.json())
    .then(data => {
      if (data.length === 0) {
        container.innerHTML = '<p>Sem serviços disponíveis.</p>';
        return;
      }

      let html = '<h3>Serviços adicionais</h3><ul>';

      data.forEach(service => {
        html += `
          <li style="margin-bottom: 12px;">
            <strong>${service.Name}</strong> - R$ ${service.Price.toFixed(2)}
            <button onclick="addServiceToCart(${skuId}, ${service.serviceId}, ${service.valueId})">
              Adicionar
            </button>
          </li>
        `;
      });

      html += '</ul>';
      container.innerHTML = html;
    });

  function addServiceToCart(skuId, serviceId, valueId) {
    vtexjs.checkout.addToCart([
      {
        id: skuId,
        quantity: 1,
        seller: '1',
        attachments: [
          {
            name: 'services',
            content: {
              [serviceId]: valueId
            }
          }
        ]
      }
    ]).then(() => {
      alert('Produto com serviço adicionado ao carrinho!');
    });
  }
</script>

---

Esconder o controle VTEX nativo (opcional)

Se você não quiser mostrar o controle padrão, adicione CSS no CMS para escondê-lo:

.vtexSkuServicesContainer {
  display: none !important;
}

Confirma se faz sentido. Se ajudou de alguma forma, marque-a como SOLUÇÃO para apoiar outros da comunidade.

Abs,
Diretoria Four2One

[guilherme.lucashome]

Boa tarde. Obrigado pela ajuda. Adicionei o script e fiz as correçoes, mas vem sem nada na div, nao pegando os dados dos serviços. Esse é o link que estou usando: Cama Box com Colchão de Molas Ensacadas Ortobom ISO SuperPocket Casal 138cm - lucashome

[four2one]

Fala @guilherme.lucashome

A estrutura de serviços está realmente salva nos dados do produto?

Os serviços precisam estar cadastrados corretamente no produto na VTEX, via:

• Catalog > Products > SKU > Attachments (Serviços)
• Ou via planilha/API, com Attachments relacionados ao SKU.

Você pode confirmar isso abrindo o console do navegador na página e rodando:

vtexjs.catalog.getProductWithVariations(20000000).then(console.log)

Substitua 20000000 pelo productId correto. Verifique se existe algo como:

product.skus[0].attachments

---

2. Você está escutando o momento certo para injetar os serviços?

Em VTEX, o HTML da página é renderizado dinamicamente. Portanto, scripts que rodam antes do conteúdo carregar não capturam nada.

Use algo como:

$(window).on('load', function() {
  vtexjs.catalog.getCurrentProductWithVariations().then(function(product) {
    console.log(product)
    const sku = product.skus[0];

    if (sku.attachments && sku.attachments.length) {
      $('#sua-div-alvo').html('Serviços disponíveis: ' + sku.attachments.map(a => a.name).join(', '));
    } else {
      $('#sua-div-alvo').html('Nenhum serviço disponível');
    }
  });
});

---

3. Certifique-se de que sua <div> tenha o ID correto

Se seu script procura #sua-div-alvo, mas sua div está assim:

<div id="servicos-box"></div>

…então seu seletor precisa bater com o nome exato:

$('#servicos-box').html(...);

4. Você pode estar usando um SKU que não tem serviços

O produto que você mandou (colchão Ortobom) pode não ter nenhum serviço vinculado.

Se você estiver tentando mostrar serviços como montagem, garantia estendida, etc., verifique no Admin se eles estão cadastrados e atrelados a esse SKU.

---

Dica para testar agora:

Abra o console da página e execute:

vtexjs.catalog.getCurrentProductWithVariations().then(p => console.log(p.skus[0].attachments))

Se o resultado for undefined ou [], então o SKU não tem serviços cadastrados.

Consegue confirmar estes pontos?

[guilherme.lucashome]

O produto esta aparecendo os servicos pelo controle nativo, então esta cadastrado. Agora apareceu os dados, mas não adiciona no carrinho ou vem selecionado no carrinho.

Em SERVIÇOS E SKU eu so selecionei ele, mas nao coloquei nenhuma informação, sabe me dizer se é necessário ter essa parte?

Aqui exportei a planilha de serviços e está vinculado:

E ao testar no console para validar se o SKU tem serviços cadastrado, esta dando UNDEFINED.

[four2one]

Oi @guilherme.lucashome esqueci de perguntar se você olhou o parâmetro Offering.

Eu bati aqui no orderform e encontrei os serviços.

Como verificar os offerings no orderForm

Para confirmar que os serviços aparecem no carrinho, execute no console do navegador:

vtexjs.checkout.getOrderForm().then(orderForm => {
  console.log(orderForm.items[0].offerings);
});

Retornou:

Talvez você vai precisar puxar dele e não do attachments diretamente.

Como integrar isso no seu script para exibir e adicionar serviços

Veja um exemplo melhorado que busca os offerings do orderForm e permite adicionar o serviço ao carrinho:

<div id="service-container"></div>

<script>
  vtexjs.checkout.getOrderForm().then(of => {
    const item = of.items[0];
    if (item.offerings && item.offerings.length) {
      let html = '<h3>Serviços disponíveis</h3><ul>';
      item.offerings.forEach(o => {
        html += `
          <li>
            <strong>${o.name}</strong> – R$ ${ (o.price/100).toFixed(2) }
            <button onclick="vtexjs.checkout.addOffering(${o.id}, 0)">Adicionar</button>
          </li>`;
      });
      html += '</ul>';
      document.getElementById('service-container').innerHTML = html;
    }
  });
</script>

• item.offerings mostra os serviços disponíveis no carrinho.
• addOffering(offeringId, itemIndex) adiciona o serviço ao item no index especificado.

Veja se funciona para você.

[guilherme.lucashome]

@four2one

vtexjs.catalog.getCurrentProductWithVariations().then(p => console.log(p.skus[0].attachments))

Boa tarde, Mestre. Cara fui retormar agora essa questão e em todos os consoles ele nao esta trazendo mais nada de informação. O serviço e o anexo está vinculado ao produto citado, mas agora nao vai mais nada

[four2one]

@four2one

vtexjs.checkout.getOrderForm().then(orderForm => {
  console.log(orderForm.items[0].offerings);
});

Você usou o último que mandei?

Parece que a VTEX está preenchendo no Offerings.

[guilherme.lucashome]

@four2one

vtexjs.checkout.getOrderForm().then(of => {
    const item = of.items[0];
    if (item.offerings && item.offerings.length) {
      let html = '<h3>Serviços disponíveis</h3><ul>';
      item.offerings.forEach(o => {
        html += `
          <li>
            <strong>${o.name}</strong> – R$ ${ (o.price/100).toFixed(2) }
            <button onclick="vtexjs.checkout.addOffering(${o.id}, 0)">Adicionar</button>
          </li>`;
      });
      html += '</ul>';
      document.getElementById('service-container').innerHTML = html;
    }
  });

[four2one]

@guilherme.lucashome Muito estranho. Você está no mesmo produto?

Eu estou olhando neste: Cama Box com Colchão de Molas Ensacadas Ortobom ISO SuperPocket Casal 138cm - lucashome

Aqui aparece assim:

Não tem algo no seu computador localmente ou na rede ou configuração do devtools impedindo o debug ali?

Qualquer coisa, veja pelo Orderform e depois monta do seu lado. Por exemplo: