@ecomplus/widget-product 1.0.0-beta.17 → 1.0.0-beta.170

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecomplus/widget-product",
-  "version": "1.0.0-beta.17",
+  "version": "1.0.0-beta.170",
   "description": "Storefront plugin & Vue component for full product block",
   "module": "src/index.js",
   "browser": "dist/widget-product.min.js",
@@ -8,7 +8,7 @@
   "jsdelivr": "dist/public/widget-product.var.min.js",
   "unpkg": "dist/public/widget-product.var.min.js",
   "scripts": {
-    "build": "NODE_ENV=production webpack",
+    "build": "cross-env NODE_ENV=production webpack",
     "serve": "webpack-dev-server"
   },
   "repository": {
@@ -34,7 +34,8 @@
     "vue": ">=2 <4"
   },
   "dependencies": {
-    "@ecomplus/storefront-components": "^1.0.0-beta.20"
+    "@ecomplus/storefront-components": "^1.0.0-beta.173",
+    "@ecomplus/storefront-twbs": "^7.3.6"
   },
   "webpackOutput": {
     "library": "widgetProduct",

package/src/index.js

@@ -5,36 +5,103 @@
  */
 
 import Vue from 'vue'
+import { inStock as checkInStock } from '@ecomplus/utils'
 import TheProduct from '#components/TheProduct.vue'
+import { isMobile } from '@ecomplus/storefront-twbs'
 
 export default (options = {}, elId = 'product') => {
   const $productBlock = document.getElementById(elId)
   if ($productBlock) {
-    const getScopedSlots = window.storefront && window.storefront.getScopedSlots
+    const $dock = document.getElementById(`${elId}-dock`)
+    const isSSR = Boolean($dock)
+    const { storefront } = window
+    let getScopedSlots, body, themeConfig
+    if (storefront) {
+      getScopedSlots = storefront.getScopedSlots
+      body = storefront.context && storefront.context.body
+      themeConfig = storefront.theme && storefront.theme.product
+    }
+
+    let mounted
+    const removeSpinner = () => {
+      const $loading = document.getElementById('product-loading')
+      if ($loading) {
+        $loading.remove()
+      }
+      delete $productBlock.dataset.toRender
+    }
+    if (isSSR) {
+      mounted = removeSpinner
+    }
+
+    const {
+      buyText,
+      strHasQuantitySelector,
+      strHasPromotionTimer,
+      lowQuantityToWarn,
+      maxVariationOptionsBtns,
+      quoteInfo
+    } = options
+
+    const strOptionToBool = (strOption, prop) => {
+      return strOption === '_'
+        ? Boolean(themeConfig && themeConfig[prop])
+        : strOption ? Boolean(strOption.trim()) : false
+    }
+
+    const formatLink = (quoteInfo) => {
+      if (quoteInfo && quoteInfo.indexOf('http') === -1) {
+        const cellphone = quoteInfo.replace(/\D/g, '')
+        return 'https://' + (isMobile ? 'api' : 'web') + '.whatsapp.com/send?phone=' + encodeURIComponent('+' + cellphone ? cellphone : `+55${cellphone}`) + `&text=Cotar produto: ${encodeURIComponent(window.location.href)}`
+      }
+      return quoteInfo
+    }
 
     new Vue({
       render: h => h(TheProduct, {
         attrs: {
-          id: elId
+          id: $dock ? null : elId
         },
         props: {
           ...options.props,
-          buyText: options.buyText
+          product: isSSR && body && body.available && checkInStock(body) ? body : null,
+          buyText,
+          hasQuantitySelector: strOptionToBool(strHasQuantitySelector, 'hasQuantitySelector'),
+          hasPromotionTimer: strOptionToBool(strHasPromotionTimer, 'hasPromotionTimer'),
+          lowQuantityToWarn,
+          maxVariationOptionsBtns,
+          quoteLink: formatLink(quoteInfo),
+          isSSR
+        },
+        on: {
+          'update:product' (product) {
+            if (!isSSR) {
+              removeSpinner()
+            }
+            if (options.$emit) {
+              options.$emit('update:product', product)
+            }
+          }
         },
 
         scopedSlots: Object.assign(
           {
-            buy: !options.buy ? undefined : function () {
-              return h('span', {
-                domProps: {
-                  innerHTML: options.buy
-                }
-              })
-            }
+            buy: !options.buy
+              ? undefined
+              : function () {
+                return h('span', {
+                  domProps: {
+                    innerHTML: options.buy
+                  }
+                })
+              }
           },
-          typeof getScopedSlots === 'function' ? getScopedSlots($productBlock, h) : {}
+          typeof getScopedSlots === 'function'
+            ? getScopedSlots($productBlock, h, !$dock)
+            : {}
         )
-      })
-    }).$mount($productBlock)
+      }),
+      mounted
+    }).$mount($dock || $productBlock)
   }
 }

package/webpack.config.js

@@ -0,0 +1 @@
+module.exports = require('../../webpack.config')