wr.shop Utilities (Actions)
Utilities are ready-to-use methods available within the wr.shop prop. Their purpose is to handle complex state changes, filter validation, and catalog API calls in a simplified manner.
Collection Navigation
These methods manage user movement within the store's category tree.
| Method | Arguments | Description |
|---|---|---|
| navigateToCollection | collectionId: string | Navigates to a specific collection, automatically updating the breadcrumb stack and related filters. |
| goBackCollection | - | Allows moving up the hierarchy, returning to the parent collection. |
Tags & Filters Management
The webround.com filtering system is designed with a two-phase logic: Staging (selection) and Commit (application). This prevents continuous reloads and unnecessary API calls.
| Method | Arguments | Description |
|---|---|---|
| toggleTagSelection | tagValueId: string | Adds or removes a tag from the "waiting list" (selectedTagValueIds). It does not reload products until applyFilters is invoked. |
| setRangeFilter | id, value, isPrice | Sets a [min, max] range for numerical or price filters. |
| resetRangeFilter | filterId: string | Removes a specific range filter while keeping others unchanged. |
| applyFilters | - | The main method: validates entered ranges, commits selected tags, and reloads products starting from page 1. |
| resetFilters | - | Instantly clears both tags and ranges, restoring the full catalog view. |
Search & Display
Utilities to manage catalog interaction and how results are presented.
| Method | Arguments | Description |
|---|---|---|
| setSearch | term: string | Updates the "temporary" search term (useful for text input while the user is typing). |
| applySearch | - | Effectively applies the current search term and updates the catalog results. |
| resetSearch | - | Clears the search term and restores the original view. |
| setSort | option: string | Changes the sorting criteria (e.g., price::asc or createdAt::desc). |
| setPage / setLimit | value: number | Manage page switching and the number of products per page, respectively. |
| setCurrency | code: string | Changes the global currency (e.g., EUR, USD), triggering price recalculations for SKUs. |
Entity Selection (Detail)
These utilities synchronize the interface with the specific entity the user is interacting with. They are essential for managing the logic of components like product cards, Quick Views, or detail pages.
| Method | Arguments | Description |
|---|---|---|
| selectProduct | product: Product | Sets the main product. Useful for initializing the view or handling custom graphical overrides based on product metadata. |
| selectVariant | variant: Variant | Updates the active variant. Usually invoked when clicking on swatches (e.g., color change) to load new multimedia assets. |
| selectSku | sku: Sku | Identifies the specific SKU ready for purchase after the user has completed option selection (size, weight, etc.). |
For an optimal user experience, use toggleTagSelection and setRangeFilter to allow users to compose their filters in a side panel, and invoke applyFilters() only when a "See Results" button is pressed. This ensures high performance and smooth navigation by reducing asynchronous API calls.
If you decide to implement instant filtering, call applyFilters periodically. We recommend using a debounce to avoid excessive calls, which could lead to rate-limit blocks.