Фильтрация товаров на опенкарт без перезагрузки страницы

Вообще, говоря, данную фильтрацию можно осуществить для практически любого интернет-магазина на любой кмс, но мы рассмотрим пример фильтрации по цене именно для опенкарт, так как для данная система довольно капризна к совместимости дополнений, да и найти бесплатно их не так уж и просто. Да и интересно же самим реализовать, так как это несложно.

Итак, есть у нас вот такой шаблон, с вот таким ползунком:



Верстка тут будет до безобразия проста:

Цена
<br /><br />
До<span id="cen-polz">1280</span>
<br /><br />
</div>
<div id="polzunok-ob" class="polzunok-ob">
<img src="../image/polzunok-jur.png" id="polzunok"/>
</div>

Стили тоже:

<style>
#cen-polz{
float: right;
margin-right: 140px
}
.polzunok-ob {
  border-radius: 5px;
      background-image: url(../image/line1.png);
    background-position: -30px;
    background-size: 160% 300%;
    background-repeat: no-repeat;
    width: 200px;
    height: 5px;
    margin-left: -5px;
}
#polzunok {
  width: 40px;
  height: 40px;
  position: relative;
  left: 160px;
  top: -27px;
  cursor: pointer;
  z-index: 999;
}
</style>

А теперь самое интересное – обработчик этого ползунка на фильтр:

<script>
  var cen = document.getElementById('cen-polz');
    var sliderElem = document.getElementById('polzunok-ob');
    var thumbElem = sliderElem.children[0];
    thumbElem.onmousedown = function(e) {
      var thumbCoords = getCoords(thumbElem);
      var shiftX = e.pageX - thumbCoords.left;
      var sliderCoords = getCoords(sliderElem);
      document.onmousemove = function(e) {
        var newLeft = e.pageX - shiftX - sliderCoords.left;
        if (newLeft < 0) {
          newLeft = 0;
        }
        var rightEdge = sliderElem.offsetWidth - thumbElem.offsetWidth;
        if (newLeft > rightEdge) {
          newLeft = rightEdge;
        }
        thumbElem.style.left = newLeft + 'px';
		cen.innerHTML = newLeft*8;
		var cenprom = parseInt(newLeft*8);
		for (i=0; i<30;i++) {
		var elem = jQuery('.col-w1-4 .price:eq('+i+')');
		var elem2 = jQuery('.col-w1-4:eq('+i+')');	
		if (parseInt((jQuery(elem).text().trim().substring(0, jQuery(elem).text().trim().length - 3))) > cenprom ) {
		jQuery(elem2).css('display','none');
		}
		else {	jQuery(elem2).css('display','inline-block');}	
		}		
      }
      document.onmouseup = function() {
        document.onmousemove = document.onmouseup = null;
      };
      return false; // disable selection start (cursor change)
    };
    thumbElem.ondragstart = function() {
      return false;
    };
    function getCoords(elem) { // кроме IE8-
      var box = elem.getBoundingClientRect();
      return {
        top: box.top + pageYOffset,
        left: box.left + pageXOffset
      };
    }
  </script>

Сложного тут ничего нет, но все же стоит прояснить пару моментов. Итак, вначале мы получаем переменные по id,а затем пишем свой обработчик Drag’n’Drop (не забывая отключить встроенный в браузер).

Сама фильтрация происходит вот здесь:

for (i=0; i<30;i++) {
		var elem = jQuery('.col-w1-4 .price:eq('+i+')');
		var elem2 = jQuery('.col-w1-4:eq('+i+')');		
		if (parseInt((jQuery(elem).text().trim().substring(0, jQuery(elem).text().trim().length - 3))) > cenprom ) {
		jQuery(elem2).css('display','none');
		}
		else {	jQuery(elem2).css('display','inline-block');}		
		}

Мы считаем, что 30 товаров на странице и пробегаем по ним. Если цена в поле с классом price меньше текущей ползунка, то мы его скрываем. В данном случае потребовалось дополнительно избавиться от пробелов с помощью функции trim(), а также обрезать три последних символа с помощью функции substring() –чтобы получить чистое число, без p.