@lancom/shared 0.0.280 → 0.0.282

package/layouts/products.vue

@@ -0,0 +1,386 @@
+<template>
+    <div
+      class="Products"
+      :class="{
+        'has-notification': notificationBar.enabled
+      }">
+      <LazyHydrate when-idle>
+        <the-navbar />
+      </LazyHydrate>
+      <the-changes-saved-indicator />
+      <div class="content Products__wrapper">
+        <div v-if="loadError">
+          <error :error="loadError" />
+        </div>
+        <div
+          v-else
+          class="content-inner extra">
+          <breadcrumbs :items="breadcrumbs" />
+          <div class="Products__info">
+            <h1 class="Products__name">
+              {{ routeName }}
+            </h1>
+            <div class="Products__filters">
+              <products-filters @open="openAside" />
+            </div>
+          </div>
+          <div class="Products__content">
+            <div class="Products__aside">
+              <breakpoint
+                name="md"
+                mode="up">
+                <products-aside />
+              </breakpoint>
+            </div>
+            <div class="Products__list">
+              <products-catalog class="Products__catalog" />
+            </div>
+          </div>
+          <div
+            v-if="routeInfo && routeInfo.text"
+            class="Products__text">
+            <LazyHydrate never>
+              <static-page
+                :visible-title="false"
+                :item="routeInfo" />
+            </LazyHydrate>
+          </div>
+        </div>
+      </div>
+      <LazyHydrate on-interaction>
+        <the-footer />
+      </LazyHydrate>
+      <modals-container />
+      <the-aside />
+    </div>
+  </template>
+  
+  <script>
+  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 } from '@lancom/shared/assets/js/utils/colors';
+  import LazyHydrate from 'vue-lazy-hydration';
+  import TheNavbar from '@/components/the_navbar/the-navbar';
+  import TheChangesSavedIndicator from '@lancom/shared/components/the_changes_saved_indicator/the-changes-saved-indicator';
+  import Breadcrumbs from '@lancom/shared/components/common/breadcrumbs/breadcrumbs';
+  import TheFooter from '@/components/the_footer/the-footer';
+  import TheAside from '@lancom/shared/components/the_aside/the-aside';
+  import ProductsAside from '@/components/products/products_aside/products-aside';
+  import ProductsFilters from '@lancom/shared/components/products/products_filters/products-filters';
+  import ProductsCatalog from '@/components/products/products_catalog/products-catalog';
+  import StaticPage from '@lancom/shared/components/static_page/static-page';
+  import Error from './error';
+  
+  export default {
+    name: 'ProductsLayout',
+    components: {
+      LazyHydrate,
+      TheNavbar,
+      Breadcrumbs,
+      TheFooter,
+      TheAside,
+      ProductsAside,
+      ProductsFilters,
+      ProductsCatalog,
+      Error,
+      StaticPage,
+      TheChangesSavedIndicator
+    },
+    mixins: [metaInfo],
+    middleware: ['page-info'],
+    async fetch() {
+      // this.setPlaceholder(true);
+      await this.loadProducts();
+    },
+    computed: {
+      ...mapGetters('page', ['routeInfo']),
+      ...mapGetters(['notificationBar', 'shop', 'country', 'currency']),
+      ...mapGetters('products', ['brands', 'types', 'tags', 'loadError', 'count', 'products', 'minPrice', 'maxPrice']),
+      currentBrand() {
+        return this.findByRouteParam(this.brands, 'brand');
+      },
+      currentTag() {
+        return this.findByRouteParam(this.tags, 'category');
+      },
+      currentProductType() {
+        return this.findByRouteParam(this.types, 'type');
+      },
+      breadcrumbs() {
+        const breadcrumbs = [{
+          to: '/products',
+          text: 'Products'
+        }];
+  
+        if (this.currentProductType) {
+          breadcrumbs.push({
+            to: generateProductsLink(this.$route, {
+              type: this.currentProductType.alias,
+              brand: null,
+              category: null
+            }),
+            text: this.currentProductType.name
+          });
+        }
+  
+        if (this.currentTag) {
+          breadcrumbs.push({
+            to: generateProductsLink(this.$route, {
+              type: this.currentProductType?.alias,
+              category: this.currentTag?.alias,
+              brand: null
+            }),
+            text: this.currentTag.name
+          });
+        }
+  
+        if (this.currentBrand) {
+          breadcrumbs.push({
+            to: generateProductsLink(this.$route, {
+              type: this.currentProductType?.alias,
+              category: this.currentTag?.alias,
+              brand: this.currentBrand?.alias
+            }),
+            text: this.currentBrand.name
+          });
+        }
+  
+        return breadcrumbs;
+      },
+      routeName() {
+        if (this.routeInfo && this.routeInfo.textTitle) {
+          return this.routeInfo.textTitle;
+        }
+  
+        const items = ['Products'];
+        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.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 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: product.minPrice,
+              lowPrice: product.maxPrice,
+              priceCurrency: 'AUD',
+              availability: 'InStock'
+            }
+          };
+          if (product.brand) {
+            schema.brand = {
+              '@type': 'Organization',
+              name: product.brand.name
+            };
+          }
+  
+          const image = getProductLargeCover(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];
+    },
+    methods: {
+      ...mapActions([
+        'loadState'
+      ]),
+      ...mapActions('products', [
+        'fetchProducts'
+      ]),
+      ...mapMutations('products', [
+        'setPlaceholder'
+      ]),
+      logGtm() {
+        if (process.client) {
+          if (this.$route.query.text) {
+            gtm.viewSearchResult(this.$route.query.text);
+          }
+          gtm.viewItemList(this.products);
+        }
+      },
+      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
+        };
+        try {
+          await this.fetchProducts({ params, shop: this.shop._id });
+          this.setPlaceholder(placeholder);
+          setTimeout(() => this.logGtm());
+        } catch ({ response }) {
+          if (process.server) {
+            this.$nuxt.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(/{{categoryName}}/g, this.currentTag.name) : text;
+        return text;
+      },
+      async openAside() {
+        const ProductsAside = await import('@/components/products/products_aside/products-aside');
+        this.$aside.show(ProductsAside.default);
+      }
+    }
+  };
+  </script>
+  <style lang="scss" scoped>
+  @import "@/assets/scss/variables";
+  
+  .Products {
+    margin-top: 40px;
+    &__text {
+      margin-top: 30px;
+    }
+    &__content {
+      background: $white;
+      padding-left: 24px;
+      display: flex;
+      justify-content: space-between;
+      @media (max-width: $bp-small-max) {
+        padding-left: 0px;
+      }
+    }
+    &__filters {
+      position: relative;
+      z-index: 2;
+      @media (max-width: $bp-medium-max) {
+        display: flex;
+        width: 100%;
+        justify-content: flex-end;
+        margin-top: 20px;
+      }
+    }
+    &__aside {
+      width: 230px;
+      flex-grow: 1;
+      flex-shrink: 0;
+      @media (max-width: $bp-small-max) {
+        display: none;
+      }
+    }
+    &__list {
+      width: 100%;
+    }
+    &__info {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin: 25px 0;
+      @media (max-width: $bp-medium-max) {
+        flex-direction: column;
+        justify-content: start;
+        align-items: flex-start;
+        margin: 5px 0;
+      }
+    }
+    &__name {
+      font-weight: 800;
+      font-size: 36px;
+      line-height: 49px;
+      color: $black;
+      text-transform: uppercase;
+      @media (max-width: $bp-medium-max) {
+        font-size: 20px;
+        line-height: 29px;
+      }
+    }
+  }
+  ::v-deep .ProductsFilters {
+    &__wrapper {
+      margin-bottom: 20px;
+  
+      input,
+      .multiselect__tags {
+        border-radius: 0px !important;
+      }
+    }
+    &__search {
+      margin-left: 16px;
+      width: 500px;
+    }
+  }
+  </style>
+  

