Como criar um botão add-to-cart com anexo no VTEX IO?

VTEX in your native language 🌎 Português
,
1

Fala Devs,

Qual o melhor caminho para criar um botão que envia um SKU já com um anexo configurado para o carrinho no VTEX IO?

  1. Usar o app nativo add-to-cart-button e fazer o tratamento no /cart para incluir o anexo com o vtexjs?
  2. Criar um app custom usando a rota /api/checkout/pub/orderForm/:orderFormId/items?

E, pq será que não tem como fazer isso pelo app nativo?

Obrigado!

2

Olá André!

Nativamente o addtocartbutton consegue adicionar anexos no carrinho se for utilizado em conjunto com o app Product Customizer.

Você já explorou essa opção? Seria a opção mais simples onde o app disponibilizaria o anexo para o usuário e o add to cart enviaria para o orderform já com os itens de anexo.

1 Like
3

Oi @rene.lucena, boa tarde e obrigado pela orientação.

Che, até olhei para o Product Customizer, porém como precisava de um botão que enviasse o SKU já com o anexo setado para o carrinho e sem passar pela PdP, acabei mesmo criando um botão custom que faz a requisição abaixo:

    fetch(`/api/checkout/pub/orderForm/${orderFormId}/items`, requestOptions)
      .then(result => {if(result){ window.location.href = "/checkout/#/cart"}})
      .catch((error) => {
        alert('Error:' + error)
      })

Usando no body do requestOptions os dados do SkuId, SellerId, Quantidade e o anexo desejado para adicionar tudo de uma vez ao carrinho:

    const bodyData = {
      orderItems: [
        {
          quantity: selectedQuantity,
          seller: selectedItem.sellers[0].sellerId,
          id: selectedItem.itemId,
          attachments: [
            {
              name: planName,
              content: {
                'vtex.subscription.key.frequency': planFrequency,
              },
            },
          ],
        },
      ],
    }

Mas fez falta alguma prop para o app add-to-cart-button aceitando anexos, sem precisar de um custom pra isso.

Obrigado :slight_smile:

2 Likes