Storefront
This material is supplemented by the generated docs.
At its very simplest, StoreFront requires three things to function.
The StoreFront JavaScript Artifact
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>StoreFront</title>
<script src="http://cdn.groupbycloud.com/storefront-canary.js" charset="utf-8"></script>
</head>
<body>
<script src="/storefront.js" charset="utf-8"></script>
</body>
</html>A JavaScript file (or `<script>` tag) to Initialize Storefront
JS
Include this at the bottom of your HTML body
// storefront.js
new storefront({
customerId: '--customerId--',
area: 'Production',
collection: 'default',
structure: {
id: 'id',
title: 'title',
price: 'price',
image: 'image'
},
tags: {
sort: {
labels: [
'Price High to Low',
'Price Low to High'
]
}
},
search: {
fields: ['*'],
pageSize: { options: [20, 40, 60], default: 20 },
sort: [
{ field: 'price', descending: true },
{ field: 'price', descending: false }
]
}
});
storefront.mount('gb-sort');
storefront.mount('gb-query');The tags/components included in the HTML
HTML
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>StoreFront</title>
<script src="http://cdn.groupbycloud.com/storefront-canary.js" charset="utf-8"></script>
</head>
<body>
<gb-sort></gb-sort>
<gb-query></gb-query>
<script src="/storefront.js" charset="utf-8"></script>
</body>
</html>To simplify this setup process, we have created a very small slush generator to scaffold your own starter project. To use the slush-storefront npm package, follow the StoreFront setup.
IE11 Support
IE11 does not have all the functions natively to support Storefront. Because of this we use a Polyfill wrapper to give it these capabilities.
To use this wrapper, encapsulate your configuration inside this call:
storefront.polyfill( function () {
new storefront(){
...STOREFRONT CONFIGURATION...
}
}
Note: For more on Polyfills
Changes
Component Packages
New: The StoreFront project has moved to a monorepo. This is where all the release notes for all of the packages can be found.
Old: These are links to the release notes for each package.
@storefront/flux-capacitor@storefront/storefront-core@storefront/storefront-breadcrumbs@storefront/storefront-cart@storefront/storefront-collections@storefront/storefront-details@storefront/storefront-did-you-mean@storefront/storefront-infinite-scroll@storefront/storefront-navigation@storefront/storefront-page-size@storefront/storefront-paging@storefront/storefront-products@storefront/storefront-query@storefront/storefront-recommendations@storefront/storefront-record-count@storefront/storefront-related-queries@storefront/storefront-sayt@storefront/storefront-sort@storefront/storefront-structure@storefront/storefront-template
CDN
v1.3.2
Highlights
- The URL is updated before any requests are sent. This should reduce the number of extraneous calls.
- Observer events
DETAILS_CHANGEDandPAST_PURCHASE_CHANGEDfire on new details and past purchase searches respectively.
- Observer events
- Repeat queries are now allowed.
- Zero results will no longer be shown for a search that returns a redirect.
Bundled package versions
| Package | Version |
|---|---|
@storefront/breadcrumbs |
1.28.6 |
@storefront/collections |
1.28.3 |
@storefront/core |
1.47.0 |
@storefront/details |
1.28.4 |
@storefront/did-you-mean |
1.28.6 |
@storefront/flux-capacitor |
1.57.0 |
@storefront/infinite-scroll |
1.2.0 |
@storefront/navigation |
1.38.2 |
@storefront/page-size |
1.30.4 |
@storefront/paging |
1.29.4 |
@storefront/products |
1.34.7 |
@storefront/query |
1.35.8 |
@storefront/recommendations |
1.25.5 |
@storefront/record-count |
1.29.3 |
@storefront/related-queries |
1.28.6 |
@storefront/sayt |
1.37.7 |
@storefront/sort |
1.30.5 |
@storefront/structure |
1.40.3 |
@storefront/template |
1.29.6 |
v1.3.1
Highlights
onUpdateandonUpdatednow gets the previous state passed in as the second parameter.gb-record-countnow takes alimitCountprop that shows the full record count when its value isfalse.- Component versions are listed at the end of the bundle file.
- The count can be shown for selected refinements by setting the
alwaysShowTotalsprop totrueongb-navigation. - Search overrides are now independent from autocomplete overrides.
- Fetch actions now take an options object instead of explicit arguments.
- This options argument can contain a partial request as the value to the
requestproperty to override parts of the final request that is sent. - The new function signatures are reflected in the documentation.
- This options argument can contain a partial request as the value to the
Bundled package versions
| Package | Version |
|---|---|
@storefront/breadcrumbs |
1.28.5 |
@storefront/collections |
1.28.2 |
@storefront/core |
1.46.9 |
@storefront/details |
1.28.3 |
@storefront/did-you-mean |
1.28.5 |
@storefront/flux-capacitor |
1.54.0 |
@storefront/infinite-scroll |
1.1.4 |
@storefront/navigation |
1.38.2 |
@storefront/page-size |
1.30.3 |
@storefront/paging |
1.29.3 |
@storefront/products |
1.34.6 |
@storefront/query |
1.35.6 |
@storefront/recommendations |
1.25.4 |
@storefront/record-count |
1.29.2 |
@storefront/related-queries |
1.28.5 |
@storefront/sayt |
1.37.6 |
@storefront/sort |
1.30.4 |
@storefront/structure |
1.40.2 |
@storefront/template |
1.29.5 |
v1.3.0
Highlights
provide/consume- use
options: { legacyAliasing: true }in configuration to opt out
- use
this.subscribe(event: string, handler: function)andthis.subscribeOnce(event: string, handler: function)- removes event listeners on
unmount
- removes event listeners on
shouldUpdate- use
mixins: { global: { shouldUpdate: true } }
- use
Bundled package versions
| Package | Version |
|---|---|
@storefront/breadcrumbs |
v1.28.3 |
@storefront/collections |
v1.27.2 |
@storefront/details |
v1.28.2 |
@storefront/did-you-mean |
v1.28.3 |
@storefront/infinite-scroll |
v1.1.2 |
@storefront/navigation |
v1.37.0 |
@storefront/page-size |
v1.30.1 |
@storefront/paging |
v1.29.1 |
@storefront/products |
v1.34.3 |
@storefront/query |
v1.35.5 |
@storefront/recommendations |
v1.25.2 |
@storefront/record-count |
v1.28.2 |
@storefront/related-queries |
v1.28.3 |
@storefront/sayt |
v1.37.4 |
@storefront/sort |
v1.30.2 |
@storefront/structure |
v1.40.0 |
@storefront/template |
v1.29.3 |