cloudinary-video-player 1.6.2-edge.13

package/src/components/shoppable-bar/layout/shoppable-panel-toggle.js

@@ -0,0 +1,64 @@
+import videojs from 'video.js';
+import {
+  CLD_SPBL_TOGGLE_CLASS,
+  CLD_SPBL_TOGGLE_CUSTOM_ICON_CLASS,
+  CLD_SPBL_TOGGLE_ICON_CLASS,
+  CLOSE_ICON_CLASS,
+  ICON_CART_CLASS,
+  SHOPPABLE_ANIMATION_CLASS
+} from '../shoppable-widget.const';
+const dom = videojs.dom || videojs;
+
+const ClickableComponent = videojs.getComponent('ClickableComponent');
+
+class ShoppablePanelToggle extends ClickableComponent {
+
+  constructor(player, options) {
+    super(player, options);
+    this.options_ = options;
+  }
+
+  handleClick(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.options_.clickHandler();
+  }
+
+  createEl() {
+    let iconProps = {};
+    let iconAttrs = {};
+    if (this.options_.toggleIcon) {
+      iconProps = {
+        className: `${CLD_SPBL_TOGGLE_ICON_CLASS} ${CLD_SPBL_TOGGLE_CUSTOM_ICON_CLASS} ${CLOSE_ICON_CLASS}`
+      };
+      iconAttrs = {
+        style: `background-image: url(${this.options_.toggleIcon})`
+      };
+    } else {
+      iconProps = {
+        className: `${CLD_SPBL_TOGGLE_ICON_CLASS} ${ICON_CART_CLASS}`
+      };
+    }
+    const icon = dom.createEl('span', iconProps, iconAttrs);
+
+    const el = super.createEl('a', {
+      className: `${CLD_SPBL_TOGGLE_CLASS} base-color-bg`
+    });
+    el.appendChild(icon);
+
+    this.player_.on('productBarMin', () => {
+      setTimeout(() => {
+        icon.classList.add(SHOPPABLE_ANIMATION_CLASS);
+        setTimeout(() => {
+          icon.classList.remove(SHOPPABLE_ANIMATION_CLASS);
+        }, 1000);
+      }, 500);
+    });
+
+    return el;
+  }
+}
+
+videojs.registerComponent('shoppablePanelToggle', ShoppablePanelToggle);
+
+export default ShoppablePanelToggle;

package/src/components/shoppable-bar/layout/shoppable-products-overlay.js

@@ -0,0 +1,87 @@
+import videojs from 'video.js';
+const dom = videojs.dom || videojs;
+import { parseTime } from 'utils/time';
+import { find } from 'utils/find';
+import {
+  SHOPPABLE_PANEL_HIDDEN_CLASS,
+  SHOPPABLE_PANEL_VISIBLE_CLASS,
+  SHOPPABLE_PRODUCTS_OVERLAY_CLASS
+} from '../shoppable-widget.const';
+
+const Component = videojs.getComponent('Component');
+
+class ShoppableProductsOverlay extends Component {
+
+  constructor(player, options = {}) {
+    super(player, options);
+    this.options_ = options;
+    this.player_ = player;
+
+    this.player_.on('showProductsOverlay', () => {
+      this.renderProducts();
+    });
+
+    this.dispose = () => {
+      this.layout_.dispose();
+    };
+  }
+
+  renderProducts() {
+    // Close products side-panel
+    this.player_.removeClass(SHOPPABLE_PANEL_VISIBLE_CLASS);
+    this.player_.addClass(SHOPPABLE_PANEL_HIDDEN_CLASS);
+    this.player_.addClass(SHOPPABLE_PRODUCTS_OVERLAY_CLASS);
+
+    this.layout_.innerHTML = '';
+
+    // Filter products with appearance on currentTime
+    const currentTime = this.player_.currentTime();
+    const currentProducts = this.options_.products.filter(product => product.hotspots && product.hotspots.some(a => parseTime(a.time) === currentTime));
+
+    currentProducts.forEach(product => {
+      const hotspot = find(product.hotspots, (hs) => parseTime(hs.time) === currentTime);
+
+      const productName = dom.createEl('div',
+        { className: 'cld-spbl-product-hotspot-name' },
+        {},
+        product.productName
+      );
+      const productTooltip = dom.createEl('div',
+        { className: 'cld-spbl-product-tooltip cld-spbl-product-tooltip-' + hotspot.tooltipPosition },
+        {},
+        productName
+      );
+      const productHotSpot = dom.createEl('a',
+        {
+          className: 'cld-spbl-product-hotspot accent-color-text',
+          href: hotspot.clickUrl,
+          target: '_blank'
+        },
+        { style: 'left:' + hotspot.x + '; top:' + hotspot.y + ';' },
+        productTooltip
+      );
+
+      this.layout_.appendChild(productHotSpot);
+    });
+
+    // Remove
+    this.player_.one('seeking', (e) => this.clearLayout(e));
+    this.player_.one('play', (e) => this.clearLayout(e));
+  }
+
+  clearLayout() {
+    this.layout_.innerHTML = '';
+    this.player_.removeClass(SHOPPABLE_PRODUCTS_OVERLAY_CLASS);
+  }
+
+  createEl() {
+    this.layout_ = dom.createEl('div', { className: 'cld-spbl-products-overlay' });
+
+    return this.layout_;
+  }
+
+}
+
+videojs.registerComponent('ShoppableProductsOverlay', ShoppableProductsOverlay);
+
+export default ShoppableProductsOverlay;

