Customizing the Product Price rendering

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

The following code shows the Scriban template for the Product Price rendering defined within the default rendering variant. The adjusted price and list price are passed into the MVC Model and are available in the rendering variant and in Scriban templates using the embedded item o_model.

{{ # The <div> element to show the error message. }} 
{{ if o_model.error_message}}
    <div class="error-message">
      {{o_model.error_message}}
    </div>
{{else
    if i_datasource 
    if o_model.is_on_sale
        percentLead = i_datasource.SavingsLeadText.raw
        savingsMessage = percentLead + ' ' + o_model.savings_percentage + '%'
    }}
    <input type="hidden" value="{{savingsMessage}}" id="productprice-savingsmessage" />
    {{end}}        
    <div class="price-info" productid="{{o_model.product_id}}" listprice="{{o_model.formatted_list_price}}" adjustedprice="{{o_model.formatted_adjusted_price}}" isonsale="{{o_model.is_on_sale}}">
        <div class="price-now-before">
            <div class="price-with-savings">
                <h3>
                    <span data-bind="text: priceNow"></span>
                    <span data-bind="text: savingsMessage"></span>
                </h3>
            </div>
            <div class="price-before">
                <h3>
                    <span data-bind="text: priceBefore"></span>
                </h3>
            </div>
        </div>
        <div class="price-only">
            <h3>
                <span data-bind="text: priceNow"></span>
            </h3>
        </div>
    </div>
{{else
  if o_pagemode.is_experience_editor_editing
 '[No Data source has been selected]'
end
end
end}}

Product Price rendering model

In the Product Price Scriban template, you access the properties and objects contained in the ProductPriceRenderingModel model through the embedded item o_model as shown in the following diagram.