How can I display the price difference for variants/choices?

At this time, none of the options being rendered have a template available to make changing how they're rendered through configuration.  However, there it a simple workaround available to make this happen.

In this case, you'd want to look for code in your view that looks like this:

@Html.Raw(opt.RenderWithSelection(Model.Selections.OptionSelectionList))

It outputs the respective option or options as HTML, based upon the configuration of the respective product or bundled product.  Unfortunately for you, the HTML output for each individual option is all output in the same chunk of HTML.  This means that in order to do this, you'll need to change the names of the options before they're sent to be rendered.

Add the following to top of your view.  This function will iterate through each option and change the name to include the mark-up added to the product price as part of the label.  This will do it, without having to update the name in the administration.

@using Hotcakes.Commerce.Catalog
@using Hotcakes.Modules.Core.Models
@functions{
    private List<OptionItem> UpdateOptionItemNames(List<OptionItem> items)
    {
        foreach (var item in items)
        {
            item.Name = string.Concat(item.Name, " (+", item.PriceAdjustment.ToString("C"), ")");
        }
        return items;
    }
}

Now, find the spot in your code that we originally pointed out above.  Within the same For Each block of code, call the method we added.  See the example below to see what it might look like in your custom view.

foreach (var opt in Model.LocalProduct.Options)
{
    opt.Items = UpdateOptionItemNames(opt.Items);  // add this
    <div class="dnnFormItem clearfix">
        @if (!opt.NameIsHidden)
        {<label class="dnnLabel">@opt.Name</label>}
        <div class="hc-option">
            @Html.Raw(opt.RenderWithSelection(Model.Selections.OptionSelectionList))
        </div>
    </div>
}

This will output something like this.  You'll see here that you might want to consider adding some conditions to possibly change how/when you update the option names (e.g., zero dollar choices).

Have more questions? Submit a request

Need More Help?

Do you need more assistance with this article? Please review your support options.