package/src/components/shoppable-bar/panel/shoppable-panel-item.js

@@ -0,0 +1,105 @@
+import videojs from 'video.js';
+import { elMatches } from 'utils/matches';
+
+const ClickableComponent = videojs.getComponent('ClickableComponent');
+const dom = videojs.dom || videojs;
+import ImageSource from '../../../plugins/cloudinary/models/image-source';
+import {
+  CLD_SPBL_IMAGE,
+  CLD_SPBL_ITEM,
+  SHOPPABLE_CLICK_ACTIONS, SHOPPABLE_HOVER_ACTIONS,
+  SHOPPABLE_WIDGET_RESPONSIVE_CLASS
+} from '../shoppable-widget.const';
+
+class ShoppablePanelItem extends ClickableComponent {
+
+  constructor(player, initOptions) {
+    super(player, initOptions);
+    this.options_ = initOptions;
+    this.isDragged = false;
+  }
+
+  handleClick(event) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (!elMatches(this.el_, `.dragged .${CLD_SPBL_ITEM}`)) {
+      // Prevent click event if dragged
+      this.options_.clickHandler(event);
+    }
+    this.isDragged = false;
+  }
+
+  getTitle() {
+    return this.options_.conf.title;
+  }
+
+  createEl() {
+    const el = super.createEl('a', {
+      className: `${CLD_SPBL_ITEM} base-color-bg accent-color-text`,
+      href: '#'
+    });
+
+    el.setAttribute('data-product-id', this.options_.conf.productId || '');
+    el.setAttribute('data-product-name', this.options_.conf.productName || '');
+
+    if (this.options_.conf.onHover) {
+      addOnHover(el, this.options_.conf.onHover, this.options_.item.cloudinaryConfig());
+    }
+    if (this.options_.conf.onClick) {
+      addOnClick(el, this.options_.conf.onClick);
+    }
+
+    const img = super.createEl('img',
+      { className: `${CLD_SPBL_IMAGE} ${SHOPPABLE_WIDGET_RESPONSIVE_CLASS}` },
+      { 'data-src': this.options_.item.url() }
+    );
+
+    el.appendChild(img);
+
+    if (this.getTitle()) {
+      const info = dom.createEl('div', { className: 'cld-spbl-item-info base-color-semi-bg text-color-text' });
+      const title = dom.createEl('span', { className: 'cld-spbl-item-title' }, {}, this.getTitle());
+      info.appendChild(title);
+      el.appendChild(info);
+    }
+
+    return el;
+  }
+}
+
+const addOnHover = (el, conf, cldConf) => {
+  el.setAttribute('data-hover-action', conf.action);
+  if (conf.action === SHOPPABLE_HOVER_ACTIONS.OVERLAY) {
+    const overlayText = dom.createEl('span', { className: 'cld-spbl-overlay-text base-color-text' }, {}, conf.args);
+    const overlay = dom.createEl('span', { className: 'cld-spbl-overlay text-color-semi-bg base-color-text' }, { title: conf.args }, overlayText);
+    el.appendChild(overlay);
+  } else {
+
+    const switchImgSource = new ImageSource(conf.args.publicId, {
+      cloudinaryConfig: cldConf,
+      transformation: conf.args.transformation
+    });
+
+    const hoverImg = dom.createEl('img',
+      { className: `${CLD_SPBL_IMAGE} cld-spbl-hover-img ${SHOPPABLE_WIDGET_RESPONSIVE_CLASS}` },
+      { 'data-src': switchImgSource.url() }
+    );
+
+    el.appendChild(hoverImg);
+  }
+};
+
+const addOnClick = (el, conf) => {
+  el.setAttribute('data-click-action', conf.action);
+  el.setAttribute('data-pause', conf.pause);
+  if (conf.action === SHOPPABLE_CLICK_ACTIONS.SEEk) {
+    el.setAttribute('data-seek', conf.args.time);
+  } else if (conf.action === SHOPPABLE_CLICK_ACTIONS.GO_TO) {
+    el.setAttribute('data-goto-url', conf.args.url);
+  }
+};
+
+videojs.registerComponent('shoppablePanelItem', ShoppablePanelItem);
+
+export default ShoppablePanelItem;