package/mixins/add-to-cart.js

@@ -0,0 +1,64 @@
+import { mapGetters, mapActions, mapMutations } from 'vuex';
+import { generateCartProducts } from '@lancom/shared/assets/js/utils/product';
+
+export default {
+  data() {
+    return {
+      addedToCart: false
+    };
+  },
+  computed: {
+    ...mapGetters(['shop', 'country', 'currency']),
+    ...mapGetters('product', [
+      'product',
+      'usedSimpleProducts',
+      'usedSimpleProductsQuantity',
+      'usedBigSizeSimpleProductsQuantity',
+      'productPricing',
+      'layers',
+      'template',
+      'isPrintPricing',
+      'minimumOrderQuantity',
+      'calculatingPrice',
+      'multipack'
+    ]),
+    isValidOrderQuantity() {
+      return this.isValidBigSizeOrderQuantity && this.isValidMiltipackOrderQuantity && (!this.minimumOrderQuantity || this.usedSimpleProductsQuantity >= this.minimumOrderQuantity);
+    },
+    isValidBigSizeOrderQuantity() {
+      return this.usedSimpleProductsQuantity ? ((this.usedBigSizeSimpleProductsQuantity / this.usedSimpleProductsQuantity * 100) <= 50) : true;
+    },
+    isValidMiltipackOrderQuantity() {
+      return !this.multipack || this.multipack.qty <= this.usedSimpleProductsQuantity;
+    },
+    addToCartDisabled() {
+      return !((this.template.layers.length || !this.isPrintPricing) && this.usedSimpleProducts.length) || this.calculatingPrice || !this.isValidOrderQuantity;
+    }
+  },
+  methods: {
+    ...mapActions('cart', ['addToCart', 'calculateCartPrice']),
+    ...mapMutations('product', ['clearTemplate', 'setIsPrintPricing']),
+    ...mapMutations('layers', ['resetLayers']),
+    async proceedToCard() {
+      const entities = generateCartProducts(this.product, this.template.simpleProducts, this.template.layers, this.isPrintPricing);
+      await this.addToCart({
+        entities,
+        shop: this.shop,
+        pricing: this.productPricing,
+        country: this.country,
+        currency: this.currency
+      });
+      this.$toastr.s('Products successfully added to cart');
+
+      this.clearTemplate(true);
+
+      this.calculateCartPrice({ shop: this.shop, country: this.country });
+
+      // this.resetLayers();
+      // this.setIsPrintPricing(false);
+      setTimeout(() => {
+        this.addedToCart = true;
+      });
+    }
+  }
+};

