# Mediaopt Visual Product Recommendations component
## Using this component
- Put a script tag similar to this
```
```
in the head of your index.html
- Then you can use the element anywhere in your template with `` tag
- Use attributes for provide credentials or customize component view
### Component properties
| Property | Attribute | Description | Type | Default |
| -------------- | --------------- | ------------------------------------------ | --------- | ------------------------ |
| `blockTitle` | `block-title` | Title for recommendations widget | `string` | `'Recommended products'` |
| `columns` | `columns` | Number of columns for recommendations | `number` | `4` |
| `currencySign` | `currency-sign` | Currency sign will shown after price | `string` | `undefined` |
| `imageRatio` | `image-ratio` | Ratio of each recommended product image | `number` | `1.5` |
| `imageWidth` | `image-width` | Width of each recommended product image | `number` | `150` |
| `pricePrefix` | `price-prefix` | prefix will shown before price | `string` | `undefined` |
| `productId` | `product-id` | Id of product you need recommendations for | `string` | `undefined` |
| `sliderMode` | `slider-mode` | Use slider or grid view | `boolean` | `false` |
| `token` | `token` | Mediaopt customer token | `string` | `undefined` |
### Component events
| Event | Description | Type |
| --------------------- | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `recommendationClick` | Event fires ones when user click on deeplink | `CustomEvent<{ productId?: string; title?: string; brand?: string; productType?: string; deeplink?: string; image?: { original?: string; thumbnail?: string; }; price?: { actual?: number; sale?: number; }; }>` |
| `recommendationLoad` | Event fires ones when recommendation rendered on page | `CustomEvent<{ productId?: string; title?: string; brand?: string; productType?: string; deeplink?: string; image?: { original?: string; thumbnail?: string; }; price?: { actual?: number; sale?: number; }; }>` |
| `recommendationView` | Event fires ones when recommendation appears on the viewport | `CustomEvent<{ productId?: string; title?: string; brand?: string; productType?: string; deeplink?: string; image?: { original?: string; thumbnail?: string; }; price?: { actual?: number; sale?: number; }; }>` |
### Styling a component
Because some of CSS style properties can not be inherited we provide an styling API based on [CSS Shadow Parts](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) spec.
*NB: If you don't need to support browsers without Shadow Parts support (IE, Firefox for Android and Samsung Internet) you can adding id to style tag and use Shadow Parts styling anywhere*
To use Shadow Parts add *style* tag to head of your page:
```html
```
Here is a list of shadow parts you can style:
- product
- recommendations-title
- product-image
- product-image-link
- product-title
- price-prefix
- price-currency
- price-regular
- price-outdated
- price-discount
- brand
- product-type
This image describe which elements affected by parts:
Combination of CSS Grids and Shadow Parts allows to change visual position of some elements. For example, if you want to put title below image use
```css
mopt-vpr::part(product-title) {
grid-row: 1;
}
```
*NB: This feature will not work if you will change display property of element!*
## Development
### Automatic interfaces generations
Before running or build project you should generate interfaces.
Use ```npm run build_interfaces``` to generate interface schema from Swagger docs. Docs url should be in .env file as value for OPENAPI_URL key.
Interfaces will be saved to /src/interfaces/generated.ts
### Building
To build the component for production, run:
```bash
npm run build
```
To run the unit tests for the components, run:
```bash
npm test
```