package/src/components/shoppable-bar/panel/shoppable-panel.js

@@ -0,0 +1,172 @@
+import videojs from 'video.js';
+import { assign } from 'utils/assign';
+import { throttle } from 'utils/throttle';
+import { parseTime } from 'utils/time';
+import 'assets/styles/components/playlist.scss';
+import ShoppablePanelItem from './shoppable-panel-item';
+import ImageSource from '../../../plugins/cloudinary/models/image-source';
+import {
+  CLD_SPBL_PANEL_CLASS,
+  SHOPPABLE_CLICK_ACTIONS,
+  SHOPPABLE_PANEL_HIDDEN_CLASS,
+  SHOPPABLE_PANEL_VISIBLE_CLASS,
+  SHOPPABLE_PRODUCTS_OVERLAY_CLASS
+} from '../shoppable-widget.const';
+
+const Component = videojs.getComponent('Component');
+
+class ShoppablePanel extends Component {
+
+  constructor(player, options = {}) {
+    super(player, options);
+    this.options = options;
+
+    const itemChangeHandler = () => {
+      this.render();
+    };
+    player.on('shoppableitemchanged', itemChangeHandler);
+
+    this.render();
+
+    this.dispose = () => {
+      super.dispose();
+      player.off('shoppableitemchanged', itemChangeHandler);
+    };
+  }
+
+  createEl() {
+    const el = super.createEl();
+    [CLD_SPBL_PANEL_CLASS, 'base-color-bg'].map(cls => el.classList.add(cls));
+    return el;
+  }
+
+  removeAll() {
+    const childrens = this.children();
+    for (let i = childrens.length - 1; i >= 0; --i) {
+      this.removeChild(childrens[i]);
+    }
+  }
+
+  getItems() {
+    const cloudinaryConfig = this.player_.cloudinary.cloudinaryConfig();
+    return this.options.products.map(product => {
+      if (product.onHover && typeof product.onHover.args === 'object') {
+        product.onHover.args.transformation = assign({},
+          this.options.transformation,
+          product.onHover.args.transformation
+        );
+      }
+      const conf = {
+        productId: product.productId,
+        productName: product.productName,
+        title: product.title,
+        onHover: product.onHover,
+        onClick: product.onClick,
+        startTime: product.startTime,
+        endTime: product.endTime
+      };
+      const imageSource = new ImageSource(product.publicId, {
+        cloudinaryConfig: cloudinaryConfig,
+        transformation: assign({}, this.options.transformation, product.transformation)
+      });
+      return {
+        imageSrc: imageSource,
+        conf: conf
+      };
+    });
+  }
+
+  scrollToActiveItem() {
+    const activeItems = this.el_.getElementsByClassName('active');
+    if (activeItems.length > 0) {
+      const toScroll = activeItems[0].offsetTop - 12;
+      // Test for native scrollTo support (IE will fail)
+      if ('scrollBehavior' in document.documentElement.style) {
+        this.el_.scrollTo({
+          top: toScroll,
+          behavior: 'smooth'
+        });
+      } else {
+        this.el_.scrollTop = toScroll;
+      }
+    }
+  }
+
+  render() {
+    this.removeAll();
+
+    const items = this.getItems();
+
+    const throttledScrollToActiveItem = throttle(() => this.scrollToActiveItem(), 1000);
+
+    items.forEach((item, index) => {
+      const shoppablePanelItem = new ShoppablePanelItem(this.player(), {
+        item: item.imageSrc,
+        conf: item.conf,
+        next: index === 1,
+        current: index === 0,
+        clickHandler: (e) => {
+          let target = e.currentTarget || e.target;
+          let evName = this.player_.ended() ? 'productClickPost' : 'productClick';
+          this.player_.trigger(evName, { productId: target.dataset.productId, productName: target.dataset.productName });
+
+          // Go to URL, or seek video (set currentTime)
+          if (target.dataset.clickAction === SHOPPABLE_CLICK_ACTIONS.GO_TO) {
+            window.open(target.dataset.gotoUrl, '_blank');
+          } else if (target.dataset.clickAction === SHOPPABLE_CLICK_ACTIONS.SEEk) {
+            const gotoSecs = parseTime(target.dataset.seek);
+            if (gotoSecs !== null) {
+              this.player_.addClass('vjs-has-started'); // Hide the poster image
+              if (this.player_.postModal) {
+                this.player_.postModal.close();
+              }
+              this.player_.currentTime(gotoSecs);
+              // Close products side-panel
+              this.player_.removeClass(SHOPPABLE_PANEL_VISIBLE_CLASS);
+              this.player_.addClass(SHOPPABLE_PANEL_HIDDEN_CLASS);
+              this.player_.addClass(SHOPPABLE_PRODUCTS_OVERLAY_CLASS);
+              // Wait for the time update and show the tooltips
+              this.player_.one('seeked', () => this.player_.trigger('showProductsOverlay'));
+            }
+          }
+
+          // pause - true (default), false, or number of seconds
+          if (target.dataset.pause !== 'false') {
+            this.player_.pause();
+            if (parseTime(target.dataset.pause)) {
+              setTimeout(() => {
+                this.player_.play();
+              }, parseTime(target.dataset.pause) * 1000);
+            }
+          }
+        }
+      });
+
+      shoppablePanelItem.on('mouseover', e => {
+        let target = e.currentTarget || e.target;
+        let evName = this.player_.ended() ? 'productHoverPost' : 'productHover';
+        this.player_.trigger(evName, { productId: target.dataset.productId, productName: target.dataset.productName });
+      });
+
+      if (typeof item.conf.startTime !== 'undefined' && typeof item.conf.endTime !== 'undefined') {
+        this.player_.on('timeupdate', () => {
+          const time = this.player_.currentTime();
+          if (time >= item.conf.startTime && time < item.conf.endTime) {
+            shoppablePanelItem.el_.classList.add('active');
+            throttledScrollToActiveItem();
+          } else if (shoppablePanelItem.el_.classList.contains('active')) {
+            shoppablePanelItem.el_.classList.remove('active');
+          }
+        });
+      }
+
+      this.addChild(shoppablePanelItem);
+
+    });
+
+  }
+}
+
+videojs.registerComponent('shoppablePanel', ShoppablePanel);
+
+export default ShoppablePanel;

