@lancom/shared 0.0.470 → 0.0.471

package/assets/js/api/index.js

@@ -42,8 +42,8 @@ const api = {
   fetchCustomerCoupons(customer, shop) {
     return _get(`shop/${shop}/customer/${customer._id}/coupons`);
   },
-  fetchChildrenCategories(category, params) {
-    return _get(`category/${category || 'null'}/children`, params);
+  fetchChildrenCategories(category, shop, params) {
+    return _get(`shop/${shop}/category/${category || 'null'}/children`, params);
   },
   searchProducts(shop, text, save) {
     return _get(`shop/${shop}/products/search`, { text, save });
@@ -150,6 +150,9 @@ const api = {
   saveQuoteRequest(quote, shop) {
     return quote._id ? _put(`shop/${shop}/quotes/${quote._id}`, quote) : _post(`shop/${shop}/quotes`, quote);
   },
+  saveCartQuoteRequest(data, shop) {
+    return _post(`shop/${shop}/quotes/cart`, data);
+  },
   generateQuotePDF(id, option) {
     return _get(`quotes/${id}/option/${option}/pdf`);
   },

package/assets/js/utils/fabric-helper.js

@@ -13,8 +13,9 @@ class Background {
   boundinStrokeColor = '#7D6AEF';
   backgroundImage = null;
 
-  constructor({ background, size }) {
+  constructor({ background, size, hideBoundBox = false }) {
     this.canvas = new fabric.Canvas(background, { ...size });
+    this.hideBoundBox = hideBoundBox;
   }
 
   clear() {
@@ -28,7 +29,7 @@ class Background {
   }
 
   addBoundingRect() {
-    if (this.boundingRect) {
+    if (this.boundingRect && !this.hideBoundBox) {
       this.boundingBox = new fabric.Rect({
         ...this.boundingRect,
         hasBorders: false,
@@ -66,11 +67,12 @@ export default class FabricHelper {
   background = null;
   printAreaRect = null;
 
-  constructor({ editor, background, size }) {
+  constructor({ editor, background, size, hideBoundBox = false }) {
     this.size = size;
+    this.hideBoundBox = hideBoundBox;
     this.editor = new fabric.Canvas(editor, { ...size });
     if (background) {
-      this.background = new Background({ background, size });
+      this.background = new Background({ background, size, hideBoundBox });
     }
     this.events = {};
     this.boundingBox = null;

package/assets/js/utils/simple-products.js

@@ -1,3 +1,5 @@
+import { sortSizes } from './sizes';
+
 export function getSimpleProductsColors(simpleProducts, onlyWithStock = true) {
   const uniqueColorsMap = new Map();
   (simpleProducts || [])
@@ -20,5 +22,6 @@ export function getSimpleProductsSizes(simpleProducts, sizesColor, onlyWithStock
         uniqueSizesMap.set(size._id, size);
       }
     });
-  return Array.from(uniqueSizesMap.values());
+  const sizes = Array.from(uniqueSizesMap.values());
+  return sortSizes(sizes);
 }

package/assets/scss/ui_kit/_grid.scss

@@ -783,7 +783,7 @@
   margin-left: auto !important;
 }
 // margins
-@for $i from 1 through 20 {
+@for $i from 0 through 20 {
   .mt-#{$i} {
     margin-top: #{$i}px !important;
   }
@@ -796,4 +796,4 @@
   .ml-#{$i} {
     margin-left: #{$i}px !important;
   }
-}
+}

package/components/checkout/cart/cart.vue

@@ -63,6 +63,13 @@
                 slot="icon-after"
                 class="icon-arrow-right"></i>
             </btn>
+            <btn
+              class="mt-10 ml-0"
+              :btn-disabled="isSaveQuoteDisabled"
+              :btn-block="true"
+              btn-class="white"
+              btn-label="SAVE AS QUOTE FOR LATER"
+              @onclick="openSaveQuoteModal" />
           </div>
           <div class="mt-10 hidden-sm-and-up">
             <btn
@@ -94,6 +101,7 @@ import CartMixin from '@lancom/shared/components/checkout/cart/cart.mixin';
 import CartPriceInfo from '@lancom/shared/components/checkout/cart/cart_price_info/cart-price-info';
 import CartShipping from '@lancom/shared/components/checkout/cart/cart_shipping/cart-shipping';
 import Checkbox from '@lancom/shared/components/common/checkbox';
+import QuoteRequestModal from '@lancom/shared/components/quotes/quote_request_modal/quote-request-modal';
 
 export default {
   name: 'CheckoutCart',
@@ -147,11 +155,31 @@ export default {
     },
     isCheckoutDisabled() {
       return this.isNotValidShipping || this.isNotValidQuantity || this.cartPricingError || this.cartPricingCalculating || (this.hasClearanceProduct && !this.clearanceAccepted);
+    },
+    isSaveQuoteDisabled() {
+      return this.isEmpty || this.isNotValidQuantity || this.cartPricingError || this.cartPricingCalculating;
     }
   },
   methods: {
     loadedPricing() {
       gtm.viewCart(this.entitiesWithoutFreeProducts, this.cartPricing, this.currency);
+    },
+    openSaveQuoteModal() {
+      const params = {
+        name: 'cart-quote-request',
+        root: this.$root,
+        height: 'auto',
+        width: 1012,
+        adaptive: true,
+        clickToClose: true,
+        transition: 'from-right-to-left'
+      };
+      this.$modal.show(QuoteRequestModal, {
+        visibleProductTypes: false,
+        hideQuoteExtras: true,
+        title: 'Save cart as quote',
+        intro: 'Complete your details below. We will email you a link to your quote when it is ready.'
+      }, params);
     }
   }
 };

package/components/common/checkbox.vue

@@ -127,7 +127,7 @@ html[dir=rtl] {
         top: 50%;
         width: 24px;
         height: 24px;
-        border: 1px solid $grey_3;
+        border: 1px solid #616277;
         border-radius: 2px;
         transform: translateY(-50%);
       }

package/components/editor/editor_print_area_options/editor-print-area-options.scss

@@ -26,5 +26,28 @@
       grid-column: 1/3;
       grid-row: 3/3;
     }
+    ::v-deep .EditorPrintAreaOption {
+      &__wrapper {
+        position: relative;
+        width: 100%;
+        height: 100%;
+      }
+      &__content {
+        text-align: center;
+        padding: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        &:hover {
+          background-color: $green_lighter;
+        }
+        &.selected {
+          background-color: $green;
+        }
+        > * {
+          pointer-events: none;
+        }
+      }
+    }
   }
 }

package/components/editor/editor_print_area_options/editor-print-area-options.vue

@@ -2,31 +2,50 @@
   <div
     class="EditorPrintAreaOptions__wrapper"
     :class="{ singleRow, allowNoPrint }">
-    <div
-      v-for="(option, index) in options"
-      :key="index"
-      class="EditorPrintAreaOptions__option"
-      :class="{
-        'EditorPrintAreaOptions__option--no-print': !option.printArea
-      }">
-      <editor-print-area-option
-        :option="option"
-        :product="product"
-        :selected="option.printArea && option.printArea._id === selected"
-        @select="select"
-        @option-mouseover="$emit('option-mouseover', $event)"
-        @option-mouseleave="$emit('option-mouseleave', $event)" />
-    </div>
+    <template v-if="options.length === 1">
+      <div
+        v-for="(suboption, index) in options[0].suboptions"
+        :key="index"
+        class="EditorPrintAreaOptions__option">
+        <editor-print-area-suboption
+          :suboption="suboption"
+          :product="product"
+          :side="options[0].printArea.side"
+          :selected="suboption.printArea && suboption.printArea._id === selected"
+          @select="select"
+          @option-mouseover="$emit('option-mouseover', $event)"
+          @option-mouseleave="$emit('option-mouseleave', $event)" />
+      </div>
+    </template>
+    <template v-else>
+      <div
+        v-for="(option, index) in options"
+        :key="index"
+        class="EditorPrintAreaOptions__option"
+        :class="{
+          'EditorPrintAreaOptions__option--no-print': !option.printArea
+        }">
+        <editor-print-area-option
+          :option="option"
+          :product="product"
+          :selected="option.printArea && option.printArea._id === selected"
+          @select="select"
+          @option-mouseover="$emit('option-mouseover', $event)"
+          @option-mouseleave="$emit('option-mouseleave', $event)" />
+      </div>
+    </template>
   </div>
 </template>
 
 <script>
 import EditorPrintAreaOption from './editor_print_area_option/editor-print-area-option';
+import EditorPrintAreaSuboption from './editor_print_area_option/editor_print_area_suboption/editor-print-area-suboption';
 
 export default {
   name: 'EditorPrintAreaOptions',
   components: {
-    EditorPrintAreaOption
+    EditorPrintAreaOption,
+    EditorPrintAreaSuboption
   },
   props: {
     selected: {

package/components/editor/editor_print_area_options/editor_print_area_option/editor-print-area-option.scss

@@ -1,26 +1,6 @@
 @import "@/assets/scss/variables";
 
 .EditorPrintAreaOption {
-  &__wrapper {
-    position: relative;
-    width: 100%;
-    height: 100%;
-  }
-  &__content {
-    text-align: center;
-    padding: 8px 8px 8px 0;
-    display: flex;
-    align-items: center;
-    &:hover {
-      background-color: $green_lighter;
-    }
-    &.selected {
-      background-color: $green;
-    }
-    > * {
-      pointer-events: none;
-    }
-  }
   &__info {
     text-align: center;
     display: flex;

package/components/editor/editor_print_area_options/editor_print_area_option/editor-print-area-option.vue

@@ -35,28 +35,16 @@
       v-if="showOptions"
       v-click-outside="closeSuboptions"
       class="EditorPrintAreaOption__suboptions">
-      <div
+      <editor-print-area-suboption
         v-for="(suboption, index) in option.suboptions"
         :key="index"
-        class="EditorPrintAreaOption__content"
-        @click="selectSuboption(suboption)"
-        @mouseover="$emit('option-mouseover', suboption)"
-        @mouseleave="$emit('option-mouseleave', suboption)">
-        <div
-          v-if="suboption.printArea"
-          class="EditorPrintAreaOption__icon"
-          :class="{
-            [suboption.printArea.alias]: true,
-            [option.printArea.side]: true,
-            [productType]: true
-          }">
-        </div>
-        <div>
-          <div class="lc_caption">
-            {{ suboption.label }}. {{ suboption.sizeLabel }} 
-          </div>
-        </div>
-      </div>
+        :suboption="suboption"
+        :product="product"
+        :side="option.printArea.side"
+        :product-type="productType"
+        @select="selectSuboption"
+        @option-mouseover="$emit('option-mouseover', $event)"
+        @option-mouseleave="$emit('option-mouseleave', $event)" />
     </div>
   </div>
 </template>
@@ -66,11 +54,13 @@ import { mapGetters } from 'vuex';
 import { priceWithTax, priceInRange } from '@lancom/shared/assets/js/utils/filters';
 import { getProductPrintsAreasPrices } from '@lancom/shared/assets/js/models/print-area';
 import Price from '@lancom/shared/components/common/price';
+import EditorPrintAreaSuboption from './editor_print_area_suboption/editor-print-area-suboption';
 
 export default {
   name: 'EditorPrintAreaOption',
   components: {
-    Price
+    Price,
+    EditorPrintAreaSuboption
   },
   filters: {
     priceWithTax

package/components/editor/editor_print_area_options/editor_print_area_option/editor_print_area_suboption/editor-print-area-suboption.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="EditorPrintAreaOption__wrapper">
+    <div
+      class="EditorPrintAreaOption__content"
+      :class="{ selected }"
+      @click="$emit('select', suboption)"
+      @mouseover="$emit('option-mouseover', suboption)"
+      @mouseleave="$emit('option-mouseleave', suboption)">
+      <div
+        v-if="suboption.printArea"
+        class="EditorPrintAreaOption__icon"
+        :class="{
+          [suboption.printArea.alias]: true,
+          [side]: true,
+          [productType]: true
+        }">
+      </div>
+      <div class="EditorPrintAreaOption__info">
+        <div class="lc_caption">
+          {{ suboption.label }}. {{ suboption.sizeLabel }}
+        </div>
+        <div class="lc_regular10">
+          <price
+            :price="calcPrintPrice(suboption)"
+            :with-gst="priceIncludeGST" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { priceInRange } from '@lancom/shared/assets/js/utils/filters';
+import { getProductPrintsAreasPrices } from '@lancom/shared/assets/js/models/print-area';
+import Price from '@lancom/shared/components/common/price';
+
+export default {
+  name: 'EditorPrintAreaSuboption',
+  components: {
+    Price
+  },
+  props: {
+    suboption: {
+      type: Object,
+      required: true
+    },
+    product: {
+      type: Object,
+      required: true
+    },
+    side: {
+      type: String,
+      required: true
+    },
+    productType: {
+      type: String,
+      default: 'tee'
+    },
+    selected: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    ...mapGetters('product', [
+      'usedSimpleProducts',
+      'selectedPrintType',
+      'priceIncludeGST'
+    ]),
+    printsPricing() {
+      return getProductPrintsAreasPrices(this.product, this.selectedPrintType);
+    }
+  },
+  methods: {
+    calcPrintPrice(suboption) {
+      const amount = this.usedSimpleProducts.reduce((amount, product) => product.amount + amount, 0);
+      return suboption.printArea ? priceInRange(this.printsPricing[suboption.printArea._id], amount || 1) : null;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'editor-print-area-suboption';
+</style>

package/components/editor/editor_product_details/editor-product-details.vue

@@ -284,7 +284,11 @@ export default {
         clickToClose: true,
         transition: 'from-right-to-left'
       };
-      this.$modal.show(QuoteRequestModal, { visibleProductTypes: false }, params);
+      this.$modal.show(QuoteRequestModal, {
+        visibleProductTypes: false,
+        title: 'Request a quote',
+        intro: 'Tell us what you need for this product. We will email you within 24-48 hours.'
+      }, params);
     },
     toggleSide() {
       this.side = this.side === 'front' ? 'back' : 'front';

package/components/editor/editor_workspace/editor-workspace.vue

@@ -36,6 +36,7 @@
                   :zoom-size="sideZoomSize"
                   :print-area-size="selectedPrintArea"
                   :visible-background-image="visibleBackgroundImage"
+                  :hide-bound-box="hideBoundBox"
                   :class="side"
                   class="EditorWorkspace__side rotate-y-element"
                   @workspace="onWorkspaceChange($event)"
@@ -75,6 +76,7 @@
                 :class="editableSide.id"
                 :zoom-size="sideZoomSize"
                 :visible-background-image="visibleBackgroundImage"
+                :hide-bound-box="hideBoundBox"
                 class="EditorWorkspace__side rotate-y-element"
                 @workspace="onWorkspaceChange($event)"
                 @print-area-changed="onPrintAreaChanged($event)" />
@@ -165,6 +167,10 @@ export default {
     isSelectable: {
       type: Boolean,
       default: true
+    },
+    hideBoundBox: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -306,7 +312,7 @@ export default {
       this.setSelectedPrintArea({ sideId: this.editableSide.id, printArea: printArea?._id, parentPrintArea: printArea?.parentPrintArea, size });
     },
     toogleBoundBox(state, printAreaOption) {
-      if (this.$refs.editor) {
+      if (this.$refs.editor && !this.hideBoundBox) {
         this.$refs.editor.toogleBoundBox(state, printAreaOption);
       }
     },

package/components/editor/editor_workspace/editor_workspace_side/editor-workspace-side.vue

@@ -175,6 +175,10 @@ export default {
     isSelectable: {
       type: Boolean,
       default: true
+    },
+    hideBoundBox: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -389,7 +393,8 @@ export default {
       this.fabricHelper = new FabricHelper({
         editor: this.$refs.editor,
         background: this.$refs.background,
-        size: this.editorSize
+        size: this.editorSize,
+        hideBoundBox: this.hideBoundBox
       });
       this.fabricHelper.setPrintArea(this.printArea, this.editorSize, this.product);
       this.fabricHelper.on('setField', data => {
@@ -422,7 +427,9 @@ export default {
       }
       this.drawingInProcess = true;
       this.fabricHelper.clear();
-      this.fabricHelper.addBoundingArea();
+      if (!this.hideBoundBox) {
+        this.fabricHelper.addBoundingArea();
+      }
       await this.addLayersToCanvas();
       this.drawingInProcess = false;
 
@@ -559,7 +566,7 @@ export default {
       );
     },
     toogleBoundBox(state, option) {
-      if (!this.fabricHelper || ['mini', 'xs'].includes(this.breakpoints.is)) {
+      if (!this.fabricHelper || ['mini', 'xs'].includes(this.breakpoints.is) || this.hideBoundBox) {
         return;
       }
 

package/components/product/simple_products_price_info/simple-products-price-info.vue

@@ -10,6 +10,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import PricingTable from '@lancom/shared/components/common/pricing_table/pricing-table';
+import { sortSizes } from '@lancom/shared/assets/js/utils/sizes';
 
 export default {
   name: 'ProductSizesInfo',
@@ -25,13 +26,16 @@ export default {
   computed: {
     ...mapGetters('product', ['priceIncludeGST']),
     sizesPrices() {
-      return [...(this.simpleProducts || []).reduce((sizes, product) => {
+      const list = [...(this.simpleProducts || []).reduce((sizes, product) => {
         sizes.set(product.size._id, {
           name: product.size.shortName,
+          order: product.size.order,
           pricing: product.pricing
         });
         return sizes;
       }, new Map()).values()];
+      
+      return sortSizes(list);
     }
   }
 };

package/components/quotes/quote_request/quote-request.vue

@@ -63,7 +63,9 @@
                 {{ errors[0] }}
               </span>
             </validation-provider>
-            <div class="form-row">
+            <div
+              v-if="!hideQuoteExtras"
+              class="form-row">
               <div class="QuoteRequest__label">
                 Upload your logo/artwork
               </div>
@@ -121,6 +123,7 @@
               </div>
             </div>
             <validation-provider
+              v-if="!hideQuoteExtras"
               v-slot="{ errors }"
               tag="div"
               name="Description"
@@ -210,7 +213,9 @@
                 {{ errors[0] }}
               </span>
             </validation-provider>
-            <div class="form-row">
+            <div
+              v-if="!hideQuoteExtras"
+              class="form-row">
               <div class="QuoteRequest__label">
                 Do these need to be printed?
               </div>
@@ -307,6 +312,16 @@ export default {
     Multiselect,
     PhoneInput
   },
+  props: {
+    visibleProductTypes: {
+      type: Boolean,
+      default: true
+    },
+    hideQuoteExtras: {
+      type: Boolean,
+      default: false
+    }
+  },
   data() {
     return {
       processing: false,
@@ -360,15 +375,9 @@ export default {
       }
     };
   },
-  props: {
-    visibleProductTypes: {
-      type: Boolean,
-      default: true
-    }
-  },
   computed: {
     ...mapGetters(['shop', 'currency', 'googleClickId']),
-    ...mapGetters('cart', ['entities']),
+    ...mapGetters('cart', ['entities', 'entitiesWithoutFreeProducts'])
   },
   methods: {
     handleUploaded(file) {
@@ -408,7 +417,7 @@ export default {
           googleClickId: this.googleClickId,
           referer: window.location.href,
           cartInfo: {
-            entities: (this.entities || [])
+            entities: (this.entitiesWithoutFreeProducts || this.entities || [])
               .map(({ product, simpleProducts, prints }) => {
                 return {
                   product: product ? { _id: product.name, name: product.name, SKU: product.SKU } : null,
@@ -416,14 +425,14 @@ export default {
                     .map(({ layers, printArea, printSize, printType }) => ({
                       layers,
                       printArea: printArea ? { _id: printArea._id, name: printArea.name } : null,
-                      printSize: printSize ? { _id: printSize._id, name: printSize.name} : null,
-                      printType: printType ? { _id: printType._id, name: printType.name} : null,
+                      printSize: printSize ? { _id: printSize._id, name: printSize.name } : null,
+                      printType: printType ? { _id: printType._id, name: printType.name } : null
                     })),
                   simpleProducts: (simpleProducts || [])
                     .filter(({ amount }) => amount > 0)
                     .map(({ amount, SKU }) => ({
                       amount,
-                      SKU,
+                      SKU
                     }))
                 };
               })

package/components/quotes/quote_request_modal/quote-request-modal.scss

@@ -1,16 +1,28 @@
 @import "@/assets/scss/variables";
 
 .QuoteRequestModal {
-  &__wrapper  {
+  &__wrapper {
     border-radius: 0px;
     margin-bottom: 50px;
+    max-width: 100%;
+
     .lc_modal__content {
       @media (min-width: $bp-extra-small-max) {
         padding: 0 0 20px 0 !important;
       }
     }
+
     .icon-cancel {
       z-index: 2;
     }
   }
-}
+
+  &__title {
+    font-size: 20px;
+    font-weight: bold;
+  }
+  &__intro {
+    padding: 0 20px;
+    margin-bottom: 20px;
+  }
+}

package/components/quotes/quote_request_modal/quote-request-modal.vue

@@ -1,13 +1,24 @@
 <template>
   <div class="lc_modal__wrapper QuoteRequestModal__wrapper">
     <div class="lc_modal__header lc_modal__header--small-padding pull-left">
+      <h5
+        v-if="title"
+        class="lc_modal__header-title QuoteRequestModal__title">
+        {{ title }}
+      </h5>
       <i
         class="icon-cancel lc_modal__close--dark"
         @click="$emit('close')"></i>
     </div>
-    <div class="lc_modal__content">
+    <div class="lc_modal__content QuoteRequestModal__content">
+      <p
+        v-if="intro"
+        class="lc_regular14 lc__grey1 lc_regular12 QuoteRequestModal__intro">
+        {{ intro }}
+      </p>
       <quote-request
         :visible-product-types="visibleProductTypes"
+        :hide-quote-extras="hideQuoteExtras"
         @added="$emit('close', $event)" />
     </div>
   </div>
@@ -25,8 +36,18 @@ export default {
     visibleProductTypes: {
       type: Boolean,
       default: true
+    },
+    title: {
+      type: String
+    },
+    intro: {
+      type: String
+    },
+    hideQuoteExtras: {
+      type: Boolean,
+      default: false
     }
-  },
+  }
 };
 </script>
 

package/mixins/layouts/products.js

@@ -8,15 +8,36 @@ import { getProductLargeCover, getProductMediumCover } from '@lancom/shared/asse
 export default {
   mixins: [metaInfo],
   middleware: ['page-info'],
-  async fetch() {
-    await this.loadProducts();
+  async asyncData({ store, route, res }) {
+    const shop = store.getters.shop;
+    const country = store.getters.country;
+    const currency = store.getters.currency;
 
-    if (this.page === 1) {
-      await this.fetchChildrenCategories(this.currentCategory);
+    const params = {
+      ...route.params,
+      ...route.query,
+      country: country?._id,
+      currency: currency?._id,
+      limit: 80
+    };
+
+    try {
+      await store.dispatch('products/fetchProducts', { params, shop: shop._id });
+    } catch {
+      if (process.server && res) {
+        const loadError = store.getters['products/loadError'];
+        res.statusCode = loadError?.statusCode || 500;
+      }
     }
 
-    if (process.server) {
-      this.$root.context?.res?.setHeader('Cache-Control', `max-age=${86400}`);;
+    const page = store.getters['products/page'];
+    if (page === 1) {
+      const category = store.getters['products/category'];
+      await store.dispatch('products/fetchChildrenCategories', { category, shop });
+    }
+
+    if (process.server && res) {
+      res.setHeader('Cache-Control', `max-age=${86400}`);
     }
   },
   computed: {
@@ -53,29 +74,9 @@ export default {
       return this.category;
     },
     breadcrumbs() {
-      const breadcrumbs = [{
-        to: '/products',
-        text: 'Products'
-      }];
-      if (this.currentCategory) {
-        const categoriesBreadcrumbs = [];
-        let category = this.currentCategory;
-        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({
+      const breadcrumbs = [
+        { to: '/products', text: 'Products' },
+        ...(this.currentProductType ? [{
           to: generateProductsLink(this.$route, {
             type: this.currentProductType.alias,
             brand: null,
@@ -83,31 +84,43 @@ export default {
             category: null
           }),
           text: this.currentProductType.name
-        });
-      }
-
-      if (this.currentTag) {
-        breadcrumbs.push({
+        }] : []),
+        ...(this.currentTag ? [{
           to: generateProductsLink(this.$route, {
             type: this.currentProductType?.alias,
-            tag: this.currentTag?.alias,
+            tag: this.currentTag.alias,
             brand: null,
             category: null
           }),
           text: this.currentTag.name
-        });
-      }
-
-      if (this.currentBrand) {
-        breadcrumbs.push({
+        }] : []),
+        ...(this.currentBrand ? [{
           to: generateProductsLink(this.$route, {
             type: this.currentProductType?.alias,
             tag: this.currentTag?.alias,
-            brand: this.currentBrand?.alias,
+            brand: this.currentBrand.alias,
             category: this.currentCategory?.alias
           }),
           text: this.currentBrand.name
-        });
+        }] : [])
+      ];
+
+      if (this.currentCategory) {
+        const categoriesBreadcrumbs = [];
+        let category = this.currentCategory;
+        while (category) {
+          categoriesBreadcrumbs.unshift({
+            to: generateProductsLink(this.$route, {
+              type: null,
+              brand: null,
+              tag: null,
+              category
+            }, true),
+            text: category.name
+          });
+          category = category.parent;
+        }
+        breadcrumbs.splice(1, this.currentProductType ? 1 : 0, ...categoriesBreadcrumbs);
       }
 
       return breadcrumbs;

package/mixins/product-view.js

@@ -138,7 +138,9 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING, isEditor = false) => ({
     }
   },
   created() {
-    this.fillBreadcrumbs();
+    if (this.product) {
+      this.fillBreadcrumbs();
+    }
   },
   async mounted() {
     if (!this.product) {
@@ -272,6 +274,8 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING, isEditor = false) => ({
     return '/shop/:shop/:sku/:product/editor';
   },
   jsonld() {
+    this.fillBreadcrumbs();
+
     const { name, aggregateRating, reviews, brand, SKU } = this.product;
     let brandAdditionalProductsRichSnippet = {};
     try {

package/nuxt.config.js

@@ -1,7 +1,30 @@
 const sharedRoutes = require('./routes');
 const feeds = require('./feeds');
 
-module.exports = (config, axios, { raygunClient, publicPath, productUrlToEditor } = {}) => ({
+function formatSitemapDate(date) {
+  const year = date.getFullYear();
+  const month = `${date.getMonth() + 1}`.padStart(2, '0');
+  const day = `${date.getDate()}`.padStart(2, '0');
+  return `${year}-${month}-${day}`;
+}
+
+function getCurrentWeekMonday() {
+  const date = new Date();
+  const day = date.getDay();
+  const diff = day === 0 ? -6 : 1 - day;
+  date.setDate(date.getDate() + diff);
+  date.setHours(0, 0, 0, 0);
+  return date;
+}
+
+function getCurrentMonthFirstDay() {
+  const date = new Date();
+  date.setDate(1);
+  date.setHours(0, 0, 0, 0);
+  return date;
+}
+
+module.exports = (config, axios, { raygunClient, publicPath, productUrlToEditor, sitemapWithoutProductTypes } = {}) => ({
   globalName: 'appLancom',
   mode: 'universal',
   head: {
@@ -27,23 +50,32 @@ module.exports = (config, axios, { raygunClient, publicPath, productUrlToEditor
   sitemap: {
     hostname: `https://${config.HOST_NAME}`,
     defaults: {
-      priority: 1
+      lastmod: formatSitemapDate(getCurrentMonthFirstDay())
     },
     exclude: [
       // '/',
       '/faq',
       '/quotes/request',
-      '/products/',
+      sitemapWithoutProductTypes ? '/products' : null,
+      sitemapWithoutProductTypes ? '/brands' : null,
       '/preview/**',
       '/checkout/**',
       '/customer/**'
-    ],
+    ].filter(s => !!s),
     cacheTime: 10,
     routes: async () => {
-      const { data } = await axios.get(`${config.LOCAL_API_URL}/feed/sitemap?host=${config.HOST_NAME}&toEditor=${!!productUrlToEditor}`);
+      const { data } = await axios.get(`${config.LOCAL_API_URL}/feed/sitemap?host=${config.HOST_NAME}&toEditor=${!!productUrlToEditor}&sitemapWithoutProductTypes=${!!sitemapWithoutProductTypes}`);
+      const defaultLastmod = formatSitemapDate(getCurrentWeekMonday());
       return [
-        ...data.map(url => ({ url, priority: 0.8 })),
-        // { url: `https://${config.HOST_NAME}`, priority: 1 }
+        { url: '/', lastmod: defaultLastmod },
+        ...data.map(item => {
+          const url = item.url || item.link || item;
+          const updatedAt = item.updatedAt;
+          return {
+            url,
+            lastmod: updatedAt ? formatSitemapDate(new Date(updatedAt)) : defaultLastmod
+          };
+        })
       ];
     }
   },

package/package.json

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

package/server-middleware/sitemap.js

@@ -0,0 +1,37 @@
+module.exports = function (req, res, next) {
+  if ((req.url || '').split('?')[0] !== '/sitemap.xml') {
+    return next();
+  }
+
+  console.log('[sitemap] intercepting /sitemap.xml');
+
+  const host = req.headers.host;
+  const protocol = req.headers['x-forwarded-proto'] || 'https';
+  const rootUrl = `${protocol}://${host}`;
+
+  function fixXml(chunk) {
+    const isBuffer = Buffer.isBuffer(chunk);
+    const str = chunk.toString();
+    const fixed = str.split(`<loc>${rootUrl}/</loc>`).join(`<loc>${rootUrl}</loc>`);
+    console.log('[sitemap] write chunk, root replaced:', str !== fixed, '| rootUrl:', rootUrl);
+    return isBuffer ? Buffer.from(fixed) : fixed;
+  }
+
+  const write = res.write;
+  res.write = function (chunk, ...args) {
+    if (chunk) {
+      return write.call(this, fixXml(chunk), ...args);
+    }
+    return write.call(this, chunk, ...args);
+  };
+
+  const end = res.end;
+  res.end = function (chunk, ...args) {
+    if (chunk) {
+      return end.call(this, fixXml(chunk), ...args);
+    }
+    return end.call(this, chunk, ...args);
+  };
+
+  return next();
+};

package/store/products.js

@@ -59,6 +59,7 @@ export const actions = {
         products, count, page, perPage, productTypes, colors, colorGroups, brands, tags, attributes,
         categories, minPrice, maxPrice, category
       } = await api.fetchProducts(shop, params);
+      commit('setCategory', category);
       commit('setProducts', products);
       commit('setPage', page);
       commit('setCount', count);
@@ -68,7 +69,6 @@ export const actions = {
       commit('setColorGroups', colorGroups);
       commit('setBrands', brands);
       commit('setCategories', categories);
-      commit('setCategory', category);
       commit('setTags', tags);
       commit('setAttributes', attributes);
       commit('setMinPrice', minPrice);
@@ -88,9 +88,9 @@ export const actions = {
       throw e;
     }
   },
-  async fetchChildrenCategories({ commit }, category) {
+  async fetchChildrenCategories({ commit }, { category, shop }) {
     try {
-      const categories = await api.fetchChildrenCategories(category?._id);
+      const categories = await api.fetchChildrenCategories(category?._id, shop._id);
       commit('setChildrenCategories', categories);
       return categories;
     } catch (e) {