L'oggetto wr.shop
Questo elemento è disponibile dentro tutti i componenti custom, nella prop wr. Il suo compito è:
- tenere traccia di tutti i dati recuperati per il catalogo e lo store, come i prodotti, i filtri e le collezioni dello store.
- esporre metodi e utilities per il cambio di stato per quanto riguarda prodotti e varianti selezionate.
- esporre metodi e utilities per semplificare l'utilizzo di filtri, la navigazione tra collezioni o semplificare l'applicazione di termini di ricerca sul catalogo.
wr.shop.state
L'oggetto in questione è il ponte di collegamento tra i componenti custom e lo stato dell'app per quanto riguarda il catalogo. Il suo elemento principale è cache, perché contiene:
- attributes: Tutti gli attributi visibili e rilevanti del catalogo
- tags: Tutti i tag visibili e rilevanti del catalogo
- collections: L'intero albero di collezioni del tuo negozio
- filters: I filtri di tipo range da applicare alle ricerche
- products: Tutti i prodotti richiesti alle API
- store: I dettagli delle impostazioni del tuo store
wr.shop.state.cache.attributes
È il contenitore di tutti gli attributi visibili e rilevanti del tuo store. Esempio:
{
"items": [
{
"id": "3aac3a70-826d-48f2-809d-fc3992420829",
"name": "Data",
"label": null,
"type": "date",
"format": "date",
"relevant": true,
"sortable": true,
"icon": "react-icons/io5#IoCalendarNumber",
"position": 0
},
{
"id": "71ce9ece-b772-4254-be20-ea0e7781ebc5",
"name": "Numero",
"label": null,
"type": "number",
"format": null,
"relevant": true,
"sortable": true,
"icon": null,
"position": 1
}
]
}
wr.shop.state.cache.tags
È il contenitore di tutti i tag visibili e rilevanti del tuo store. Esempio:
{
"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": "Generico",
"alias": null,
"position": 0
}
]
}
]
}
wr.shop.state.cache.collections
È l'albero delle collezioni del tuo sito. Qui trovi tutta la gerarchia pronta alla navigazione.
Esempio:
{
"items": [
{
"id": "ee91d632-ca63-400e-b93d-4369c080da4e",
"name": "Abbigliamento",
"slug": "abbigliamento",
"parentId": null,
"position": 0,
"visible": true,
"filterIds": [
"7d88d702-0684-411f-89ba-5ab13c06fa51"
],
"children": []
},
{
"id": "c27862fa-a379-422f-9dde-cebc1068e472",
"name": "Pesistica",
"slug": "pesistica",
"parentId": null,
"position": 1,
"visible": true,
"filterIds": [],
"children": []
},
{
"id": "cf7ea788-2445-42e7-97cc-5266f407fdd1",
"name": "Abbonamenti",
"slug": "abbonamenti",
"parentId": null,
"position": 2,
"visible": true,
"filterIds": [],
"children": []
}
]
}
wr.shop.state.cache.filters
È costituito da tutti i filtri di tipo "range" del tuo store.
Esempio:
{
"items": [
{
"id": "af5eb34f-5e05-4c5e-9f57-3990fd72b591",
"name": "Filtro range numero",
"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": "Numero",
"format": null
}
}
]
},
{
"id": "3a029e31-fc5f-42b5-9984-dd6346ec978f",
"name": "Filtro range data",
"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": "Data",
"format": "date"
}
}
]
},
{
"id": "a9b1656d-b624-4ddd-8192-b6d2fd4d057f",
"name": "Filtro range prezzo",
"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
Contiene tutte le impostazioni del tuo store.
Esempio:
{
"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
Contiene tutte i risultati di ricerca ottenuti tramite le API. È un oggetto con entries dinamiche, dove la chiave è una stringa serializzata della chiamata API 'metodo::endpoint::parametri::body' e il valore è il risultato della chiamata.
Esempio:
{
"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": "Data",
"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": "Numero",
"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": "Colore",
"relevant": true,
"sortable": false,
"filterable": true,
"type": "string",
"format": null,
"icon": "",
"values": [
{
"alias": "",
"id": "9538621f-c258-4793-87d5-7a112e20a3e1",
"value": "Verde"
},
{
"alias": "",
"id": "01f6db41-6454-4be9-9c76-2e45ae0b6db6",
"value": "Nero"
}
]
}
],
"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": "Colore",
"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
}
}
}
Dati aggiuntivi e utilities
Oltre alla cache dei dati, wr.shop.state mantiene informazioni critiche sulla navigazione corrente, l'ordinamento e la paginazione. Questi dati permettono ai componenti di reagire dinamicamente quando l'utente cambia pagina, seleziona un prodotto o ordina i prodotti per prezzo.
Ecco un esempio di contenuto di wr.shop che esclude l'entry wr.shop.state.cache:
{
"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": "Cappellino",
"description": "<p>Cappellino in cotone 100%</p>",
"metadata": {},
"assets": [],
"tags": [],
"options": [],
"attributes": [],
"totalMatchingVariants": 0,
"reviews": {
"rating": 0,
"count": 0
},
"variants": [
{
"id": "1057deeb-024f-4a5b-9365-a3131aeb7826",
"name": "Cappellino nero",
"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": "Colore",
"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": "Cappellino nero",
"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": "Cappellino bianco",
"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": "Colore",
"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": "Data",
"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": "Numero",
"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": "Cappellino bianco",
"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": "Cappellino bianco 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": "Cappellino bianco",
"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
}
}
Parametri di Visualizzazione
| Oggetto | Proprietà | Tipo | Descrizione |
|---|---|---|---|
| sortOption | sortBy | string | Il campo per l'ordinamento (es. createdAt, price, name). |
sortDirection | string | Direzione dell'ordinamento: asc (crescente) o desc (decrescente). | |
cadence | string | Tipo di ricorrenza del prezzo considerato (es. once). | |
| currencyCode | - | string | Codice valuta correntemente utilizzata (es. EUR). |
| pagination | page | number | Numero della pagina corrente (inizia da 1). |
limit | number | Numero massimo di prodotti per pagina. |
currentView
L'oggetto currentView funge da puntatore allo stato attuale del catalogo, identificando cosa sta guardando l'utente e dove recuperare i dati corrispondenti.
| Proprietà | Tipo | Descrizione |
|---|---|---|
| entity | Object | null |
| cacheKey | string | null |
| products | string | Cache key completa: la stringa serializzata della query (es. POST::public/products?...) usata come puntatore in wr.shop.state.cache.products. |
Utilizzo della proprietà
productsLa stringa contenuta in currentView.products permette di estrarre in modo deterministico l'esatto set di risultati dall'oggetto di cache globale, garantendo che i componenti visualizzino sempre i dati aggiornati all'ultima ricerca effettuata.
Navigazione e Stato dei Filtri
Queste proprietà gestiscono il percorso di navigazione dell'utente e lo stato (selezionato o applicato) dei vari strumenti di ricerca e filtraggio.
| Proprietà | Tipo | Descrizione |
|---|---|---|
| breadcrumb | Collection[] | Uno stack di oggetti collezione che rappresenta il percorso di navigazione corrente, in ordine gerarchico. |
| selectedLeaf | Collection | null |
| activeCollectionFilterIds | string[] | Array di ID dei filtri attivati come conseguenza diretta della navigazione nelle collezioni. |
| searchTerm | string | Lo stato temporaneo del testo inserito dall'utente (es. mentre digita "Scarpe Nike") prima dell'invio. |
| appliedSearchTerm | string | Il termine di ricerca effettivamente applicato e utilizzato per filtrare la visualizzazione attuale. |
| selectedTagValueIds | string[] | Array degli ID dei tag selezionati dall'utente nell'interfaccia, ma non ancora necessariamente processati per la ricerca. |
| appliedTagValueIds | string[] | Array degli ID dei tag confermati (committati) che stanno filtrando i prodotti correnti. |
| selectedRangeFilters | Object | Mappa dei filtri range selezionati (es. slider del prezzo) ma non ancora applicati. |
| appliedRangeFilters | Object | Mappa dei filtri range attualmente applicati alla query del catalogo. |
Struttura dei Filtri Range (selected / applied)
I filtri di tipo range (come il prezzo o filtri numerici) utilizzano una struttura a oggetti dove la chiave è l'ID del filtro:
{
"a9b1656d-b624-4ddd-8192-b6d2fd4d057f": {
"value": [0, 100],
"isPrice": true
}
}
- value: Array composto da
[min, max]. - isPrice: Flag booleano che indica se il range si riferisce al prezzo dello SKU.
Differenza tra "Selected" e "Applied"
In webround.com, separiamo lo stato della UI (Selected) dallo stato dei dati (Applied). Questo permette all'utente di selezionare più filtri in un pannello laterale e "applicarli" tutti insieme con un unico comando, evitando chiamate API superflue a ogni singolo clic.
Stati del Prodotto Selezionato
Queste proprietà di wr.shop.state sono fondamentali per gestire la visualizzazione e l'interazione all'interno delle pagine di dettaglio o dei componenti di anteprima (Quick View). Permettono di sapere in ogni momento quale entità specifica l'utente stia consultando o configurando.
| Proprietà | Tipo | Descrizione |
|---|---|---|
| selectedProduct | Product | null |
| selectedVariant | Variant | null |
| selectedSku | Sku | null |
Dinamiche di Selezione
L'interazione tra questi tre stati segue un flusso logico a cascata:
- Navigazione: Quando un utente atterra su una pagina prodotto, viene popolato
selectedProduct. Ad esempio, a partire da una card prodotto, è possibile impostare il selectedProduct per una navigazione corretta. Consulta le utilities di wr.shop - Cambio Variante: L'utilizzo degli swatch delle varianti (es. cambio colore) aggiorna
selectedVariant. Questo spesso comporta il caricamento di un nuovo set di asset multimediali e la disponibilità di nuovi SKU. - Configurazione Opzioni: Man mano che l'utente interagisce con i selettori delle opzioni (es. sceglie la taglia), il sistema incrocia le scelte con l'array
skusdella variante attuale per determinare ilselectedSku.
Utilizzo nei Componenti Custom
Sfruttando selectedProduct, puoi accedere ai metadati o agli attributi specifici del prodotto per mostrare schede tecniche personalizzate o badge dinamici che reagiscono al cambio di variante o SKU in tempo reale.