Remover produtos (itens) do MiniCart via API no VTEX IO

[developer-vtex-01]

Olá Comunidade! Haverá alguma forma de remover itens (produtos) do MiniCart no VTEX IO via API.

Estou procurando fazer algo parecido com o que aconteceu no VTEX Legacy

vtexjs.checkout
  .getOrderForm()
  .then(function(orderForm) {
    var itemIndex = 0
    var item = orderForm.items[itemIndex]
    var itemsToRemove = [
      {
        index: 0,
        quantity: 0,
      },
    ]
    return vtexjs.checkout.removeItems(itemsToRemove)
  })
  .done(function(orderForm) {
    alert("Item removed!")
    console.log(orderForm)
  })

Fico atento. Obrigado.

[rafael.camargo]

Basicamente no VTEX IO temos… Umas 4 formas de fazer isso.

3 Delas podem ser feitas de forma nativa pela própria VTEX usando os pacotes disponibilizados por ela. A quarta maneira é usando hooks customizados para por exemplo resetar o orderForm e limpar o carrinho, mas esse não é o foco aqui.

tldr; Esse primeiro método já resolve o problema do seu post.

Rest API

• A API usada será a de orderForm. /api/checkout/pub/orderForm/{id}/items/removeAll

E pode ser implementada dessa forma:

// * Common
import React from "react"
import axios from "axios"

// * VTEX
import { DEFAULT_ORDER_FORM } from "@vtex/order-manager"
import { OrderForm } from "vtex.order-manager"

function MinicartMethods() {
  const { orderForm, setOrderForm } = OrderForm.useOrderForm()

  const handleRemoveAllByREST = () => {
    axios.post(`/api/checkout/pub/orderForm/${orderForm.id}/items/removeAll`)

    const cleanOrderForm = DEFAULT_ORDER_FORM
    cleanOrderForm.id = orderForm.id
    cleanOrderForm.value = orderForm.value

    setOrderForm(cleanOrderForm)
  }

  return (
    <div>
      <button onClick={handleRemoveAllByREST}>Remove All (REST)</button>
    </div>
  )
}

+ VTEX IO Like

Essas outras formas, mais elegantes e integradas resolvem o mesmo problema, porém de formas mais performáticas e integradas com a plataforma, vale dar uma olhada:

// * React
import React from "react"

// * VTEX
import { OrderForm } from "vtex.order-manager"
import { OrderItems } from "vtex.order-items"

// * Types
interface ICartItem {
  id: string
  seller: string
  quantity: number
}

// * Constants (MOCK)
const SKU_ITEM = {
  id: "213",
  seller: "1",
  quantity: 1,
}

function MinicartMethods() {
  const { removeItem } = OrderItems.useOrderItems()
  const { orderForm } = OrderForm.useOrderForm()

  const handleRemoveItem = () => {
    removeItem(SKU_ITEM)
  }

  const handleRemoveAll = () => {
    orderForm.items.map((item: ICartItem) => {
      removeItem({ id: item.id, seller: item.seller })
    })
  }

  return (
    <div>
      <button onClick={handleRemoveItem}>Remove Item</button>
      <button onClick={handleRemoveAll}>Remove All</button>
    </div>
  )
}

Vale também citar que você pode usar os pixel-events para sincronizar as mudanças com o carrinho local, deixando a experiencia completa!

[developer-vtex-01]

Olá! @rafael.camargo Atenciosamente. Excelente contribuição. Eu vou fazer os testes. Totalmente grato. Um abraço saudações!