@lancom/shared 0.0.189 → 0.0.191

package/assets/js/utils/colors.js

@@ -47,6 +47,8 @@ export const getProductMediumCover = (product, type, color) => getProductCover(p
 export const getProductLargeCover = (product, type, color) => getProductCover(product, 'large', type, color);
 export const getProductOriginCover = (product, type, color) => getProductCover(product, 'origin', type, color);
 
+export const getBgStyle = img => img && ({ 'background-image': `url("${img}")` });
+
 export function getColorBackgroundStyle(color) {
   const { rgb, pattern, name } = color || {};
 

package/components/common/price.vue

@@ -0,0 +1,26 @@
+<template>
+  <span>
+    {{ price | priceWithTax(pricingSettings) }}
+  </span>
+</template>
+  
+<script>
+import { priceWithTax } from '@lancom/shared/assets/js/utils/filters';
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'Price',
+  filters: {
+    priceWithTax
+  },
+  props: {
+    price: {
+      type: Number
+    }
+  },
+  computed: {
+    ...mapGetters(['pricingSettings'])
+  }
+};
+</script>
+  

package/components/product/gallery/gallery.scss

@@ -5,9 +5,10 @@
 }
 ::v-deep .slick-arrow {
   position: absolute;
+  color: white;
   top: 50%;
-  background-color: $black;
-  background-image: url(../../../static/icons/arrow-left.svg);
+  background-color: $gray;
+  background-image: url(../../../static/icons/arrow-right.svg);
   background-position: center;
   background-repeat: no-repeat;
   background-size: 25px 25px;
@@ -105,6 +106,12 @@
         font-size: 18px;
         color: $gray_main;
         margin-top: 4px;
+        &-info {
+          font-size: 14px;
+          margin-top: 5px;
+          color: $gray_main;
+          font-style: italic;
+        }
       }
     }
   }

package/components/product/gallery/gallery.vue

@@ -38,7 +38,10 @@
             <div
               v-if="image.print.pricing"
               class="Gallery__big-print-price">
-              {{ image.print.pricing.price | price }} for ({{ image.print.pricing.min || 1 }}+)
+              Printing at <price :price="image.print.pricing.price" /> for ({{ image.print.pricing.min || 1 }}+)
+            </div>
+            <div class="Gallery__big-print-price-info">
+              example only
             </div>
           </div>
         </div>
@@ -100,16 +103,15 @@
 import { mapGetters, mapActions } from 'vuex';
 import VueSlickCarousel from 'vue-slick-carousel';
 import 'vue-slick-carousel/dist/vue-slick-carousel.css';
