Format the price and location data on currency

horaci

Posted: 12 years ago

#988 Quote

Total Posts: 5

Hello, I need to adjust the display currency with prices in the filter. Now appears before the currency price (as is customary for the dollar or the euro), but I need to display a currency for an indication of price or to respect set in the same as nopCommerce. The same format applies to the price.

Support

Posted: 12 years ago

#990 Quote

Status: Moderator
Total Posts: 1044

Hi,

In order to format the price the same way that nopCommerce does in the category page for example, you need to edit this view in the filters:

Plugins\SevenSpikes.Nop.AjaxFilters\Views\PriceRangeFilterSlider7Spikes\PriceRangeFilterSlider.cshtml

And here, where the price from the model is used:


<div class="priceRangeMinMaxPanel">
                <span class="priceRangeMinPanel">
                    <span>@T("SevenSpikes.NopAjaxFilters.Client.PriceRangeFilter.Min"):</span>
                    <span class="priceRangeMinPrice">@String.Concat(Model.CurrencySymbol, Model.MinPrice.ToString("F0"))</span>
                </span>
                <span class="priceRangeMaxPanel">
                    <span>@T("SevenSpikes.NopAjaxFilters.Client.PriceRangeFilter.Max"):</span>
                    <span class="priceRangeMaxPrice">@String.Concat(Model.CurrencySymbol, Model.MaxPrice.ToString("F0"))</span>
                </span>
            </div>
            <div id="slider" data-sliderMinValue="@Model.MinPrice" data-sliderMaxValue="@Model.MaxPrice"
                data-selectedFromValue="@Model.SelectedPriceRange.From" data-selectedToValue="@Model.SelectedPriceRange.To" >
            </div>
            <div class="priceRangeCurrentPricesPanel">
                <span class="currentMinPrice">@String.Concat(Model.CurrencySymbol, Model.SelectedPriceRange.From)</span>
                <span class="currentMaxPrice">@String.Concat(Model.CurrencySymbol, Model.SelectedPriceRange.To)</span>
            </div>

use this method to format the price:

@EngineContext.Current.Resolve<IPriceFormatter>().FormatPrice()

for example:

<span class="priceRangeMinPrice">@EngineContext.Current.Resolve<IPriceFormatter>().FormatPrice(Model.MinPrice)</span>

I hope this is useful!

zjerry

Posted: 11 years ago

#2377 Quote

Total Posts: 39

I tried that line:

<span class="priceRangeMinPrice">@EngineContext.Current.Resolve<IPriceFormatter>().FormatPrice(Model.MinPrice)</span>

Unfortunately this couses a compilation error:

CS0103: Name „EngineContext” does not exist in current context.

So I've added the:

@using Nop.Core.Infrastructure

at the top of the view.

Now I'm receiving this error:

CS1502: invalid arguments exists in the best suited overloaded method „System.Web.WebPages.WebPageExecutingBase.Write(System.Web.WebPages.HelperResult)”

IvanStoyanov

Posted: 11 years ago

#2385 Quote

Total Posts: 269

zjerry wrote:

I tried that line:

<span class="priceRangeMinPrice">@EngineContext.Current.Resolve<IPriceFormatter>().FormatPrice(Model.MinPrice)</span>

Unfortunately this couses a compilation error:

CS0103: Name „EngineContext” does not exist in current context.

So I've added the:

@using Nop.Core.Infrastructure

at the top of the view.

Now I'm receiving this error:

CS1502: invalid arguments exists in the best suited overloaded method „System.Web.WebPages.WebPageExecutingBase.Write(System.Web.WebPages.HelperResult)”

Hi zjerry,

Add the following usings:


@using Nop.Core.Infrastructure;
@using Nop.Services.Catalog;

Change

@{
    Html.AddScriptParts("~/Plugins/SevenSpikes.Nop.AjaxFilters/Scripts/PriceRangeFilterSlider.min.js");
}

to look like this:

@{
    Html.AddScriptParts("~/Plugins/SevenSpikes.Nop.AjaxFilters/Scripts/PriceRangeFilterSlider.min.js");
    var priceFormatter = EngineContext.Current.Resolve<IPriceFormatter>();
}

and use the price formatter like this:

<span class="priceRangeMinPrice">@priceFormatter.FormatPrice(Model.MinPrice)</span>

<span class="priceRangeMinPrice">@priceFormatter.FormatPrice(Model.MaxPrice)</span>

Ivan Stoyanov

Thank you for choosing our products! Your feedback is important to us!

zjerry

Posted: 11 years ago

#2405 Quote

Total Posts: 39

This works with Model.MinPrice and Model.MaxPrice only.

When I’m trying to use it with Model.SelectedPriceRange.From and Model.SelectedPriceRange.To

I receive:
CS1502:Invalid arguments in the best suited overloaded method „Nop.Services.Catalog.IPriceFormatter.FormatPrice(decimal)”

Also
@priceFormatter.FormatPrice(Model.MinPrice) gives currency symbol in Upper Case (not like in the NopCommerce elsewhere)

Any ideas?

IvanStoyanov

Posted: 11 years ago

#2413 Quote

Total Posts: 269

zjerry wrote:

This works with Model.MinPrice and Model.MaxPrice only.

When I’m trying to use it with Model.SelectedPriceRange.From and Model.SelectedPriceRange.To

I receive:
CS1502:Invalid arguments in the best suited overloaded method „Nop.Services.Catalog.IPriceFormatter.FormatPrice(decimal)”

Also
@priceFormatter.FormatPrice(Model.MinPrice) gives currency symbol in Upper Case (not like in the NopCommerce elsewhere)

Any ideas?

Hi

Add

(decimal)

before the

Model.SelectedPriceRange.To

.

It should look like this:

@priceFormatter.FormatPrice((decimal)Model.SelectedPriceRange.From)

Ivan Stoyanov

Thank you for choosing our products! Your feedback is important to us!

zjerry

Posted: 11 years ago

#2414 Quote

Total Posts: 39

Ok, got it!

Here is the summary of the changes:

1. The Plugins\SevenSpikes.Nop.AjaxFilters\Views\PriceRangeFilterSlider7Spikes\PriceRangeFilterSlider.cshtml now reads like:

