@lancom/shared 0.0.216 → 0.0.217

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/product/gallery/gallery.vue

@@ -1,6 +1,7 @@
 <template>
   <div
-    class="Gallery__wrapper">
+    class="Gallery__wrapper"
+    @click="canLoadImages = true">
     <div class="Gallery__big">
       <vue-slick-carousel
         ref="bigCarousel"
@@ -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">
@@ -80,10 +80,10 @@
             // '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>
@@ -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/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/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.217",
   "description": "lancom common scripts",
   "author": "e.tokovenko <e.tokovenko@gmail.com>",
   "repository": {