Adding additional fields in tile view

Version: 8.2

You can request the server to return additional fields  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.

    RequestResponse
    @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>

Do you have some feedback for us?

If you have suggestions for improving this article,