@lancom/shared 0.0.102 → 0.0.106

package/components/product/product.vue

@@ -3,7 +3,9 @@
     <div class="row Product__section-row">
       <div class="col-sm-6 col-12 Product__col">
         <section class="Product__section">
-          <product-gallery v-if="editableColor" :product="product" :color="editableColor" />
+          <client-only>
+            <gallery v-if="hasImages" />
+          </client-only>
         </section>
         <section class="Product__section">
           <product-model-measurements />
@@ -30,12 +32,15 @@
         </section>
       </div>
     </div>
+    <related-products
+      class="EditorPage__related"
+      :product="product"
+      :to-editor="false" />
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
-import ProductGallery from './layouts/product_gallery/product-gallery';
 import ProductMainInfo from './layouts/product_main_info/product-main-info';
 import ProductColorsSelector from './layouts/product_colors_selector/product-colors-selector';
 import ProductTierPrices from './layouts/product_tier_prices/product-tier-prices';
@@ -43,27 +48,33 @@ import ProductFabricAndSizeInfo from './layouts/product_fabric_and_size_info/pro
 import ProductPackaging from './layouts/product_packaging/product-packaging';
 import ProductModelMeasurements from './layouts/product_model_measurements/product-model-measurements';
 import ProductSizeTable from './layouts/product_size_table/product-size-table';
+
 // import ProductLabelsCustomization from './layouts/product_labels_customization/product-labels-customization';
 
 export default {
   name: 'Product',
   components: {
-    ProductGallery,
     ProductMainInfo,
     ProductColorsSelector,
     ProductTierPrices,
     ProductFabricAndSizeInfo,
     ProductPackaging,
     ProductModelMeasurements,
-    ProductSizeTable
+    ProductSizeTable,
+    RelatedProducts: () => import('@lancom/shared/components/product/related_products/related-products'),
+    Gallery: () => import('@lancom/shared/components/product/gallery/gallery'),
     // ProductLabelsCustomization
   },
   computed: {
     ...mapGetters('product', [
       'product',
+      'images',
       'productDetails',
       'editableColor'
-    ])
+    ]),
+    hasImages() {
+      return this.images.length > 0;
+    }
   }
 };
 </script>

package/components/product/product_price_range/product-price-range.vue

@@ -8,9 +8,13 @@
         v-if="withGst"
         class="lc_h4">
         {{ product[minPriceAttr] | tax(gstTax) | price }}
-        <span class="lc_regular11 lc_bold">inc. GST</span>
+        <span
+          v-if="visiblePriceInfo"
+          class="lc_regular11 lc_bold">inc. GST</span>
       </div>
-      <div :class="withGst ? 'lc_regular11' : 'lc_h4'">
+      <div
+        v-if="withoutGst"
+        :class="withGst ? 'lc_regular11' : 'lc_h4'">
         {{ prePriceText }} {{ product[minPriceAttr] | price }} + GST
       </div>
     </div>
@@ -21,9 +25,13 @@
         v-if="withGst"
         class="lc_h4">
         {{ product[minPriceAttr] | tax(gstTax) | price }} {{ rangeDivider }} {{ product[maxPriceAttr] | tax(gstTax) | price }}
-        <span class="lc_regular11 lc_bold"> inc. GST</span>
+        <span
+          v-if="visiblePriceInfo"
+          class="lc_regular11 lc_bold"> inc. GST</span>
       </div>
-      <div :class="withGst ? 'lc_regular11' : 'lc_h4'">
+      <div
+        v-if="withoutGst"
+        :class="withGst ? 'lc_regular11' : 'lc_h4'">
         {{ prePriceText }} {{ product[minPriceAttr] | price }} {{ rangeDivider }} {{ product[maxPriceAttr] | price }} + GST
       </div>
     </div>
@@ -49,6 +57,10 @@ export default {
       type: Boolean,
       required: true
     },
