@lancom/shared 0.0.104 → 0.0.107

package/components/product/product_sizes_info/product-sizes-info.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="ProductSizesInfo__wrapper">
-    <table class="ProductSizeInfo__table lc_table striped">
+    <table
+      v-if="sizesTable.length > 0"
+      class="ProductSizeInfo__table lc_table"
+      :class="{ striped }">
       <thead class="centered">
         <tr class="ProductSizeInfo__main-info">
           <th>
@@ -34,7 +37,7 @@
         </tr>
         <tr>
           <td
-            :colspan="product.sizes.length + 1"
+            :colspan="colspan"
             class="ProductSizeInfo__sub-info-wrapper">
             <div class="ProductSizeInfo__sub-info">
               <div class="ProductSizeInfo__sub-info-item">
@@ -46,6 +49,7 @@
             </div>
           </td>
         </tr>
+        <slot name="footer" v-bind="{ colspan }"></slot>
       </tbody>
     </table>
   </div>
@@ -60,9 +64,16 @@ export default {
     product: {
       type: Object,
       required: true
+    },
+    striped: {
+      type: Boolean,
+      default: true
     }
   },
   computed: {
+    colspan() {
+      return this.product.sizes.length + 1;
+    },
     sizesFields() {
       return getSizesFields(this.product.sizes);
     },

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

@@ -0,0 +1,34 @@
+@import "@/assets/scss/variables";
+
+.RelatedProducts {
+  &__products {
+    display: flex;
+    margin: -32px 0 0 -32px;
+    width: calc(100% + 32px);
+  }
+  &__product {
+    margin: 32px 0 0 32px;
+  }
+}
+::v-deep {
+  @media (max-width: $bp-large-max) {
+    .ProductList__item-wrapper:nth-child(6) {
+      display: none;
+    }
+  }
+  @media (max-width: $bp-medium-max) {
+    .ProductList__item-wrapper:nth-child(5) {
+      display: none;
+    }
+  }
+  @media (max-width: $bp-small-max) {
+    .ProductList__item-wrapper:nth-child(4) {
+      display: none;
+    }
+  }
+  @media (max-width: $bp-extra-small-max) {
+    .ProductList__item-wrapper:nth-child(3) {
+      display: none;
+    }
+  }
+}

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

@@ -0,0 +1,52 @@
+<template>
+  <div
+    v-if="hasProducts"
+    class="RelatedProducts__wrapper">
+    <div class="RelatedProducts__title lc_h2">
+      Related Products
+    </div>
+    <product-list :products="products" />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import api from '@lancom/shared/assets/js/api';
+import ProductList from '@/components/products/product_list/product-list';
+
+export default {
+  name: 'RelatedProducts',
+  components: {
+    ProductList
+  },
+  props: {
+    product: {
+      type: Object,
+      required: true
+    },
+    toEditor: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      products: []
+    };
+  },
+  computed: {
+    ...mapGetters(['shop']),
+    hasProducts() {
+      return this.products.length > 0;
+    }
+  },
+  async mounted() {
+    const { products } = await api.fetchRelatedProducts(this.shop._id, this.product.alias);
+    this.products = products;
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'related-products';
+</style>

package/components/products/product_list/product-list.scss

@@ -4,12 +4,13 @@
   &__wrapper {
     display: flex;
     flex-wrap: wrap;
+    margin-top: 20px;
     @media (max-width: $bp-small-max) {
       justify-content: center;
     }
   }
   &__item-wrapper {
-    width: 340px;
+    width: 330px;
     height: 450px;
     margin: 0 0 25px 25px;
     position: relative;

package/components/products/product_list_product/product-list-product.scss

@@ -36,39 +36,63 @@
       border: 2px solid $grey_1;
     }
   }
+  &__cover {
+    transition: opacity 0.35s ease-in-out;
+    opacity: 1;
+    position: absolute;
+    top: 30px;
+  }
+  &__cover-hover {
+    transition: opacity 0.45s ease-in-out;
+    z-index: 2;
+    opacity: 0;
+    position: absolute;
+    top: 30px;
+  }
   &__link {
     position: relative;
-    display: block;
     transition: background-color 0.5s ease;
     background-color: white;
-    height: 340px;
+    height: 330px;
     width: 340px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    &:hover {
+      .ProductListProduct {
+        &__cover {
+          opacity: 0;
+        }
+        &__cover-hover {
+          opacity: 1;
+        }
+      }
+    }
   }
   &__brand {
     width: 54px;
     top: 10px;
     left: 5px;
     position: absolute;
-    z-index: 2;
+    z-index: 10;
     opacity: 0.7;
   }
-  &__cover {
-    width: 100%;
-    object-fit: contain;
-    position: relative;
-    z-index: 1;
-  }
-  &__cover-hover {
-    top: 0;
-    left: 0;
-    position: absolute;
-    z-index: 1;
-    display: none;
-    width: 100%;
-    &--visible {
-      display: block;
-    }
-  }
+  // &__cover {
+  //   object-fit: contain;
+  //   position: relative;
+  //   z-index: 1;
+  // }
+  // &__cover-hover {
+  //   top: 0;
+  //   left: 0;
+  //   position: absolute;
+  //   z-index: 1;
+  //   display: none;
+  //   &--visible {
+  //     display: block;
+  //   }
+  // }
   &__cover-color {
     top: 5px;
     left: 5px;

package/components/products/product_list_product/product-list-product.vue

@@ -15,6 +15,7 @@
         v-if="productСover"
         class="ProductListProduct__cover"
         :src="productСover"
+        :style="productBackgroundСover"
         @load="productСoverLoaded = true" />
       <img
         v-if="productСoverLoaded && productСoverHover"
@@ -22,13 +23,14 @@
         :class="{
           'ProductListProduct__cover-hover--visible': full
         }"
+        :style="productBackgroundСover"
         :src="productСoverHover" />
-      <div
+      <!-- <div
         class="ProductListProduct__cover-color"
         :class="{
           'ProductListProduct__cover-color--visible': productСoverLoaded
         }"
