createListingComposable

Definition

Factory to create your own listing.

By default you can use useListing composable, which provides you predefined listings for category(cms) listing and product search listing. Using factory you can provide our own compatible search method and use it for example for creating listing of orders in my account.

Basic usage

const { 
 getInitialListing,
 getCurrentListing,
 getElements,
 getSortingOrders,
 getCurrentSortingOrder,
 getCurrentPage,
 getTotal,
 getTotalPagesCount,
 getLimit,
 getInitialFilters,
 getAvailableFilters,
 getCurrentFilters,
 loading,
 loadingMore,
 setInitialListing,
 initSearch,
 search,
 loadMore,
 changeCurrentSortingOrder,
 changeCurrentPage,
 setCurrentFilters,
 resetFilters,
 filtersToQuery 
} = useListing(params);

Signature

export function createListingComposable({
  searchMethod,
  searchDefaults,
  listingKey,
}: {
  searchMethod(
    searchParams:
      | operations["readProductListing post /product-listing/{categoryId}"]["body"]
      | operations["searchPage post /search"]["body"],
  ): Promise<Schemas["ProductListingResult"]>;
  searchDefaults: operations["searchPage post /search"]["body"];
  listingKey: string;
}): UseListingReturn

Parameters

Name	Type	Description
{ searchMethod, searchDefaults, listingKey, }	{ searchMethod( searchParams: \| operations["readProductListing post /product-listing/{categoryId}"]["body"] \| operations["searchPage post /search"]["body"], ): Promise<Schemas["ProductListingResult"]>; searchDefaults: operations["searchPage post /search"]["body"]; listingKey: string; }

Name

Type

Description

{ searchMethod, searchDefaults, listingKey, }

{
  searchMethod(
    searchParams:
      | operations["readProductListing post /product-listing/{categoryId}"]["body"]
      | operations["searchPage post /search"]["body"],
  ): Promise<Schemas["ProductListingResult"]>;
  searchDefaults: operations["searchPage post /search"]["body"];
  listingKey: string;
}

Return type

See UseListingReturn

export type UseListingReturn = {
  /**
   * Listing that is currently set
   * {@link ListingResult} object
   */
  getInitialListing: ComputedRef<Schemas["ProductListingResult"] | null>;
  /**
   * Sets the initial listing - available synchronously
   * @param {@link initialListing} - initial listing to set
   * @returns
   */
  setInitialListing(
    initialListing: Schemas["ProductListingResult"],
  ): Promise<void>;
  /**
   * @deprecated - use `search` instead
   * Searches for the listing based on the criteria
   * @param criteria {@link Schemas['Criteria']}
   * @returns
   */
  initSearch(
    criteria: operations["searchPage post /search"]["body"],
  ): Promise<Schemas["ProductListingResult"]>;
  /**
   * Searches for the listing based on the criteria
   * @param criteria
   * @returns
   */
  search(
    criteria:
      | operations["readProductListing post /product-listing/{categoryId}"]["body"]
      | operations["searchPage post /search"]["body"],
  ): Promise<void>;
  /**
   * Loads more (next page) elements to the listing
   */
  loadMore(
    criteria: operations["searchPage post /search"]["body"],
  ): Promise<void>;
  /**
   * Listing that is currently set
   */
  getCurrentListing: ComputedRef<Schemas["ProductListingResult"] | null>;
  /**
   * Listing elements ({@link Product}) that are currently set
   */
  getElements: ComputedRef<Schemas["ProductListingResult"]["elements"]>;
  /**
   * Available sorting orders
   */
  getSortingOrders: ComputedRef<
    Schemas["ProductSorting"][] | { key: string; label: string }[] | undefined
  >;
  /**
   * Current sorting order
   */
  getCurrentSortingOrder: ComputedRef<string | undefined>;
  /**
   * Changes the current sorting order
   * @param order - i.e. "name-asc"
   * @returns
   */
  changeCurrentSortingOrder(
    order: string,
    query?: operations["searchPage post /search"]["body"],
  ): Promise<void>;
  /**
   * Current page number
   */
  getCurrentPage: ComputedRef<number>;
  /**
   * Changes the current page number
   * @param pageNumber - page number to change to
   * @returns
   */
  changeCurrentPage(
    page: number,
    query?: operations["searchPage post /search"]["body"],
  ): Promise<void>;
  /**
   * Total number of elements found for the current search criteria
   */
  getTotal: ComputedRef<number>;
  /**
   * Total number of pages found for the current search criteria
   */
  getTotalPagesCount: ComputedRef<number>;
  /**
   * Number of elements per page
   */
  getLimit: ComputedRef<number>;
  /**
   * Initial filters
   */
  getInitialFilters: ComputedRef<ReturnType<typeof getListingFilters>>;
  /**
   * All available filters
   */
  getAvailableFilters: ComputedRef<ReturnType<typeof getListingFilters>>;
  /**
   * Filters that are currently set
   */
  getCurrentFilters: ComputedRef<any>;
  /**
   * Sets the filters to be applied for the listing
   * @param filters
   * @returns
   */
  setCurrentFilters(filters: any): Promise<void>;
  /**
   * Indicates if the listing is being fetched
   */
  loading: ComputedRef<boolean>;
  /**
   * Indicates if the listing is being fetched via `loadMore` method
   */
  loadingMore: ComputedRef<boolean>;
  /**
   * Resets the filters - clears the current filters
   */
  resetFilters(): Promise<void>;
  /**
   * Change selected filters to the query object
   */
  filtersToQuery(filters: any): Record<string, any>;
};

Properties

Name	Type	Description
getInitialListing	ComputedRef< \| null>	Listing that is currently set{@link ListingResult} object
getCurrentListing	ComputedRef< \| null>	Listing that is currently set
getElements	ComputedRef<>	Listing elements ({@link Product}) that are currently set
getSortingOrders	ComputedRef<Array<> \| Array<{ key: string; label: string }> \| undefined>	Available sorting orders
getCurrentSortingOrder	ComputedRef<string \| undefined>	Current sorting order
getCurrentPage	ComputedRef<number>	Current page number
getTotal	ComputedRef<number>	Total number of elements found for the current search criteria
getTotalPagesCount	ComputedRef<number>	Total number of pages found for the current search criteria
getLimit	ComputedRef<number>	Number of elements per page
getInitialFilters	ComputedRef<ReturnType<>>	Initial filters
getAvailableFilters	ComputedRef<ReturnType<>>	All available filters
getCurrentFilters	ComputedRef<any>	Filters that are currently set
loading	ComputedRef<boolean>	Indicates if the listing is being fetched
loadingMore	ComputedRef<boolean>	Indicates if the listing is being fetched via `loadMore` method

Methods

Name	Type	Description
setInitialListing	Promise<void>	Sets the initial listing - available synchronously
initSearch	Promise<>
search	Promise<void>	Searches for the listing based on the criteria
loadMore	Promise<void>	Loads more (next page) elements to the listing
changeCurrentSortingOrder	Promise<void>	Changes the current sorting order
changeCurrentPage	Promise<void>	Changes the current page number
setCurrentFilters	Promise<void>	Sets the filters to be applied for the listing
resetFilters	Promise<void>	Resets the filters - clears the current filters
filtersToQuery	Record<string, any>	Change selected filters to the query object

Usage

vue

<script setup lang="ts">
// TODO: add example
</script>

createListingComposable ​

Definition ​

Basic usage ​

Signature ​

Parameters ​

Return type ​

Properties ​

Methods ​

Usage ​