What is a Component?
Many frameworks have different names for this abstraction: Widgets, Directives, Tags, Elements, Views… However, all of them describe the same concept:
A component is just an intelligent HTML element.
Example
In the example below, we display how simple it is to replace the native HTML <input>
element with our custom <gb-query> component.
Original:
<!-- original.html -->
<head>
</head>
<body>
<input name="searchBox" value="Type something...">
</body>
With StoreFront:
<!-- storefront.html -->
<head>
<script src="http://cdn.groupbycloud.com/storefront-canary.js"></script>
</head>
<body>
<gb-query></gb-query>
<script src="storefront.js"></script>
</body>
// storefront.js
new storefront({
customerId: 'mystore',
structure: {
title: 'displayTitle',
price: 'regularPrice'
}
});
storefront.mount('gb-query');
Simply by configuring StoreFront and calling mount(), you will render
a search input field with SAYT enabled, including product search suggestions.
The remainder of this section details the available components supplied by our core component library. Each component includes the following information:
Configuration options
Options that can be passed to configure each tag globally, on a per-mount()
basis, or directly in the HTML.
new storefront({
tags: {
query: {
// global configuration for all <gb-query> components
showSayt: false
}
}
});
storefront.mount('.special-query', 'gb-query', {
// configuration only applied to <gb-query class="special-query">
showSayt: false
});
<body>
<!-- configure only this <gb-query> -->
<gb-query auto-search="false" sayt></gb-query>
</body>
Properties
Each component exposes properties into the DOM scoped within it. This is especially
important when overriding the structure of a component. In the example below, we are
accessing the first and last properties of the surrounding component.
<gb-record-count>
Displaying products { first } to { last }
</gb-record-count>
which renders as
<gb-record-count>
Displaying products 15 to 31
</gb-record-count>
Methods
In addition to properties, components also expose methods which can be used when
overriding a tag. In the following example $product.link() will automatically take out the product id and title and return a beautified details page url based on this data.
<gb-product>
<gb-link url="{ $product.link() }" on-click="{ $product.onClick }">
<img src="{ $product.data.image }" alt="" />
</gb-link>
</gb-product>