I'm trying to filter items from an ecommerce site.The project on the local server was running smoothly.However, I noticed significant delays since the project was published on the global server.Most often happens when changes are made to the price range.
Here is the Ajax code:
productFilter = {
catId: $('#catId').val(),
subcatId: $('#catSubId').val(),
markaId: null,
}
$(".filter-button").click(function () {
let filterPrice = $(this).val()
let maxPrice = $("input[name='maxProPrice']").val();
let minPrice = $("input[name='minProPrice']").val();
updateAllData(filterPrice, productFilter.markaId, minPrice, maxPrice, productFilter.subcatId,
productFilter.catId)
})
$(".btnRangePrice").click(function () {
let maxPrice = $("input[name='maxProPrice']").val();
let minPrice = $("input[name='minProPrice']").val();
updateAllData(productFilter.markaId, minPrice, maxPrice, productFilter.subcatId, productFilter
.catId)
})
$("#markaId").click(() => {
$('input[name="marka"]').change(function () {
if ($(this).prop('checked')) {
productFilter.markaId = $(this).val()
}
})
})
function updateAllData(markaId, minPrice, maxPrice, subcatId, catId) {
$.ajax({
url: "/api/getpromarka",
type: "Get",
data: {
'catId': catId,
'subCatId': subcatId,
'markaId': markaId,
'minPrice': minPrice,
'maxPrice': maxPrice,
//'price':filtprice
},
success: function (res) {
$("#prdcFor").empty();
res.forEach(resf => {
document.querySelector("#prdcFor").insertAdjacentHTML('beforeend',
`
<div class="col-lg-3 col-md-4 col-sm-12 col-12">
<div
class="shopImg mb-3" style="height:400px;">
<div class="ImgDiv" style="height:200px">
<img class="shop-img pro_image" style="height:100%; width:100%" src="${resf.Image}" alt="">
</div>
<div class="img-text mt-3">
<span class="pro_name">${resf.Name}</span>
</div>
<p class="pro_price">${resf.Price} AZN</p>
<input class="hidePId" type="hidden" value="${resf.Id}" />
<div class="">
<button type="button" data-action="Add_To_Cart" class="btn btn-warning mb-5 add-to-cart">Səbətə Əlavə Et</button>
</div>
</div>
</div>
`)
})
}
})
}
Web Api 2 Controller :
public IQueryable<Product> GetProduct(int? catId, int? subCatId, int? markaId,int? minPrice,int? maxPrice)
{
if (subCatId == null)
return db.Products.Where(pr => pr.SubCategory.CategoryId == catId && pr.Price >= minPrice && pr.Price <= maxPrice && pr.MarkaId == markaId);
if (markaId == null)
{
return db.Products.Where(pr => pr.SubCategory.CategoryId == catId && pr.SubCategoryId == subCatId && pr.Price >= minPrice && pr.Price <= maxPrice);
}
return db.Products.Where(pr=>pr.SubCategoryId==subCatId && pr.MarkaId==markaId && pr.Price>=minPrice && pr.Price<=maxPrice);
}
Product cshtml
<section id="Shop" class="mt-5 mb-5">
<input id="catId" type="hidden" data-catid="subId" value="@catId" />
<input id="catSubId" type="hidden" data-subcatid="subCatId" value="@subId" />
<div class="container-fluid">
<div class="row">
<div class="mob-category col-md-4 col-lg-3">
<div class="ShopCategory" data-aos="fade-right">
@foreach (var item in Model.SubCategoryName.Where(sb=>sb.CategoryId==catId))
{
<div class="col-md-12">
<div class="row">
<div class="col-md-10 col-10">
<a id="@item.Id" class="sub_cat_name accordion" href="@Url.Action("product","product",new { subId=item.Id})">
<span>
@item.Name
</span>
</a>
</div>
</div>
</div>
}
<div class="col-md-12">
<a class="accordion" href="@Url.Action("PcTopla","Product")">
<span>
Pc Topla+
</span>
</a>
</div>
<br>
<h3 class="mt-5 text-center pt-1" style="border-top:1px solid #ccc;">Qiymət</h3>
<div class="price_range">
<div class="row mr-2 ml-2 mb-5">
<div class="col-md-5">
<div class="from">
<input name="minProPrice" class="num" type="number" id="price_from" min="@ViewBag.proMin" max="@ViewBag.proMax"
value="@ViewBag.proMin"/>
</div>
</div>
<div class="col-md-2">
<span>__</span>
</div>
<div class="col-md-5">
<div class="to">
<input class="num" name="maxProPrice" type="number" id="price_to" min="@ViewBag.proMin" max="@ViewBag.proMax" value="@ViewBag.proMax">
</div>
</div>
</div>
<h3 class="mt-3 text-center">İstehsalçı</h3>
<div class="company ml-5 mb-5">
<ul class="list-unstyled">
@foreach (var item in Model.marka)
{
<li>
<input id="markaId" type="radio" name="marka" value="@item.Id">
@item.MarkaName
</li>
}
</ul>
</div>
</div>
<div class="col d-flex justify-content-center">
<button type="submit" class="btnRangePrice btn btn-warning mb-3" >Seçimi göstər</button>
</div>
</div>
</div>
<div class="col-12 col-sm-12 col-md-8 col-lg-9">
<div id="prdcFor" class="row">
@foreach (var item in Model.productList)
{
<div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-6">
<div class="shopImg mb-3" style="height:400px;">
<div class="ImgDiv" style="height:200px">
<img class="shop-img pro_image" style="height:100%; width:100%" src="@item.Image" alt="">
</div>
<div class="img-text mt-3">
<span class="pro_name">@item.Name</span>
</div>
<p class="pro_price">@item.Price AZN</p>
<input class="hidePId" type="hidden" value="@item.Id" />
<div class="addtocart">
<button type="button" data-action="Add_To_Cart" class="btn btn-warning mb-5 add-to-cart">Səbətə Əlavə Et</button>
</div>
</div>
</div>
}
</div>
</div>
</div>
</div>
