cloudcommerce 0.39.0 → 0.40.1

package/packages/storefront/src/lib/composables/use-product-shelf.ts

@@ -2,6 +2,7 @@ import type { ResourceId, Collections, SearchItem } from '@cloudcommerce/types';
 import { ref, shallowReactive } from 'vue';
 import api from '@cloudcommerce/api';
 import { inStock as checkInStock } from '@ecomplus/utils';
+import { i19relatedProducts } from '@@i18n';
 
 export interface Props {
   collectionId?: ResourceId | null;
@@ -13,6 +14,7 @@ export interface Props {
   limit?: number;
   page?: number;
   products?: SearchItem[];
+  isRelatedProducts?: boolean;
 }
 
 const useProductShelf = (props: Props) => {
@@ -26,31 +28,39 @@ const useProductShelf = (props: Props) => {
   if (!props.products) {
     isFetching.value = true;
     fetching = (async () => {
-      let searchQuery = props.searchQuery || '';
-      let collection: Collections | undefined;
-      if (props.collectionId) {
-        try {
-          const { data } = await api.get(`collections/${props.collectionId}`);
-          collection = data;
-        } catch (err: any) {
-          console.error(err);
-          fetchError.value = err;
-        }
-        const productIds = collection?.products;
-        if (Array.isArray(productIds) && productIds.length) {
-          searchQuery += `&_id=${productIds.slice(0, 60).join(',')}`;
-        }
-        if (!title.value && title.value !== null && collection?.name) {
-          title.value = collection?.name;
-        }
-      }
       const limit = props.limit || 24;
       const offset = props.page ? (props.page - 1) * limit : 0;
       let endpointQuery = `offset=${offset}&limit=${limit}`;
       if (props.sort) {
         endpointQuery += `&sort=${props.sort}`;
       }
-      endpointQuery += searchQuery;
+      if (props.isRelatedProducts) {
+        const { apiContext } = globalThis.$storefront;
+        if (apiContext?.resource === 'products') {
+          endpointQuery = `like=${apiContext.doc._id}`;
+          title.value = i19relatedProducts;
+        }
+      } else {
+        let searchQuery = props.searchQuery || '';
+        let collection: Collections | undefined;
+        if (props.collectionId) {
+          try {
+            const { data } = await api.get(`collections/${props.collectionId}`);
+            collection = data;
+          } catch (err: any) {
+            console.error(err);
+            fetchError.value = err;
+          }
+          const productIds = collection?.products;
+          if (Array.isArray(productIds) && productIds.length) {
+            searchQuery += `&_id=${productIds.slice(0, 60).join(',')}`;
+          }
+          if (!title.value && title.value !== null && collection?.name) {
+            title.value = collection?.name;
+          }
+        }
+        endpointQuery += searchQuery;
+      }
       try {
         const { data } = await api.get(`search/v1?${endpointQuery}`);
         if (props.isShuffle) {

package/packages/storefront/src/lib/composables/use-search-filters.ts

@@ -0,0 +1,271 @@
+import type SearchEngineInstance from '@@sf/state/search-engine';
+import { ref, computed, watch } from 'vue';
+import { useDebounceFn } from '@vueuse/core';
+import { formatMoney, gridTitle as getGridTitle } from '@ecomplus/utils';
+import {
+  i19aboveOf,
+  i19brands,
+  i19categories,
+  i19upTo,
+} from '@@i18n';
+
+export interface Props {
+  searchEngine: SearchEngineInstance;
+  fixedParams?: SearchEngineInstance['params'];
+}
+
+type PriceRange = Exclude<
+  Exclude<SearchEngineInstance['meta']['buckets'], undefined>['prices'],
+  undefined
+>[number];
+
+const useSearchActiveFilters = ({ searchEngine, fixedParams }: Props) => {
+  const activeFilters = computed<SearchEngineInstance['params']>(() => {
+    const filters = {};
+    Object.keys(searchEngine.params).forEach((param) => {
+      if (fixedParams?.[param]) return;
+      const val = searchEngine.params[param];
+      if (val === undefined) return;
+      switch (param) {
+        case 'sort':
+        case 'term':
+        case 'limit':
+        case 'offset':
+        case 'count':
+        case 'buckets':
+        case 'fields':
+          return;
+        default:
+      }
+      filters[param] = val;
+    });
+    return filters;
+  });
+  const filtersCount = computed(() => {
+    const paramKeys = Object.keys(activeFilters.value);
+    const fields: string[] = [];
+    paramKeys.forEach((key) => {
+      const field = key.replace(/[^\w.]/g, '');
+      if (field === 'specs' && Array.isArray(activeFilters.value[key])) {
+        (activeFilters.value[key] as string[]).forEach((specAndVal) => {
+          const [spec] = specAndVal.split(':');
+          const specField = `specs.${spec}`;
+          if (!fields.includes(specField)) {
+            fields.push(specField);
+          }
+        });
+        return;
+      }
+      if (!fields.includes(field)) {
+        fields.push(field);
+      }
+    });
+    return fields.length;
+  });
+  return { activeFilters, filtersCount };
+};
+
+const useSearchFilters = (props: Props) => {
+  const { searchEngine, fixedParams } = props;
+  const resultMeta = computed(() => searchEngine.meta);
+  const resultBuckets = computed(() => searchEngine.meta.buckets);
+  const { activeFilters, filtersCount } = useSearchActiveFilters(props);
+  watch(searchEngine.params, () => {
+    searchEngine.fetch();
+  });
+  let _lastParamChanged: null | string = null;
+  const clearFilters = () => {
+    Object.keys(searchEngine.params).forEach((param) => {
+      if (fixedParams?.[param]) return;
+      delete searchEngine.params[param];
+    });
+    _lastParamChanged = null;
+  };
+
+  const getPriceRangeKey = ({ min, max }: Partial<PriceRange>) => {
+    return `${min || null}/${max || null}`;
+  };
+  const currentPriceRange = computed(() => {
+    const { params } = searchEngine;
+    return {
+      min: Number(params['price>']),
+      max: Number(params['price<']),
+    };
+  });
+  const priceRanges = ref<Array<{ range: PriceRange, key: string }>>([]);
+  const _updatePriceRanges = useDebounceFn(() => {
+    priceRanges.value.splice(0);
+    resultBuckets.value?.prices?.forEach((priceRange) => {
+      if (priceRange.min) priceRange.min = Math.round(priceRange.min * 100) / 100;
+      if (priceRange.max) priceRange.max = Math.round(priceRange.max * 100) / 100;
+      priceRanges.value.push({
+        range: priceRange,
+        key: getPriceRangeKey(priceRange),
+      });
+    });
+    if (!Number.isNaN(currentPriceRange.value.min)) {
+      const checkedPriceRange = priceRanges.value.find(({ range }) => {
+        return range.min === currentPriceRange.value.min
+          && range.max === currentPriceRange.value.max;
+      });
+      if (!checkedPriceRange) {
+        priceRanges.value.unshift({
+          range: {
+            ...currentPriceRange.value,
+            count: resultMeta.value.count || 0,
+            avg: null,
+          },
+          key: getPriceRangeKey(currentPriceRange.value),
+        });
+      }
+    }
+  }, 50);
+  _updatePriceRanges();
+  const priceRangeKey = ref<string | null>(getPriceRangeKey(currentPriceRange.value));
+  watch(priceRangeKey, () => {
+    _lastParamChanged = 'price';
+    const priceRange = priceRanges.value.find(({ range }) => {
+      return getPriceRangeKey(range) === priceRangeKey.value;
+    });
+    if (priceRange) {
+      const { min, max } = priceRange.range;
+      if (min) {
+        searchEngine.params['price>'] = min;
+      } else {
+        delete searchEngine.params['price>'];
+      }
+      if (max) {
+        searchEngine.params['price<'] = max;
+      } else {
+        delete searchEngine.params['price<'];
+      }
+      return;
+    }
+    delete searchEngine.params['price>'];
+    delete searchEngine.params['price<'];
+  });
+  const getPriceRangeLabel = ({ min, max }: PriceRange) => {
+    if (min && max) {
+      if (max === min) {
+        return formatMoney(max);
+      }
+      return `${formatMoney(min)} ${i19upTo.toLowerCase()} ${formatMoney(max)}`;
+    }
+    if (!min && max) {
+      return `${i19upTo} ${formatMoney(max)}`;
+    }
+    return `${i19aboveOf} ${formatMoney(min || 0)}`;
+  };
+
+  const filterOptions = ref<Array<{
+    title: string,
+    options: { [value: string]: number },
+    field: string,
+  }>>([]);
+  const _updateFilterOptions = useDebounceFn(() => {
+    for (let i = 0; i < filterOptions.value.length; i++) {
+      const { field } = filterOptions.value[i];
+      if (field !== _lastParamChanged) {
+        filterOptions.value.splice(i, 1);
+        i -= 1;
+      }
+    }
+    const buckets = resultBuckets.value;
+    if (buckets) {
+      [['brands', i19brands], ['categories', i19categories]]
+        .forEach(([resource, title]) => {
+          const field = `${resource}.name`;
+          if (buckets[field] && _lastParamChanged !== field) {
+            filterOptions.value.push({
+              title,
+              options: buckets[field],
+              field,
+            });
+          }
+        });
+      if (buckets.specs) {
+        const { grids } = globalThis.$storefront.data;
+        Object.keys(buckets.specs).forEach((specAndVal) => {
+          const [spec, value] = specAndVal.split(':');
+          if (value) {
+            const field = `specs.${spec}`;
+            if (_lastParamChanged === field) return;
+            const title = getGridTitle(spec, grids || []);
+            let filterOption = filterOptions.value.find((_filterOption) => {
+              return _filterOption.field === field;
+            });
+            if (!filterOption) {
+              filterOption = { title, options: {}, field };
+              filterOptions.value.push(filterOption);
+            }
+            filterOption.options[value] = buckets.specs![specAndVal];
+          }
+        });
+      }
+    }
+  }, 50);
+  _updateFilterOptions();
+  const parseSpecsField = (field: string, value: string | number) => {
+    const [, spec] = field.split('.');
+    return ['specs,', `${spec}:${value}`];
+  };
+  const checkFilterOption = (field: string, value: string | number) => {
+    if (field.startsWith('specs.')) {
+      [field, value] = parseSpecsField(field, value);
+    }
+    const fieldParams = activeFilters.value[field];
+    if (fieldParams === value) return true;
+    // @ts-ignore
+    if (Array.isArray(fieldParams) && fieldParams.includes(value)) return true;
+    return false;
+  };
+  const toggleFilterOption = (field: string, value: string | number) => {
+    _lastParamChanged = field;
+    console.log({ _lastParamChanged });
+    if (field.startsWith('specs.')) {
+      [field, value] = parseSpecsField(field, value);
+    }
+    const isToActivate = !checkFilterOption(field, value);
+    let fieldParams = searchEngine.params[field];
+    if (!Array.isArray(fieldParams)) {
+      fieldParams = [];
+      searchEngine.params[field] = fieldParams;
+    }
+    if (isToActivate) {
+      // @ts-ignore
+      fieldParams.push(value);
+    } else {
+      for (let i = 0; i < fieldParams.length; i++) {
+        if (fieldParams[i] === value) {
+          fieldParams.splice(i, 1);
+          break;
+        }
+      }
+    }
+  };
+  watch(resultBuckets, () => {
+    if (_lastParamChanged !== 'price') {
+      _updatePriceRanges();
+    }
+    _updateFilterOptions();
+  });
+
+  return {
+    resultMeta,
+    resultBuckets,
+    activeFilters,
+    filtersCount,
+    clearFilters,
+    getPriceRangeKey,
+    priceRanges,
+    priceRangeKey,
+    getPriceRangeLabel,
+    filterOptions,
+    checkFilterOption,
+    toggleFilterOption,
+  };
+};
+
+export default useSearchFilters;
+
+export { useSearchFilters, useSearchActiveFilters };

package/packages/storefront/src/lib/composables/use-search-modal.ts

@@ -1,8 +1,4 @@
-import type {
-  Categories,
-  Brands,
-  Collections,
-} from '@cloudcommerce/api/types';
+import type { Categories } from '@cloudcommerce/api/types';
 import { ref, watch, toRef } from 'vue';
 import Wade from 'wade';
 import { clearAccents } from '@@sf/sf-lib';
@@ -14,18 +10,13 @@ export interface Props {
   productsLimit?: number;
 }
 
-const storefrontData = globalThis.$storefront.data as {
-  categories?: Array<Partial<Categories>>,
-  brands?: Array<Partial<Brands>>,
-  collections?: Array<Partial<Collections>>,
-};
 const wadeDocs: Array<{
   text: string,
   type: 'categories' | 'brands' | 'collections' | 'blog',
   data: Record<string, any> & { name: string, slug: string },
 }> = [];
 (['categories', 'brands', 'collections'] as const).forEach((resource) => {
-  const docsList = storefrontData[resource];
+  const docsList = globalThis.$storefront.data[resource];
   if (docsList) {
     for (let i = 0; i < docsList.length; i++) {
       const doc = docsList[i];

package/packages/storefront/src/lib/composables/use-search-showcase.ts

@@ -1,18 +1,40 @@
+import type { Ref } from 'vue';
 import type { SearchItem } from '@cloudcommerce/types';
-import { watch, shallowReactive } from 'vue';
+import type { SearchEngineInstance } from '@@sf/state/search-engine';
+import {
+  ref,
+  computed,
+  watch,
+  shallowReactive,
+} from 'vue';
+import { useUrlSearchParams, watchOnce } from '@vueuse/core';
+import { isScreenLg, scrollToEl } from '@@sf/sf-lib';
+import {
+  i19discount,
+  i19highestPrice,
+  i19lowestPrice,
+  i19name,
+  i19releases,
+  i19relevance,
+  i19sales,
+} from '@@i18n';
 import { SearchEngine } from '@@sf/state/search-engine';
+import { useSearchActiveFilters } from '@@sf/composables/use-search-filters';
 
 export interface Props {
-  searchEngine?: InstanceType<typeof SearchEngine>;
   term?: string | null;
-  params?: Record<string, any>;
-  sort?: '-sales' | '-created_at' | 'price' | '-price' | '-price_discount' | string;
-  products?: SearchItem[];
+  fixedParams?: SearchEngineInstance['params'];
+  products?: SearchItem<null>[];
+  resultMeta?: SearchEngineInstance['meta'];
   ssrError?: string | null;
+  canUseUrlParams?: boolean;
+  showcase?: Ref<HTMLElement | null>;
 }
 
 const useSearchShowcase = (props: Props) => {
-  let { term, searchEngine } = props;
+  let { term } = props;
+  const canUseUrlParams = props.canUseUrlParams !== false;
+  const urlParams = canUseUrlParams ? useUrlSearchParams('history') : null;
   if (props.ssrError && !import.meta.env.SSR) {
     console.error(new Error(`SSR search error: ${props.ssrError}`));
     if (window.location.pathname.startsWith('/s/')) {
@@ -20,33 +42,157 @@ const useSearchShowcase = (props: Props) => {
     }
   }
   const products = shallowReactive<SearchItem[]>(props.products || []);
-  if (!searchEngine) {
-    searchEngine = new SearchEngine({ debounce: 50 });
-    if (term === undefined && !import.meta.env.SSR) {
-      term = new URLSearchParams(window.location.search).get('q') || null;
-    }
-    if (term !== undefined) {
-      searchEngine.term.value = term;
-    }
-    if (props.params) {
-      Object.assign(searchEngine.params, props.params);
+  const searchEngine = new SearchEngine({ debounce: 50 });
+  if (term === undefined && !import.meta.env.SSR) {
+    term = new URLSearchParams(window.location.search).get('q') || null;
+  }
+  if (term !== undefined) {
+    searchEngine.term.value = term;
+  }
+  Object.assign(searchEngine.params, props.fixedParams);
+  if (urlParams) {
+    Object.keys(urlParams).forEach((param) => {
+      if (param === 'sort') {
+        searchEngine.params.sort = urlParams.sort;
+        return;
+      }
+      if (param === 'p') {
+        const pageNumber = parseInt(String(urlParams.p), 10);
+        if (pageNumber >= 1) searchEngine.pageNumber.value = pageNumber;
+        return;
+      }
+      if (param.startsWith('f\\')) {
+        const field = param.substring(2);
+        searchEngine.params[field] = urlParams[param];
+      }
+    });
+  }
+  if (!searchEngine.wasFetched.value) {
+    if (props.products || props.resultMeta) {
+      searchEngine.setResult({
+        result: props.products,
+        meta: props.resultMeta,
+      });
     }
-    if (props.sort) {
-      searchEngine.params.sort = props.sort;
+    if (!props.products) {
+      searchEngine.fetch().catch(console.error);
     }
   }
-  if (!searchEngine.wasFetched.value && !props.products) {
-    searchEngine.fetch().catch(console.error);
-  }
+  searchEngine.isWithCount.value = true;
+  searchEngine.isWithBuckets.value = true;
+  const resultMeta = ref({
+    count: 0,
+    ...(props.resultMeta || searchEngine.meta),
+  });
   watch(searchEngine.products, () => {
     products.splice(0);
-    searchEngine?.products.forEach((item) => products.push(item));
+    searchEngine.products.forEach((item) => products.push(item));
+    resultMeta.value = {
+      count: 0,
+      ...searchEngine.meta,
+    };
+  });
+
+  const totalPages = computed(() => {
+    const { count } = searchEngine.meta;
+    if (!count || products.length < 2) return 1;
+    return Math.ceil(count / searchEngine.pageSize.value);
+  });
+  watch(searchEngine.pageNumber, (pageNumber) => {
+    if (urlParams) {
+      urlParams.p = `${pageNumber}`;
+    }
+    searchEngine.fetch();
   });
+  const startWatchingFetch = () => {
+    watch(searchEngine.isFetching, (isFetching) => {
+      const el = props.showcase?.value;
+      if (!isFetching && el) {
+        setTimeout(() => {
+          scrollToEl(el, isScreenLg ? -25 : 0);
+        }, 50);
+      }
+    });
+  };
+  if (searchEngine.wasFetched.value) {
+    startWatchingFetch();
+  } else {
+    watchOnce(searchEngine.wasFetched, startWatchingFetch);
+  }
+
+  const { activeFilters, filtersCount } = useSearchActiveFilters({
+    searchEngine,
+    fixedParams: props.fixedParams,
+  });
+  if (urlParams) {
+    watch(activeFilters, (params) => {
+      if (urlParams) {
+        Object.keys(urlParams).forEach((param) => {
+          if (param.startsWith('f\\')) delete urlParams[param];
+        });
+      }
+      Object.keys(params).forEach((param) => {
+        const val = params[param];
+        if (typeof val === 'string' || typeof val === 'number') {
+          urlParams[`f\\${param}`] = `${val}`;
+          return;
+        }
+        if (Array.isArray(val) && typeof val[0] === 'string') {
+          urlParams[`f\\${param}`] = val as string[];
+        }
+      });
+    });
+  }
+  const sortOptions = [
+    {
+      value: null,
+      label: i19relevance,
+    }, {
+      value: '-sales',
+      label: i19sales,
+    }, {
+      value: 'price',
+      label: i19lowestPrice,
+    }, {
+      value: '-price',
+      label: i19highestPrice,
+    }, {
+      value: '-price_discount',
+      label: i19discount,
+    }, {
+      value: '-created_at',
+      label: i19releases,
+    }, {
+      value: 'name',
+      label: i19name,
+    },
+  ];
+  const sortOption = ref<string | null>(null);
+  watch(sortOption, () => {
+    searchEngine.params.sort = sortOption.value || undefined;
+    searchEngine.fetch();
+  });
+  if (urlParams) {
+    if (typeof urlParams.sort === 'string' && urlParams.sort) {
+      sortOption.value = urlParams.sort;
+    }
+    watch(searchEngine.params, (params) => {
+      delete urlParams.sort;
+      if (params.sort) urlParams.sort = String(params.sort);
+    });
+  }
+
   return {
     searchEngine,
     fetching: searchEngine.fetching.value,
     isFetching: searchEngine.isFetching,
     products,
+    resultMeta,
+    totalPages,
+    activeFilters,
+    filtersCount,
+    sortOptions,
+    sortOption,
   };
 };
 

package/packages/storefront/src/lib/composables/use-sku-selector.ts

@@ -1,8 +1,4 @@
-import type {
-  ResourceId,
-  Products,
-  GridsList,
-} from '@cloudcommerce/api/types';
+import type { ResourceId, Products } from '@cloudcommerce/api/types';
 import {
   ref,
   computed,
@@ -25,9 +21,8 @@ export interface Props {
 }
 
 const useSkuSelector = (props: Props) => {
-  let grids = shallowReactive<GridsList<null>>(globalThis.$storefront.data.grids);
-  if (!grids) {
-    grids = shallowReactive([]);
+  const grids = shallowReactive(globalThis.$storefront.data.grids || []);
+  if (!grids.length) {
     api.get('grids').then(({ data: { result } }) => {
       result.forEach((grid) => grids.push(grid));
     });

package/packages/storefront/src/lib/layouts/use-page-main.ts

@@ -56,10 +56,13 @@ export const usePageSections = async <T extends CustomSection = CustomSection>
     | { type: 'banners-grid', props: { banners: UseBannerProps[] } }
     | { type: 'product-details', props: ProductDetailsProps }
     | { type: 'breadcrumbs', props: {} }
-    | { type: 'related-products', props: {} }
+    | { type: 'related-products', props: UseProductShelfProps }
     | { type: 'doc-description', props: {} }
+    | { type: 'doc-banners', props: {} }
     | { type: 'product-specifications', props: {} }
     | { type: 'search-showcase' | 'context-showcase', props: UseSearchShowcaseProps }
+    | { type: 'page-title', props: {} }
+    | { type: 'custom-html', props: { html: string } }
   > = [];
   if (sectionsContent) {
     await Promise.all(sectionsContent.map(async ({ type, ...sectionContent }, index) => {
@@ -134,32 +137,33 @@ export const usePageSections = async <T extends CustomSection = CustomSection>
           }
           const { resource, doc } = routeContext.apiContext;
           if (resource === 'categories' || resource === 'brands') {
-            const params = { [`${resource}.slug`]: [doc!.slug] };
+            const params = { [`${resource}.name`]: [doc!.name] };
             if (resource === 'categories') {
               const { value: categories } = await useSharedData({ field: 'categories' });
-              categories?.forEach(({ slug, parent }) => {
+              categories?.forEach(({ name, parent }) => {
                 if (
-                  slug && parent
+                  name && parent
                   && (parent._id === doc!._id || parent.slug === doc!.slug)
                 ) {
-                  params[`categories.slug`].push(slug);
+                  params[`categories.name`].push(name);
                 }
               });
             }
-            props.params = params;
+            props.fixedParams = params;
           } else if (resource === 'collections') {
             const { products } = (doc as Collections);
             if (products?.length) {
-              props.params = { _id: products };
+              props.fixedParams = { _id: products };
             }
           }
         } else if (routeContext.searchPageTerm !== undefined) {
           props.term = routeContext.searchPageTerm || null;
         }
-        if (props.term !== undefined || props.params) {
+        if (props.term !== undefined || props.fixedParams) {
           const { searchEngine, fetching } = useSearchShowcase(props);
           await fetching;
           props.products = searchEngine.products;
+          props.resultMeta = searchEngine.meta;
           props.ssrError = searchEngine.fetchError.value?.message;
         }
         sections[index] = { type, props };
@@ -180,13 +184,21 @@ export const usePageSections = async <T extends CustomSection = CustomSection>
         case 'product-details':
         case 'related-products':
         case 'doc-description':
+        case 'doc-banners':
         case 'product-specifications':
+        case 'page-title':
           // Bypassed sections
           sections[index] = {
             type,
             props: sectionContent,
           };
           return;
+        case 'custom-html':
+          sections[index] = {
+            type,
+            props: { html: sectionContent.html || '' },
+          };
+          return;
         default:
       }
       if (typeof handleCustomSection === 'function') {