-import { staticLink, price } from '@lancom/shared/assets/js/utils/filters';
+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';
 
 export default {
   name: 'Gallery',
-  filters: {
-    price
-  },
   components: {
-    VueSlickCarousel
+    VueSlickCarousel,
+    Price
   },
   props: {
     slidesPerRow: {
@@ -152,11 +154,15 @@ export default {
       const images = this.filterType ? this.images.filter(i => this.isValidImageByFilter(this.filterType, i)) : this.images;
       return images.map(image => {
         const printType = this.product?.printTypes.find(({ _id }) => _id === image.printType);
-        const { printCost } = printType?.printAreas.find(({ printSizes }) => (printSizes || []).some(({ _id }) => _id === image.printSize)) || printType?.printAreas[0] || { printCost: [] };
+        const printArea = printType?.printAreas.find(({ printSizes }) => (printSizes || []).some(({ _id }) => _id === image.printSize)) || printType?.printAreas[0] || { printCost: [] };
+        const { printCost, printSizes } = printArea;
+        const printSize = (printSizes || []).find(({ _id }) => _id === image.printSize);
         const pricing = printCost[printCost.length - 1];
+        const pricingMin = printCost[0];
         const print = printType && {
-          name: printType.name,
-          pricing
+          name: printSize ? `${printType.name} (${printSize.name})` : printType.name,
+          pricing,
+          pricingMin
         };
         const color = this.availableColors.find(({ _id }) => _id === image.color);
         return { ...image, print, colorName: color?.name };

package/components/product/printed_product_images/printed-product-images.scss

@@ -0,0 +1,32 @@
+@import "@/assets/scss/variables";
+
+.PrintedProductImages {
+  &__title {
+    margin: 30px 0;
+    text-align: center;
+    font-size: 28px;
+    color: #323232;
+    width: 100%;
+    font-weight: 800;
+    text-transform: uppercase;
+  }
+  &__products {
+    display: flex;
+    margin: -32px 0 0 -32px;
+    width: calc(100% + 32px);
+  }
+  &__product {
+    margin: 32px 0 0 32px;
+  }
+}
+
+::v-deep {
+  .ProductList {
+    &__item-wrapper {    
+      height: 330px !important;
+    }
+    &__item--active {    
+      min-height: 330px;
+    }
+  }
+}

package/components/product/printed_product_images/printed-product-images.vue

@@ -0,0 +1,52 @@
+<template>
+  <div
+    v-if="hasImages"
+    class="PrintedProductImages__wrapper">
+    <div class="PrintedProductImages__title">
+      Print Gallery
+    </div>
+    <lancom-product-list
+      :products="images"
+      :placeholder="false">
+      <template #product="{ product, full }">
+        <div
+          :class="{
+            'ProductList__item--active': full
+          }">
+          <printed-product-image :image="product" />
+        </div>
+      </template>
+    </lancom-product-list>
+  </div>
+</template>
+
+<script>
+import PrintedProductImage from './printed_product_image/printed-product-image';
+import LancomProductList from '@/components/products/product_list/product-list';
+
+export default {
+  name: 'LancomPrintedProductImages',
+  components: {
+    LancomProductList,
+    PrintedProductImage
+  },
+  props: {
+    product: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    hasImages() {
+      return this.images.length > 0;
+    },
+    images() {
+      return (this.product.images || []).filter(i => !!i.printType);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'printed-product-images';
+</style>

package/components/product/printed_product_images/printed_product_image/printed-product-image.scss

@@ -0,0 +1,76 @@
+@import "@/assets/scss/variables";
+
+.PrintedProductImage {
+  &__wrapper {
+    border: 4px solid #fff;
+    background-color: #fff;
+    min-height: 100%;
+    .visible-full {
+      opacity: 0;
+    }
+    &--full {
+      .visible-full {
+        opacity: 1;
+      }
+    }
+  }
+
+  &__content {
+    padding: 10px 10px 14px 10px;
+    text-align: center;
+    font-size: 14px;
+     a { 
+       text-decoration: none;
+       color: $black;
+     }
+  }
+  &__info {
+    padding-top: 0px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  &__link {
+    position: relative;
+    display: block;
+    transition: background-color 0.5s ease;
+    text-decoration: none;
+    background-color: white;
+    height: 240px;
+    &-cover,
+    &-cover-hover {
+      position: absolute;
+      top: 10px;
+      left: 14px;
+      right: 14px;
+      height: 220px;
+      z-index: 1;
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-color: white;
+    }
+    &-cover {
+      transition: opacity 0.35s ease-in-out;
+      opacity: 1;
+    }
+    &-cover-hover {
+      transition: opacity 0.45s ease-in-out;
+      z-index: 2;
+      opacity: 0;
+    }
+  }
+}
+
+
+.PrintedProductImage__wrapper--full {
+  .PrintedProductImage {
+    &__name {
+      display: block;
+      overflow: visible;
+    }
+    &__sku {
+      white-space: normal;
+    }
+  }
+}

package/components/product/printed_product_images/printed_product_image/printed-product-image.vue

@@ -0,0 +1,50 @@
+<template>
+  <div
+    class="PrintedProductImage__wrapper"
+    :class="{
+      'PrintedProductImage__wrapper--full': full
+    }">
+    <nuxt-link
+      :to="imageLink"
+      class="PrintedProductImage__link">
+      <div
+        v-if="productСover"
+        class="PrintedProductImage__link-cover"
+        :style="productСoverBg"></div>
+    </nuxt-link>
+    <div class="PrintedProductImage__content">
+      <nuxt-link :to="imageLink">
+        {{ image.description }}
+      </nuxt-link>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getBgStyle } from '@lancom/shared/assets/js/utils/colors';
+
+export default {
+  name: 'PrintedProductImage',
+  props: {
+    image: {
+      type: Object,
+      reqquired: true
+    }
+  },
+  computed: {
+    imageLink() {
+      return this.image.relatedLink || '#';
+    },
+    productСover() {
+      return this.image.medium;
+    },
+    productСoverBg() {
+      return getBgStyle(this.image.medium);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'printed-product-image';
+</style>

package/mixins/product-preview.js

@@ -1,11 +1,9 @@
-import { getColorBackgroundStyle, getProductMediumCover, getProductLargeCover, getProductHoverCover } from '@lancom/shared/assets/js/utils/colors';
+import { getColorBackgroundStyle, getProductMediumCover, getBgStyle, getProductHoverCover } from '@lancom/shared/assets/js/utils/colors';
 import { staticLink } from '@lancom/shared/assets/js/utils/filters';
 import { generateProductLink } from '@lancom/shared/assets/js/utils/product';
 
-const getBgStyle = img => img && ({ 'background-image': `url("${img}")` });
-
 const loadHolder = {
-  canLoadImages: false,
+  canLoadImages: true,
   canLoadColorImages: false,
   canLoadBackImages: false
 };
@@ -84,10 +82,8 @@ const productPreview = {
     }
   },
   mounted() {
+    this.loadHolder.canLoadImages = true;
     if (process.client) {
-      setTimeout(() => {
-        this.loadHolder.canLoadImages = true;
-      }, 0);
       setTimeout(() => {
         this.loadHolder.canLoadBackImages = true;
         this.loadHolder.canLoadColorImages = true;

package/nuxt.config.js

@@ -26,6 +26,7 @@ module.exports = (config, axios, { raygunClient } = {}) => ({
       priority: 1
     },
     exclude: [
+      // '/',
       '/faq',
       '/products/',
       '/preview/**',
@@ -34,7 +35,10 @@ module.exports = (config, axios, { raygunClient } = {}) => ({
     ],
     routes: async () => {
       const { data } = await axios.get(`${config.LOCAL_API_URL}/feed/sitemap?host=${config.HOST_NAME}`);
-      return data.map(url => ({ url, priority: 0.8 }));
+      return [
+        ...data.map(url => ({ url, priority: 0.8 })),
+        // { url: `https://${config.HOST_NAME}`, priority: 1 }
+      ];
     }
   },
   plugins: [

package/package.json

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

package/static/icons/arrow-left.svg

@@ -1,3 +1,3 @@
-<svg width="14" height="23" viewBox="0 0 14 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="14" height="23" viewBox="0 0 14 23" fill="white" xmlns="http://www.w3.org/2000/svg">
 <path d="M12.6963 20.7394L3.64439 11.6999L12.6974 2.66034C13.1289 2.22936 13.1289 1.5322 12.6974 1.10122C12.2659 0.671337 11.5669 0.671337 11.1354 1.10122L1.30249 10.9198C0.871025 11.3497 0.871025 12.0479 1.30249 12.4778L11.1353 22.2964C11.5668 22.7263 12.2669 22.7263 12.6984 22.2964C13.1278 21.8676 13.1278 21.1693 12.6963 20.7394Z" fill="#343750"/>
 </svg>

package/static/icons/arrow-right.svg

@@ -1,3 +1,3 @@
-<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="26" height="26" viewBox="0 0 26 26" fill="white" xmlns="http://www.w3.org/2000/svg">
 <path d="M7.30369 4.26051L16.3556 13.3L7.3026 22.3395C6.87114 22.7705 6.87114 23.4677 7.3026 23.8987C7.73406 24.3285 8.4331 24.3285 8.86457 23.8987L18.6975 14.0801C19.129 13.6502 19.129 12.9519 18.6975 12.5221L8.86466 2.70349C8.43319 2.2736 7.73306 2.2736 7.3016 2.70349C6.87223 3.13228 6.87223 3.83062 7.30369 4.26051Z" fill="#343750"/>
 </svg>