Customizing the Order Lines rendering

Abstract

Overview of the Order Lines rendering Scriban template.

The Order Lines rendering includes a rendering variant in the form of a Scriban template. The Order Lines rendering has its own default rendering variant root and default rendering variant (/sitecore/Content/<tenant>/<site>/Presentation/Rendering Variants/Order 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.

Note

The Order Lines - 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 Order Lines rendering defined within the default rendering variant. The product name, variant information, and delivery information are passed into the MVC Model and are available in the rendering variant and in Scriban templates using the embedded item o_model.

{{ # Error message area }}
{{if o_model.error_message}}
<div class="error-message">
    {{ o_model.error_message }}
</div>
{{ # If there is no error, order lines will be rendered }}
{{ else }}
<div class="order-lines">
    {{ # Order lines header label }}
    <div class="order-lines-header">
        <h3 title="{{ o_model.your_products_header_tooltip }}">
            {{ sc_field i_datasource "Order Lines Header Label" }}
        </h3>
    </div>

    {{ # Order lines header, contains the column titles }}
    <div class="orderlines-header">
        <div class="orderlines-header-productdetails">
            {{ sc_field i_datasource "Product Details Label" }}
        </div>
        <div class="orderlines-header-unitprice">
            {{ sc_field i_datasource "Unit Price Label" }}
        </div>
        <div class="orderlines-header-quantity product-quantity-header">
            {{ sc_field i_datasource "Quantity Label" }}
        </div>
        <div class="orderlines-header-total line-total-header">
            {{ sc_field i_datasource "Total Label" }}
        </div>
    </div>

    {{ # Order lines body, the following <div> will render all the order lines }}
    <div class="orderlines-body">
        {{ # Loop through all the lines }}
        {{ for orderLine in o_model.lines }}
        <div class="orderlines-item {{ if orderLine.is_free_gift }}freegift-item{{ end }}">
            <div class="orderlines-item-details">
                {{ # The following <div> contains the product name, variant information and delivery information }}
                <div class="orderlines-item-productdetails">
                    {{ # The free gift label is rendered if the order line IsFreeGift property is true }}
                    {{ if orderLine.is_free_gift }}
                    <div class="orderlines-freegifttext">
                        <span>{{ sc_field i_datasource "Free Gift Label" }}</span>
                    </div>
                    {{ end }}
                    <div class="product-image">
                        <img src="{{ orderLine.product_master_image | sc_imagelink 110 110 }}" />
                    </div>
                    <div class="orderlines-info">
                        <a href="{{ orderLine.product_url }}">
                            <h4 class="product-name">{{ orderLine.product_display_name }}</h4>
                        </a>

                        {{ # The following <div> contains the product variant information }}
                        <div class="product-variants">
                            {{ for property in orderLine.properties }}
                            <div class="product-variant">
                                <span class="variant-label">
                                    {{
                                        if (object.has_key o_model.variant_labels property.key)
                                            o_model.variant_labels[property.key]
                                        else
                                            property.key
                                        end
                                    }}
                                </span>
                                <span class="variant-information">
                                    {{ property.value }}
                                </span>
                            </div>
                            {{ end }}
                        </div>

                        {{ # The following <p> contains the delivery method information }}
                        {{ if orderLine.shipping_method_name }}
                        <p class="orderlines-delivery">
                            <span>
                                {{ sc_field i_datasource "Order Lines Delivery Label" }}:
                            </span>
                            <span class="shippingMethodName">
                                {{ orderLine.shipping_method_name }}
                            </span>
                        </p>
                        {{ end }}

                        {{ # The following <div> contains the delivery address information }}
                        {{ if orderLine.address }}
                        <div class="orderlines-delivery-address">
                            <span class="address-label">{{ sc_field i_datasource "Order Lines Address Label" }}:</span>
                            <ul class="lineShippingAddress">
                                <li>
                                    <span class="lineShippingAddressLine">
                                        {{ orderLine.address.address1 }},
                                    </span>
                                    <span class="lineShippingAddressCity">
                                        {{ orderLine.address.city }}
                                    </span>
                                </li>
                                <li>
                                    <span class="lineShippingAddressState">
                                        {{ orderLine.address.state }},
                                    </span>
                                    <span class="lineShippingAddressZipCode">
                                        {{ orderLine.address.zip_postal_code }},
                                    </span>
                                    <span class="lineShippingAddressCountry">
                                        {{ orderLine.address.country }}
                                    </span>
                                </li>
                            </ul>
                        </div>

                        {{ # The following <p> contains the electronic delivery email address information }}
                        {{ if orderLine.electronic_delivery_email }}
                        <p class="orderlines-email">{{ orderLine.electronic_delivery_email }}</p>
                        {{ end }}
                        {{ end }}
                    </div>
                </div>

                {{ # The following <div> contains the unit price and discount offers applied }}
                {{ if !orderLine.is_free_gift }}
                <div class="orderlines-item-price unit-price">
                    <span class="price-amount">{{ orderLine.price_text }}</span>
                    {{ if orderLine.discount_offer_names.size > 0 }}
                    <span class="discount-details">
                        <span>{{ sc_field i_datasource "Order Lines Discount Label" }}: </span>
                        <span class="savings">{{ orderLine.discount_offer_names | array.join ", " }}</span>
                    </span>
                    {{ end }}
                </div>
                {{ end }}

                {{ # The following <div> contains the product quantity }}
                <div class="orderlines-item-quantity product-quantity">
                    {{ orderLine.quantity_text }}
                </div>

                {{ # The following <div> contains the total price and discount amount }}
                <div class="orderlines-item-total line-total">
                    <h4 class="total-amount">{{ orderLine.total_text }}</h4>
                    {{ # If the order line is free gift, show the original price, otherwise show the discount }}
                    {{ if orderLine.is_free_gift }}
                    <span class="orderlines-freegiftlistprice">{{ orderLine.price_text }}</span>
                    {{ else if orderLine.line_discount > 0 }}
                    <span class="savings">
                        <span>{{ sc_field i_datasource "Order Lines Discount Label" }} </span>
                        <span class="discount">{{ orderLine.line_discount_text }}</span>
                    </span>
                    {{ end }}
                </div>
            </div>
            {{ # Item sublines, contains the sublines for the current product }}
            {{ if orderLine.sub_lines }}
            <div class="orderlines-item-sublines">
                {{ # Loop through all the sublines }}
                {{ for subLine in orderLine.sub_lines }}
                <div class="orderlines-subline-item">
                    {{ # Placeholder for blank space }}
                    <div class="orderlines-subline-image-space"></div>
                    {{ # The following <div> contains the subline product image }}
                    <div class="product-image">
                        <a href="{{ subLine.product_url }}">
                            <img src="{{ subLine.product_master_image | sc_imagelink 110 110 }}" />
                        </a>
                    </div>
                    {{ # The following <div> contains the subline product name and variant information }}
                    <div class="orderlines-info">
                        <a href="{{ subLine.product_url }}">
                            <h4 class="product-name">{{ subLine.product_display_name }}</h4>
                        </a>
                        <div class="product-variants">
                            {{ for property in subLine.properties }}
                            <div class="product-variant">
                                <span class="variant-label">
                                    {{
                                        if (object.has_key o_model.variant_labels property.key)
                                            o_model.variant_labels[property.key]
                                        else
                                            property.key
                                        end
                                    }}
                                </span>
                                <span class="variant-information">
                                    {{ property.value }}
                                </span>
                            </div>
                            {{ end }}
                        </div>
                    </div>
                    {{ # The following <div> contains the subline product quantity }}
                    <div class="product-quantity">
                        {{ subLine.quantity_text }}
                    </div>
                    {{ # Placeholder for blank space }}
                    <div class="orderlines-subline-total-space"></div>
                </div>
                {{ end }}
            </div>
            {{ end }}
        </div>
        {{ end }}
    </div>
</div>
{{ end }}

In the Order Lines Scriban template, you access the properties and objects contained in the OrderlinesRenderingModel model through the embedded item o_model. The Order Lines rendering model is shown in the following diagram.

Diagram of the Order Lines rendering model