Use ccLink binding for quicker page loading
Using the standard href
link syntax, for example, <a href="/aboutUs">About Us<a/>
, within a widget causes a full page load to occur.
For more efficiency, you should use the ccLink
custom binding instead.
When the ccLink
binding is used, widgets that are shared between the
current page and the linked page are maintained; in other words, they are not re-loaded
and re-initialized. Instead, when a ccLink
binding is invoked, only the
widget deltas are loaded; that is, widgets that exist on the linked page but not on the
current page.
The ccLink
syntax for a hyperlink looks similar to the following:
<a data-bind="ccLink: 'aboutUs'"></a>
To facilitate the ccLink
binding, each widget has a links observable that contains all of the data required to link to each of the page types in the storefront. The name specified in the ccLink
binding ('aboutUs
' in the example above) is used to retrieve data from that widget.links()
object. For example, the following illustration shows the properties that the widget.links()
object contains for the aboutUs
name:
The ccLink
binding uses two of these properties, route
and displayName
to generate the code for the link. Specifically, it uses the route
property for the link URL ("/aboutUs
" in the example). It uses the displayName
property for the link text if there is no existing text in the anchor tag ("About Us" in the example). Therefore, the generated code for the aboutUs
link would look like the following:
<a data-bind="ccLink: 'aboutUs' href="/aboutUs">About Us</a>
As part of the code generation process, the ccLink
binding
adds a click event handler to the anchor tag element. This event handler invokes
internal Commerce code that requests only the widget deltas for the linked page.
It is also possible to pass ccLink
an object that contains all of the
required data, rather than using the widget.links()
object data, for
example:
<a data-bind="ccLink: {route: '/aboutUs', displayName:'Our History'} "></a>
Passing an object with all the required data is useful when working with the product
and collection
view models. In this case, you can pass the full view model object to the ccLink
binding, for example:
<a data-bind="ccLink: product"></a>
Within the product
view model are properties like the following (in addition to many others):
"displayName":"Block Table"
"route":"/block-table/product/xprod2125"
With this usage, the generated code follows a similar approach, using the route
property for the link URL and the displayName
property for the link text. The following is an example:
<a data-bind="ccLink :product" href="/block-table/product/xprod2125">
Block Table</a>
The same click event handler is added to the anchor tag for invoking the code that requests only the widget deltas for the linked page.