# Product Medias

📢 Use this project, [contribute](https://github.com/{OrganizationName}/{AppName}) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion).

## Product Medias

[![All Contributors](https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)

![Desmostration](https://user-images.githubusercontent.com/48053804/200062001-e63c7f9e-2e2b-4561-8d94-0eade2bc2004.png)

### Configuration

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

```json
  "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

```json
{
"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](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind are welcome!


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://e-plus-agency.gitbook.io/plus-docs/vtex-io-custom-apps/product-medias.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.