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.