package/src/components/shoppable-bar/shoppable-post-widget.js

@@ -0,0 +1,110 @@
+import videojs from 'video.js';
+import ShoppablePanel from './panel/shoppable-panel.js';
+import { CLD_SPBL_PANEL_CLASS } from './shoppable-widget.const';
+const dom = videojs.dom || videojs;
+
+class ShoppablePostWidget {
+  constructor(player, options = {}) {
+    this.options_ = { ...options, postPlay: true };
+    this.player_ = player;
+    this.render();
+
+    // Handle drag-to-scroll
+    this.handleDragToScroll();
+
+    this.dispose = () => {
+      this.layout_.dispose();
+    };
+  }
+
+  handleDragToScroll() {
+    const postModal = this.player_.postModal.el_;
+    const slider = postModal.querySelector(`.${CLD_SPBL_PANEL_CLASS}`);
+
+    let isDown = false;
+    let startX = 0;
+    let scrollLeft = 0;
+
+    slider.addEventListener('mousedown', (e) => {
+      isDown = true;
+      startX = e.pageX - slider.offsetLeft;
+      scrollLeft = slider.scrollLeft;
+    });
+
+    document.addEventListener('mouseup', (e) => {
+      isDown = false;
+      setTimeout(() => {
+        slider.classList.remove('dragged');
+      }, 300);
+
+      const x = e.pageX - slider.offsetLeft;
+      const walk = x - startX;
+      if (Math.abs(walk) > 5) {
+        e.preventDefault();
+      }
+    });
+
+    document.addEventListener('mousemove', (e) => {
+      if (!isDown) {
+        return;
+      }
+      e.preventDefault();
+      const x = e.pageX - slider.offsetLeft;
+      const walk = (x - startX);
+      slider.scrollLeft = scrollLeft - walk;
+      if (Math.abs(walk) > 5 && !slider.classList.contains('dragged')) {
+        slider.classList.add('dragged');
+      }
+    });
+  }
+
+  render() {
+
+    this.player_.postModal = null;
+
+    const el = dom.createEl('div', { className: 'cld-spbl-post-play' });
+    const panel = new ShoppablePanel(this.player_, this.options_);
+
+    const title = dom.createEl('div', { className: 'cld-spbl-post-title base-color-text' }, {}, this.options_.bannerMsg || 'Shop the Video');
+
+    // Background - poster + blur effect
+    const bgSrc = this.player_.cloudinary.currentPoster();
+    bgSrc.transformation([
+      bgSrc.transformation().toOptions(),
+      { effect: 'blur:3000' }
+    ]);
+
+    const panelBg = dom.createEl('div', {
+      className: 'cld-spbl-post-play-bg',
+      style: `background-image: url("${bgSrc.url()}")`
+    });
+
+    const replayBtn = dom.createEl('button',
+      {
+        className: 'cld-spbl-replay-btn base-color-bg vjs-icon-replay',
+        onclick: () => {
+          this.player_.trigger('replay');
+          this.player_.postModal.close();
+          this.player_.play();
+        }
+      },
+      {},
+      'Replay'
+    );
+
+    el.appendChild(panelBg);
+    el.appendChild(title);
+    el.appendChild(panel.el());
+    el.appendChild(replayBtn);
+
+    this.player_.postModal = this.player_.createModal(el, { name: 'postModal', uncloseable: true });
+
+    this.player_.addClass('cld-spbl-post-modal');
+    this.player_.postModal.on('beforemodalclose', () => {
+      this.player_.removeClass('cld-spbl-post-modal');
+    });
+  }
+
+}
+
+export default ShoppablePostWidget;

