Customizing the Shopping Cart Lines rendering

Version:

The Shopping Cart Lines rendering includes a rendering variant in the form of a Scriban template. The Shopping Cart Lines rendering has its own default rendering variant root and default rendering variant (/sitecore/Content/<tenant>/<site>/Presentation/Rendering Variants/Shopping Cart Lines), 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 on the associated data source item.

Note

The Shopping Cart Lines - deprecated rendering is only available for existing sites and uses a standard view and code-behind instead of a Scriban template.

The following code shows the Scriban template for the Shopping Cart Lines rendering defined within the default rendering variant. The view content (like the label text) is passed into the MVC Model and is available as the embedded object o_model in the Scriban context while the product information (including product details, unit price, and inventory) is populated using Knockout bindings and AJAX calls on the frontend.

{{ # Error message area }}
{{if o_model.error_message}}
<div class="error-message">
    {{ o_model.error_message }}
</div>
{{ # If there is no error, cart lines will be rendered }}
{{ else }}
<div class="shopping-cart-lines" data-bind="with: cart, visible: isVisible" style="display: none;">
    {{ # Cart lines header, contains the columns titles }}
    {{ if o_model.display_table_header }}
    <div class="shoppingcart-header">
        <div title="{{ o_model.product_details_tooltip }}" class="shoppingcart-header-productdetails">
            {{ sc_field i_datasource 'Product Details Label' }}
        </div>
        {{ if o_model.display_unit_price_column }}
        <div title="{{ o_model.unit_price_tooltip }}" class="shoppingcart-header-unitprice">
            {{ sc_field i_datasource 'Unit Price Label' }}
        </div>
        {{ end }}
        {{ if o_model.display_quantity_column }}
        <div title="{{ o_model.quantity_tooltip }}" class="shoppingcart-header-quantity">
            {{ sc_field i_datasource 'Quantity Label' }}
        </div>
        {{ end }}
        <div title="{{ o_model.product_total_tooltip }}" class="shoppingcart-header-total">
            {{ sc_field i_datasource 'Total Label' }}
        </div>
        {{ if o_model.display_delete_button_column }}
        <div class="shoppingcart-header-delete">&nbsp;</div>
        {{ end }}
    </div>
    {{ end }}
    {{ # Cart lines body, the following <div> will render all the cart lines with respect to the configurations on the component properties }}
    <div class="shoppingcart-body" data-bind="foreach: cartLines">
        <div class="shoppingcart-item">
            <div class="shoppingcart-item-details">
                <div class="shoppingcart-item-productdetails">
                    <div class="shoppingcart-freegifttext" data-bind="visible: isFreeGift">
                        <span>{{ sc_raw i_datasource 'Free Gift Label' }}</span>
                    </div>
                    <div class="shoppingcart-image">
                        <a data-bind="attr: { href: productUrl }">
                            <img data-bind="attr: { src: image }" alt="" pid="image" />
                        </a>
                    </div>
                    <div class="shoppingcart-info">
                        <a data-bind="attr: { href: productUrl }">
                            <h5 class="displayName" data-bind="text: displayName"></h5>
                        </a>
                        <div class="product-variant-information" data-bind="foreach: properties">
                            <div class="variant-information">
                                <span class="variant-label" data-bind="text: label"></span>
                                <span class="variant-value" data-bind="text: value"></span>
                            </div>
                        </div>
                        {{ # If the Display Shipping Information configuration on the component properties is enabled, the following section renders the cart line shipping information }}
                        {{ if o_model.display_shipping_information }}
                        <p class="shoppingcart-delivery" data-bind="if: shippingMethodName">
                            <span>{{ sc_raw i_datasource 'Delivery Label' }}</span>
                            <span class="shippingMethodName" data-bind="text: shippingMethodName"></span>
                        </p>
                        <div class="shoppingcart-delivery" data-bind="if: address">
                            <span>{{ sc_raw i_datasource 'Address Label' }}</span>
                            <ul class="lineShippingAddress">
                                <li>
                                    <span data-bind="text: address.Address1"></span>
                                    <span data-bind="text: address.City"></span>
                                </li>
                                <li>
                                    <span data-bind="text: address.State"></span>
                                    <span data-bind="text: address.ZipPostalCode"></span>
                                </li>
                                <li>
                                    <span data-bind="text: address.Country"></span>
                                </li>
                            </ul>
                        </div>
                        {{ end }}
                    </div>
                </div>

                {{ # If the Display Unit Price configuration on the component properties is enabled, the following section renders the cart line unit  price information }}
                {{ if o_model.display_unit_price_column }}
                <div class="shoppingcart-price" data-bind="visible: !isFreeGift">
                    <span class="price" data-bind="text: linePrice"></span>
                    <p data-bind="visible: discountOfferNames.length > 0">
                        <span>{{ sc_raw i_datasource 'Discount Label' }}</span>
                        <span data-bind="text: discountOfferNames" class="shoppingcart-saving"></span>
                    </p>
                </div>
                {{ end }}

                {{ # If the Display Quantity configuration on the component properties is enabled, the following section renders the cart line quantity information }}
                {{ if o_model.display_quantity_column }}
                <div class="shoppingcart-quantity">
                    <div class="numeric-input-group" data-bind="visible: !isFreeGift">
                        <button class="decrease"
                            data-bind="event: { click: $parents[1].decreaseQuantity }, disable: $parents[1].quantityUpdating"
                            style="display: none"></button>
                        <input class="quantity" min="1" type="number" placeholder="1"
                            data-bind="event: { change: $parents[1].updateQuantity }, value: quantity, valueUpdate: 'input', fireChange:true, attr: {'data-ajax-lineitemid': externalCartLineId}, disable: $parents[1].quantityUpdating">
                        <button class="increase"
                            data-bind="event: { click: $parents[1].increaseQuantity } , disable: $parents[1].quantityUpdating"
                            style="display: none"></button>
                    </div>
                    <div class="display-quantity" data-bind="visible: isFreeGift">
                        <span>{{ sc_raw i_datasource 'Quantity Label' }}: </span>
                        <span class="quantity" data-bind="text: quantity"></span>
                    </div>
                </div>
                {{ end }}
                {{ # The following section renders the line total }}
                <div class="shoppingcart-total">
                    <span class="total" data-bind="text: lineTotal"></span>
                    <p data-bind="visible: discountOfferNames.length > 0 && !isFreeGift">
                        <span>{{ sc_raw i_datasource 'Savings Label' }}</span>
                        <span data-bind="text: lineItemDiscount" class="shoppingcart-total-saving"></span>
                    </p>
                    <span class="shoppingcart-freegiftlistprice" data-bind="text: linePrice, visible: isFreeGift"></span>
                </div>
                {{ # If the Display Delete Button configuration on the component properties is enabled, the following section renders the cart line delete button information }}
                {{ if o_model.display_delete_button_column }}
                <div class="shoppingcart-delete">
                    <a class="remove-line" data-bind="attr: {'data-ajax-lineitemid': externalCartLineId}">
                        <span data-bind="click: $parents[1].removeItem"></span>
                    </a>
                </div>
                {{ end }}
            </div>
            {{ # If the Display Sublines configuration on the component properties is enabled, the following section renders the cart line sublines information }}
            {{ if o_model.display_sub_lines }}
            <div class="shoppingcart-item-sublines" data-bind="foreach: sublines, visible: sublines().length > 0">
                <div class="shoppingcart-subline-item">
                    <div class="shoppingcart-subline-image-space"></div>
                    <div class="shoppingcart-image">
                        <a data-bind="attr: { href: productUrl }">
                            <img data-bind="attr: { src: image }" alt="" pid="image" />
                        </a>
                    </div>
                    <div class="shoppingcart-info">
                        <a data-bind="attr: { href: productUrl }">
                            <h5 class="displayName" data-bind="text: displayName"></h5>
                        </a>
                        <div class="product-variant-information" data-bind="foreach: properties">
                            <div class="variant-information">
                                <span class="variant-label" data-bind="text: label"></span>
                                <span class="variant-value" data-bind="text: value"></span>
                            </div>
                        </div>
                    </div>
                    {{ if o_model.display_quantity_column }}
                    <div class="shoppingcart-quantity">
                        <span>{{ sc_raw i_datasource 'Quantity Label' }}: </span>
                        <span class="quantity" data-bind="text: quantity"></span>
                    </div>
                    {{ end }}
                    <div class="shoppingcart-subline-total-space"></div>
                    {{ if o_model.display_delete_button_column }}
                    <div class="shoppingcart-subline-delete-space"></div>
                    {{ end }}
                </div>
            </div>
            {{ end }}
        </div>
    </div>
</div>
{{ end }}

Shopping Cart Lines rendering model

In the Shopping Cart Lines Scriban template, you access the properties and objects contained in the ShoppingCartLinesRenderingModel model through the embedded item o_model. The class diagram for the Shopping Cart Lines rendering model is shown in the following figure.

Shopping Cart Lines call sequence

The following sequence diagram shows a high-level view of the calls made when the shopper interacts with the Shopping Cart Lines in the context of free gift selection.

Note

This sequence diagram applies to manual free gift selection and does not reflect the actions taken when the free gift is automatically added to the cart.

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