Skip to main content

How to show price

If you need to show the price of the whole product, you can use the price property returned by useZakeke hook.

Furthermore, the Zakeke default theme uses other hook's properties for rendering the price and its info, in detail:

  • if you need to show the whole price of the product you can use the price property with a priceformatter (in which you'll use the currency) for correctly show the currency next to the price number;
  • from the useZakeke hook you can use the isOutOfStock property that, in base of the actual configuration, if this combination is not available on your store, you can prevent the add to cart action as well as the visibility of the price.
  • in the Zakeke default theme is read the hidePrice sub-property of sellerSettings for showing or not the price section, same goes for the sub-property priceInfoText;

Here below an example of how to render the product's price and its info:

import { useZakeke } from "zakeke-configurator-react";

const App = () => {
  const { price, sellerSettings, isOutOfStock } = useZakeke();
  ...
  ...
  return (<>
  {price !== null && price > 0 && (!sellerSettings || !sellerSettings.hidePrice) && (
							<PriceContainer>
								{!isOutOfStock && priceFormatter.format(price)}
								{sellerSettings && sellerSettings.priceInfoText && (
									<PriceInfoTextContainer
										dangerouslySetInnerHTML={{ __html: sellerSettings.priceInfoText }}
									/>
								)}
							</PriceContainer>
						)}
  </>);
};