02.12.2017, 22:10
|
 |
Профессор
|
|
Регистрация: 11.08.2017
Сообщений: 208
|
|
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>
|
|
02.12.2017, 22:32
|
 |
Интересующийся
|
|
Регистрация: 30.11.2017
Сообщений: 17
|
|
|
Сообщение от void()
|
|
Теперь у меня к вам вопрос - где взять товары, которые надо вставить в карусель и отсортировать по критерию from-to?
|
Я,создаю простенький лэндинг(на wordpress) c помощью visual composer.
Соответственно аддоном пихаю в ряд карусель а в карусель уже слайды в которых текстовые блоки с инфой.
Товарами являются простые изображения(из медиатеки сайта), под которыми дописывается нужный текст, на первой странице в конце поста я приложил ссылку с тем как это должно выглядеть.
Возможно есть намного проще решение моей проблемы при помощи этакого аддона, но я их уже перебрал очень много и подходящий не попадался.
Изображение "карточки товара"
http://joxi.ru/VrwbR6VFOLPyoA |
|
02.12.2017, 23:44
|
|
Профессор
|
|
Регистрация: 11.08.2017
Сообщений: 208
|
|
Кажется понял. То есть вы сразу в карусель пихаете все товары, ок.
Вот рабочий вариант на первый случай.
Зависимости
В принципе все зависимости можно увидеть в разделе <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>
|
|
03.12.2017, 15:00
|
|
Интересующийся
|
|
Регистрация: 30.11.2017
Сообщений: 17
|
|
|
Сообщение от void()
|
|
Кажется понял. То есть вы сразу в карусель пихаете все товары, ок.
|
Совершенно верно, и хочу добиться результата, что бы ползунок (его диапазон выбора) отображал только те слайды в которых есть h6 с текстом 'EUR от 50 до 500'.
С вашей неоценимой помощью, у меня появился прогресс, последний скрипт начал прятать все слайды 
Думаю, каким-то образом нужно сортировать слайды только по наявности текста со значением 'EUR и "стоимость слайда"' и показывать те, которые подходят под from и to(их и отображать, без класса тегу h6).
Таким образом при добавление нового слайда, с новой ценой он должен отобразиться при диапазоне выбора в который попадает.
Даже не знаю, может еще так, если у слайда есть текст "EUR" со значением 50, и ползунок установлен на 50 и 100 будут показываться все слайды цена которых не превышает 100, если ползунок "to" стоит на номере 350 а "from" на 250, показываются все слайды с текстом цены "EUR от 250 до 350" ну и так аж до 500. |
|
03.12.2017, 16:04
|
|
Профессор
|
|
Регистрация: 11.08.2017
Сообщений: 208
|
|
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
Последний раз редактировалось void(), 03.12.2017 в 16:44.
|
|
03.12.2017, 18:17
|
|
Интересующийся
|
|
Регистрация: 30.11.2017
Сообщений: 17
|
|
|
Сообщение от void()
|
|
Залил архив с примером на гугл.диск - так будет проще
|
Действительно, все работает !
Но, проблема в том, что карусель я добавляю аддоном в админке( c помощью visual composer), не пишу html, кроме как
<input type="text" id="range" value="" name="range">
Класс .mid, прописывал руками, что вообще не желательно( делал это для того, что бы получить хоть какой-то результат)!
Возможно ли без назначения класса тегу h6 отображать элементы только используя текст(цену) ?
Есть возможность добавлять класс каждому слайду через админку, но основная идея в том, что бы максимально упростить код для человека который слабо разбирается в админке, что бы он с помощью инструкции смог просто добавить новый слайд с ценой и внести его в перечень отображающихся.
З.Ы. Мне очень неудобно перед вами, за потраченое на мою проблему время, но за ваши комментарии в коде огромное спасибо, по скольку я только начал, это просто бесценные вещи(помогает разобраться в синтаксисе и в целом по написание кода, ведь я только открываю для себя такие вещи как "if","else","var")!!!
|
|
03.12.2017, 19:17
|
|
Профессор
|
|
Регистрация: 11.08.2017
Сообщений: 208
|
|
Some Way,
 меня не напрягает. Все равно я все свободное время трачу на учебники, задачники и курсы по JS и решение самых разных задач по JS
Проблема в другом - я вас не понимаю. Не знаю, как обратиться к данным (товарам). Где они у вас лежат, какая у них структура и т.д. Может, кто-нибудь другой еще вам поможет)
|
|
03.12.2017, 19:37
|
|
Интересующийся
|
|
Регистрация: 30.11.2017
Сообщений: 17
|
|
|
Сообщение от void()
|
|
Проблема в другом - я вас не понимаю. Не знаю, как обратиться к данным (товарам). Где они у вас лежат, какая у них структура и т.д.
|
Все на самом деле проще некуда, наверное я объясняю не правильно...
- Есть page builder (visual composer) с помощью него я добавляю контент на страницу (таким методом добавил карусель, засунул туда слайды, они листаются).
- Товары, это и есть слайды карусели (добавил новый слайд с изображением и текстом) - получил новый товар.
|
|
03.12.2017, 19:52
|
|
Профессор
|
|
Регистрация: 11.08.2017
Сообщений: 208
|
|
Если слайды так выглядят:
<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');
И должно заработать. |
|
04.12.2017, 15:21
|
|
Интересующийся
|
|
Регистрация: 30.11.2017
Сообщений: 17
|
|
|
Сообщение от void()
|
|
И должно заработать.
|
Если отдельно, как в вашем архивчике, все работает, но когда пытаюсь подключить к сайту, ничего, скрином прикрепляю вид html, что бы наглядно было видно мой лес дремучий, использовал уже непосредственно слайдер на базе owl-carousel, что бы нам было проще
http://joxi.ru/a2XKLJ4H1v8Nvm
|
Сообщение от void()
|
|
var prise = document.querySelectorAll('.content-section span');
|
Изменял значения на : h6, owl-item, добился только исчезания всех слайдов, но это уже хоть что-то, есть хоть реакция на действие, раньше вообще глухо было.
Перечитываю ваши сообщения, ищу что еще можно изменить. |
|
|
|
