Product Medias

📢 Use this project, contribute to it or open issues to help evolve it using Store Discussion.

Product Medias

Desmostration

Configuration

1. Adding the app as a theme dependency in the manifest.json file;

  "dependencies": {
    "{vendor}.product-medias": "0.x"
  }

1. Declaring the app's main block in a given theme template or inside another block from the theme.

product-medias props

Prop name	Type	Description	Default value
videoPosition	number or last	XXXXXXXX	last
videoThumb	boolean	XXXXXXXX	false
labelRemove	string	XXXXXXXX	``
optionsZoom	object	XXXXXXXX	``
ModalZoomElement	element	XXXXXXXX	``

• optionsZoom object:

Prop name	Type	Description	Default value
active	boolean	XXXXXXXX	XXXXXX
mode	enum	XXXXXXXX	XXXXXX

• mode enum:

mode
in-place-click
in-place-hover
disabled
open-modal

Usage

With Embla

{
"container#product-medias": {
		"props": {
			"blockClass": "product-medias"
		},

		"children": ["embla-carousel.group#product-medias"]
	},

	"embla-carousel.group#product-medias": {
		"children": [
			"product-medias#product-media-left",
			"product-medias#product-media-main"
		]
	},

	"product-medias#product-media-main": {
		"props": {
			"videoPosition": "last",
			"activeZoom": true,
			"labelRemove": "lata"
		},

		"children": ["embla-carousel#product-medias-main"]
	},

	"embla-carousel#product-medias-main": {
		"props": {
			"options": {
				"navigation": true,
				"dots": false,
				"draggable": true
			},

			"blockClass": ["product-medias-main"]
		}
	},

	"product-medias#product-media-left": {
		"props": {
			"videoPosition": "last",
			"videoThumb": true,
			"direction": "vertical",
			"breakpoints": {
				"0": {
					"slidesToScroll": 1,
					"sliderPerView": 1
				}
			}
		},

		"children": ["embla-carousel#product-medias-left"]
	},

	"embla-carousel#product-medias-left": {
		"props": {
			"options": {
				"navigation": false,
				"dots": false,
				"draggable": true,
				"breakpoints": {
					"0": {
						"slidesToScroll": 1,
						"sliderPerView": 3
					}
				}
			},

			"blockClass": ["product-medias-left"]
		}
  }

Customization

The first thing that should be present in this section is the sentence below, showing users the recipe pertaining to CSS customization in apps:

In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on [Using CSS Handles for store customization](https://vtex.io/docs/recipes/style/using-css-handles-for-store-customization).

Thereafter, you should add a single column table with the available CSS handles for the app, like the one below. Note that the Handles must be ordered alphabetically.

CSS Handles
icon
video
image

If there are none, add the following sentence instead:

No CSS Handles are available yet for the app customization.

Contributors ✨

Thanks goes to these wonderful people:

This project follows the all-contributors specification. Contributions of any kind are welcome!