React Storefront
|

AmpImageSwitcher

import AmpImageSwitcher from 'react-storefront/amp/AmpImageSwitcher'

An AMP-compatible image switcher with pinch and zoom.

This component relied on a special route to be implemented.

The /images/{product.id}/{color.id} handler should return data for the AMP image switcher to update for a selected variant.

The data should follow this schema:

{
 images: [url],
 thumbnails: [url],
 thumbnail: url,
 selectedImage: 0
}

This is commonly used to provide different thumbnails for different product colors.

An example of this handler is provided in the react-storefront-boilerplate commercial branch in /src/product/images-handler.js.

Props

NameTypeDefaultDescription
typeenum : 'slides' |
'carousel'
'slides'

The amp-carousel type. Can be "slides" or "carousel". Defaults to "slides".

indicatorsboolfalse

Set to true to display dots indicated which image in the series is selected. Defaults to false

ampStatePropertystring'selectedImage'

The property in the amp state to bind to. Defaults to "selectedImage"

arrowsboolfalse

Set to true to display left and right arrows. Defaults to false

CSS API

You can override all the class names injected by Moov-PWA thanks to the classes property. This property accepts the following keys:

  • root
  • rootImportant
  • carouselWrap
  • thumbnails
  • thumbnailsWrap
  • thumbnail
  • thumbnailSelected
  • thumbnailSelectedLine
  • dot
  • dots
  • dotSelected
  • hidden
  • @global