@getlupa/client 0.6.0-alpha-20 → 0.6.0-alpha-23

package/dist/cjs/components/product-list/CategoryDescription.vue.d.ts

@@ -2,7 +2,6 @@ import Vue from "vue";
 import { ProductListOptions } from "@/types/product-list/ProductListOptions";
 export default class CategoryDescription extends Vue {
     options: ProductListOptions;
-    get title(): string | undefined;
     get description(): string | undefined;
     get overviewVisible(): boolean;
 }

package/dist/cjs/components/search-results/filters/MobileFilterSidebar.vue.d.ts

@@ -2,7 +2,7 @@ import { SearchResultsFilterOptions } from "@/types/search-results/SearchResults
 import Vue from "vue";
 export default class MobileFilterSidebar extends Vue {
     options: SearchResultsFilterOptions;
-    setSidebarVisibility: ({ visible, }: {
+    setSidebarState: ({ visible, }: {
         visible: boolean;
     }) => void;
     isMobileSidebarVisible: boolean;

package/dist/cjs/components/search-results/products/SearchResultsMobileToggle.vue.d.ts

@@ -3,7 +3,7 @@ export default class SearchResultsMobileToggle extends Vue {
     label: string;
     showFilterCount: boolean;
     currentFilterCount: number;
-    setSidebarVisibility: ({ visible, }: {
+    setSidebarState: ({ visible, }: {
         visible: boolean;
     }) => void;
     handleMobileToggle(): void;

package/dist/cjs/components/search-results/products/SearchResultsProducts.vue.d.ts

@@ -8,6 +8,7 @@ export default class SearchResultsProducts extends Vue {
     loading: boolean;
     hasResults: boolean;
     currentQueryText: string;
+    isPageEmpty: boolean;
     isMobileSidebarVisible: boolean;
     productCardOptions(): SearchResultsProductCardOptions;
     get similarQueriesLabels(): SearchResultsSimilarQueriesLabels;
@@ -21,4 +22,11 @@ export default class SearchResultsProducts extends Vue {
     page: number;
     get columnSize(): string;
     getProductKey(index: string, product: Document): string;
+    appendParams: ({ params, }: {
+        params: {
+            name: string;
+            value: string;
+        }[];
+    }) => void;
+    goToFirstPage(): void;
 }

package/dist/cjs/constants/development/searchResultsDev.example.const.d.ts

@@ -13,6 +13,8 @@ export declare const SEARCH_RESULTS_CONFIGURATION: {
         priceSeparator: string;
         showMore: string;
         emptyResults: string;
+        noItemsInPage: string;
+        backToFirstPage: string;
         mobileFilterButton: string;
         htmlTitleTemplate: string;
         noResultsSuggestion: string;

package/dist/cjs/constants/global.const.d.ts

@@ -11,4 +11,5 @@ export declare const XL_MIN_WIDTH = 1199;
 export declare const MAX_FACET_VALUES = 5000;
 export declare const CURRENCY_KEY_INDICATOR = "price";
 export declare const DEFAULT_PAGE_SIZE = 12;
+export declare const DEFAULT_PAGE_SIZE_SELECTION: number[];
 export declare const LUPA_ROUTING_EVENT = "lupaRedirect";

package/dist/cjs/index.min.js

@@ -11919,6 +11919,7 @@ const XL_MIN_WIDTH = 1199;
 const MAX_FACET_VALUES = 5000;
 const CURRENCY_KEY_INDICATOR = "price";
 const DEFAULT_PAGE_SIZE = 12;
+const DEFAULT_PAGE_SIZE_SELECTION = [12, 24, 36, 60];
 const LUPA_ROUTING_EVENT = "lupaRedirect";
 
 const formatRange = (filter) => {
@@ -15759,6 +15760,17 @@ const scrollTo = (elementId) => {
         top: el.offsetTop,
         behavior: "smooth",
     });
+};
+const disableBodyScroll = () => {
+    const scrollY = window.scrollY;
+    document.body.style.position = "fixed";
+    document.body.style.top = `-${scrollY}px`;
+};
+const enableBodyScroll = () => {
+    const scrollY = document.body.style.top;
+    document.body.style.position = "";
+    document.body.style.top = "";
+    window.scrollTo(0, parseInt(scrollY || "0") * -1);
 };
 
 const searchResult$g = namespace("searchResult");
@@ -16277,15 +16289,15 @@ let MobileFilterSidebar = class MobileFilterSidebar extends Vue$1 {
         return !((_b = (_a = this.options.currentFilters) === null || _a === void 0 ? void 0 : _a.mobileSidebar) === null || _b === void 0 ? void 0 : _b.activeFiltersExpanded);
     }
     handleMobileToggle() {
-        this.setSidebarVisibility({ visible: false });
+        this.setSidebarState({ visible: false });
     }
 };
 __decorate([
     Prop()
 ], MobileFilterSidebar.prototype, "options", void 0);
 __decorate([
-    searchResult$f.Mutation("setSidebarVisibility")
-], MobileFilterSidebar.prototype, "setSidebarVisibility", void 0);
+    searchResult$f.Action("setSidebarState")
+], MobileFilterSidebar.prototype, "setSidebarState", void 0);
 __decorate([
     searchResult$f.State((state) => state.isMobileSidebarVisible)
 ], MobileFilterSidebar.prototype, "isMobileSidebarVisible", void 0);
@@ -16312,35 +16324,47 @@ var __vue_render__$C = function () {
   var _c = _vm._self._c || _h;
   return _vm.isMobileSidebarVisible
     ? _c("div", { staticClass: "lupa-mobile-filter-sidebar" }, [
-        _c("div", { staticClass: "lupa-sidebar-top" }, [
-          _c("div", { staticClass: "lupa-sidebar-title" }, [
-            _vm._v("\n      " + _vm._s(_vm.sidebarTitle) + "\n      "),
-            _vm.isFilterCountVisible
-              ? _c("span", { staticClass: "lupa-sidebar-filter-count" }, [
-                  _vm._v(_vm._s(_vm.currentFilterCount)),
-                ])
-              : _vm._e(),
+        _c("div", {
+          staticClass: "lupa-sidebar-close",
+          on: {
+            click: function ($event) {
+              $event.stopPropagation();
+              return _vm.handleMobileToggle.apply(null, arguments)
+            },
+          },
+        }),
+        _vm._v(" "),
+        _c("div", { staticClass: "lupa-mobile-sidebar-content" }, [
+          _c("div", { staticClass: "lupa-sidebar-top" }, [
+            _c("div", { staticClass: "lupa-sidebar-title" }, [
+              _vm._v("\n        " + _vm._s(_vm.sidebarTitle) + "\n        "),
+              _vm.isFilterCountVisible
+                ? _c("span", { staticClass: "lupa-sidebar-filter-count" }, [
+                    _vm._v(_vm._s(_vm.currentFilterCount)),
+                  ])
+                : _vm._e(),
+            ]),
+            _vm._v(" "),
+            _c("div", {
+              staticClass: "lupa-filter-toggle-mobile",
+              on: { click: _vm.handleMobileToggle },
+            }),
           ]),
           _vm._v(" "),
-          _c("div", {
-            staticClass: "lupa-filter-toggle-mobile",
-            on: { click: _vm.handleMobileToggle },
-          }),
+          _c(
+            "div",
+            { staticClass: "lupa-sidebar-filter-options" },
+            [
+              _c("SearchResultsFilters", {
+                attrs: {
+                  options: _vm.options,
+                  expandable: _vm.isActiveFiltersExpanded,
+                },
+              }),
+            ],
+            1
+          ),
         ]),
-        _vm._v(" "),
-        _c(
-          "div",
-          { staticClass: "lupa-sidebar-filter-options" },
-          [
-            _c("SearchResultsFilters", {
-              attrs: {
-                options: _vm.options,
-                expandable: _vm.isActiveFiltersExpanded,
-              },
-            }),
-          ],
-          1
-        ),
       ])
     : _vm._e()
 };
@@ -19105,7 +19129,7 @@ __vue_render__$f._withStripped = true;
 const searchResult$8 = namespace("searchResult");
 let SearchResultsMobileToggle = class SearchResultsMobileToggle extends Vue$1 {
     handleMobileToggle() {
-        this.setSidebarVisibility({ visible: true });
+        this.setSidebarState({ visible: true });
     }
 };
 __decorate([
@@ -19118,8 +19142,8 @@ __decorate([
     searchResult$8.Getter("currentFilterCount")
 ], SearchResultsMobileToggle.prototype, "currentFilterCount", void 0);
 __decorate([
-    searchResult$8.Mutation("setSidebarVisibility")
-], SearchResultsMobileToggle.prototype, "setSidebarVisibility", void 0);
+    searchResult$8.Action("setSidebarState")
+], SearchResultsMobileToggle.prototype, "setSidebarState", void 0);
 SearchResultsMobileToggle = __decorate([
     Component({
         name: "searchResultsMobileToggle",
@@ -19818,6 +19842,11 @@ let SearchResultsProducts = class SearchResultsProducts extends Vue$1 {
     getProductKey(index, product) {
         return getProductKey(index, product, this.options.idKey);
     }
+    goToFirstPage() {
+        this.appendParams({
+            params: [{ name: QUERY_PARAMS.PAGE, value: "1" }],
+        });
+    }
 };
 __decorate([
     Prop()
@@ -19831,6 +19860,9 @@ __decorate([
 __decorate([
     searchResult$4.Getter("currentQueryText")
 ], SearchResultsProducts.prototype, "currentQueryText", void 0);
+__decorate([
+    searchResult$4.Getter("isPageEmpty")
+], SearchResultsProducts.prototype, "isPageEmpty", void 0);
 __decorate([
     searchResult$4.State((state) => state.isMobileSidebarVisible)
 ], SearchResultsProducts.prototype, "isMobileSidebarVisible", void 0);
@@ -19849,6 +19881,9 @@ __decorate([
 __decorate([
     params$2.Getter("page")
 ], SearchResultsProducts.prototype, "page", void 0);
+__decorate([
+    params$2.Action("appendParams")
+], SearchResultsProducts.prototype, "appendParams", void 0);
 SearchResultsProducts = __decorate([
     Component({
         name: "searchResultsProducts",
@@ -19875,10 +19910,7 @@ var __vue_render__$8 = function () {
   var _c = _vm._self._c || _h;
   return _c(
     "div",
-    {
-      style: { display: _vm.isMobileSidebarVisible ? "none" : "block" },
-      attrs: { id: "lupa-search-results-products" },
-    },
+    { attrs: { id: "lupa-search-results-products" } },
     [
       _vm.loading && !_vm.isMobileSidebarVisible
         ? _c("spinner", { staticClass: "lupa-loader" })
@@ -19946,6 +19978,38 @@ var __vue_render__$8 = function () {
               1
             ),
             _vm._v(" "),
+            _vm.isPageEmpty && _vm.options.labels.noItemsInPage
+              ? _c(
+                  "div",
+                  {
+                    staticClass: "lupa-empty-results",
+                    attrs: { "data-cy": "lupa-no-results-in-page" },
+                  },
+                  [
+                    _vm._v(
+                      "\n      " +
+                        _vm._s(_vm.options.labels.noItemsInPage) +
+                        "\n      "
+                    ),
+                    _vm.options.labels.backToFirstPage
+                      ? _c(
+                          "span",
+                          {
+                            staticClass: "lupa-empty-page-action",
+                            on: { click: _vm.goToFirstPage },
+                          },
+                          [
+                            _vm._v(
+                              "\n        " +
+                                _vm._s(_vm.options.labels.backToFirstPage)
+                            ),
+                          ]
+                        )
+                      : _vm._e(),
+                  ]
+                )
+              : _vm._e(),
+            _vm._v(" "),
             _c("SearchResultsToolbar", {
               staticClass: "lupa-toolbar-bottom",
               attrs: { options: _vm.options, "pagination-location": "bottom" },
@@ -20755,17 +20819,13 @@ __vue_render__$3._withStripped = true;
   );
 
 let CategoryDescription = class CategoryDescription extends Vue$1 {
-    get title() {
-        var _a, _b;
-        return (_b = (_a = this.options.categories) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.title;
-    }
     get description() {
         var _a, _b;
         return (_b = (_a = this.options.categories) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.description;
     }
     get overviewVisible() {
         var _a, _b;
-        return Boolean((_b = (_a = this.options.categories) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.title);
+        return Boolean((_b = (_a = this.options.categories) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.description);
     }
 };
 __decorate([
@@ -20791,10 +20851,6 @@ var __vue_render__$2 = function () {
   var _c = _vm._self._c || _h;
   return _vm.overviewVisible
     ? _c("div", { staticClass: "lupa-category-overview" }, [
-        _c("div", { staticClass: "lupa-category-title" }, [
-          _vm._v(_vm._s(_vm.title)),
-        ]),
-        _vm._v(" "),
         _c("div", {
           staticClass: "lupa-category-description",
           domProps: { innerHTML: _vm._s(_vm.description) },
@@ -21662,6 +21718,20 @@ let SearchResultModule = class SearchResultModule extends VuexModule {
             return "xl";
         }
     }
+    get isPageEmpty() {
+        var _a;
+        return (this.hasResults && ((_a = this.searchResult.offset) !== null && _a !== void 0 ? _a : 0) >= this.totalItems);
+    }
+    setSidebarState({ visible }) {
+        // Disable body scroll when sidebar is open and preserve scroll position when scrolling is closed
+        if (visible) {
+            disableBodyScroll();
+        }
+        else {
+            enableBodyScroll();
+        }
+        return { visible };
+    }
     setSidebarVisibility({ visible }) {
         this.isMobileSidebarVisible = visible;
     }
@@ -21741,6 +21811,9 @@ let SearchResultModule = class SearchResultModule extends VuexModule {
         return loading || false;
     }
 };
+__decorate([
+    Action({ commit: "setSidebarVisibility" })
+], SearchResultModule.prototype, "setSidebarState", null);
 __decorate([
     Mutation
 ], SearchResultModule.prototype, "setSidebarVisibility", null);
@@ -21974,8 +22047,8 @@ let OptionsModule = class OptionsModule extends VuexModule {
         return (_b = (_a = this.currentResolutionPageSizes) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : DEFAULT_PAGE_SIZE;
     }
     get currentResolutionPageSizes() {
-        var _a, _b, _c;
-        const pageSizes = (_c = (_b = (_a = this.searchResultOptions) === null || _a === void 0 ? void 0 : _a.pagination) === null || _b === void 0 ? void 0 : _b.sizeSelection) === null || _c === void 0 ? void 0 : _c.sizes;
+        var _a, _b, _c, _d;
+        const pageSizes = (_d = (_c = (_b = (_a = this.searchResultOptions) === null || _a === void 0 ? void 0 : _a.pagination) === null || _b === void 0 ? void 0 : _b.sizeSelection) === null || _c === void 0 ? void 0 : _c.sizes) !== null && _d !== void 0 ? _d : DEFAULT_PAGE_SIZE_SELECTION;
         if (Array.isArray(pageSizes)) {
             return pageSizes;
         }

package/dist/cjs/store/modules/searchResult.d.ts

@@ -26,6 +26,12 @@ export default class SearchResultModule extends VuexModule {
     get itemRange(): number[];
     get isMobileWidth(): boolean;
     get currentScreenWidth(): ScreenSize;
+    get isPageEmpty(): boolean;
+    setSidebarState({ visible }: {
+        visible: boolean;
+    }): {
+        visible: boolean;
+    };
     setSidebarVisibility({ visible }: {
         visible: boolean;
     }): void;

package/dist/cjs/types/search-results/SearchResultsOptions.d.ts

@@ -39,6 +39,8 @@ export declare type SearchResultsOptionLabels = SearchResultsPaginationLabels &
     mobileFilterButton: string;
     htmlTitleTemplate: string;
     outOfStock?: string;
+    noItemsInPage?: string;
+    backToFirstPage?: string;
 };
 export declare type SearchResultsAdditionalPanels = {
     additionalPanels?: SearchResultsAdditionalPanelOptions[];

package/dist/cjs/utils/scroll.utils.d.ts

@@ -1,2 +1,4 @@
 export declare const scrollToSearchResults: (timeout?: number) => void;
 export declare const scrollTo: (elementId: string) => void;
+export declare const disableBodyScroll: () => void;
+export declare const enableBodyScroll: () => void;

package/dist/es/components/product-list/CategoryDescription.vue.d.ts

@@ -2,7 +2,6 @@ import Vue from "vue";
 import { ProductListOptions } from "@/types/product-list/ProductListOptions";
 export default class CategoryDescription extends Vue {
     options: ProductListOptions;
-    get title(): string | undefined;
     get description(): string | undefined;
     get overviewVisible(): boolean;
 }

package/dist/es/components/search-results/filters/MobileFilterSidebar.vue.d.ts

@@ -2,7 +2,7 @@ import { SearchResultsFilterOptions } from "@/types/search-results/SearchResults
 import Vue from "vue";
 export default class MobileFilterSidebar extends Vue {
     options: SearchResultsFilterOptions;
-    setSidebarVisibility: ({ visible, }: {
+    setSidebarState: ({ visible, }: {
         visible: boolean;
     }) => void;
     isMobileSidebarVisible: boolean;

package/dist/es/components/search-results/products/SearchResultsMobileToggle.vue.d.ts

@@ -3,7 +3,7 @@ export default class SearchResultsMobileToggle extends Vue {
     label: string;
     showFilterCount: boolean;
     currentFilterCount: number;
-    setSidebarVisibility: ({ visible, }: {
+    setSidebarState: ({ visible, }: {
         visible: boolean;
     }) => void;
     handleMobileToggle(): void;

package/dist/es/components/search-results/products/SearchResultsProducts.vue.d.ts

@@ -8,6 +8,7 @@ export default class SearchResultsProducts extends Vue {
     loading: boolean;
     hasResults: boolean;
     currentQueryText: string;
+    isPageEmpty: boolean;
     isMobileSidebarVisible: boolean;
     productCardOptions(): SearchResultsProductCardOptions;
     get similarQueriesLabels(): SearchResultsSimilarQueriesLabels;
@@ -21,4 +22,11 @@ export default class SearchResultsProducts extends Vue {
     page: number;
     get columnSize(): string;
     getProductKey(index: string, product: Document): string;
+    appendParams: ({ params, }: {
+        params: {
+            name: string;
+            value: string;
+        }[];
+    }) => void;
+    goToFirstPage(): void;
 }

package/dist/es/constants/development/searchResultsDev.example.const.d.ts

@@ -13,6 +13,8 @@ export declare const SEARCH_RESULTS_CONFIGURATION: {
         priceSeparator: string;
         showMore: string;
         emptyResults: string;
+        noItemsInPage: string;
+        backToFirstPage: string;
         mobileFilterButton: string;
         htmlTitleTemplate: string;
         noResultsSuggestion: string;

package/dist/es/constants/global.const.d.ts

@@ -11,4 +11,5 @@ export declare const XL_MIN_WIDTH = 1199;
 export declare const MAX_FACET_VALUES = 5000;
 export declare const CURRENCY_KEY_INDICATOR = "price";
 export declare const DEFAULT_PAGE_SIZE = 12;
+export declare const DEFAULT_PAGE_SIZE_SELECTION: number[];
 export declare const LUPA_ROUTING_EVENT = "lupaRedirect";