Buybutton

Buybutton.md

-O buybutton só funciona dentro do contexto de produto da vtex

-O contexto de produto da vtex é bem simples, basta iniciar um contexto no react com o produto no formato do json da vtex

-Infelizmente não vai funcionar nas páginas de search porque o json de produto da chaordic é diferente, por isso vc vai precisar fazer uma validação para não exibir nessas páginas

-Para fazer funcionar na página de search precisariamos fazer uma customização bem grande mexendo com graphql

Passo a passo para exibir o buybutton:

-Dentro do arquivo react/components/SearchResultGallery/index.js e do react/components/ShelfSlider/ShelfSliderItems.js passe o objeto do produto todo para o ShelfItem:

<ShelfItem
  products={product}
  {/* outras props aqui */}
/>

-Dentro do ShelfItem(react/components/ShelfItem/index.js) adicione as seguintes dependencias:

import { BuyButton } from 'vtex.store-components'
import { ProductContextProvider } from 'vtex.product-context'

-Pegue o produto das props:

const { product } = props

Crie um contexto de produto na parte onde vc quer adicionar o buybutton

{product && (
  <ProductContextProvider
      query={{}}
      product={product}
  >
    <div
        className="sua-class-wrapper"
        title="Comprar"
        onClick={() =>
            push({
                event: 'addToCartClickVitor',
                category: 'Produto',
                action: 'Add-on Acessórios',
                label: `Add to Cart`,
            })
        }
    >
        <BuyButton />
    </div>
  </ProductContextProvider>
)}

o if no produto está ai porque na chaordic não vai existir essa prop

Mude o nome do evento