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 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}}
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.