Adding additional fields in tile view

You can customize the fields that are displayed on an icon in Tile View.

Additional fields must be requested to be returned from the server by updating the Fields rendering property of the relevant CommerceDataSource, and the .cshtml file of the tile so that the field is displayed.

For example, to display the rating of a product on the product tile:

  1. Discover the CommerceDataSource that the product list is bound to, by inspecting the list's Items binding.

  2. Add rating to the pipe-delimited list of fields.

    The value of the rating of a product will be included in the JSON information returned from the server.

  3. Add a span to the .cshtml file for the product tile, using a Knockout.js binding to display the rating in the new span.

    @using Sitecore.Data;
@using Sitecore.Data.Items

@{ 
        var productPagePath = "/sitecore/client/Applications/MerchandisingManager/ProductDetail?target=";
}

<!-- tr element required for MultiSelectList Behavior, or JavaScript error will occur in knockout. -->
<tr>   
        <td>        
            <div class="CommerceTiles">
             <div class="TileImage" data-bind="style: {backgroundImage: 'url(\'' + toolsIcon() + '\')'} , alt: description, attr: {title: description}" />
             <input class="sc-cb" type="checkbox" id="cs-tile-checkbox" onclick="event.stopPropagation();" />
             <div class="TileBody">
                 <a onclick="window.location.href = $(this).attr('href');" data-bind="attr: { id: itemId() + '_product', href: '@productPagePath' + itemId() + '&p=' + clickPath(), text: _displayname }">
                <span data-bind="text: _displayname"></span></a>
                 <p><span data-bind="text:  parse-Float(listprice()).toFixed(2)"></span></p>
                 <p><span data-bind="text: rating"></span></p>
                </div>
            </div>
        </td>
</tr>