Customizing the Minicart rendering

Abstract

How to configure the traditional item tree Minicart rendering variant.

The Minicart rendering includes a rendering variant in the form of a Scriban template. The Minicart rendering has its own default rendering variant root and default rendering variant (/sitecore/Content/<tenant>/<site>/Presentation/Rendering Variants/Minicart), which uses a Scriban template for generating the markup. Although you can modify the Scriban template, it is best to create a new custom rendering variant in this case so that the customization does not get overridden during software upgrades. You can also change the labels for the rendering.

Note

The Minicart - deprecated rendering is only available for existing sites and is based on a MVC view instead of a Scriban template in a rendering variant.

The following code shows the Scriban template for the Minicart rendering defined within the default rendering variant.

<div class="inner-component"
    data-bind="event: { mouseover: hoverMinicart, mouseout: leaveMinicart }, css: minicartClassName">
    {{ # The <div> element to show error message. }}
    {{if o_model.error_message}}
    <div class="error-message">
        {{ o_model.error_message }}
    </div>
    {{ else }}
    <div class="basket">
        {{ # The <div> element will be available upon mouse hover. }}
{{ # In case the datasource is not set fallback to the context item
              if !i_datasource 
                 i_datasource = i_item
              end
           }} 
        <div class="top-text" data-bind="css: { 'loaded-cart': cartCount() > 0 }, event: { touchend: toggleMinicart }">
            <a href="{{o_model.top_link}}" title="{{ sc_raw i_item 'View Cart Link Tooltip' }}">
                {{ sc_field i_datasource 'Top Text Label' }}
            </a>
            {{ # The <p> element displays the minicart count. }}
            <p class="cart-items-count" data-bind="text: cartCount"></p>
        </div>
        {{ # The <div>element displays the minicart lines. }}
        <div class="minicart" data-bind="with: cart">
            <!-- ko if: cartLines -->
            <div class="minicart-content" data-bind="foreach: cartLines, visible: cartLines() ? cartLines().length : 0">
                <div class="minicart-item" data-bind="attr: {'data-ajax-lineitemid': externalCartLineId}">
                    <img alt="Image" data-bind="attr:{src: image, alt: displayName}" />
                    <div class="minicart-info">
                        <h5>
                            <a data-bind="text: displayName, attr:{ href:productUrl}"></a>
                        </h5>
                        <p>
                            {{  sc_raw i_datasource 'Quantity' }} <strong data-bind="text: quantity"></strong>
                        </p>

                        <span class="price" data-bind="text: lineTotal, visible: !isFreeGift"></span>
                        <span class="freegift-label" data-bind="visible: isFreeGift">{{ sc_raw i_datasource 'Free Gift Text' }}</span>
                    </div>
                    {{ # The <span> element is used to delete the minicart line. }}
                    <span class="minicart-delete">
                        <a href="#">
                            <span data-bind="click: $parents[1].removeItem"></span>
                        </a>
                    </span>
                </div>
            </div>
            <!-- /ko -->
            {{ # The <img> element displays the loading bar image. }}
            <img class="loading-bar" data-bind="visible: $parents[0].isFetchInProgress"
                src="{{ sc_follow  i_datasource  'Loading Bar Image'  | sc_medialink }}" />

            {{ # The <div> element displays the total and the amount for a minicart line item. }}
            <div class="minicart-footer">
                <span class="minicart-total-label">{{ sc_raw i_datasource 'Total Label' }}</span>
                <span class="minicart-total-amount" data-bind="text: total"></span>
            </div>
            {{ # The <div> element contains two buttons - Checkout and Viewcart. }}
            <div class="minicart-buttons">
                {{ if !o_model.hide_checkout_button }}
                <a class="checkout-button" title="{{ sc_raw i_item 'Checkout Link Tooltip' }}"
                    href="{{ o_model.checkout_link }}">
                    {{ sc_raw i_datasource 'Checkout Link Text'  }}
                </a>
                {{ end }}
                <div>
                </div>
                <a class="view-cart-button" href="{{ o_model.view_cart_link }}"
                    title="{{ sc_raw i_item 'View Cart Link Tooltip' }}">
                    {{ sc_raw i_datasource 'View Cart Link Text' }}
                </a>
            </div>
        </div>
    </div>
    {{ # The <div> element contains two hidden fields recalculateTotals and cacheCartCount. }}
    <div class="minicart-data" style="display:none">
        <input type="hidden" value="{{ o_model.recalculate_totals }}" id="recalculateTotals" />
        <input type="hidden" value="{{ o_model.cache_cart_count }}" id="cacheCartCount" />
    </div>
    {{ end }}
</div>

In the Scriban template for the Minicart rendering, you access the properties and objects contained in the MinicartRenderingModel model as shown in the following diagram.

Class diagram of the Minicart rendering model.

The following sequence diagram shows a high-level view of the calls made when the shopper interacts with the minicart.

Sequence diagram