На нашем сайте мы используем cookie для сбора информации технического характера и обрабатываем IP-адрес вашего местоположения. Продолжая использовать этот сайт, вы даете согласие на использование файлов cookies. Здесь вы можете узнать, как мы пользуемся файлами cookies.
Я согласен
логотип upread.ru

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


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

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



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

Цена
<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.






тегизаметки, опенкарт, javascript





Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.




C++: построчное чтение из файла с проверкой его существования
Урок 17. Конвертация чисел в строки (Number в String) C#


© upread.ru 2013-2019
При перепечатке активная ссылка на сайт обязательна.
Задать вопрос
письмо
Здравствуйте! Вы можете задать мне любой вопрос. Если не получается отправить сообщение через эту форму, то пишите на почу up777up@yandex.ru
Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.