Some Way,
Давайте разберем все по полочкам. Есть плагин бегунок, плагин карусель и товары. 1. Плагин с бегунком - это черный ящик. Не важно как он работает, самое главное, что он генерирует 2 переменные from и to. Больше от него ничего не нужно. 2. Плагин карусели представляет собой черный ящик с контейнером. Для ovl-карусели это контейнер такого вида: <div class="owl-carousel"></div> В этот блок можно положить любые элементы и они автоматически становятся слайдами. 3. Теперь у меня к вам вопрос - где взять товары, которые надо вставить в карусель и отсортировать по критерию from-to? ======== Если вы их уже выводите в карусель, то можно хотя бы так: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <span class="content-section" style="display:block"> <p><img src="un.jpg"></p> <p>text small</p> <h5>LARGE text</h5> <h6><span class="mid">EUR 600</span></h6> </span> <span class="content-section" style="display:block"> <p><img src="un.jpg"></p> <p>text small</p> <h5>LARGE text</h5> <h6><span class="mid">EUR 250</span></h6> </span> <span class="content-section" style="display:block"> <p><img src="un.jpg"></p> <p>text small</p> <h5>LARGE text</h5> <h6><span class="mid">EUR 550</span></h6> </span> <span class="content-section" style="display:block"> <p><img src="un.jpg"></p> <p>text small</p> <h5>LARGE text</h5> <h6><span class="mid">EUR 250</span></h6> </span> <script> var prise = document.querySelectorAll('.mid'); var ifrom = 100; var ito = 300; for(var i = 0; i < prise.length; i++){ var elemPrise = prise[i].innerHTML.replace('EUR ', ''); if(elemPrise > ifrom && elemPrise < ito){ prise[i].parentNode.parentNode.style.display='block'; }else{ prise[i].parentNode.parentNode.style.display='none'; } } </script> </body> </html> |
Цитата:
Соответственно аддоном пихаю в ряд карусель а в карусель уже слайды в которых текстовые блоки с инфой. Товарами являются простые изображения(из медиатеки сайта), под которыми дописывается нужный текст, на первой странице в конце поста я приложил ссылку с тем как это должно выглядеть. Возможно есть намного проще решение моей проблемы при помощи этакого аддона, но я их уже перебрал очень много и подходящий не попадался. Изображение "карточки товара" http://joxi.ru/VrwbR6VFOLPyoA |
Кажется понял. То есть вы сразу в карусель пихаете все товары, ок.
Вот рабочий вариант на первый случай. Зависимости В принципе все зависимости можно увидеть в разделе <head> - все подключенные файлы. Но на всякий случай. Версия jQuery jquery-1-12-3 Бегунок - ion.rangeslider Карусель - owlcarousel2 Пример: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример</title> <script src="js/jquery-1.12.3.min.js"></script> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/ion.rangeSlider.css"> <link rel="stylesheet" href="css/ion.rangeSlider.skinHTML5.css"> <script src="js/ion.rangeSlider.js"></script> <script src="js/owl.carousel.js"></script> <link rel="stylesheet" href="css/owl.carousel.min.css"> </head> <body> <!-- Слайды с товарами --> <div class="owl-carousel owl-theme"> <div class="item"> <span class="content-section"> <p><img src="izobrajenie"></p> <p>text small</p> <h5>LARGE text</h5> <h6><span class="mid">EUR 250</span></h6> </span> </div> <div class="item"> <span class="content-section"> <p><img src="izobrajenie"></p> <p>text small</p> <h5>LARGE text</h5> <h6><span class="mid">EUR 150</span></h6> </span> </div> <div class="item"> <span class="content-section"> <p><img src="izobrajenie"></p> <p>text small</p> <h5>LARGE text</h5> <h6><span class="mid">EUR 200</span></h6> </span> </div> <div class="item"> <span class="content-section"> <p><img src="izobrajenie"></p> <p>text small</p> <h5>LARGE text</h5> <h6><span class="mid">EUR 600</span></h6> </span> </div> <div class="item"> <span class="content-section"> <p><img src="izobrajenie"></p> <p>text small</p> <h5>LARGE text</h5> <h6><span class="mid">EUR 250</span></h6> </span> </div> <div class="item"> <span class="content-section"> <p><img src="izobrajenie"></p> <p>text small</p> <h5>LARGE text</h5> <h6><span class="mid">EUR 130</span></h6> </span> </div> <div class="item"> <span class="content-section"> <p><img src="izobrajenie"></p> <p>text small</p> <h5>LARGE text</h5> <h6><span class="mid">EUR 76</span></h6> </span> </div> <div class="item"> <span class="content-section"> <p><img src="izobrajenie"></p> <p>text small</p> <h5>LARGE text</h5> <h6><span class="mid">EUR 420</span></h6> </span> </div> </div> <!-- Бегунок с диапазонами цен --> <div style="position: relative; padding: 200px;"> <div> <input type="text" id="range" value="" name="range" /> </div> </div> <script> $(function () { var $range = $("#range"); $range.ionRangeSlider({ hide_min_max: true, keyboard: true, min: 50, max: 500, from: 100, to: 400, type: 'double', step: 1, prefix: "$", grid: true }); $range.on("change", function () { var $this = $(this), from = $this.data("from"), to = $this.data("to"); /* скрипт на первый случай. Его не возбороняется улучшать и совершенствовать :) */ var prise = document.querySelectorAll('.mid'); for(var i = 0; i < prise.length; i++){ var elemPrise = prise[i].innerHTML.replace('EUR ', ''); if(elemPrise > from && elemPrise < to){ prise[i].parentNode.parentNode.parentNode.parentNode.style.display='block'; }else{ prise[i].parentNode.parentNode.parentNode.parentNode.style.display='none'; } } }); }); $('.owl-carousel').owlCarousel({ loop:true, margin:10, nav:true, responsive:{ 0:{ items:1 }, 600:{ items:3 }, 1000:{ items:5 } } }) </script> </body> </html> |
Цитата:
С вашей неоценимой помощью, у меня появился прогресс, последний скрипт начал прятать все слайды :) Думаю, каким-то образом нужно сортировать слайды только по наявности текста со значением 'EUR и "стоимость слайда"' и показывать те, которые подходят под from и to(их и отображать, без класса тегу h6). Таким образом при добавление нового слайда, с новой ценой он должен отобразиться при диапазоне выбора в который попадает. Даже не знаю, может еще так, если у слайда есть текст "EUR" со значением 50, и ползунок установлен на 50 и 100 будут показываться все слайды цена которых не превышает 100, если ползунок "to" стоит на номере 350 а "from" на 250, показываются все слайды с текстом цены "EUR от 250 до 350" ну и так аж до 500. |
Some Way,
У меня этот скрипт работает корректно, все в динамике обновляется и сортируется. Может у вас разметка айтемов отличается или еще что-то... Но бегунок срабатывает только после того, как им воспользуются. При загрузке же страницы, можно сортировать вручную, как-то так: window.onload = function(){ // после загрузки страницы... var prise = document.querySelectorAll('.mid'); // получаем все дивы, в которых записана цена for(var i = 0; i < prise.length; i++){ // начинаем их по очереди перебирать... var elemPrise = prise[i].innerHTML.replace('EUR ', ''); // Сначала получаем цены без "EUR" - только цифра if(elemPrise > 50 && elemPrise < 500){ // Если цифра больше 50 и меньше 500 то - prise[i].parentNode.parentNode.parentNode.parentNode.style.display='block'; // показать родителя родителя родителя ) }else{ prise[i].parentNode.parentNode.parentNode.parentNode.style.display='none'; // иначе - скрыть } } } Залил архив с примером на гугл.диск - так будет проще https://drive.google.com/file/d/1qoQ...ew?usp=sharing |
Цитата:
Но, проблема в том, что карусель я добавляю аддоном в админке( c помощью visual composer), не пишу html, кроме как <input type="text" id="range" value="" name="range"> Класс .mid, прописывал руками, что вообще не желательно( делал это для того, что бы получить хоть какой-то результат)! Возможно ли без назначения класса тегу h6 отображать элементы только используя текст(цену) ? Есть возможность добавлять класс каждому слайду через админку, но основная идея в том, что бы максимально упростить код для человека который слабо разбирается в админке, что бы он с помощью инструкции смог просто добавить новый слайд с ценой и внести его в перечень отображающихся. З.Ы. Мне очень неудобно перед вами, за потраченое на мою проблему время, но за ваши комментарии в коде огромное спасибо, по скольку я только начал, это просто бесценные вещи(помогает разобраться в синтаксисе и в целом по написание кода, ведь я только открываю для себя такие вещи как "if","else","var")!!! |
Some Way,
:D меня не напрягает. Все равно я все свободное время трачу на учебники, задачники и курсы по JS и решение самых разных задач по JS :) Проблема в другом - я вас не понимаю. Не знаю, как обратиться к данным (товарам). Где они у вас лежат, какая у них структура и т.д. Может, кто-нибудь другой еще вам поможет) |
Цитата:
|
Если слайды так выглядят:
<div class="item"> <span class="content-section"> <p><img src="izobrajenie"></p> <p>text small</p> <h5>LARGE text</h5> <h6><span>EUR 130</span></h6> </span> </div> Тогда строку: var prise = document.querySelectorAll('.mid'); Заменить на: var prise = document.querySelectorAll('.content-section span'); И должно заработать. |
Цитата:
http://joxi.ru/a2XKLJ4H1v8Nvm Цитата:
Перечитываю ваши сообщения, ищу что еще можно изменить. |
Часовой пояс GMT +3, время: 12:38. |