+    withoutGst: {
+      type: Boolean,
+      default: true
+    },
     minPriceAttr: {
       type: String,
       default: 'minPrice'
@@ -64,6 +76,10 @@ export default {
     rangeDivider: {
       type: String,
       default: '-'
+    },
+    visiblePriceInfo: {
+      type: Boolean,
+      default: true
     }
   },
   computed: {

package/components/product/product_prints_price_info/product_print_price_info/product_print_price_info_item/product-print-price-info-item.vue

@@ -1,9 +1,13 @@
 <template>
   <div class="ProductPrintPriceInfoItem__wrapper">
-    <div class="ProductPrintPriceInfoItem__table-name">
+    <div
+      v-if="visibleTableName"
+      class="ProductPrintPriceInfoItem__table-name">
       {{ print.name }}
     </div>
-    <pricing-table :items="pricing" />
+    <pricing-table
+      :items="pricing"
+      :bordered="bordered" />
     <div
       v-if="print.setupCost > 0"
       class="mt-10 lc_h4">
@@ -33,6 +37,14 @@ export default {
     print: {
       type: Object,
       required: true
+    },
+    visibleTableName: {
+      type: Boolean,
+      default: true
+    },
+    bordered: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {

package/components/product/product_prints_price_info/product_screen_print_price_info/product-screen-print-price-info.scss

@@ -7,4 +7,9 @@
     text-transform: uppercase;
     font-size: 13px;
   }
+  &__tabs {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 20px;
+  }
 }

package/components/product/product_prints_price_info/product_screen_print_price_info/product-screen-print-price-info.vue

@@ -1,21 +1,49 @@
 <template>
   <div class="ProductScreenPrintPriceInfo__wrapper">
-    <div class="ProductScreenPrintPriceInfo__table-name">
+    <div
+      v-if="tabs"
+      class="ProductScreenPrintPriceInfo__tabs">
+      <btn
+        :btn-class="activeWithUnderbase ? 'green' : 'white'"
+        btn-label="With Underbase"
+        @onclick="activeWithUnderbase = true">
+      </btn>
+      <btn
+        :btn-class="activeWithUnderbase ? 'white' : 'green'"
+        btn-label="Without Underbase"
+        @onclick="activeWithUnderbase = false">
+      </btn>
+    </div>
+    <div
+      v-if="!tabs"
+      class="ProductScreenPrintPriceInfo__table-name">
       With Underbase
     </div>
-    <pricing-table :items="withUnderbasePricing" />
-    <pricing-table
-      :items="withUnderbaseSetupPricing"
-      tr-label="Setup Cost"
-      class="mt-10" />
-    <div class="ProductScreenPrintPriceInfo__table-name">
+    <div v-if="!tabs || activeWithUnderbase">
+      <pricing-table
+        :items="withUnderbasePricing"
+        :bordered="bordered" />
+      <pricing-table
+        :items="withUnderbaseSetupPricing"
+        :bordered="bordered"
+        tr-label="Setup Cost"
+        class="mt-10" />
+    </div>
+    <div
+      v-if="!tabs"
+      class="ProductScreenPrintPriceInfo__table-name">
       Without Underbase
     </div>
-    <pricing-table :items="withoutUnderbasePricing" />
-    <pricing-table
-      :items="withoutUnderbaseSetupPricing"
-      tr-label="Setup Cost"
-      class="mt-10" />
+    <div v-if="!tabs || !activeWithUnderbase">
+      <pricing-table
+        :items="withoutUnderbasePricing"
+        :bordered="bordered" />
+      <pricing-table
+        :items="withoutUnderbaseSetupPricing"
+        :bordered="bordered"
+        tr-label="Setup Cost"
+        class="mt-10" />
+    </div>
   </div>
 </template>
 
@@ -33,8 +61,21 @@ export default {
     product: {
       type: Object,
       required: true
+    },
+    bordered: {
+      type: Boolean,
+      default: false
+    },
+    tabs: {
+      type: Boolean,
+      default: false
     }
   },
+  data() {
+    return {
+      activeWithUnderbase: true
+    };
+  },
   computed: {
     screenPrints() {
       const types = (this.product.printTypes || []).filter(({ type }) => type === PRINT_TYPES.SCREEN);

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="{

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