It is recommended that you copy this configuration and edit it based on your implementation needs.
Once you have completed your configuration, be sure to mount your tags that you will be using in your HTML.
javascript
new storefront({
customerId: '--customerId--',
area: 'Production',
collection: 'default',
structure: {
id: 'recordId',
title: 'recordTitle',
price: 'recordPrice',
image: 'recordImage',
_transform: function(meta) {
meta.ratingOutOfFive = meta.data.0.ratingPercent / 100 * 5;
return meta;
},
_variant: {
field: 'variantArray',
structure: {
color: 'color',
salePrice: 'salePrice'
}
}
},
tags: {
sort: {
labels: [
'Price High to Low',
'Price Low to High'
]
},
collections: {
labels: {
mainCollection: 'All Products'
}
}
},
search: {
fields: ['*'],
pageSize: { options: [20, 40, 60], default: 20 },
sort: {
options: [
{ field: '_relevance', descending: true },
{ field: 'recordPrice', descending: true },
{ field: 'recordPrice', descending: false }
]
}
},
autocomplete: {
area: 'ProductionAll',
collection: 'mainCollection',
category: 'Department',
navigations: {
'MainCategory': 'All'
}
},
network: {
timeout: 3000
},
services: {
url: {
beautifier: {
refinementMapping: [
{ c: 'product.brand' },
{ f: 'recordPrice' }
],
params: {
refinements: 'refs',
page: 'p',
pageSize: 'size',
sort: 's',
collection: 'col'
},
queryToken: 'q',
suffix: '',
useReferenceKeys: true
}
}
},
personalization: {
realTimeBiasing: {
attributes: {
'color': {
maxBiases: 2,
strength: "Medium_Increase",
}
}
strength: "Medium_Increase",
maxBiases: 50,
expiry: 14,
}
}
});
storefront.mount('gb-sort');
storefront.mount('gb-query');