This page is about version 2.52.3 of the app, which is not the most recent version. The latest stable version is 2.90.0.
Description
ProductSummaryImage
is a VTEX Component that renders the product's image.
This Component can be imported and used by any VTEX App.
:loudspeaker: 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-summary-image
block into your app theme, as we do in our Product Summary app.
Blocks API
This component has an interface that describes which rules must be implemented by a block when you want to use the ProductSummaryImage
.
_10 "product-summary-image": {_10 "component": "ProductSummaryImage"_10 }
Configuration
Through the Storefront, you can change the ProductSummaryImage
's behavior and interface. However, you also can make in your theme app.
Prop name | Type | Description | Default value |
---|---|---|---|
showBadge | Boolean | Set the discount badge's visibility | true |
badgeText | String | Text shown on badge | |
showCollections | Boolean | Set collection badges' visibility | false |
displayMode | Enum | Set display mode of product summary (normal, inline) | normal |
hoverImageLabel | String | Set this value to match the value of the imageLabel field of a product image, so this "secondary" image will be showed when user hovers its mouse over this component. | "" |
mainImageLabel | String | Works the same way as hoverImageLabel but to set the main image to display. If you pass a label and no image has that label, it will show the main image of the product | "" |
width | [ResponsiveInput<Number>](https://github.com/vtex-apps/responsive-values#vtexresponsive-values) | Sets the image width. | undefined |
height | [ResponsiveInput<Number>](https://github.com/vtex-apps/responsive-values#vtexresponsive-values) | Sets the image height. | undefined |
Styles API
This app provides some CSS classes as an API for style customization.
To use this CSS API, you must add the styles
builder and create an app styling CSS file.
- Add the
styles
builder to yourmanifest.json
:
_10 "builders": {_10 "styles": "1.x"_10 }
- Create a file called
vtex.product-summary.css
inside thestyles/css
folder. Add your custom styles:
_10.imageContainer {_10 margin-top: 10px;_10}
CSS Handles
CSS Handles | Description | Component Source |
---|---|---|
imageContainer | The main container of image | index |
imageNormal | Class when display mode is normal | index |
imageInline | Class when display mode is inline | index |
imageStackContainer | Class for container with product images to be shown | index |
hoverImage | Class for image that appears when user hovers mouse | index |
hoverEffect | Class that applies hover effect and changes images. Override carefully. | index |