@lancom/shared 0.0.429 → 0.0.431

package/layouts/products.vue

@@ -1,449 +1,170 @@
 <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
+    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 class="Products__content">
-            <div class="Products__aside">
-              <breakpoint
-                name="md"
-                mode="up">
-                <products-aside />
-              </breakpoint>
-            </div>
-            <div class="Products__list">
-              <children-categories v-if="hasChildrenCategories" />
-              <products-catalog class="Products__catalog" />
-            </div>
+        </div>
+        <div class="Products__content">
+          <div class="Products__aside">
+            <breakpoint
+              name="md"
+              mode="up">
+              <products-aside />
+            </breakpoint>
           </div>
-          <div
-            v-if="routeInfo && routeInfo.text"
-            class="Products__text">
-            <LazyHydrate never>
-              <static-page
-                :visible-title="false"
-                :item="routeInfo" />
-            </LazyHydrate>
+          <div class="Products__list">
+            <children-categories v-if="hasChildrenCategories" />
+            <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>
-      <LazyHydrate when-idle>
-        <the-footer />
-      </LazyHydrate>
-      <modals-container />
-      <the-aside />
     </div>
-  </template>
-
-  <script>
-  import debounce from 'lodash.debounce';
-  import LazyHydrate from 'vue-lazy-hydration';
-  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';
-  import TheChangesSavedIndicator from '@lancom/shared/components/the_changes_saved_indicator/the-changes-saved-indicator';
-  import Breadcrumbs from '@lancom/shared/components/common/breadcrumbs/breadcrumbs';
-  import StaticPage from '@lancom/shared/components/static_page/static-page';
-  import TheAside from '@lancom/shared/components/the_aside/the-aside';
-  import ProductsFilters from '@lancom/shared/components/products/products_filters/products-filters';
-  import ChildrenCategories from '@lancom/shared/components/products/children_categories/children-categories';
-  import ProductsAside from '@/components/products/products_aside/products-aside';
-  import TheNavbar from '@/components/the_navbar/the-navbar';
-  import TheFooter from '@/components/the_footer/the-footer';
-  import ProductsCatalog from '@/components/products/products_catalog/products-catalog';
-  import Error from './error';
-
-  export default {
-    name: 'ProductsLayout',
-    components: {
-      LazyHydrate,
-      TheNavbar,
-      Breadcrumbs,
-      TheFooter,
-      TheAside,
-      ProductsAside,
-      ProductsFilters,
-      ProductsCatalog,
-      ChildrenCategories,
-      Error,
-      StaticPage,
-      TheChangesSavedIndicator
-    },
-    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);
-      }
-    }
-  };
-  </script>
-  <style lang="scss" scoped>
-  @import "@/assets/scss/variables";
-
-  .Products {
-    margin-top: 40px;
-    &__text {
-      margin-top: 30px;
+    <LazyHydrate when-idle>
+      <the-footer />
+    </LazyHydrate>
+    <modals-container />
+    <the-aside />
+  </div>
+</template>
+
+<script>
+import LazyHydrate from 'vue-lazy-hydration';
+import products from '@lancom/shared/mixins/layouts/products';
+import TheChangesSavedIndicator from '@lancom/shared/components/the_changes_saved_indicator/the-changes-saved-indicator';
+import Breadcrumbs from '@lancom/shared/components/common/breadcrumbs/breadcrumbs';
+import StaticPage from '@lancom/shared/components/static_page/static-page';
+import TheAside from '@lancom/shared/components/the_aside/the-aside';
+import ProductsFilters from '@lancom/shared/components/products/products_filters/products-filters';
+import ChildrenCategories from '@lancom/shared/components/products/children_categories/children-categories';
+import Error from '@lancom/shared/layouts/error';
+import ProductsAside from '@/components/products/products_aside/products-aside';
+import TheNavbar from '@/components/the_navbar/the-navbar';
+import TheFooter from '@/components/the_footer/the-footer';
+import ProductsCatalog from '@/components/products/products_catalog/products-catalog';
+
+export default {
+  name: 'ProductsLayout',
+  components: {
+    LazyHydrate,
+    TheNavbar,
+    Breadcrumbs,
+    TheFooter,
+    TheAside,
+    ProductsAside,
+    ProductsFilters,
+    ProductsCatalog,
+    ChildrenCategories,
+    Error,
+    StaticPage,
+    TheChangesSavedIndicator
+  },
+  mixins: [products]
+};
+</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;
     }
-    &__content {
-      background: $white;
-      padding-left: 24px;
+  }
+  &__filters {
+    position: relative;
+    z-index: 2;
+    @media (max-width: $bp-medium-max) {
       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: 215px;
-      flex-grow: 1;
-      flex-shrink: 0;
-      @media (max-width: $bp-small-max) {
-        display: none;
-      }
-    }
-    &__list {
       width: 100%;
+      justify-content: flex-end;
+      margin-top: 20px;
     }
-    &__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;
-      }
+  }
+  &__aside {
+    width: 215px;
+    flex-grow: 1;
+    flex-shrink: 0;
+    @media (max-width: $bp-small-max) {
+      display: none;
     }
-    &__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;
-      }
+  }
+  &__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;
     }
   }
-  ::v-deep .ProductsFilters {
-    &__wrapper {
-      margin-bottom: 20px;
-
-      input,
-      .multiselect__tags {
-        border-radius: 0px !important;
-      }
+  &__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;
     }
-    &__search {
-      margin-left: 16px;
-      width: 500px;
+  }
+}
+::v-deep .ProductsFilters {
+  &__wrapper {
+    margin-bottom: 20px;
+
+    input,
+    .multiselect__tags {
+      border-radius: 0px !important;
     }
   }
-  </style>
+  &__search {
+    margin-left: 16px;
+    width: 500px;
+  }
+}
+</style>