@lancom/shared 0.0.89 → 0.0.93

package/components/products/product_list_product_placeholder/product-list-product-placeholder.scss

@@ -0,0 +1,52 @@
+@import "@/assets/scss/variables";
+
+.ProductListProductPlaceholder {
+  &__wrapper {
+    padding: 30px;
+  }
+  &__link {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 30px;
+    text-indent: -99999px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+  }
+  &__image {
+    width: 100%;
+    height: 250px;
+    animation-name: backgroundColorPalette;
+    animation-duration: 1s;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+  }
+  &__info {
+    margin-top: 20px;
+    width: 100%;
+    height: 30px;
+    animation-name: backgroundColorPalette;
+    animation-duration: 1.5s;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+    &--medium {
+      width: 80%;
+    }
+    &--small {
+      width: 60%;
+    }
+  }
+}
+
+@keyframes backgroundColorPalette {
+  0% {
+    background: #efefef;
+  }
+  100% {
+    background: #d9d9d9;
+  }
+}

package/components/products/product_list_product_placeholder/product-list-product-placeholder.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="ProductListProductPlaceholder__wrapper">
+    <nuxt-link
+      :to="productLink"
+      class="ProductListProductPlaceholder__link">
+      <span class="ProductListProductPlaceholder__image"></span>
+      <span class="ProductListProductPlaceholder__info ProductListProductPlaceholder__info--large"></span>
+      <span class="ProductListProductPlaceholder__info ProductListProductPlaceholder__info--medium"></span>
+      <span class="ProductListProductPlaceholder__info ProductListProductPlaceholder__info--small"></span>
+      {{ product.name }}
+    </nuxt-link>
+  </div>
+</template>
+
+<script>
+import productPreview from '@lancom/shared/mixins/product-preview';
+
+export default {
+  name: 'ProductListProductPlaceholder',
+  mixins: [productPreview]
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'product-list-product-placeholder';
+</style>

package/components/products/products_aside/products-aside.scss

@@ -11,4 +11,36 @@
       display: none;
     }
   }
+  &__placeholder {
+    display: flex;
+    flex-direction: column;
+    margin-right: 20px;
+  }
+  &__info {
+    margin-top: 20px;
+    width: 100%;
+    height: 20px;
+    animation-name: backgroundColorPalette;
+    animation-duration: 1.5s;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+    &--medium {
+      width: 85%;
+    }
+    &--small {
+      width: 70%;
+    }
+    &--small2 {
+      width: 55%;
+    }
+  }
+}
+
+@keyframes backgroundColorPalette {
+  0% {
+    background: #efefef;
+  }
+  100% {
+    background: #d9d9d9;
+  }
 }

package/components/products/products_aside/products-aside.vue

@@ -2,38 +2,35 @@
   <div
     :data-aos="aosFadeRight"
     class="ProductsAside__wrapper">
-    <!-- <div class="ProductsAside__item hidden-md-and-up">
-      <input
-        v-model="search"
-        name="search"
-        placeholder="Search"
-        type="text"
-        class="form-field no-label tiny-placeholder labelless"
-        @change="goToTextSearch" />
-    </div> -->
-    <!-- <div class="ProductsAside__item">
-      <products-types
-        :has-selected-icon="hasSelectedIcon"
-        :has-thumbs="hasThumbs" />
-    </div> -->
-    <div class="ProductsAside__item">
-      <products-brands
-        :has-selected-icon="hasSelectedIcon" />
+    <div
+      v-if="placeholder"
+      class="ProductsAside__placeholder">
+      <span class="ProductsAside__info ProductsAside__info--large"></span>
+      <span class="ProductsAside__info ProductsAside__info--medium"></span>
+      <span class="ProductsAside__info ProductsAside__info--small"></span>
+      <span class="ProductsAside__info ProductsAside__info--small2"></span>
     </div>
