How Do I Move The Price Filter Section To The Categories Section? Version 4.20

Hi,How Do I Move The Price Filter Section To The Categories Section? Version 4.20

Note: Version 4.20

That Price filter is in
     nopCommerce42\Presentation\Nop.Web\Views\Catalog\CategoryTemplate.ProductsInGridOrLines.cshtml

     @if (Model.PagingFilteringContext.PriceRangeFilter.Enabled)
     {
          @await Html.PartialAsync("_FilterPriceBox", Model.PagingFilteringContext.PriceRangeFilter)
     }

That place you are pointing to is in

     nopCommerce42\Presentation\Nop.Web\Themes\PowerShop\Views\Shared\_ColumnsTwo.cshtml

In short you need to stick that _FilterPriceBox (or a version thereof) in the two column layout

Yidna wrote:


When I do what you say above, I get an error. Not working.

Well I did not mean that you could literally do it so simply that way
I've just pointed out the existing code
Id imagine you would need to make a similar version of the price selector probably as a component and then somehow inject the output into the model controlling the display on the category page

Or rather than reinvent the wheel you could use a plugin like

https://www.nop-templates.com/ajax-filters-plugin-for-nopcommerce

which has an Ajax price filter

Add to > wwwroot>js>public.common.js

function replaceUrlParam(url, paramName, paramValue) {
  if (paramValue == null) {
      paramValue = '';
  }
  var pattern = new RegExp('\\b(' + paramName + '=).*?(&|#|$)');
  if (url.search(pattern) >= 0) {
      return url.replace(pattern, '$1' + paramValue + '$2');
  }
  url = url.replace(/[?#]$/, '');
  return url + (url.indexOf('?') > 0 ? '&' : '?') + paramName + '=' + paramValue;
}
var getUrlParameter = function getUrlParameter(sParam) {
  var sPageURL = window.location.search.substring(1),
      sURLVariables = sPageURL.split('&'),
      sParameterName,
      i;

  for (i = 0; i < sURLVariables.length; i++) {
      sParameterName = sURLVariables[i].split('=');

      if (sParameterName[0] === sParam) {
          return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
      }
  }
};

Add to > Views>Catalog>CategoryTemplate.ProductsInGridOrLines.cshtml

var minSlider = Convert.ToInt32(Model.Products.Select(x => x.ProductPrice.PriceValue).OrderBy(p => p).FirstOrDefault());
var maxSlider = Convert.ToInt32(Model.Products.Select(x => x.ProductPrice.PriceValue).OrderByDescending(p => p).FirstOrDefault());
var breadcrumbDelimiter = commonSettings.BreadcrumbDelimiter;
if (maxSlider == 0 || minSlider == maxSlider)
{
    maxSlider = 500;
}

Add to > Views>Catalog>CategoryTemplate.ProductsInGridOrLines.cshtml

<div class="product-filters">
  <div class="product-filter product-spec-filter">

    <div class="block price-block">
      <div class="title"><strong>Price</strong><span class="btn-filter-collapse"></span></div>
      <div class="listbox">
        <div id="slider-range"></div>
        <div style=" display: inline-block; width: 100%; margin: 10px 0 0; ">
          <span id="js-pLeft" style="float:left;"></span>
          <span id="js-pRight" style="float:right;"></span>
        </div>
        <button type="button" class="btn-price-reset">Reset</button>
        <button type="button" class="btn-price-filter" data-min-price="@minSlider"
          data-max-price="@maxSlider">Apply</button>
      </div>
    </div>
    <script asp-location="Footer">
      $(function () {
        var minSlider = @minSlider;
        var maxSlider = @maxSlider;
        var getParam = getUrlParameter('price');
        if (getParam != null) {
          var valPrice = getParam.split("-");
          minSlider = parseFloat(valPrice[0]);
          maxSlider = parseFloat(valPrice[1]);
        }
        $("#js-pLeft").html(minSlider + ".00");
        $("#js-pRight").html(maxSlider + ".00");
        $("#slider-range").slider({
          range: true,
          min: minSlider,
          max: maxSlider,
          values: [minSlider, maxSlider],
          slide: function (event, ui) {
            $(".btn-price-filter").attr("data-min-price", ui.values[0]);
            $(".btn-price-filter").attr("data-max-price", ui.values[1]);
            $("#js-pLeft").html(ui.values[0] + ".00");
            $("#js-pRight").html(ui.values[1] + ".00");
          },
          change: function (event, ui) {
            $(".btn-price-filter").attr("data-min-price", ui.values[0]);
            $(".btn-price-filter").attr("data-max-price", ui.values[1]);
            $("#js-pLeft").html(ui.values[0] + ".00");
            $("#js-pRight").html(ui.values[1] + ".00");
          }
        });
        $(".btn-price-filter").on("click", function () {
          var minPrice = $(".btn-price-filter").attr("data-min-price");
          var maxPrice = $(".btn-price-filter").attr("data-max-price");
          var geturl = replaceUrlParam(window.location.href, "price", minPrice + "-" + maxPrice);
          setLocation(geturl);
        });
        $(".btn-price-reset").on("click", function () {
          var geturl = replaceUrlParam(window.location.href, "price");
          setLocation(geturl.replace("price=", ""));
        });
      });
    </script>

Add to Nop>Web>Factories>CatalogModelFactory > PrepareCategoryModel method in after to line 358 after /*decimal? maxPriceConverted = null;*/

var range = _webHelper.QueryString<string>("price");
  if (!string.IsNullOrEmpty(range))
  {
      var fromTo = range.Trim().Split(new[] { '-' });
      if (fromTo.Length == 2)
      {
          if (!string.IsNullOrEmpty(fromTo[0]) && !string.IsNullOrEmpty(fromTo[0].Trim()))
              minPriceConverted = decimal.Parse(fromTo[0].Trim(), new CultureInfo("en-US"));
          if (!string.IsNullOrEmpty(fromTo[1]) && !string.IsNullOrEmpty(fromTo[1].Trim()))
              maxPriceConverted = decimal.Parse(fromTo[1].Trim(), new CultureInfo("en-US"));
      }
  }