@lancom/shared 0.0.216 → 0.0.218

package/assets/js/api/index.js

@@ -1,6 +1,8 @@
 
 import { _get, _post, _put, _delete, _patch } from './helpers';
 import adminApi from './admin';
+import { unminifySimpleProducts } from './utils/simple-products';
+import { unminifyProduct } from './utils/product';
 
 const api = {
   fetchClientSettings(shop, params) {
@@ -48,8 +50,8 @@ const api = {
   fetchPricingProducts(shop, params) {
     return _get(`shop/${shop}/products/pricing-products`, params);
   },
-  fetchProduct(shop, alias, params) {
-    return _get(`shop/${shop}/products/${alias}`, params);
+  async fetchProduct(shop, alias, params) {
+    return unminifyProduct(await _get(`shop/${shop}/products/${alias}`, params));
   },
   fetchCouponByCode(shop, code) {
     return _get(`shop/${shop}/coupons/${code}`);
@@ -72,8 +74,8 @@ const api = {
   fetchNewsTag(shop, alias) {
     return _get(`shop/${shop}/news-tag/${alias}`);
   },
-  fetchProductDetails(shop, alias, params) {
-    return _get(`shop/${shop}/products/${alias}/simple-products`, params);
+  async fetchProductDetails(shop, alias, params) {
+    return unminifySimpleProducts(await _get(`shop/${shop}/products/${alias}/simple-products`, params));
   },
   fetchRelatedProducts(shop, alias, params) {
     return _get(`shop/${shop}/products/${alias}/related-products`, params);

package/assets/js/api/utils/product.js

@@ -0,0 +1,65 @@
+export function unminifyProduct(product) {
+  const { mapPrintTypes, mapPrintAreas, mapPrintSizes } = product;
+
+  product.printTypes = (product.printTypes || []).map(pt => {
+    return mapPrintTypes.find(({ _id }) => _id === pt);
+  });
+  if (product.productType) {
+    product.productType.printTypes = (product.productType.printTypes || []).map(pt => {
+      return mapPrintTypes.find(({ _id }) => _id === pt);
+    });
+  }
+  
+
+  product.printAreas = (product.printAreas || []).map(pa => {
+    return mapPrintAreas.find(({ _id }) => _id === pa || _id === pa?._id);
+  });
+  if (product.productType) {
+    product.productType.printAreas = (product.productType.printAreas || []).map(pa => {
+      return mapPrintAreas.find(({ _id }) => _id === pa || _id === pa?._id);
+    });
+  }
+
+
+  (product.printAreas || []).forEach(pa => {
+    if (pa.printSize) {
+      pa.printSize = mapPrintSizes.find(({ _id }) => _id === pa.printSize || _id === pa.printSize?._id);
+    }
+    (pa.sizes || []).forEach(size => {
+      if (size.printSize) {
+        size.printSize = mapPrintSizes.find(({ _id }) => _id === size.printSize || _id === size.printSize?._id);
+      }
+    });
+  });
+  (product.printTypes || []).forEach(pt => {
+    (pt.printAreas || []).forEach(pa => {
+      pa.printSizes = (pa.printSizes || []).map(size => {
+        return mapPrintSizes.find(({ _id }) => _id === size || _id === size?._id);
+      });
+    });
+  });
+  if (product.productType) {
+    (product.productType.printAreas || []).forEach(pa => {
+      if (pa.printSize) {
+        pa.printSize = mapPrintSizes.find(({ _id }) => _id === pa.printSize || _id === pa.printSize?._id);
+      }
+      (pa.sizes || []).forEach(size => {
+        if (size.printSize) {
+          size.printSize = mapPrintSizes.find(({ _id }) => _id === size.printSize || _id === size.printSize?._id);
+        }
+      });
+    });
+    (product.productType.printTypes || []).forEach(pt => {
+      (pt.printAreas || []).forEach(pa => {
+        pa.printSizes = (pa.printSizes || []).map(size => {
+          return mapPrintSizes.find(({ _id }) => _id === size || _id === size?._id);
+      });
+      });
+    });
+  }
+
+
+  
+
+  return product;
+}

package/assets/js/api/utils/simple-products.js

@@ -0,0 +1,7 @@
+export function unminifySimpleProducts({ simpleProducts, colors, sizes }) {
+  simpleProducts.forEach(sp => {
+    sp.color = colors.find(c => c._id === sp.color);
+    sp.size = sizes.find(s => s._id === sp.size);
+  });
+  return simpleProducts;
+}

package/assets/js/utils/colors.js

@@ -49,10 +49,10 @@ export const getProductOriginCover = (product, type, color) => getProductCover(p
 
 export const getBgStyle = img => img && ({ 'background-image': `url("${img}")` });
 
-export function getColorBackgroundStyle(color) {
+export function getColorBackgroundStyle(color, skipPattern) {
   const { rgb, pattern, name } = color || {};
 
-  if (pattern) {
+  if (pattern && !skipPattern) {
     return {
       'background-image': `url("${staticLink(pattern)}")`
     };

package/components/common/file_uploader.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script>
-import { Power3, TimelineLite } from 'gsap';
+// import { Power3, TimelineLite } from 'gsap';
 import api from '@lancom/shared/assets/js/api';
 import { staticLink } from '@lancom/shared/assets/js/utils/filters';
 import FailedConversionModal from '@lancom/shared/components/modals/failed_conversion_modal/failed-conversion-modal';
@@ -48,7 +48,7 @@ export default {
       rendered: null,
       error: null,
       progress: 0,
-      timelineLite: new TimelineLite()
+      // timelineLite: new TimelineLite()
     };
   },
   methods: {
@@ -96,8 +96,8 @@ export default {
       }
     },
     onProgress(progress) {
-      const duration = progress ? 0.1 : 0;
-      this.timelineLite.to(this, duration, { progress, ease: Power3.easeIn });
+      // const duration = progress ? 0.1 : 0;
+      // this.timelineLite.to(this, duration, { progress, ease: Power3.easeIn });
     },
     toggle() {
       this.$refs.fileUploaderField.click();

package/components/product/gallery/gallery.vue

@@ -1,8 +1,9 @@
 <template>
   <div
-    class="Gallery__wrapper">
+    class="Gallery__wrapper"
+    @click="canLoadImages = true">
     <div class="Gallery__big">
-      <vue-slick-carousel
+      <!-- <vue-slick-carousel
         ref="bigCarousel"
         :key="updateCarouselTime"
         :arrows="true"
@@ -12,14 +13,13 @@
         :speed="800"
         @beforeChange="onChange">
         <div
-          v-for="image in filteredImages"
+          v-for="(image, index) in filteredImages"
           :key="image.large"
           v-hammer:press="onPanstart"
           v-hammer:pan="onPan"
           v-hammer:pressup="onPanend"
           v-hammer:panend="onPanend"
           class="Gallery__big-image"
-          style="width: 300px; height: 300px;"
           :style="{
             // 'background-image': `url(${staticLink(image.large)}`,
             // 'background-size': backgroundSize,
@@ -31,10 +31,10 @@
           @mouseleave="onMouseLeave"
           @mousemove="onMouseMove">
           <img
+            v-if="index === 0 || canLoadImages"
             :src="staticLink(image.large)"
             :alt="product.name"
-            class="Gallery__big-image-src"
-             />
+            class="Gallery__big-image-src" />
           <div
             v-if="image.print"
             class="Gallery__big-print">
@@ -51,7 +51,7 @@
             </div>
           </div>
         </div>
-      </vue-slick-carousel>
+      </vue-slick-carousel> -->
       <div
         v-if="!isTouch"
         class="Gallery__zoom"
@@ -60,7 +60,7 @@
       </div>
     </div>
     <div class="Gallery__small">
-      <vue-slick-carousel
+      <!-- <vue-slick-carousel
         ref="smallCarousel"
         :key="updateCarouselTime"
         :slides-per-row="slidesPerRow"
@@ -80,15 +80,15 @@
             // 'background-image': `url(${staticLink(image.small)}` 
           }">
           <img
+            v-if="index < 6 || canLoadImages"
             :src="staticLink(image.small)"
             :alt="product.name"
-            class="Gallery__small-image-src"
-             />
+            class="Gallery__small-image-src" />
           <div class="Gallery__small-printed">
             {{ image.printType ? 'Printed' : (product.prePrint ? product.prePrintText : image.colorName || 'Blank') }}
           </div>
         </div>
-      </vue-slick-carousel>
+      </vue-slick-carousel> -->
     </div>
     <div
       v-if="hasValidFilters"
@@ -112,8 +112,8 @@
 
 <script>
 import { mapGetters, mapActions } from 'vuex';
-import VueSlickCarousel from 'vue-slick-carousel';
-import 'vue-slick-carousel/dist/vue-slick-carousel.css';
+// import VueSlickCarousel from 'vue-slick-carousel';
+// import 'vue-slick-carousel/dist/vue-slick-carousel.css';
 import { staticLink } from '@lancom/shared/assets/js/utils/filters';
 import { isValidImageTypes } from '@lancom/shared/assets/js/utils/colors';
 import Price from '@lancom/shared/components/common/price';
@@ -121,7 +121,7 @@ import Price from '@lancom/shared/components/common/price';
 export default {
   name: 'Gallery',
   components: {
-    VueSlickCarousel,
+    // VueSlickCarousel,
     Price
   },
   props: {
@@ -135,6 +135,7 @@ export default {
       isTouch: ('ontouchstart' in window),
       zoomEnable: false,
       activeIndex: 0,
+      canLoadImages: false,
       updateCarouselTime: Date.now(),
       filters: [{
         name: 'FRONT / BACK',

package/components/product/layouts/product_colors_selector/product_colors_selector_options/product-colors-selector-options.vue

@@ -9,6 +9,7 @@
       @click="toggleSelection(color)">
       <product-color-image
         :color="color"
+        :lazy="true"
         class="ProductColorsSelectorOptions__color-inner">
       </product-color-image>
       <div

package/components/product/product_color_image/product-color-image.vue

@@ -2,12 +2,14 @@
   <div
     class="ProductColorImage"
     :class="{ zoomedIn }"
-    :style="style">
+    :style="style"
+    v-lazy:background-image="pattern">
   </div>
 </template>
 
 <script>
 import { getColorBackgroundStyle } from '@lancom/shared/assets/js/utils/colors';
+import { staticLink } from '@lancom/shared/assets/js/utils/filters';
 
 export default {
   name: 'ProductColorImage',
@@ -19,11 +21,18 @@ export default {
     zoomedIn: {
       type: Boolean,
       default: false
+    },
+    lazy: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {
+    pattern() {
+      return this.color.pattern && staticLink(this.color.pattern);
+    },
     style() {
-      return getColorBackgroundStyle(this.color);
+      return getColorBackgroundStyle(this.color, this.lazy);
     }
   }
 };

package/components/product/product_reviews/product-reviews.vue

@@ -6,7 +6,7 @@
     <div
       v-if="hasReviews"
       class="ProductReviews__carousel">
-      <vue-slick-carousel
+      <!-- <vue-slick-carousel
         :arrows="true"
         :infinite="false"
         :speed="800">
@@ -14,7 +14,7 @@
           v-for="review in reviews"
           :key="review._id"
           :review="review" />
-      </vue-slick-carousel>
+      </vue-slick-carousel> -->
     </div>
     <div class="ProductReviews__add">
       <btn
@@ -27,15 +27,15 @@
 </template>
 
 <script>
-import VueSlickCarousel from 'vue-slick-carousel';
-import 'vue-slick-carousel/dist/vue-slick-carousel.css';
+// import VueSlickCarousel from 'vue-slick-carousel';
+// import 'vue-slick-carousel/dist/vue-slick-carousel.css';
 import ProductReview from './product_review/product-review';
 import AddReviewModal from './add_review_modal/add-review-modal';
 
 export default {
   name: 'ProductReviews',
   components: {
-    VueSlickCarousel,
+    // VueSlickCarousel,
     ProductReview
   },
   mixins: [],

package/components/product/related_products/related-products.vue

@@ -5,7 +5,9 @@
     <div class="RelatedProducts__title">
       Related Products
     </div>
-    <product-list :products="products" />
+    <product-list
+      :products="products"
+      :lazy="true" />
   </div>
 </template>
 

package/mixins/meta-info.js

@@ -1,4 +1,5 @@
 import { mapGetters } from 'vuex';
+import { staticLink } from '@lancom/shared/assets/js/utils/filters';
 import { generateShopHeadScripts } from '@lancom/shared/utils/head';
 
 const metaInfo = {
@@ -46,6 +47,12 @@ const metaInfo = {
       content: pageTitle
     }];
 
+    const link = [{
+      hid: 'canonical',
+      rel: 'canonical',
+      href: `https://${process.env.HOST_NAME}${this.$route.path === '/' ? '' : this.$route.path}`
+    }];
+
     if (hasQueryParams) {
       metaTags.push({
         hid: 'robots',
@@ -77,12 +84,22 @@ const metaInfo = {
       });
     }
 
-    const pageImage = this.pageItem?.image || (this.pageItem?.images && this.pageItem?.images[0]) || image;
+    const pageImage = this.pageItemImage || this.pageItem?.image || (this.pageItem?.images && this.pageItem?.images[0]) || image;
     if (pageImage) {
+      const pageImageUrl = staticLink(typeof pageImage === 'string' ? pageImage : (pageImage.medium || pageImage.large));
       metaTags.push({
         hid: 'og:image',
         property: 'og:image',
-        content: typeof pageImage === 'string' ? pageImage : (pageImage.medium || pageImage.large)
+        content: pageImageUrl
+      });
+      
+      link.push({
+        hid: 'preloadImage',
+        rel: 'preload',
+        fetchpriority: 'high',
+        as: 'image',
+        type: 'image/webp',
+        href: pageImageUrl
       });
     }
 
@@ -100,11 +117,7 @@ const metaInfo = {
     return {
       title: pageTitle,
       meta: metaTags,
-      link: [{
-        hid: 'canonical',
-        rel: 'canonical',
-        href: `https://${process.env.HOST_NAME}${this.$route.path === '/' ? '' : this.$route.path}`
-      }],
+      link,
       ...generateShopHeadScripts(this.shop)
     };
   },

package/mixins/modals.js

@@ -1,8 +1,3 @@
-import CartModal from '@lancom/shared/components/modals/cart_modal/cart-modal';
-import OrderModal from '@lancom/shared/components/modals/order_modal/order-modal';
-import PaymentModal from '@lancom/shared/components/modals/payment_modal/payment-modal';
-import LayersTemplatesModal from '@lancom/shared/components/modals/editor_layers_templates/editor-layers-templates';
-
 const modals = {
   data() {
     return {
@@ -30,7 +25,8 @@ const modals = {
         this.switchModalTo = null;
       }
     },
-    showCartModal(onclose) {
+    async showCartModal(onclose) {
+      const CartModal = await import('@lancom/shared/components/modals/cart_modal/cart-modal');
       this.openedModal = 'cart-modal';
       this.onclose = onclose;
       this.$modal.show(
@@ -52,7 +48,9 @@ const modals = {
         }
       );
     },
-    showOrderModal() {
+    async showOrderModal() {
+      const OrderModal = await import('@lancom/shared/components/modals/order_modal/order-modal');
+
       this.openedModal = 'order-modal';
       this.$modal.show(
         OrderModal,
@@ -73,7 +71,8 @@ const modals = {
         }
       );
     },
-    showPaymentModal() {
+    async showPaymentModal() {
+      const PaymentModal = await import('@lancom/shared/components/modals/payment_modal/payment-modal');
       this.openedModal = 'payment-modal';
       this.$modal.show(
         PaymentModal,
@@ -97,7 +96,9 @@ const modals = {
         }
       );
     },
-    openPrintTemplates() {
+    async openPrintTemplates() {
+      const LayersTemplatesModal = await import('@lancom/shared/components/modals/editor_layers_templates/editor-layers-templates');
+
       this.$modal.show(
         LayersTemplatesModal,
         {},

package/mixins/product-preview.js

@@ -20,6 +20,10 @@ const productPreview = {
     toEditor: {
       type: Boolean,
       default: true
+    },
+    lazy: {
+      type: Boolean,
+      default: true
     }
   },
   data() {

package/nuxt.config.js

@@ -107,6 +107,7 @@ module.exports = (config, axios, { raygunClient, publicPath } = {}) => ({
         config.devtool = 'source-map';
       }
     },
+    analyze: !config.IS_LOCAL,
     extractCSS: !config.IS_LOCAL,
   },
   hooks: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lancom/shared",
-  "version": "0.0.216",
+  "version": "0.0.218",
   "description": "lancom common scripts",
   "author": "e.tokovenko <e.tokovenko@gmail.com>",
   "repository": {

package/plugins/vue-hummer.js

@@ -1,7 +1,7 @@
 import Vue from 'vue';
-import { VueHammer } from 'vue2-hammer';
+// import { VueHammer } from 'vue2-hammer';
 
-VueHammer.config.pan = {
-  threshold: 5
-};
-Vue.use(VueHammer);
+// VueHammer.config.pan = {
+//   threshold: 5
+// };
+// Vue.use(VueHammer);