Ocultar SKU de amostra na página de produto. Deixando apenas um botão para adicionar amostra direto no carrinho de compras

[carlos.devecchi]

Olá Pessoal.

Estamos migrando uma loja que possui amostras de alguns produtos. Na loja anterior está configurado da seguinte forma:
O SKU de amostra está dentro do produto, mas não aparece na página do produto como variante normal, ele está oculto. Para poder ser comprado foi inserido um botão chamado solicitar amostra e ao clicar adiciona esse sku de amostra diretamente no carrinho. Evitando que fique disponível como variante normal e facilite a compra do cliente, deixando claro o que é e o que não é amostra.

Alguém poderia compartilhar a experiência com algum comportamento parecido?

Abs

[reoliveira]

Oi Carlos, boa noite!

Por favor, você conseguiu alguma solução para isso? Estou precisando de uma alternativa para o mesmo processo. Se vc tiver alguma informação e puder compartilhar agradeceria muito.

[RamonBenova]

Você pode criar um botão customiado, via Java Script, se for VTEX CMS, ou em React, se for VTEX IO.

Neste botão, você irá precisar ter o número do SKU da amostra que irá adicionar.

Uma boa solução para inserir esta informação na página de produto é criando um campo produto, por exemplo, “SKU da Amostra”, e no cadastro do produto voce faz este ‘vinculo’.

De resto, basta ao clicar no botão de “Adicionar Amostra”, puxar esta informação via API de Produto:

/api/catalog_system/pub/products/search?fq=productId:${skuJson.productId}
caso seja VTEX CMS

Ou usando o product-context, caso seja VTEX IO:

import { useProduct } from "vtex.product-context"
const productContextValue = useProduct()

E com o número do SKU da amostra em mãos, disparar o Adicionar ao Carrinho:

Para CMS:

function addToCart(skuId, qtd) {

	$.ajax({
		url: `/checkout/cart/add?sku=${skuId}&qty=${qtd}&seller=1&redirect=false&sc=1`,
		type: "POST",
		async: 1,
		success: function (res) {
			console.log(`Produto ${skuId} adicionado ao carrinho!`)
			vtexjs.checkout.getOrderForm()
		}
	})
}

Ou se for em IO:

import { useOrderItems } from "vtex.order-items/OrderItems"
import { usePixel } from 'vtex.pixel-manager'

    const { addItems } = useOrderItems()
    const { push } = usePixel()
    const handleAddToCart = (e, itemId) => {
        const items = [
            {
                id: itemId,
                seller: 1,
                quantity: 1
            }
        ]

        addItems(items)

        push({
            event: "cart",
            id: "add-to-cart-button"
        })
    }

[RamonBenova]

Respondi o Carlos na mensagem anterior.