Product Specifications

Description

ProductImages is a VTEX component that render a set of Image or Video of a product. This Component can be imported and used by any VTEX app.

📢 Disclaimer: Don't fork this project; use, contribute, or open issue with your feature request.

Table of Contents

Usage

You should follow the usage instruction in the main README.

Then, add product-images block into your app theme, as we do in our Product Details app.

Blocks API

When implementing this component as a block, various inner blocks may be available. The following interface lists the available blocks within ProductSpecifications and describes if they are required or optional.

1
2
3
 "product-images":{
   "component": "ProductImages"
 }

For now this block does not have any required or optional blocks.

Layout API

This component accepts props to be configured through storefront or blocks.json

Specification:

Prop nameTypeDescriptionDefault Value
thumbnailsOrientationEnumChoose the orientation of the thumbnails. Set to vertical or horizontalvertical
positionEnumSet the position of the thumbnails(left or right). Only used when thumbnailsOrientation is verticalleft
displayThumbnailsArrowsbooleanDisplays navigation arrows on the thumbnails if there are enough thumbnails for them to scrollfalse
zoomPropsZoomConfigure the zoom behaviour of the main imageNA

Zoom type: | Prop name | Type | Description | Default Value | | ------------------------- | --------- | ----------------------------------------------------------------------------------------------------------- | ------------- | | zoomType | Enum | Choose the the type of zoom. Values: gallery, in-page or no-zoom | no-zoom | | bgOpacity | Number | Set background opacity when gallery zoom is displayed. Minimum value is 0.0, maximum is 1. | 0.8 |

Styles API

You should follow the Styles API instruction in the main README.

CSS Namespaces

Below, we describe the namespace that are defined in the ProductImages.

Class nameDescriptionComponent Source
.contentThe wrapper of Carousel scopeindex
.videoThe wrapper of Video scopeVideo
.imageThe wrapper container to BlurredLoader componentBlurredLoader
carouselCursorDefaultSpecification that define the default customization for the cursor in Swipe ComponentCarousel
carouselInconCaretRightCustomization to the right caret icon in IconCaret componentCarousel
carouselIconCaretLeftCustomization to the left caret icon in IconCaret componentCarousel
carouselGaleryThumbsThe container of Thumbs areaCarousel
carouselThumbBorderDefine the border of Thumb areaCarousel
carouselGaleryCursorDefine the svg icon that will show when hover the CarouselCarousel
carouselImageUploaderDefine the icon that will show when the user wants a custom placeholderImagePlaceholder
imageBlur30Blur of the ImageBlurredLoader
imageTransitionOpacityTime transition between imagesBlurredLoader