Product Detail

This plugin changes completely how the Product Detail is shown you can change how the image is show, add a carousel, add customizations options or anything else you want.

This Plugin works together with ProductAddToCart Plugin

Hook

ProductDetailBody

Props

export interface IProductDetail {
  product: IProductPricedPerCollectionLevel1;
  isLoading: boolean;
  cart: ICartDictionary;
  config: IConfig;
  enablePrice?: boolean | null;
  setCanAddToCart: (canAddToCart: boolean) => void;
  tFunction: TFunction;
  setproductToAdd: (product: IProduct) => void;
}

Props considerations

  • setCanAddToCart: is used to tell the parent component that the Product you are showing can be add to the cart. This is use full in cases with customizations. For example you can call this function when all the customizations options have been selected.
  • setproductToAdd: this is something very important, this can be as simple as adding the same product you get on the product prop, or you could transform the product to a new Product only containing the customizations the user selected

Visual Example

Simple Product DetailSimple Product Detail

Simple Product Detail

Custom Product Detail with CustomizationsCustom Product Detail with Customizations

Custom Product Detail with Customizations

Example

ProductDetailBody: {
     container: SomePlugin,
},

Did this page help you?