Renderings (Scriban)

Customizing the Minicart rendering

Version:

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///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>

Important

To improve performance, you can disable the minicart count cache as well as recalculation of the minicart.

Minicart rendering model

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.

Minicart call sequence

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

If you have suggestions for improving this article, let us know!