Skip to content

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 ​

ts
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 ​

ts
export function createListingComposable({
  searchMethod,
  searchDefaults,
  listingKey,
}: {
  searchMethod(
    searchParams:
      | RequestParameters<"readProductListing">
      | RequestParameters<"searchPage">,
  ): Promise<Schemas["ProductListingResult"]>;
  searchDefaults: RequestParameters<"searchPage">;
  listingKey: string;
}): UseListingReturn 

Parameters ​

NameTypeDescription
{ searchMethod, searchDefaults, listingKey, }
{
  searchMethod(
    searchParams:
      | RequestParameters<"readProductListing">
      | RequestParameters<"searchPage">,
  ): Promise<Schemas["ProductListingResult"]>;
  searchDefaults: RequestParameters<"searchPage">;
  listingKey: string;
}

Return type ​

See UseListingReturn
ts
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: RequestParameters<"searchPage">,
  ): Promise<Schemas["ProductListingResult"]>;
  /**
   * Searches for the listing based on the criteria
   * @param criteria
   * @param options - `options.preventRouteChange` - if true, the route will not be changed
   * @returns
   */
  search(
    criteria:
      | RequestParameters<"readProductListing">
      | RequestParameters<"searchPage">,
    options?: {
      preventRouteChange?: boolean;
    },
  ): Promise<void>;
  /**
   * Loads more (next page) elements to the listing
   */
  loadMore(criteria: RequestParameters<"searchPage">): 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?: RequestParameters<"searchPage">,
  ): 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?: RequestParameters<"searchPage">,
  ): 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 ​

NameTypeDescription
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 ​

NameTypeDescription
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 has loaded