package/mixins/payment.js

@@ -16,7 +16,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['shop', 'country', 'payment']),
+    ...mapGetters(['shop', 'country', 'payment', 'currency']),
     ...mapGetters('order', ['orderData', 'card']),
     isVisibleChargeMessage() {
       return this.isSuccessOrderCharge || this.isFailedOrderCharge;
@@ -49,6 +49,7 @@ export default {
           shop: this.shop._id,
           country: this.country,
           payment: this.payment,
+          currency: this.currency?.isoCode,
           recaptchaToken: await this.getRecaptcha('order_payment')
         };
         await this.submitPayment(data);

package/mixins/print-layer.js

@@ -0,0 +1,45 @@
+import { mapGetters } from 'vuex';
+import { getAllPrintAreas } from '@lancom/shared/assets/js/utils/product';
+
+export default {
+  props: {
+    layer: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    ...mapGetters('product', ['product']),
+    side() {
+      return this.layer.sideId;
+    },
+    type() {
+      return this.layer.type;
+    },
+    productPrintAreas() {
+      return getAllPrintAreas(this.product);
+    },
+    layerPrintArea() {
+      return this.productPrintAreas.find(({ _id }) => _id === this.layer.printArea);
+    },
+    layerPrintSizes() {
+      const { printSize, sizes = [] } = this.layerPrintArea;
+      return [
+        printSize,
+        ...sizes
+          .map(({ printSize }) => printSize)
+          .filter(({ _id }) => _id !== printSize._id)
+      ];
+    },
+    layerPrintType() {
+      return this.product.printTypes.find(({ _id }) => _id === this.layer.printType);
+    },
+    layerPrintSize() {
+      return this.layerPrintSizes.find(({ _id }) => _id === this.layer.printSize);
+    },
+    layerPrintPricing() {
+      const printArea = this.layerPrintType.printAreas.find(({ printSizes }) => printSizes.map(({ _id }) => _id).includes(this.layer.printSize)) || this.layerPrintType.printAreas[0];
+      return printArea.printCost;
+    }
+  }
+};

package/mixins/product-preview.js

@@ -73,7 +73,7 @@ const productPreview = {
     },
     productBrand() {
       const { brand } = this.product;
-      return brand && staticLink(brand.logo);
+      return brand?.logo && staticLink(brand.logo);
     },
     hasTags() {
       return this.product?.tags.length > 0;