package/src/components/shoppable-bar/shoppable-widget.const.js

@@ -0,0 +1,52 @@
+export const SHOPPABLE_WIDGET_OPTIONS_DEFAULTS = {
+  location: 'right',
+  toggleIcon: '',
+  width: '20%',
+  startState: 'openOnPlay',
+  autoClose: 2,
+  transformation: {
+    quality: 'auto',
+    width: 'auto',
+    fetch_format: 'auto',
+    crop: 'scale'
+  },
+  products: [],
+  showPostPlayOverlay: false
+};
+
+export const SHOPPABLE_CLICK_ACTIONS = {
+  GO_TO: 'goto',
+  SEEk: 'seek'
+};
+
+export const SHOPPABLE_HOVER_ACTIONS = {
+  OVERLAY: 'overlay'
+};
+
+export const SHOPPABLE_WIDGET_RESPONSIVE_CLASS = 'cld-vp-responsive';
+
+export const SHOPPABLE_PANEL_VISIBLE_CLASS = 'shoppable-panel-visible';
+
+export const SHOPPABLE_PANEL_HIDDEN_CLASS = 'shoppable-panel-hidden';
+
+export const SHOPPABLE_PRODUCTS_OVERLAY_CLASS = 'shoppable-products-overlay';
+
+export const CLD_SPBL_PANEL_CLASS = 'cld-spbl-panel';
+
+export const CLD_SPBL_TOGGLE_CLASS = 'cld-spbl-toggle';
+
+export const CLD_SPBL_TOGGLE_ICON_CLASS = 'cld-spbl-toggle-icon';
+
+export const CLD_SPBL_INNER_BAR = 'cld-spbl-bar-inner';
+
+export const CLD_SPBL_TOGGLE_CUSTOM_ICON_CLASS = 'cld-spbl-toggle-custom-icon';
+
+export const ICON_CART_CLASS = 'vjs-icon-cart';
+
+export const CLOSE_ICON_CLASS = 'vjs-icon-close';
+
+export const SHOPPABLE_ANIMATION_CLASS = 'animate';
+
+export const CLD_SPBL_ITEM = 'cld-spbl-item';
+
+export const CLD_SPBL_IMAGE = 'cld-spbl-img';

