Obtener contexto del App Product List

VTEX in your native language 🌎 Español
1

Quisiera poder modificar los estilos y forma de como se ven los precios en el minicart, para ello se usa el componente Price de Product List , pero al intentar replicar en mi componente custom me da error al obtener el contexto

import React from 'react'
import { useItemContext } from 'vtex.product-list/ItemContext'

const PriceCart = () => {
  const { item } = useItemContext()

  console.log('item', item)

  return <div>Custom</div>
}

export default PriceCart

el error es

ncaught Error: useItemContext must be used within a ItemContextProvider
    at useItemContext (ItemContext.tsx:30:11)
    at PriceCart (index.tsx:5:34)
    at renderWithHooks (react-dom.development.js?async=2:15247:18)
    at mountIndeterminateComponent (react-dom.development.js?async=2:17481:13)
    at beginWork$1 (react-dom.development.js?async=2:18625:16)
    at HTMLUnknownElement.callCallback (react-dom.development.js?async=2:342:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?async=2:392:16)
    at invokeGuardedCallback (react-dom.development.js?async=2:449:31)
    at beginWork$$1 (react-dom.development.js?async=2:23356:7)
    at performUnitOfWork (react-dom.development.js?async=2:22347:12)

gracias

1 Like
2

El problema es que para que funcione deberías ponerlo dentro de un contexto de items (ItemContextProvider) como en la vista de listados. El minicart no provee ese tipo de contextos lamentablemente.