How to use the vtex.product-context/useProduct function in vtex

To help you get started, we’ve selected a few vtex examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github vtex-apps / store-components / react / components / ProductSpecifications / Wrapper.js View on Github external
const ProductSpecificationsWrapper = ({
  hiddenSpecifications,
  visibleSpecifications,
  specifications: propsSpecifications,
  tabsMode, // This is a legacy prop passed by product-details
  showSpecificationsTab = false,
  collapsible = 'always',
}) => {
  const productContext = useProduct()

  const specifications =
    propsSpecifications || getSpecifications(productContext)

  return (
    <ProductSpecifications
      hiddenSpecifications={hiddenSpecifications}
      visibleSpecifications={visibleSpecifications}
      tabsMode={tabsMode != null ? tabsMode : showSpecificationsTab}
      specifications={specifications}
      collapsible={collapsible}
    />
  )
}
github vtex-apps / store-components / react / components / BuyButton / Wrapper.js View on Github external
children,
  isOneClickBuy,
  shouldOpenMinicart,
  setMinicartOpen,
  showItemsPrice,
  available: propAvailable,
  skuItems: propSkuItems,
  large: propLarge,
  disabled: propDisabled,
  shouldAddToCart,
  customToastURL,
  showTooltipOnSkuNotSelected,
  checkoutVersion,
}) => {
  const orderFormContext = useOrderForm()
  const valuesFromContext = useProduct()

  const isEmptyContext = !valuesFromContext || isEmpty(valuesFromContext)

  const product = valuesFromContext && valuesFromContext.product
  const selectedItem = valuesFromContext && valuesFromContext.selectedItem
  const assemblyOptions = valuesFromContext && valuesFromContext.assemblyOptions
  const selectedSeller = path(['selectedItem', 'sellers', 0], valuesFromContext)
  const selectedQuantity =
    valuesFromContext && valuesFromContext.selectedQuantity != null
      ? valuesFromContext.selectedQuantity
      : 1

  const skuItems =
    isEmptyContext || propSkuItems != null
      ? propSkuItems
      : EnhancedBuyButton.mapCatalogItemToCart({
github vtex-apps / store-components / react / components / SKUSelector / Wrapper.tsx View on Github external
const SKUSelectorWrapper: StorefrontFC<Props> = props => {
  const valuesFromContext = useProduct()
  const dispatch = useProductDispatch()
  const { imageHeight, imageWidth } = useResponsiveValues(
    pick(['imageHeight', 'imageWidth'], props)
  )

  const skuItems =
    props.skuItems != null
      ? props.skuItems
      : valuesFromContext?.product?.items ?? []

  const skuSelected =
    props.skuSelected != null
      ? props.skuSelected
      : valuesFromContext.selectedItem

  const shouldNotShow =
github vtex-apps / store-components / react / components / ProductImages / Wrapper.js View on Github external
const ProductImagesWrapper = props => {
  const valuesFromContext = useProduct() || {}
  const { aspectRatio, maxHeight, showNavigationArrows, showPaginationDots } = useResponsiveValues(
    pick(['aspectRatio', 'maxHeight', 'showNavigationArrows', 'showPaginationDots'], props)
  )
  const { selectedItem } = valuesFromContext
  const images = useMemo(
    () =>
      props.images != null
        ? props.images
        : map(generateImageConfig, path(['images'], selectedItem) || []),
    [props.images, selectedItem]
  )

  const videos = useMemo(
    () =>
      props.videos != null
        ? props.videos