package/src/components/shoppable-bar/shoppable-widget.js

@@ -0,0 +1,111 @@
+import videojs from 'video.js';
+import ShoppableBarLayout from './layout/bar-layout';
+import ShoppablePostWidget from './shoppable-post-widget';
+import './shoppable-widget.scss';
+import {
+  CLD_SPBL_INNER_BAR,
+  CLD_SPBL_PANEL_CLASS,
+  CLD_SPBL_TOGGLE_CLASS,
+  SHOPPABLE_PANEL_VISIBLE_CLASS,
+  SHOPPABLE_WIDGET_OPTIONS_DEFAULTS,
+  SHOPPABLE_WIDGET_RESPONSIVE_CLASS
+} from './shoppable-widget.const';
+
+
+class ShoppableWidget {
+
+  constructor(player, initOptions = {}) {
+    this.options_ = videojs.mergeOptions(SHOPPABLE_WIDGET_OPTIONS_DEFAULTS, initOptions);
+    this.player_ = player;
+
+    if (this.options_.showPostPlayOverlay) {
+      this.player_.on('ended', () => {
+        this.player_.addChild(new ShoppablePostWidget(this.player_, this.options_));
+        // Handle responsive images.
+        this.player_.player_.cloudinary.cloudinaryConfig().responsive({
+          responsive_class: SHOPPABLE_WIDGET_RESPONSIVE_CLASS
+        });
+      });
+    }
+
+
+    const width = this.options_.width;
+
+    this._injectCSS(`
+      .${CLD_SPBL_INNER_BAR} {
+        transform: translateX(${width});
+      }
+      .${SHOPPABLE_PANEL_VISIBLE_CLASS} .vjs-control-bar {
+        width: calc(100% - ${width});
+      }
+      .${CLD_SPBL_TOGGLE_CLASS} {
+        right: ${width};
+      }
+      .${CLD_SPBL_PANEL_CLASS}{
+        width: ${width};
+      }
+    `);
+
+    this._setListeners();
+  }
+
+  _setListeners() {
+    const resizeHandler = this._resizeHandler.bind(this);
+
+    this.player_.on('resize', resizeHandler);
+    window.addEventListener('resize', resizeHandler);
+
+    this.dispose = () => {
+      this.player_.off('resize', resizeHandler);
+      window.removeEventListener('resize', resizeHandler);
+      this.layout_.dispose();
+    };
+  }
+
+  _injectCSS(css) {
+    const style = document.createElement('style');
+    style.innerHTML = css;
+    this.player_.el_.appendChild(style);
+  }
+
+  _resizeHandler() {
+
+    const shoppableBarBreakpoints = [
+      ['sm', 0, 80],
+      ['md', 81, 110],
+      ['lg', 111, 170]
+    ];
+
+    const shoppableBarWidth = parseFloat(this.options_.width) / 100.0 * this.player_.el_.clientWidth;
+    let inRange = false;
+    if (shoppableBarWidth) {
+      for (const [name, min, max] of shoppableBarBreakpoints) {
+        if (shoppableBarWidth > min && shoppableBarWidth <= max) {
+          this.layout_.contentWrpEl_.setAttribute('size', name);
+          inRange = name;
+        }
+      }
+      if (!inRange) {
+        this.layout_.contentWrpEl_.removeAttribute('size');
+      }
+    }
+  }
+
+  init() {
+    this.render();
+  }
+
+  render() {
+    this.layout_ = new ShoppableBarLayout(this.player_, this.options_);
+    this.player_.on('loadeddata', () => {
+      // Handle responsive images.
+      this.player_.player_.cloudinary.cloudinaryConfig().responsive({
+        responsive_class: SHOPPABLE_WIDGET_RESPONSIVE_CLASS
+      });
+    });
+  }
+
+}
+
+
+export default ShoppableWidget;