How to create an add-to-cart button with attachment in VTEX IO?

VTEX in your native language 🌎 Portuguese
,
1

Hey Devs,

What’s the best approach to create a button that adds a SKU with a pre-configured attachment to the cart in VTEX IO?

  1. Use the native add-to-cart-button app and handle it on the /cart side to include the attachment using vtexjs?
  2. Build a custom app using the /api/checkout/pub/orderForm/:orderFormId/items route?

And, why isn’t there a way to do this through the native app?

Thanks!

2

Hi André!

Natively, the addtocartbutton can add attachments to the cart when used together with the Product Customizer app.

Have you explored that option? It would be the simplest approach, where the app would make the attachment available to the user and the add to cart would send it to the orderform already with the attachment items.

3

Hi @rene.lucena, good afternoon and thanks for the guidance.

Hey, I even looked at the Product Customizer, but since I needed a button that would send the SKU with the attachment already set to the cart and without going through the PDP, I ended up creating a custom button that makes the request below:

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

Using in the body of requestOptions the SkuId, SellerId, Quantity and the desired attachment data to add everything to the cart at once:

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

But it would be nice to have a prop for the add-to-cart-button app that accepts attachments, without needing a custom solution for that.

Thanks :slight_smile: