Appearance
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<"searchPage">,
): Promise<Schemas["ProductListingResult"]>;
searchDefaults: RequestParameters<"searchPage">;
listingKey: string;
}): UseListingReturn
Parameters ​
Name | Type | Description |
---|---|---|
{ searchMethod, searchDefaults, listingKey, } | { searchMethod( searchParams: 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<"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 ​
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>