@** Copyright 2012 Seven Spikes Ltd. All rights reserved. (http://www.nop-templates.com)
* http://www.nop-templates.com/t/licensinginfo
*@

@using Nop.Core.Infrastructure;
@using Nop.Services.Catalog;


@{
    Html.AddScriptParts("~/Plugins/SevenSpikes.Nop.AjaxFilters/Scripts/PriceRangeFilterSlider.min.js");
    var priceFormatter = EngineContext.Current.Resolve<IPriceFormatter>();
}

@model SevenSpikes.Nop.AjaxFilters.Models.PriceRangeFilterSlider.PriceRangeFilterModel7Spikes

<div class="priceRangeFilterPanel7Spikes" data-currentCurrencySymbol="@Model.CurrencySymbol">
    <div class="block filter-block">
        <div class="title">
            <a class="toggleControl">@T("SevenSpikes.NopAjaxFilters.Client.PriceRangeFilter.Title")</a>
            <a class="clearPriceRangeFilter">@T("SevenSpikes.NopAjaxFilters.Client.Common.Clear")</a>
            <div class="clear"></div>
        </div>
        <div class="filtersGroupPanel">
            <div class="priceRangeMinMaxPanel">
                <span class="priceRangeMinPanel">
                    <span>@T("SevenSpikes.NopAjaxFilters.Client.PriceRangeFilter.Min"):</span>
                    <span class="priceRangeMinPrice">@priceFormatter.FormatPrice(Model.MinPrice)</span>
                </span>
                <span class="priceRangeMaxPanel">
                    <span>@T("SevenSpikes.NopAjaxFilters.Client.PriceRangeFilter.Max"):</span>
                    <span class="priceRangeMaxPrice">@priceFormatter.FormatPrice(Model.MaxPrice)</span>
                </span>
            </div>
            <div id="slider" data-sliderMinValue="@Model.MinPrice" data-sliderMaxValue="@Model.MaxPrice"
                data-selectedFromValue="@Model.SelectedPriceRange.From" data-selectedToValue="@Model.SelectedPriceRange.To" >
            </div>
            <div class="priceRangeCurrentPricesPanel">
                <span class="currentMinPrice">@priceFormatter.FormatPrice((decimal)Model.SelectedPriceRange.From)</span>
                <span class="currentMaxPrice">@priceFormatter.FormatPrice((decimal)Model.SelectedPriceRange.To)</span>
            </div>
            <div class="clear"></div>
        </div>
    </div>
</div>

2. In the Plugins\SevenSpikes.Nop.AjaxFilters\Themes\NeoFashion\Content\SevenSpikesNopUI.css
I've changed (or added) the following styles:

.priceRangeMinMaxPanel {
    overflow: hidden;
    margin-bottom: 10px;
    text-transform:none;
}
.priceRangeMinPanel .priceRangeMinPrice {
    text-transform: lowercase;
}
.priceRangeMaxPanel .priceRangeMaxPrice{
    text-transform: lowercase;
}
.priceRangeCurrentPricesPanel .currentMinPrice {
    float: left;
    text-transform: lowercase;
}
.priceRangeCurrentPricesPanel .currentMaxPrice {
    float: right;
    text-transform: lowercase;
}

3. In the Plugins\SevenSpikes.Nop.AjaxFilters\Scripts\PriceRangeFilterSlider.min.js
I've replaced all occurrences of:

x + z.toFixed()

into

z.toFixed() + ' ' + x

where x stands for $(".priceRangeFilterPanel7Spikes").attr("data-currentCurrencySymbol")
and z stands for specific values

Now everthing works and looks correct.
Thank you.

beatmaster

Posted: 11 years ago

#3718 Quote

Total Posts: 8

Hi there, I have been following these instructions posted above and have successfully changed the Ajax Filters to display my currency symbol like Nopcommerce does, additionaly have I changed the code in the PriceRangeFilterSlider.min.js to move the slider values from the currentMinPrice/currentMaxPrice to priceRangeMinPrice/priceRangeMaxPrice, i did that by changing all values of

(".priceRangeFilterPanel7Spikes .priceRangeCurrentPricesPanel .currentMinPrice")

to

(".priceRangeFilterPanel7Spikes .priceRangeMinMaxPanel .priceRangeMinPrice")

and all values of

(".priceRangeFilterPanel7Spikes .priceRangeCurrentPricesPanel .currentMaxPrice")

to

(".priceRangeFilterPanel7Spikes .priceRangeMinMaxPanel .priceRangeMaxPrice")

My problem is that I have custom formatting on my currency and it displays like it should when the page which contain the filters opens but when i move the slider the custom formatting drops and changed values are displayed with the currency symbol without the custom formatting, it displays like that after refresh unless you move the slider to its min and max values and then refresh, then the custom formatting displays until you move the slider again

My custom formatting is

# ###,###.##

because I only want to show the numbers not the currency symbol.

I´m not very skilled with Javascript/Jquery so I am not sure what to change so the custom formatting can be displayed also while moving the slider, any suggestions?

Boyko

Posted: 11 years ago

#3724 Quote

Total Posts: 1570

beatmaster wrote:

Hi there, I have ...

My custom formatting is

# ###,###.##

because I only want to show the numbers not the currency symbol.

Hi beatmaster,

We changed the Ajax Filters to use the custom formatting by default for the min and max prices. We decided to completely remove the currency symbol from the current selected price range as it is confusing and as it is changed via the javascript it can't be formatted the same way as it in nopCommerce. So if you update the Ajax Filters plugin you will have the min and max prices with your custom formatting and have no currency symbols from the selected prices below the price range filter.

Thanks

Regards,
Nop-Templates.com Team