@lancom/shared 0.0.190 → 0.0.192

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

@@ -38,7 +38,7 @@
             <div
               v-if="image.print.pricing"
               class="Gallery__big-print-price">
-              Printing at <price :price="image.print.pricing.price" /> for ({{ image.print.pricingMin.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

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,47 @@
+<template>
+  <div
+    class="PrintedProductImage__wrapper">
+    <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,9 +1,7 @@
-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: true,
   canLoadColorImages: false,

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.190",
+  "version": "0.0.192",
   "description": "lancom common scripts",
   "author": "e.tokovenko <e.tokovenko@gmail.com>",
   "repository": {