-        :style="productBackgroundСover"></div>
+        :style="productBackgroundСover"></div> -->
       <img
         v-if="product.isTearAwayTag"
         class="ProductListProduct__tear-away-tag"
@@ -71,7 +73,7 @@
       <div
         v-if="full"
         class="ProductListProduct__info-item mt-9 lc_caption visible-full">
-        {{ product.material }} | {{ product.weight }} gsm
+        {{ product.fabricInfoShort }} | {{ product.materialWeight }} gsm
       </div>
       <div
         v-if="full"
@@ -81,7 +83,7 @@
           :key="color._id"
           class="ProductListProduct__color"
           :class="{
-            'ProductListProduct__color--selected': color._id === currentColor._id
+            'ProductListProduct__color--selected': currentColor && color._id === currentColor._id
           }"
           @click="currentColor = color">
           <product-color-image

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

@@ -11,9 +11,17 @@
       <span class="ProductsAside__info ProductsAside__info--small2"></span>
     </div>
     <div v-else>
+      <div
+        v-if="hasProductTypes"
+        class="ProductsAside__item">
+        <products-types
+          :has-selected-icon="hasSelectedIcon"
+          :selected-icon-circle="selectedIconCircle" />
+      </div>
       <div class="ProductsAside__item">
         <products-brands
-          :has-selected-icon="hasSelectedIcon" />
+          :has-selected-icon="hasSelectedIcon"
+          :selected-icon-circle="selectedIconCircle" />
       </div>
       <div class="ProductsAside__item">
         <products-colors />
@@ -22,14 +30,15 @@
         <products-attributes
           :has-selected-icon="hasSelectedIcon" />
         <products-tags
-          :has-selected-icon="hasSelectedIcon" />
+          :has-selected-icon="haAttributesSelectedIcon"
+          :has-remove-icon="hasRemoveIcon" />
       </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';
