Getting Started
Latest version of Covet.pics Widget is published on NPM - https://www.npmjs.com/package/@covet-pics/covet-pics-widget
To start using widget, you need to link to main widget JS file:
<script src='https://unpkg.com/@covet-pics/covet-pics-widget@latest/dist/covet-pics-widget/covet-pics-widget.js'></script>
After that, you can use the element anywhere in your template, JSX, html etc.
Typical usage would be to render a gallery. For this you need to know Gallery Embed ID. For eg. this is what embed code markup would look like:
<body>
<script src='https://unpkg.com/@covet-pics/covet-pics-widget@latest/dist/covet-pics-widget/covet-pics-widget.js'></script>
...
<covet-pics-widget gallery-embed-id="YOUR_GALLERY_EMBED_ID"></covet-pics-widget>
...
</body>
After component is loaded, markup could look like this (if it's grid layout):
<body>
<script src='https://unpkg.com/@covet-pics/covet-pics-widget@latest/dist/covet-pics-widget/covet-pics-widget.js'></script>
...
<covet-pics-widget gallery-embed-id="YOUR_GALLERY_EMBED_ID">
<covet-pics-gallery-grid>
<covet-pics-gallery-item>...</covet-pics-gallery-item>
<covet-pics-gallery-item>...</covet-pics-gallery-item>
<covet-pics-gallery-item>...</covet-pics-gallery-item>
<covet-pics-gallery-item>...</covet-pics-gallery-item>
<covet-pics-gallery-item>...</covet-pics-gallery-item>
<covet-pics-gallery-item>...</covet-pics-gallery-item>
</covet-pics-gallery-grid>
</covet-pics-widget>
...
<covet-pics-popup>
...
</covet-pics-popup>
...
</body>
Methods
Methods are actions done by Covet.pics Widget instances.
Opens popup, takes popupId as a param.
document.querySelector('covet-pics-popup').openPopup(popupId);
openUpload()
Opens upload modal where user can upload their photos
document.querySelector('covet-pics-upload').openUpload();
Events
Events triggered by Covet.pics Widget instances. You can use this to customize behaviour
galleryReady
Triggered after Covet.pics Widget has been loaded. Event emmits Gallery ID, count of items in gallery and element where gallery is embedded.
//
// galleryReady - when gallery loads
// parameter: itemsCount - number of loaded items
//
document.addEventListener('galleryReady:covetPics', function(e) {
console.log('Gallery Id: ', e.detail.galleryId);
console.log('Gallery items count: ', e.detail.itemsCount);
console.log('Gallery element', e.detail.el);
});
modalOpen
Triggered after modal is opened
document.addEventListener('modalOpen:covetPics', function(e) {
console.log('modalOpen');
});
modalClose
Triggered after modal is closed
document.addEventListener('modalClose:covetPics', function(e) {
console.log('modalClose');
});
modalChanged
Triggered after modal is changed (when user clicks on previous/next button)
document.addEventListener('modalChanged:covetPics', function(e) {
console.log('modalChanged');
});
addToCart
Triggered after customer adds Product to cart in Covet.pics modal. Event detail contains information about product: variantId and productId
//
// addToCart - when customer adds Product to cart in Covet.pics modal
// parameter: variantID - ID of product variant that's added to the cart
// parameter: productId - ID of product
//
document.addEventListener('addToCart:covetPics', function(e) {
console.log("addToCart", e.detail);
});
