Customizing the Product Price rendering
Overview of the Product Price rendering Scriban template.
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.
Note
The Product Price - 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 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}}
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.
