Mediaopt-vpr NPM

Mediaopt Visual Product Recommendations component

Using this component

Put a script tag similar to this

<script type="module" src="https://cdn.jsdelivr.net/npm/mediaopt-vpr@latest/www/build/mediaopt-widgets.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/mediaopt-vpr@latest/www/build/mediaopt-widgets.js"></script>

in the head of your index.html

Then you can use the element anywhere in your template with <vi-vpr-view></vi-vpr-view> 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 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:

<style id="vpr-styles">
    mopt-vpr::part(price-outdated) {
      color: inherit;
      font-size: 12px;
      font-weight: 400;
      text-align: center;
    }

    mopt-vpr::part(price-discount) {
      color: #dc616d;
      font-size: 14px;
      font-weight: 600;
      text-align: center;
    }
</style>

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:

exported-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

    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