-    <div class="ProductsAside__item">
-      <products-colors />
-    </div>
-    <div class="ProductsAside__item">
-      <products-attributes
-        :has-selected-icon="hasSelectedIcon" />
-      <products-tags
-        :has-selected-icon="hasSelectedIcon" />
+    <div v-else>
+      <div class="ProductsAside__item">
+        <products-brands
+          :has-selected-icon="hasSelectedIcon" />
+      </div>
+      <div class="ProductsAside__item">
+        <products-colors />
+      </div>
+      <div class="ProductsAside__item">
+        <products-attributes
+          :has-selected-icon="hasSelectedIcon" />
+        <products-tags
+          :has-selected-icon="hasSelectedIcon" />
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import ProductsTypes from '@lancom/shared/components/products/products_types/products-types';
+// import ProductsTypes from '@lancom/shared/components/products/products_types/products-types';
+import { mapGetters } from 'vuex';
 import ProductsBrands from '@lancom/shared/components/products/products_brands/products-brands';
 import ProductsTags from '@lancom/shared/components/products/products_tags/products-tags';
 import ProductsAttributes from '@lancom/shared/components/products/products_attributes/products-attributes';
@@ -43,7 +40,7 @@ import { generateProductsLink } from '@lancom/shared/assets/js/utils/product';
 export default {
   name: 'ProductsAside',
   components: {
-    ProductsTypes,
+    // ProductsTypes,
     ProductsBrands,
     ProductsTags,
     ProductsAttributes,
@@ -64,6 +61,9 @@ export default {
       search: this.$route.query.text || ''
     };
   },
+  computed: {
+    ...mapGetters('products', ['placeholder'])
+  },
   methods: {
     goToTextSearch() {
       this.goToPageWithFilters({ text: this.search });

package/components/products/products_attributes/products-attributes.vue

@@ -2,7 +2,6 @@
   <div
     v-if="attributes.length"
     class="ProductsAttributes__wrapper">
-    <!-- <toggle-content label="Attributes"> -->
     <div
       v-for="attribute in attributes"
       :key="attribute._id"
@@ -11,13 +10,11 @@
         :attribute="attribute"
         :has-selected-icon="hasSelectedIcon" />
     </div>
-    <!-- </toggle-content> -->
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
-// import ToggleContent from '@lancom/shared/components/common/toggle-content';
 import ProductsAttribute from './products_attribute/products-attribute';
 
 export default {

package/components/products/products_brands/products-brands.vue

@@ -43,8 +43,8 @@ export default {
   computed: {
     ...mapGetters('products', ['brands', 'types']),
     list() {
-      const type = this.types.find(type => type.alias === this.$route.params.type);
-      return type ? this.brands.filter(({ productTypes = [] }) => productTypes.some(t => type._id === t)) : this.brands;
+      // const type = this.types.find(type => type.alias === this.$route.params.type);
+      return this.brands;
     },
     currentBrand() {
       return this.$route.params.brand;

package/components/products/products_catalog/products-catalog.vue

@@ -3,8 +3,11 @@
     <div v-if="products">
       <slot
         name="list"
-        v-bind="{ products, toEditor }">
-        <product-list :products="products" :to-editor="toEditor" />
+        v-bind="{ products, toEditor, placeholder }">
+        <product-list
+          :products="products"
+          :to-editor="toEditor"
+          :placeholder="placeholder" />
       </slot>
       <pagination
         v-model="currentPage"
@@ -38,7 +41,8 @@ export default {
       'products',
       'page',
       'count',
-      'perPage'
+      'perPage',
+      'placeholder'
     ]),
     currentPage: {
       get() {
@@ -47,6 +51,7 @@ export default {
       set(page) {
         const link = generateProductsLink(this.$route, { page });
         this.$router.push(link);
+        window.scrollTo(0, 0);
       }
     }
   }

package/components/products/products_colors/products-colors.scss

@@ -12,7 +12,8 @@
   &__selected-item {
     display: flex;
     align-items: center;
-    font-size: 18px;
+    font-size: 12px;
+    font-weight: bold;
     margin: 12px 0;
     padding-top: 4px;
     color: $grey_1;

package/components/products/products_colors/products-colors.vue

@@ -31,6 +31,7 @@
               'ProductsColors__color--selected': isSelectedColor(color)
             }">
             <product-color-image
+              v-if="canLoadImages"
               :color="color"
               class="ProductsColors__color-image" />
           </div>
@@ -53,6 +54,11 @@ export default {
     ProductsLink,
     ToggleContent
   },
+  data() {
+    return {
+      canLoadImages: false
+    };
+  },
   computed: {
     ...mapGetters('products', ['colors']),
     selectedColors() {
@@ -60,6 +66,11 @@ export default {
       return this.colors.filter(color => colors.includes(color.alias));
     }
   },
+  mounted() {
+    setTimeout(() => {
+      this.canLoadImages = true;
+    }, 1000);
+  },
   methods: {
     isSelectedColor(color) {
       return this.selectedColors.some(c => c._id === color._id);

package/components/products/products_filters/products-filters.vue

@@ -20,23 +20,6 @@
         class="icon-filter ProductsFilters__menu-toggle"
         @click="$emit('open')"></i>
     </div>
-    <!-- <div class="ProductsFilters__search hidden-sm-and-down">
-      <input
-        v-model="search"
-        name="search"
-        placeholder="Search"
-        type="text"
-        class="form-field no-label tiny-placeholder labelless"
-        @change="goToTextSearch" />
-      <i class="icon-search"></i>
-    </div> -->
-    <!-- <multiselect
-      v-model="sortBy"
-      :options="sortByOptions"
-      :option-height="35"
-      value="value"
-      label="label"
-      class="labelless" /> -->
   </div>
 </template>
 

package/components/quotes/quote_request/quote-request.vue

@@ -1,11 +1,5 @@
 <template>
   <div class="QuoteRequest__wrapper">
-    <!-- <div class="QuoteRequest__title">
-      Quick Quote
-    </div>
-    <div class="QuoteRequest__info">
-      Fill our the form below and one of our team members will respond with a Quote ASAP!
-    </div> -->
     <div class="QuoteRequest__content">
       <validation-observer
         v-slot="{ invalid, handleSubmit, errors: submittedErrors }"
@@ -297,11 +291,13 @@
 import api from '@lancom/shared/assets/js/api';
 import { mapGetters } from 'vuex';
 import CheckedIcon from '@lancom/shared/components/common/checked-icon';
+import FileUploader from '@lancom/shared/components/common/file_uploader';
 
 export default {
   name: 'QuoteRequest',
   components: {
-    CheckedIcon
+    CheckedIcon,
+    FileUploader
   },
   data() {
     return {

package/mixins/payment.js

@@ -22,7 +22,6 @@ export default {
     },
     isSuccessOrderCharge() {
       const { charge, test, paymentMethod } = this.orderData || {};
-      console.log('charge...', charge, test, paymentMethod);
       return charge?.success || test || paymentMethod === ORDER_PAYMENT_METHOD.DEPOSIT;
     },
     isFailedOrderCharge() {

package/mixins/product-preview.js

@@ -4,6 +4,12 @@ import { generateProductLink } from '@lancom/shared/assets/js/utils/product';
 
 const getBgStyle = img => img && ({ 'background-image': `url("${img}")` });
 
+const loadHolder = {
+  canLoadImages: false,
+  canLoadColorImages: false,
+  canLoadBackImages: false
+};
+
 const productPreview = {
   props: {
     product: {
@@ -21,10 +27,20 @@ const productPreview = {
   data() {
     return {
       currentColor: null,
-      productСoverLoaded: false
+      productСoverLoaded: false,
+      loadHolder
     };
   },
   computed: {
+    canLoadImages() {
+      return this.loadHolder.canLoadImages;
+    },
+    canLoadColorImages() {
+      return this.loadHolder.canLoadColorImages;
+    },
+    canLoadBackImages() {
+      return this.loadHolder.canLoadBackImages;
+    },
     previewTags() {
       return this.product.previewTags || [];
     },
@@ -38,9 +54,6 @@ const productPreview = {
     productLink() {
       return generateProductLink(this.product, this.currentColor, this.toEditor);
     },
-    productСoverBig() {
-      return getProductLargeCover(this.product, 'front', this.currentColor);
-    },
     productСover() {
       return getProductMediumCover(this.product, 'front', this.currentColor);
     },
@@ -63,6 +76,17 @@ const productPreview = {
     hasTags() {
       return this.product?.tags.length > 0;
     }
+  },
+  mounted() {
+    if (process.client) {
+      setTimeout(() => {
+        this.loadHolder.canLoadImages = true;
+      }, 0);
+      setTimeout(() => {
+        this.loadHolder.canLoadBackImages = true;
+        this.loadHolder.canLoadColorImages = true;
+      }, 3000);
+    }
   }
 };
 

package/nuxt.config.js

@@ -32,7 +32,7 @@ module.exports = (config, axios) => ({
       '/customer/**'
     ],
     routes: async () => {
-      const { data } = await axios.get(`${config.API_URL}/feed/sitemap?host=${config.HOST_NAME}`);
+      const { data } = await axios.get(`${config.LOCAL_API_URL}/feed/sitemap?host=${config.HOST_NAME}`);
       return data.map(url => ({ url, priority: 0.8 }));
     }
   },
@@ -47,7 +47,6 @@ module.exports = (config, axios) => ({
     { src: '@/node_modules/@lancom/shared/plugins/vue-hummer', ssr: false },
     '@/node_modules/@lancom/shared/plugins/vue-multiselect',
     '@/node_modules/@lancom/shared/plugins/vue-tooltip',
-    '@/node_modules/@lancom/shared/plugins/vue-color',
     '@/node_modules/@lancom/shared/plugins/vue-click-outside',
     { src: '@/node_modules/@lancom/shared/plugins/error-handler', ssr: false },
     { src: '@/node_modules/@lancom/shared/plugins/aos', ssr: false },
@@ -74,12 +73,16 @@ module.exports = (config, axios) => ({
       '@lancom',
       '@lancom/shared/plugins/aos-animation'
     ],
-    extend(config, ctx) {}
+    extend(config, { isClient }) {
+      if (isClient) {
+        config.devtool = 'source-map';
+      }
+    }
   },
   feed: [{
     path: '/google-shopping.xml',
     async get() {
-      const { data } = await axios.get(`${config.API_URL}/feed/products?host=${config.HOST_NAME}`);
+      const { data } = await axios.get(`${config.LOCAL_API_URL}/feed/products?host=${config.HOST_NAME}`);
       const spliceFirstImage = images => (images || []).splice(0, 1)[0];
       const getImages = images => (images || []).length > 0 ? images : null;
       return {
@@ -97,7 +100,7 @@ module.exports = (config, axios) => ({
               const image = spliceFirstImage(feedImages) || spliceFirstImage(frontImages) || spliceFirstImage(catalogFrontImages) || spliceFirstImage(backImages) || {};
               const images = getImages(backImages) || getImages(frontImages) || [];
               const info = {
-                title: { _text: `${product.name} ${sp.color.name}-${sp.size.name}` },
+                title: { _text: `${product.name} ${sp.color.name}` },
                 description: { _text: product.description || product.fabricInfoShort || product.name },
                 link: { _text: `https://${config.HOST_NAME}/${product.brand.alias}/${product.productType.alias}/${product.alias}?color=${sp.color.alias}` },
                 'g:id': { _text: sp.SKU },

package/package.json

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

package/plugins/global-components.js

@@ -1,14 +1,10 @@
 import Vue from 'vue';
 import Btn from '@lancom/shared/components/common/btn';
 import Spinner from '@lancom/shared/components/common/spinner';
-import FileUploader from '@lancom/shared/components/common/file_uploader';
 import Checkbox from '@lancom/shared/components/common/checkbox';
-import ColorPicker from '@lancom/shared/components/common/color-picker';
 import Breakpoint from '@lancom/shared/components/common/breakpoint';
 
 Vue.component('btn', Btn);
 Vue.component('spinner', Spinner);
-Vue.component('file-uploader', FileUploader);
 Vue.component('Checkbox', Checkbox);
-Vue.component('ColorPicker', ColorPicker);
 Vue.component('breakpoint', Breakpoint);

package/plugins/vue-recaptcha.js

@@ -1,17 +1,22 @@
 import Vue from 'vue';
-import { VueReCaptcha } from 'vue-recaptcha-v3';
 
 export default () => {
-  Vue.use(VueReCaptcha, {
-    siteKey: process.env.RECAPTCHA_KEY,
-    loaderOptions: {
-      useRecaptchaNet: true
-    }
-  });
   Vue.mixin({
     methods: {
       async getRecaptcha(name) {
+        if (!this.$recaptcha) {
+          await this.loadReCaptcha();
+        }
         return process.env.IS_LOCAL === 'true' || await this.$recaptcha(name);
+      },
+      async loadReCaptcha() {
+        const { VueReCaptcha } = await import('vue-recaptcha-v3');
+        Vue.use(VueReCaptcha, {
+          siteKey: process.env.RECAPTCHA_KEY,
+          loaderOptions: {
+            useRecaptchaNet: true
+          }
+        });
       }
     }
   });