@lancom/shared 0.0.430 → 0.0.431

package/mixins/layouts/products.js

@@ -0,0 +1,285 @@
+import debounce from 'lodash.debounce';
+import { mapActions, mapGetters, mapMutations } from 'vuex';
+import gtm from '@lancom/shared/assets/js/utils/gtm';
+import metaInfo from '@lancom/shared/mixins/meta-info';
+import { generateProductsLink, generateProductLink } from '@lancom/shared/assets/js/utils/product';
+import { getProductLargeCover, getProductMediumCover } from '@lancom/shared/assets/js/utils/colors';
+
+export default {
+  mixins: [metaInfo],
+  middleware: ['page-info'],
+  async fetch() {
+    await this.loadProducts();
+
+    if (this.page === 1) {
+      await this.fetchChildrenCategories(this.currentCategory);
+    }
+
+    if (process.server) {
+      this.$root.context?.res?.setHeader('Cache-Control', `max-age=${86400}`);;
+    }
+  },
+  computed: {
+    ...mapGetters('page', ['routeInfo']),
+    ...mapGetters(['notificationBar', 'shop', 'country', 'currency']),
+    ...mapGetters('products', ['category', 'childrenCategories', 'categories', 'brands', 'types', 'tags', 'loadError', 'count', 'products', 'minPrice', 'maxPrice', 'page']),
+    hasChildrenCategories() {
+      return this.childrenCategories.length > 0;
+    },
+    pageItemCanonical() {
+      const page = +this.$route.query.page;
+      return `${this.breadcrumbs[this.breadcrumbs.length - 1]?.to}${page > 1 ? `?page=${page}` : ''}`;
+    },
+    pageItemType() {
+      return 'product';
+    },
+    pageItemImage() {
+      const images = this.products?.reduce((images, product) => {
+        const image = getProductLargeCover(product, 'front') || getProductMediumCover(product, 'front');
+        return image ? [...images, image] : images;
+      }, []) || [];
+      return images.slice(0, 1);
+    },
+    currentBrand() {
+      return this.findByRouteParam(this.brands, 'brand');
+    },
+    currentTag() {
+      return this.findByRouteParam(this.tags, 'tag');
+    },
+    currentProductType() {
+      return this.findByRouteParam(this.types, 'type');
+    },
+    currentCategory() {
+      return this.category;
+    },
+    breadcrumbs() {
+      const breadcrumbs = [{
+        to: '/products',
+        text: 'Products'
+      }];
+      if (this.currentCategory) {
+        const categoriesBreadcrumbs = [];
+        let category = this.currentCategory;
+        console.log('category: ', category);
+        while (category) {
+          categoriesBreadcrumbs.unshift({
+            to: generateProductsLink(this.$route, {
+              type: null,
+              brand: null,
+              tag: null,
+              category
+            }, true),
+            text: category.name
+          });
+          category = category.parent;
+        }
+        breadcrumbs.push(...categoriesBreadcrumbs);
+      }
+      if (this.currentProductType) {
+        breadcrumbs.push({
+          to: generateProductsLink(this.$route, {
+            type: this.currentProductType.alias,
+            brand: null,
+            tag: null,
+            category: null
+          }),
+          text: this.currentProductType.name
+        });
+      }
+
+      if (this.currentTag) {
+        breadcrumbs.push({
+          to: generateProductsLink(this.$route, {
+            type: this.currentProductType?.alias,
+            tag: this.currentTag?.alias,
+            brand: null,
+            category: null
+          }),
+          text: this.currentTag.name
+        });
+      }
+
+      if (this.currentBrand) {
+        breadcrumbs.push({
+          to: generateProductsLink(this.$route, {
+            type: this.currentProductType?.alias,
+            tag: this.currentTag?.alias,
+            brand: this.currentBrand?.alias,
+            category: this.currentCategory?.alias
+          }),
+          text: this.currentBrand.name
+        });
+      }
+
+      return breadcrumbs;
+    },
+    routeName() {
+      if (this.routeInfo && this.routeInfo.textTitle) {
+        return this.routeInfo.textTitle;
+      }
+
+      const items = ['Products'];
+      if (this.currentCategory) {
+        items.push(this.currentCategory.name);
+      }
+      if (this.currentProductType) {
+        items.push(this.currentProductType.name);
+      }
+      if (this.currentTag) {
+        items.push(this.currentTag.name);
+      }
+      if (this.currentBrand) {
+        items.push(this.currentBrand.name);
+      }
+      return items.join(' / ');
+    }
+  },
+  watch: {
+    '$route.params': {
+      handler() {
+        this.loadProductsWithDebounce();
+      },
+      deep: true
+    },
+    '$route.query': {
+      handler() {
+        this.loadProductsWithDebounce();
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.loadState(this.$route.query);
+    this.logGtm();
+    // setTimeout(() => this.loadProducts(), 3000);
+  },
+  jsonld() {
+    const productsSchema = {
+      '@context': 'http://schema.org',
+      '@type': 'OfferCatalog',
+      name: this.pageTitle,
+      numberOfItems: this.count,
+      itemListOrder: 'ItemListUnordered',
+      itemListElement: this.products?.map(product => {
+        const minPrintsPrice = product.minPrintsPrice || 0;
+        const minProductPrice = product.isClearance ? product.minPriceWithoutClearance : product.minPrice;
+        const minPrice = minProductPrice + minPrintsPrice;
+
+        const maxPrintsPrice = product.maxPrintsPrice || 0;
+        const maxProductPrice = product.isClearance ? product.maxPriceWithoutClearance : product.maxPrice;
+        const maxPrice = maxProductPrice + maxPrintsPrice;
+
+        const schema = {
+          '@type': 'Product',
+          name: product.name,
+          url: `https://${process.env.HOST_NAME}${generateProductLink(product)}`,
+          sku: product.SKU,
+          offers: {
+            '@type': 'AggregateOffer',
+            offerCount: 1,
+            name: product.name,
+            highPrice: maxPrice,
+            lowPrice: minPrice,
+            priceCurrency: this.currency?.isoCode || 'AUD',
+            availability: 'InStock'
+          }
+        };
+        if (product.brand) {
+          schema.brand = {
+            '@type': 'Organization',
+            name: product.brand.name
+          };
+        }
+
+        const image = getProductLargeCover(product, 'front') || getProductMediumCover(product, 'front');
+        if (image) {
+          schema.image = image;
+        }
+
+        return schema;
+      }) || []
+    };
+
+    const breadcrumbSchema = {
+      '@context': 'https://schema.org',
+      '@type': 'BreadcrumbList',
+      itemListElement: [
+        {
+          '@type': 'ListItem',
+          position: 1,
+          name: 'Home',
+          item: `https://${process.env.HOST_NAME}/`
+        },
+        ...this.breadcrumbs
+          .map((b, index) => ({
+            '@type': 'ListItem',
+            position: index + 2,
+            name: b.text,
+            item: b.to ? `https://${process.env.HOST_NAME}${b.to}` : undefined
+          }))
+      ]
+    };
+
+    return [productsSchema, breadcrumbSchema, this.$store.state.shop?.shopSchema].filter(s => !!s);
+  },
+  methods: {
+    ...mapActions([
+      'loadState'
+    ]),
+    ...mapActions('products', [
+      'fetchProducts',
+      'fetchChildrenCategories'
+    ]),
+    ...mapMutations('products', [
+      'setPlaceholder'
+    ]),
+    logGtm() {
+      if (process.client) {
+        if (this.$route.query.text) {
+          gtm.viewSearchResult(this.$route.query.text);
+        }
+        gtm.viewItemList(this.products, this.currency);
+      }
+    },
+    loadProductsWithDebounce: debounce(function () {
+      if (/^\/products/.test(this.$route.path)) {
+        this.loadProducts();
+      }
+
+      this.$aside.hide();
+    }, 100),
+    async loadProducts(placeholder) {
+      const params = {
+        ...this.$route.params,
+        ...this.$route.query,
+        country: this.country?._id,
+        currency: this.currency?._id,
+        placeholder,
+        limit: 80
+      };
+      try {
+        await this.fetchProducts({ params, shop: this.shop._id });
+        this.setPlaceholder(placeholder);
+        setTimeout(() => this.logGtm());
+      } catch ({ response }) {
+        if (process.server) {
+          this.$root.context.res.statusCode = this.loadError?.statusCode || 500;
+        }
+      }
+    },
+    findByRouteParam(list, param) {
+      return list.find(i => i.alias === this.$route.params[param]);
+    },
+    fillWithItemData(text = '') {
+      text = this.currentBrand ? text.replace(/{{brandName}}/g, this.currentBrand.name) : text;
+      text = this.currentProductType ? text.replace(/{{typeName}}/g, this.currentProductType.name) : text;
+      text = this.currentTag ? text.replace(/{{tagName}}/g, this.currentTag.name) : text;
+      text = this.currentCategory ? text.replace(/{{categoryName}}/g, this.currentCategory.name) : text;
+      return text;
+    },
+    async openAside() {
+      const ProductsAside = await import('@/components/products/products_aside/products-aside');
+      this.$aside.show(ProductsAside.default);
+    }
+  }
+};

package/mixins/product-preview.js

@@ -115,6 +115,19 @@ const productPreview = {
       const printsPrice = this.product.maxPrintsPrice || 0;
       const productPrice = this.product.isClearance ? this.product.maxPriceWithoutClearance : this.product.maxPrice;
       return productPrice + printsPrice;
+    },
+    genderIcon() {
+      switch (this.product.gender) {
+        case 'men':
+          return 'icon-men';
+        case 'women':
+          return 'icon-women';
+        case 'unisex':
+          return 'icon-unisex';
+        case 'toddler':
+        case 'child':
+          return 'icon-baby';
+      }
     }
   },
   mounted() {

package/package.json

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

package/store/index.js

@@ -36,6 +36,8 @@ export const getters = {
   googleClickId: ({ googleClickId }) => googleClickId,
   payment: ({ payment }) => payment || {},
   menus: ({ menus }) => menus || [],
+  topRightMenu: ({ menus }) => (menus || []).find(({ type }) => type === 'top-right'),
+  topLeftMenu: ({ menus }) => (menus || []).find(({ type }) => type === 'top-left'),
   topMenu: ({ menus }) => (menus || []).find(({ type }) => type === 'top'),
   footerMenus: ({ menus }) => (menus || []).filter(({ type }) => type === 'footer'),
   helpMessages: ({ helpMessages }) => helpMessages || {},

package/store/product.js

@@ -7,7 +7,8 @@ import { sortSizes } from '@lancom/shared/assets/js/utils/sizes';
 import { isValidImageTypes, getColorOfDefaultCatalogFrontImage } from '@lancom/shared/assets/js/utils/colors';
 import { getProductsForCalculatePricing } from '@lancom/shared/assets/js/utils/product';
 import { filterBigSize } from '@lancom/shared/assets/js/utils/product';
-import { sortByName } from '../assets/js/utils/filters';
+import { sortByName } from '@lancom/shared/assets/js/utils/filters';
+import { PRODUCT_STOCK_STATUS } from '@lancom/shared/assets/js/constants/product';
 
 export const state = () => ({
   multipack: null,
@@ -25,6 +26,14 @@ export const state = () => ({
     width: 500,
     height: 500
   },
+  editorSizeBreakpoints: {
+    mini: 350,
+    xs: 400,
+    sm: 580,
+    md: 430,
+    lg: 600,
+    xl: 720
+  },
   template: {
     visibleSteps: false,
     layers: [],
@@ -65,6 +74,7 @@ export const getters = {
   productDetails: ({ productDetails }) => productDetails,
   productDetailsLoaded: ({ productDetails }) => !!productDetails,
   editorSize: ({ editorSize }) => editorSize,
+  editorSizeBreakpoints: ({ editorSizeBreakpoints }) => editorSizeBreakpoints,
   template: ({ template }) => template,
   layers: ({ template }) => template.layers || [],
   banners: ({ banners }) => banners || [],
@@ -160,7 +170,7 @@ export const getters = {
   printsPrice: ({ productPricing, product }) => {
     const maxPrintsPrice = +product.maxPrintsPrice || 0;
     const pricing = (productPricing?.products || {})[product._id];
-    const price = pricing?.prints?.prints?.reduce((sum , print) => sum + (+print.priceWithoutTax || 0), 0) || maxPrintsPrice;
+    const price = pricing?.prints?.prints?.reduce((sum, print) => sum + (+print.priceWithoutTax || 0), 0) || maxPrintsPrice;
     return price;
   },
   offsetWarningVisible: ({ offsetWarningVisible }) => offsetWarningVisible,
@@ -178,6 +188,26 @@ export const getters = {
       selectedLayer.type === 'art' &&
       selectedLayer.dpi < 75
     );
+  },
+  stockStatus: ({ productDetails }) => {
+    if (!productDetails?.simpleProducts?.length) {
+      return PRODUCT_STOCK_STATUS.ALL_IN_STOCK;
+    }
+
+    const simpleProducts = productDetails.simpleProducts;
+    const totalProducts = simpleProducts.length;
+    const inStockProducts = simpleProducts.filter(sp => (sp.quantityStock || 0) > 0).length;
+    const stockPercentage = (inStockProducts / totalProducts) * 100;
+
+    if (stockPercentage === 100) {
+      return PRODUCT_STOCK_STATUS.ALL_IN_STOCK;
+    } else if (stockPercentage >= 80) {
+      return PRODUCT_STOCK_STATUS.MOSTLY_IN_STOCK;
+    } else if (stockPercentage > 0) {
+      return PRODUCT_STOCK_STATUS.PARTIALLY_IN_STOCK;
+    } else {
+      return PRODUCT_STOCK_STATUS.NOT_IN_STOCK;
+    }
   }
 };
 
@@ -227,10 +257,12 @@ export const actions = {
       state.availableColors[0];
     commit('setEditableColor', editableColor);
 
-    let images = editableColor ? [
-      ...(state.product.images || []).filter(image => image.color === editableColor._id),
-      ...(state.product.images || []).filter(image => image.color !== editableColor._id)
-    ] : state.product.images;
+    let images = editableColor
+      ? [
+          ...(state.product.images || []).filter(image => image.color === editableColor._id),
+          ...(state.product.images || []).filter(image => image.color !== editableColor._id)
+        ]
+      : state.product.images;
     const imagesGroups = new Map();
     images
       .filter(i => isValidImageTypes(i, ['front', 'back', 'model']))
@@ -251,7 +283,7 @@ export const actions = {
     const response = await api.fetchPrintTypes(shop);
     commit('setPrintTypes', response);
   },
-  async updatePriceIncludeGST({ commit }, value) {
+  updatePriceIncludeGST({ commit }, value) {
     commit('setPriceIncludeGST', value);
   },
   async calculateProductPrice({ state: { template, product, isPrintPricing }, commit, getters }, { shop, country, currency }) {
@@ -324,6 +356,12 @@ export const mutations = {
   setLoadingProductDetails(state, loadingProductDetails) {
     state.loadingProductDetails = loadingProductDetails;
   },
+  setEditorSize(state, editorSize) {
+    state.editorSize = editorSize;
+  },
+  setEditorSizeBreakpoints(state, editorSizeBreakpoints) {
+    state.editorSizeBreakpoints = editorSizeBreakpoints;
+  },
   setMultipack(state, multipack) {
     state.multipack = multipack;
   },
@@ -345,7 +383,7 @@ export const mutations = {
   setProductDetails(state, simpleProducts) {
     const { preSetPrints } = state;
     const [preSetPrint] = preSetPrints || [];
-    simpleProducts = simpleProducts.filter(sp => !preSetPrint || (preSetPrint.colors || []).includes(sp.color._id) );
+    simpleProducts = simpleProducts.filter(sp => !preSetPrint || (preSetPrint.colors || []).includes(sp.color._id));
     state.productDetails = { simpleProducts };
     const availableSizes = [];
     const sizesPerColor = simpleProducts.reduce((map, { color, size }) => {
@@ -443,9 +481,9 @@ export const mutations = {
     ];
     state.template = { ...state.template, layers };
     if (layers.length >= 1) {
-        // const printType = state.product.printTypes[0];
-        // state.selectedPrintType = printType;
-        state.isPrintPricing = true;
+      // const printType = state.product.printTypes[0];
+      // state.selectedPrintType = printType;
+      state.isPrintPricing = true;
     }
   },
   removeTemplateLayer(state, layer) {
@@ -523,7 +561,7 @@ export const mutations = {
     state.template.simpleProducts.forEach((simpleProduct, index) => {
       Vue.set(simpleProduct, 'amount', 0);
       Vue.set(state.template.simpleProducts, index, simpleProduct);
-    })
+    });
   },
   setProductPricing(state, price) {
     state.productPricing = price;

package/components/the_breadcrumbs/the-breadcrumbs.scss

@@ -1,36 +0,0 @@
-@import "@/assets/scss/variables";
-
-.TheBreadcrumbs {
-  &__wrapper {
-    position: fixed;
-    top: $navbar_height;
-    left: 0;
-    right: 0;
-    z-index: 100;
-    background-color: $grey_3;
-    color: $grey_1;
-    transition-property: transform, opacity;
-    transition-duration: .22s;
-    transition-timing-function: ease-in-out;
-    transition-delay: .22s;
-    @media (max-width: $bp-extra-small-max) {
-      top: $mobile_navbar_height;
-    }
-  }
-  &__container {
-    display: flex;
-    align-items: center;
-    padding: 20px 0;
-  }
-  &__step {
-    & > * {
-      color: inherit;
-      text-decoration: none;
-    }
-    & + & {
-      &:before {
-        content: '\00a0\002F';
-      }
-    }
-  }
-}

package/components/the_breadcrumbs/the-breadcrumbs.vue

@@ -1,78 +0,0 @@
-<template>
-  <transition
-    appear
-    name="appear-from-top">
-    <nav
-      v-if="crumbs.length"
-      class="TheBreadcrumbs__wrapper view-transition"
-      aria-label="breadcrumbs">
-      <div class="content-inner extra TheBreadcrumbs__container">
-        <div
-          v-for="(item, i) in crumbs"
-          :key="i"
-          class="TheBreadcrumbs__step lc_regular14"
-          :class="item.classes">
-          <a
-            v-if="item.path"
-            :href="item.path">
-            {{ item.name }}
-          </a>
-          <span v-else>
-            {{ item.name }}
-          </span>
-        </div>
-      </div>
-    </nav>
-  </transition>
-</template>
-
-<script>
-
-export default {
-  name: 'TheBreadcrumbs',
-  data() {
-    return {
-      schema: {
-        'brand-tees-slug': [
-          { name: 'Editor', path: '/' },
-          { name: 'Product' }
-        ]
-      }
-    };
-  },
-  computed: {
-    crumbs() {
-      return this.schema[this.$route.name] || [];
-      //   const crumbs = [];
-      //   this.$route.matched.map((item, i, { length }) => {
-      //     const crumb = {};
-      //     crumb.path = item.path;
-      //     crumb.name = 'route.' + (item.name || item.path);
-
-      //     // is last item?
-      //     if (i === length - 1) {
-      //       // is param route? .../.../:id
-      //       if (item.regex.keys.length > 0) {
-      //         crumbs.push({
-      //           path: item.path.replace(/\/:[^/:]*$/, ''),
-      //           name: 'route.' + item.name.replace(/-[^-]*$/, '')
-      //         });
-      //         crumb.path = this.$route.path;
-      //         crumb.name = this.$i18n.t('route.' + this.$route.name, [
-      //           crumb.path.match(/[^/]*$/)[0]
-      //         ]);
-      //       }
-      //       crumb.classes = 'is-active';
-      //     }
-
-      //     crumbs.push(crumb);
-      //   });
-      //   return crumbs;
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-@import 'the-breadcrumbs';
-</style>