The wr.shop Object
This element is available within all custom components via the wr prop. Its purpose is to:
- Track all retrieved data for the catalog and store, such as products, filters, and store collections.
- Expose methods and state-change utilities regarding selected products and variants.
- Expose methods and utilities to simplify filter usage, collection navigation, or the application of search terms within the catalog.
wr.shop.state
This object serves as the bridge between custom components and the app's catalog state. Its most significant element is cache, as it contains:
- attributes: All visible and relevant catalog attributes.
- tags: All visible and relevant catalog tags.
- collections: The entire collection tree of your store.
- filters: Range-type filters to be applied to searches.
- products: All products requested from the APIs.
- store: Detailed settings and configurations of your store.
wr.shop.state.cache.attributes
It is a container for all the public and relevant attributes of your store.
Example:
{
"items": [
{
"id": "3aac3a70-826d-48f2-809d-fc3992420829",
"name": "Date",
"label": null,
"type": "date",
"format": "date",
"relevant": true,
"sortable": true,
"icon": "react-icons/io5#IoCalendarNumber",
"position": 0
},
{
"id": "71ce9ece-b772-4254-be20-ea0e7781ebc5",
"name": "Number",
"label": null,
"type": "number",
"format": null,
"relevant": true,
"sortable": true,
"icon": null,
"position": 1
}
]
}
wr.shop.state.cache.tags
It is a container for all the public and relevant tags of your store.
Example:
{
"items": [
{
"id": "bbbdb0e1-0829-43a6-867d-2f26b2b2186f",
"name": "Brand",
"label": null,
"type": "string",
"format": null,
"sortable": false,
"relevant": true,
"icon": null,
"position": 0,
"values": [
{
"id": "05b3701e-c6ba-44b1-afd9-a7f0e168b031",
"value": "Nike",
"alias": null,
"position": 0
},
{
"id": "b4a03a7e-8194-47e1-8dce-b03895aa639e",
"value": "Adidas",
"alias": null,
"position": 0
},
{
"id": "b248c2d3-5df3-4b1a-ba96-5cb56ef69a79",
"value": "Generic",
"alias": null,
"position": 0
}
]
}
]
}
wr.shop.state.cache.collections
It represents the collection tree of your store. You can navigate all the hierarchy by accessing the children element.
Example:
{
"items": [
{
"id": "ee91d632-ca63-400e-b93d-4369c080da4e",
"name": "Clothing",
"slug": "abbigliamento",
"parentId": null,
"position": 0,
"visible": true,
"filterIds": [
"7d88d702-0684-411f-89ba-5ab13c06fa51"
],
"children": []
},
{
"id": "c27862fa-a379-422f-9dde-cebc1068e472",
"name": "Weights",
"slug": "pesistica",
"parentId": null,
"position": 1,
"visible": true,
"filterIds": [],
"children": []
},
{
"id": "cf7ea788-2445-42e7-97cc-5266f407fdd1",
"name": "Subscriptions",
"slug": "abbonamenti",
"parentId": null,
"position": 2,
"visible": true,
"filterIds": [],
"children": []
}
]
}
wr.shop.state.cache.filters
It contains all the range filters for this store.
Example:
{
"items": [
{
"id": "af5eb34f-5e05-4c5e-9f57-3990fd72b591",
"name": "Range filter number",
"operator": "AND",
"position": 1,
"visible": true,
"conditionIds": [
"57f3230f-4944-456f-b0fd-28ae5092e1a8"
],
"type": "number",
"conditions": [
{
"id": "57f3230f-4944-456f-b0fd-28ae5092e1a8",
"operator": "range",
"min": 0,
"max": 100,
"type": "attribute",
"attributeId": "71ce9ece-b772-4254-be20-ea0e7781ebc5",
"attribute": {
"id": "71ce9ece-b772-4254-be20-ea0e7781ebc5",
"type": "number",
"name": "Number",
"format": null
}
}
]
},
{
"id": "3a029e31-fc5f-42b5-9984-dd6346ec978f",
"name": "Range filter date",
"operator": "AND",
"position": 2,
"visible": true,
"conditionIds": [
"e954cf7f-ecdd-40e3-bf72-8c10ca1452e0"
],
"type": "date",
"conditions": [
{
"id": "e954cf7f-ecdd-40e3-bf72-8c10ca1452e0",
"operator": "range",
"min": null,
"max": null,
"type": "attribute",
"attributeId": "3aac3a70-826d-48f2-809d-fc3992420829",
"attribute": {
"id": "3aac3a70-826d-48f2-809d-fc3992420829",
"type": "date",
"name": "Date",
"format": "date"
}
}
]
},
{
"id": "a9b1656d-b624-4ddd-8192-b6d2fd4d057f",
"name": "Range filter price",
"operator": "AND",
"position": 0,
"visible": true,
"conditionIds": [
"d6a5ca50-b33c-439f-8220-9b9e3232ee03"
],
"type": "price",
"conditions": [
{
"id": "d6a5ca50-b33c-439f-8220-9b9e3232ee03",
"operator": "range",
"min": 0,
"max": 1000000,
"type": "price",
"attributeId": null,
"attribute": null
}
]
}
]
}
wr.shop.state.cache.store
It stores all you store informations.
Example:
{
"defaultCurrencyCode": "EUR",
"defaultCadence": "once",
"defaultCountryCode": "IT",
"defaultLangCode": "it",
"languages": [
"en",
"de",
"fr",
"es"
],
"currencies": [
"EUR",
"USD",
"GBP"
],
"cadences": [
"yearly",
"daily",
"monthly",
"semiannual",
"weekly",
"quarterly",
"once"
],
"stripeCustomerPortalUrl": "https://billing.stripe.com/p/..."
}
wr.shop.state.cache.products
This contains all the search results retrieved via APIs. It is an object with dynamic entries, where each key is a serialized string of the API call following the pattern 'method::endpoint::parameters::body', and the value is the result of that specific call.
Example:
{
"POST::public/products?{}::{\"sortBy\":\"createdAt\",\"sortDirection\":\"desc\",\"cadence\":\"once\",\"filterIds\":[],\"tagValueIds\":[],\"page\":1,\"limit\":12,\"includeAssets\":true,\"includeTagValues\":true,\"includeAttributes\":true,\"includeVariantAssets\":true,\"includeVariantTagValues\":true,\"includeVariantAttributes\":true,\"includeNestedVariants\":true,\"includeOptions\":true,\"currencyCode\":\"EUR\"}": {
"data": [
{
"id": "6cd8ad36-21eb-4c1c-b554-58315b70fed3",
"name": "Nike Pegasus 41",
"metadata": {},
"assets": [],
"tags": [
{
"id": "bbbdb0e1-0829-43a6-867d-2f26b2b2186f",
"name": "Brand",
"relevant": true,
"sortable": false,
"filterable": true,
"type": "string",
"values": [
{
"id": "05b3701e-c6ba-44b1-afd9-a7f0e168b031",
"value": "Nike",
"alias": ""
}
]
}
],
"options": [],
"attributes": [
{
"id": "3aac3a70-826d-48f2-809d-fc3992420829",
"name": "Date",
"relevant": true,
"sortable": true,
"type": "date",
"format": "date",
"icon": "react-icons/io5#IoCalendarNumber",
"value": "2025-12-15T21:14:00+01:00"
},
{
"id": "71ce9ece-b772-4254-be20-ea0e7781ebc5",
"name": "ddNumber",
"relevant": true,
"sortable": true,
"type": "number",
"value": "14"
}
],
"reviews": {
"rating": 5,
"count": 1
},
"variants": [
{
"id": "08d2a27f-19b4-41aa-b380-ddebb01ac6d4",
"name": "Nike Pegasus",
"slug": "nike-pegasus-704a84-eedb47",
"metadata": {},
"isFavourite": false,
"productId": "6cd8ad36-21eb-4c1c-b554-58315b70fed3",
"availability": "available",
"inheritAssets": true,
"inheritAttributes": true,
"inheritTagValues": true,
"tags": [
{
"id": "1c0edb9e-c2fd-41eb-960a-f17723beeb52",
"name": "Color",
"relevant": true,
"sortable": false,
"filterable": true,
"type": "string",
"format": null,
"icon": "",
"values": [
{
"alias": "",
"id": "9538621f-c258-4793-87d5-7a112e20a3e1",
"value": "Green"
},
{
"alias": "",
"id": "01f6db41-6454-4be9-9c76-2e45ae0b6db6",
"value": "Black"
}
]
}
],
"assets": [
{
"id": "96228bd5-5dd5-417c-9c74-4f4df3f53efe",
"url": "https://webrounddev.b-cdn.net/rMa8bmEA2Yg9aYk5PgZPejecmIB2/a7734977-c5b1-49a4-911c-0b0bf745bd4f/commerce/images/1764668133827-Immagine_incollata.png",
"type": "image",
"position": 0,
"thumbnail": "",
"inherited": false
}
],
"attributes": [],
"priceRanges": [
{
"currencyCode": "EUR",
"cadence": "once",
"netMin": 139,
"netMax": 139,
"grossMin": 169.57999999999998,
"grossMax": 169.57999999999998,
"compareNetMin": 0,
"compareNetMax": 0,
"compareGrossMin": 0,
"compareGrossMax": 0,
"rate": 22
}
],
"skus": [
{
"allowFreeShipping": false,
"backorderDays": 0,
"quantity": 9,
"allowBackorder": false,
"mpn": "",
"ean": "",
"forceFreeShipping": false,
"options": {
"2d395c94-552a-4dbf-95de-230f94e0844c": "eccd7e69-2aa2-4bbc-92ef-75a07f0a01e6"
},
"purchaseRestock": false,
"sku": "NIK-A6B512-283BBA",
"prices": [
{
"amount": 139,
"isDefault": true,
"comparePrice": 0,
"quantityTable": null,
"externalId": "",
"id": "3ec67ca3-1563-4161-b90e-e144d5a8f206",
"currencyCode": "EUR",
"cadence": "once",
"netAmount": 139,
"grossAmount": 169.57999999999998,
"rate": 22,
"netCompare": 0,
"grossCompare": 0
}
],
"isFavourite": false,
"maxOrderQuantity": 30,
"id": "cc026e04-9eb0-4d6f-aa72-a782eb9550db"
},
{
"allowFreeShipping": false,
"backorderDays": 0,
"quantity": 10,
"allowBackorder": false,
"mpn": "",
"ean": "",
"forceFreeShipping": false,
"options": {
"2d395c94-552a-4dbf-95de-230f94e0844c": "c0a8d6b1-3c4b-4086-b7f3-d9bf9e3ee667"
},
"purchaseRestock": false,
"sku": "NIK-EE3B92-DA29A6",
"prices": [
{
"amount": 139,
"isDefault": true,
"comparePrice": 0,
"quantityTable": null,
"externalId": "",
"id": "d355d868-07ae-4a87-8711-621934f84e7e",
"currencyCode": "EUR",
"cadence": "once",
"netAmount": 139,
"grossAmount": 169.57999999999998,
"rate": 22,
"netCompare": 0,
"grossCompare": 0
}
],
"isFavourite": false,
"maxOrderQuantity": 30,
"id": "2e2aa871-c1b5-4323-bded-7f22947fe605"
}
]
},
{
"id": "5866824d-7f90-4bba-9574-b7cb775bfaf7",
"name": "Nike Pegasus",
"slug": "nike-pegasus-526f28",
"metadata": {},
"isFavourite": false,
"productId": "6cd8ad36-21eb-4c1c-b554-58315b70fed3",
"availability": "available",
"inheritAssets": true,
"inheritAttributes": true,
"inheritTagValues": true,
"tags": [
{
"id": "1c0edb9e-c2fd-41eb-960a-f17723beeb52",
"name": "Color",
"relevant": true,
"sortable": false,
"filterable": true,
"type": "string",
"format": null,
"icon": "",
"values": [
{
"alias": "",
"id": "cc88ee22-86eb-409f-991d-8dff13608197",
"value": "Bianco"
}
]
}
],
"assets": [
{
"id": "2606fc94-44c3-48d5-85da-5def06af3cee",
"url": "https://webrounddev.b-cdn.net/rMa8bmEA2Yg9aYk5PgZPejecmIB2/a7734977-c5b1-49a4-911c-0b0bf745bd4f/commerce/images/1764668134556-Immagine_incollata__2_.png",
"type": "image",
"position": 0,
"thumbnail": "",
"inherited": false
}
],
"attributes": [],
"priceRanges": [
{
"currencyCode": "EUR",
"cadence": "once",
"netMin": 139,
"netMax": 140,
"grossMin": 169.57999999999998,
"grossMax": 170.79999999999998,
"compareNetMin": 0,
"compareNetMax": 0,
"compareGrossMin": 0,
"compareGrossMax": 0,
"rate": 22
}
],
"skus": [
{
"allowFreeShipping": false,
"backorderDays": 0,
"quantity": 8,
"allowBackorder": false,
"mpn": "",
"ean": "",
"forceFreeShipping": false,
"options": {
"2d395c94-552a-4dbf-95de-230f94e0844c": "eccd7e69-2aa2-4bbc-92ef-75a07f0a01e6"
},
"purchaseRestock": false,
"sku": "NIK-E172D4-FAE227",
"prices": [
{
"amount": 140,
"isDefault": true,
"comparePrice": 0,
"quantityTable": null,
"externalId": null,
"id": "d6b5e7a9-d202-4e25-a579-e4875c2ca3b8",
"currencyCode": "EUR",
"cadence": "once",
"netAmount": 140,
"grossAmount": 170.79999999999998,
"rate": 22,
"netCompare": 0,
"grossCompare": 0
}
],
"isFavourite": false,
"maxOrderQuantity": 30,
"id": "9fd983d3-17f0-409c-b29e-f51188be51c3"
},
{
"allowFreeShipping": false,
"backorderDays": 0,
"quantity": 10,
"allowBackorder": false,
"mpn": "",
"ean": "",
"forceFreeShipping": false,
"options": {
"2d395c94-552a-4dbf-95de-230f94e0844c": "c0a8d6b1-3c4b-4086-b7f3-d9bf9e3ee667"
},
"purchaseRestock": false,
"sku": "NIK-95A109-B0BA52",
"prices": [
{
"amount": 139,
"isDefault": true,
"comparePrice": 0,
"quantityTable": null,
"externalId": "",
"id": "c3227cbc-78be-4982-8db1-be8d9d3d5f13",
"currencyCode": "EUR",
"cadence": "once",
"netAmount": 139,
"grossAmount": 169.57999999999998,
"rate": 22,
"netCompare": 0,
"grossCompare": 0
}
],
"isFavourite": false,
"maxOrderQuantity": 30,
"id": "e8a08fc3-46c8-4edc-b4e0-17e09df63273"
}
]
}
]
}
],
"pagination": {
"page": 1,
"limit": 12,
"total": 5,
"totalPages": 1
}
}
}
Additional Data and Utilities
In addition to the data cache, wr.shop.state maintains critical information regarding current navigation, sorting, and pagination. This data allows components to react dynamically when the user changes pages, selects a product, or sorts items by price.
Below is an example of the wr.shop content, excluding the wr.shop.state.cache entry:
{
"state": {
"sortOption": {
"sortBy": "createdAt",
"sortDirection": "desc",
"cadence": "once"
},
"currencyCode": "EUR",
"pagination": {
"page": 1,
"limit": 12
},
"currentView": {
"entity": null,
"cacheKey": null,
"products": "POST::public/products?{}::{\"sortBy\":\"createdAt\",\"sortDirection\":\"desc\",\"cadence\":\"once\",\"filterIds\":[],\"tagValueIds\":[],\"page\":1,\"limit\":12,\"includeAssets\":true,\"includeTagValues\":true,\"includeAttributes\":true,\"includeVariantAssets\":true,\"includeVariantTagValues\":true,\"includeVariantAttributes\":true,\"includeNestedVariants\":true,\"includeOptions\":true,\"currencyCode\":\"EUR\"}"
},
"breadcrumb": [],
"searchTerm": "",
"appliedSearchTerm": "",
"selectedLeaf": null,
"activeCollectionFilterIds": [],
"selectedTagValueIds": [],
"appliedTagValueIds": [],
"selectedRangeFilters": {},
"appliedRangeFilters": {},
"selectedProduct": {
"id": "5aa07d67-33e0-459c-ba9d-86b68d202e18",
"name": "Hat",
"description": "<p>100% cotton hat</p>",
"metadata": {},
"assets": [],
"tags": [],
"options": [],
"attributes": [],
"totalMatchingVariants": 0,
"reviews": {
"rating": 0,
"count": 0
},
"variants": [
{
"id": "1057deeb-024f-4a5b-9365-a3131aeb7826",
"name": "Black hat",
"slug": "cappellino-nero",
"metadata": {},
"isFavourite": false,
"productId": "5aa07d67-33e0-459c-ba9d-86b68d202e18",
"availability": "available",
"inheritAssets": true,
"inheritAttributes": true,
"inheritTagValues": true,
"tags": [
{
"id": "bbbdb0e1-0829-43a6-867d-2f26b2b2186f",
"name": "Brand",
"relevant": true,
"sortable": false,
"filterable": true,
"type": "string",
"format": null,
"icon": "",
"values": [
{
"id": "b248c2d3-5df3-4b1a-ba96-5cb56ef69a79",
"value": "Generico",
"alias": ""
}
]
},
{
"id": "1c0edb9e-c2fd-41eb-960a-f17723beeb52",
"name": "Color",
"relevant": true,
"sortable": false,
"filterable": true,
"type": "string",
"format": null,
"icon": "",
"values": [
{
"id": "01f6db41-6454-4be9-9c76-2e45ae0b6db6",
"value": "Nero",
"alias": ""
}
]
}
],
"assets": [
{
"id": "d26f4596-fd82-45a0-bdb6-850e3dea2bc1",
"url": "https://webrounddev.b-cdn.net/rMa8bmEA2Yg9aYk5PgZPejecmIB2/a7734977-c5b1-49a4-911c-0b0bf745bd4f/commerce/images/1765018321978-Solid-Black-Baseball-Cap-Hat-with-Adjustable-Buckle-Back-Unisex_2b2bd9e5-d9df-4432-89e6-e22570e2de9e.bd72dfea18cccbcce241cbf7d35226c5.avif",
"type": "image",
"position": 0,
"thumbnail": "",
"inherited": false
}
],
"attributes": [],
"priceRanges": [
{
"currencyCode": "EUR",
"cadence": "once",
"netMin": 17,
"netMax": 17,
"grossMin": 20.74,
"grossMax": 20.74,
"compareNetMin": 0,
"compareNetMax": 0,
"compareGrossMin": 0,
"compareGrossMax": 0,
"rate": 22
}
],
"skus": [
{
"sku": "Black hat",
"ean": "",
"mpn": "",
"isFavourite": false,
"options": {},
"allowBackorder": false,
"purchaseRestock": false,
"allowFreeShipping": false,
"forceFreeShipping": false,
"backorderDays": 0,
"maxOrderQuantity": 30,
"quantity": 14,
"prices": [
{
"id": "40e112b4-978c-4b31-9652-331260ccf297",
"currencyCode": "EUR",
"cadence": "once",
"amount": 17,
"comparePrice": 0,
"isDefault": true,
"externalId": null,
"quantityTable": [],
"netAmount": 17,
"grossAmount": 20.74,
"rate": 22,
"netCompare": 0,
"grossCompare": 0
}
],
"id": "01e1c35f-8cb2-4c35-bd8b-1fa42dbc6a8c"
}
]
}
]
},
"selectedVariant": {
"id": "ace311d6-33d4-4db6-862d-6d49a042b82d",
"name": "White hat",
"slug": "cappellino-bianco",
"metadata": {},
"isFavourite": false,
"productId": "5aa07d67-33e0-459c-ba9d-86b68d202e18",
"availability": "available",
"inheritAssets": true,
"inheritAttributes": true,
"inheritTagValues": true,
"tags": [
{
"id": "bbbdb0e1-0829-43a6-867d-2f26b2b2186f",
"name": "Brand",
"relevant": true,
"sortable": false,
"filterable": true,
"type": "string",
"format": null,
"icon": "",
"values": [
{
"id": "b248c2d3-5df3-4b1a-ba96-5cb56ef69a79",
"value": "Generico",
"alias": ""
}
]
},
{
"id": "1c0edb9e-c2fd-41eb-960a-f17723beeb52",
"name": "Color",
"relevant": true,
"sortable": false,
"filterable": true,
"type": "string",
"format": null,
"icon": "",
"values": [
{
"id": "cc88ee22-86eb-409f-991d-8dff13608197",
"value": "Bianco",
"alias": ""
}
]
}
],
"assets": [
{
"id": "048645f8-f2c1-4f65-8d0f-6b7f4c73f867",
"url": "https://webrounddev.b-cdn.net/rMa8bmEA2Yg9aYk5PgZPejecmIB2/a7734977-c5b1-49a4-911c-0b0bf745bd4f/commerce/images/1765018321271-fa1f07a0f552f9c94501bb5d95923183.jpg",
"type": "image",
"position": 0,
"thumbnail": "",
"inherited": false
}
],
"attributes": [
{
"id": "3aac3a70-826d-48f2-809d-fc3992420829",
"name": "Date",
"relevant": true,
"sortable": true,
"type": "date",
"format": "date",
"icon": "react-icons/io5#IoCalendarNumber",
"value": "2025-12-16T21:16:00+01:00"
},
{
"id": "71ce9ece-b772-4254-be20-ea0e7781ebc5",
"name": "Number",
"relevant": true,
"sortable": true,
"type": "number",
"value": "11"
}
],
"priceRanges": [
{
"currencyCode": "EUR",
"cadence": "once",
"netMin": 20,
"netMax": 20,
"grossMin": 24.4,
"grossMax": 24.4,
"compareNetMin": 0,
"compareNetMax": 0,
"compareGrossMin": 0,
"compareGrossMax": 0,
"rate": 22
}
],
"skus": [
{
"sku": "White hat",
"ean": "",
"mpn": "",
"isFavourite": false,
"options": {},
"allowBackorder": false,
"purchaseRestock": false,
"allowFreeShipping": false,
"forceFreeShipping": false,
"backorderDays": 0,
"maxOrderQuantity": 30,
"quantity": 72,
"prices": [
{
"id": "c1b79717-1043-4eb3-850d-c80f1195b6b7",
"currencyCode": "EUR",
"cadence": "once",
"amount": 20,
"comparePrice": 0,
"isDefault": true,
"externalId": null,
"quantityTable": [
{
"max": 4,
"min": 1,
"rounding": "00",
"discountType": "percentage",
"discountValue": 5
},
{
"max": 9,
"min": 5,
"rounding": "00",
"discountType": "percentage",
"discountValue": 10
},
{
"max": null,
"min": 10,
"rounding": "99",
"discountType": "percentage",
"discountValue": 20
}
],
"netAmount": 20,
"grossAmount": 24.4,
"rate": 22,
"netCompare": 0,
"grossCompare": 0
}
],
"id": "a528c72e-35f0-45de-bffb-d86108322cf9"
},
{
"sku": "White hat test",
"ean": "TEST EAN",
"mpn": "TEST MPN",
"isFavourite": false,
"options": {},
"allowBackorder": false,
"purchaseRestock": false,
"allowFreeShipping": false,
"forceFreeShipping": false,
"backorderDays": 0,
"maxOrderQuantity": 30,
"quantity": 0,
"prices": [],
"id": "1ab26a51-7ca3-4b13-b691-c9aec0166114"
}
]
},
"selectedSku": {
"sku": "White hat",
"ean": "",
"mpn": "",
"isFavourite": false,
"options": {},
"allowBackorder": false,
"purchaseRestock": false,
"allowFreeShipping": false,
"forceFreeShipping": false,
"backorderDays": 0,
"maxOrderQuantity": 30,
"quantity": 72,
"prices": [
{
"id": "c1b79717-1043-4eb3-850d-c80f1195b6b7",
"currencyCode": "EUR",
"cadence": "once",
"amount": 20,
"comparePrice": 0,
"isDefault": true,
"externalId": null,
"quantityTable": [
{
"max": 4,
"min": 1,
"rounding": "00",
"discountType": "percentage",
"discountValue": 5
},
{
"max": 9,
"min": 5,
"rounding": "00",
"discountType": "percentage",
"discountValue": 10
},
{
"max": null,
"min": 10,
"rounding": "99",
"discountType": "percentage",
"discountValue": 20
}
],
"netAmount": 20,
"grossAmount": 24.4,
"rate": 22,
"netCompare": 0,
"grossCompare": 0
}
],
"id": "a528c72e-35f0-45de-bffb-d86108322cf9"
},
"enableWishlist": true,
"enableCartButton": true,
"enableReviews": true,
"showNetPrices": false
}
}
Display Parameters
| Object | Property | Type | Description |
|---|---|---|---|
| sortOption | sortBy | string | The field used for sorting (e.g., createdAt, price, name). |
sortDirection | string | Sorting direction: asc (ascending) or desc (descending). | |
cadence | string | The price recurrence type considered for sorting (e.g., once). | |
| currencyCode | - | string | Currently active currency code (e.g., EUR). |
| pagination | page | number | Current page number (starts at 1). |
limit | number | Maximum number of products per page. |
currentView
The currentView object acts as a pointer to the current catalog state, identifying what the user is viewing and where to retrieve the corresponding data.
| Property | Type | Description |
|---|---|---|
| entity | Object | null |
| cacheKey | string | null |
| products | string | Full cache key: the serialized query string (e.g., POST::public/products?...) used as a pointer in wr.shop.state.cache.products. |
Using the
products propertyThe string contained in currentView.products allows for the deterministic extraction of the exact result set from the global cache object, ensuring components always display data updated to the latest search performed.
Navigation and Filter State
These properties manage the user's navigation path and the status (selected or applied) of various search and filtering tools.
| Property | Type | Description |
|---|---|---|
| breadcrumb | Collection[] | A stack of collection objects representing the current navigation path, in hierarchical order. |
| selectedLeaf | Collection | null |
| activeCollectionFilterIds | string[] | Array of filter IDs activated as a direct result of collection navigation. |
| searchTerm | string | Temporary state of the text entered by the user (e.g., while typing "Nike Shoes") before submission. |
| appliedSearchTerm | string | The search term actually applied and used to filter the current view. |
| selectedTagValueIds | string[] | Array of tag IDs selected by the user in the interface, but not yet necessarily processed for filtering. |
| appliedTagValueIds | string[] | Array of confirmed (committed) tag IDs currently filtering the products. |
| selectedRangeFilters | Object | Map of selected range filters (e.g., price sliders) that have not yet been applied. |
| appliedRangeFilters | Object | Map of range filters currently applied to the catalog query. |
Range Filter Structure (selected / applied)
Range-type filters (such as price or numerical filters) use an object structure where the key is the filter ID:
{
"a9b1656d-b624-4ddd-8192-b6d2fd4d057f": {
"value": [0, 100],
"isPrice": true
}
}
- value: Array consisting of
[min, max]. - isPrice: Boolean flag indicating if the range refers to the SKU price.
Difference between "Selected" and "Applied"
In webround.com, we separate the UI state (Selected) from the data state (Applied). This allows users to select multiple filters in a side panel and "apply" them all at once with a single command, avoiding unnecessary API calls for every single click.
Selected Product States
These wr.shop.state properties are fundamental for managing display and interaction within detail pages or preview components (Quick View). They allow the system to know at any moment which specific entity the user is consulting or configuring.
| Property | Type | Description |
|---|---|---|
| selectedProduct | Product | null |
| selectedVariant | Variant | null |
| selectedSku | Sku | null |
Selection Dynamics
The interaction between these three states follows a cascading logical flow:
- Navigation: When a user lands on a product page,
selectedProductis populated. For instance, from a product card, you can set theselectedProductfor correct navigation. See wr.shop utilities. - Variant Change: Using variant swatches (e.g., color change) updates
selectedVariant. This often triggers the loading of a new set of media assets and the availability of new SKUs. - Option Configuration: As the user interacts with option selectors (e.g., choosing a size), the system crosses these choices with the current variant's
skusarray to determine theselectedSku.
Use in Custom Components
By leveraging selectedProduct, you can access specific product metadata or attributes to display custom technical sheets or dynamic badges that react to variant or SKU changes in real time.