README.md

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

• Product Specifications
  • Description
  • Table of Contents
  • Usage
    • Blocks API
    • Configuration
    • Styles API
      • CSS Namespaces

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.

 "product-images":{
   "component": "ProductImages"
 }

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

Configuration

Specification:

Prop name	Type	Description	Default Value
images	Array(Images)!	An array of Images	[]
position	Enum	Set the position of the thumbnails(left or right)	left

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 name	Description	Component Source
.content	The wrapper of Carousel scope	index
.video	The wrapper of Video scope	Video
.image	The wrapper container to BlurredLoader component	BlurredLoader
carouselCursorDefault	Specification that define the default customization for the cursor in Swipe Component	Carousel
carouselInconCaretRight	Customization to the right caret icon in IconCaret component	Carousel
carouselIconCaretLeft	Customization to the left caret icon in IconCaret component	Carousel
carouselGaleryThumbs	The container of Thumbs area	Carousel
carouselThumbBorder	Define the border of Thumb area	Carousel
carouselGaleryCursor	Define the svg icon that will show when hover the Carousel	Carousel
carouselImageUploader	Define the icon that will show when the user wants a custom placeholder	ImagePlaceholder
imageBlur30	Blur of the Image	BlurredLoader
imageTransitionOpacity	Time transition between images	BlurredLoader