@@ -40,7 +49,7 @@ import { generateProductsLink } from '@lancom/shared/assets/js/utils/product';
 export default {
   name: 'ProductsAside',
   components: {
-    // ProductsTypes,
+    ProductsTypes,
     ProductsBrands,
     ProductsTags,
     ProductsAttributes,
@@ -51,9 +60,25 @@ export default {
       type: Boolean,
       default: false
     },
+    hasRemoveIcon: {
+      type: Boolean,
+      default: false
+    },
+    selectedIconCircle: {
+      type: Boolean,
+      default: true
+    },
+    haAttributesSelectedIcon: {
+      type: Boolean,
+      default: false
+    },
     hasThumbs: {
       type: Boolean,
       default: true
+    },
+    hasProductTypes: {
+      type: Boolean,
+      default: false
     }
   },
   data() {

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

@@ -10,10 +10,13 @@
         :class="{
           'ProductsBrands__item--active': brand.alias === currentBrand
         }">
-        <products-link :brand="brand.alias === currentBrand ? null : brand.alias">
+        <products-link
+          class="ProductsBrands__more"
+          :brand="brand.alias === currentBrand ? null : brand.alias">
           <checked-icon
             v-if="hasSelectedIcon"
-            :checked="brand.alias === currentBrand" />
+            :checked="brand.alias === currentBrand"
+            :circle="selectedIconCircle" />
           {{ brand.name }}
         </products-link>
       </div>
@@ -38,6 +41,10 @@ export default {
     hasSelectedIcon: {
       type: Boolean,
       default: false
+    },
+    selectedIconCircle: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {

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

@@ -11,6 +11,16 @@
         class="labelless">
       </multiselect>
     </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>
     <div
       class="ProductsFilters__filter hidden-md-and-up"
       :class="{
@@ -30,14 +40,11 @@ export default {
   name: 'ProductsFilters',
   data() {
     const sortByOptions = [{
-      value: '',
-      label: 'Without Sort'
+      value: 'price-low-high',
+      label: 'low to high'
     }, {
       value: 'price-high-low',
       label: ' high to low'
-    }, {
-      value: 'price-low-high',
-      label: 'low to high'
     }];
     return {
       sortBy: sortByOptions.find(({ value }) => value === this.$route.query.sort),

package/components/products/products_tags/products-tags.vue

@@ -15,6 +15,9 @@
         }">
         <products-link :tags="tag.alias">
           {{ tag.name }}
+          <i
+            v-if="hasRemoveIcon && selectedTags.includes(tag.alias)"
+            class="icon-cancel"></i>
         </products-link>
       </div>
     </div>
@@ -34,6 +37,10 @@ export default {
     hasSelectedIcon: {
       type: Boolean,
       default: false
+    },
+    hasRemoveIcon: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {

package/components/products/products_types/products-types.vue

@@ -13,7 +13,8 @@
           class="ProductsTypes__more">
           <checked-icon
             v-if="hasSelectedIcon"
-            :checked="type.alias === currentType" />
+            :checked="type.alias === currentType"
+            :circle="selectedIconCircle" />
           <div
             v-if="hasThumbs && type.icon"
             class="ProductsTypes__item-icon"
@@ -46,6 +47,10 @@ export default {
       type: Boolean,
       default: false
     },
+    selectedIconCircle: {
+      type: Boolean,
+      default: false
+    },
     hasThumbs: {
       type: Boolean,
       default: true

package/components/subscribe/subscribe.vue

@@ -100,6 +100,9 @@ export default {
   computed: {
     ...mapGetters(['shop'])
   },
+  mounted() {
+    this.preloadReCaptcha();
+  },
   methods: {
     async submit() {
       const isValid = await this.$refs.form.validate();

package/mixins/product-preview.js

@@ -67,7 +67,7 @@ const productPreview = {
       return getBgStyle(this.productСoverHover);
     },
     productBackgroundСover() {
-      return getColorBackgroundStyle(this.currentColor);
+      return this.productСoverLoaded ? getColorBackgroundStyle(this.currentColor) : null;
     },
     productBrand() {
       const { brand } = this.product;
@@ -75,6 +75,12 @@ const productPreview = {
     },
     hasTags() {
       return this.product?.tags.length > 0;
+    },
+    minPrice() {
+      return this.product.isClearance ? this.product.minPriceWithoutClearance : this.product.minPrice;
+    },
+    maxPrice() {
+      return this.product.isClearance ? this.product.maxPriceWithoutClearance : this.product.maxPrice;
     }
   },
   mounted() {

package/package.json

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

package/plugins/vee-validate.js

@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import { ValidationProvider, ValidationObserver, extend } from 'vee-validate';
-import { required, email, max, min_value as minValue, integer } from 'vee-validate/dist/rules';
+import { required, email, max, min_value as minValue, max_value as maxValue, integer } from 'vee-validate/dist/rules';
 import { phone, float } from '@lancom/shared/assets/js/utils/custom-validation-rules';
 
 Vue.component('ValidationProvider', ValidationProvider);
@@ -16,5 +16,6 @@ extend('email', email);
 extend('max', max);
 extend('float', float);
 extend('min_value', minValue);
+extend('max_value', maxValue);
 extend('phone', phone);
 extend('integer', integer);

package/plugins/vue-recaptcha.js

@@ -4,10 +4,13 @@ export default () => {
   Vue.mixin({
     methods: {
       async getRecaptcha(name) {
+        await this.preloadReCaptcha();
+        return process.env.IS_LOCAL === 'true' || await this.$recaptcha(name);
+      },
+      async preloadReCaptcha() {
         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');

package/store/index.js

@@ -25,6 +25,7 @@ export const getters = {
   pricingSettings: ({ pricing }) => pricing || {},
   orderSettings: ({ orderInfo }) => orderInfo || {},
   gstTax: ({ pricing }) => pricing?.gstTax || 0,
+  displayPricingWithTax: ({ pricing }) => !!pricing?.displayPricingWithTax,
   screenPrintsPrices: ({ pricing }) => pricing?.screenPrintsPrices || {},
   depositInfo: ({ depositInfo }) => depositInfo || {}
 };
@@ -46,13 +47,14 @@ export const actions = {
       }
     } catch (e) {}
   },
-  async loadState({ commit, state: { shop, notificationBar } }) {
+  async loadState({ dispatch, commit, state: { shop, notificationBar } }) {
     const state = await loadState();
     if (state) {
       commit('setState', state);
       if (state.cart?.id) {
         const cart = await api.fetchCartById(shop._id, state.cart?.id);
         commit('cart/setCart', cart);
+        dispatch('cart/calculateCartPrice', { shop });
       }
     }
     const closedNotification = localStorage.getItem(CLOSED_NOTIFICATION);