Страница 2 из 3 < 1 2 3 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   jQuery range slider + carousel price (https://javascript.ru/forum/jquery/71612-jquery-range-slider-carousel-price.html)

void() 02.12.2017 22:10
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>

Some Way 02.12.2017 22:32
Цитата:
Сообщение от void()
Теперь у меня к вам вопрос - где взять товары, которые надо вставить в карусель и отсортировать по критерию from-to?
Я,создаю простенький лэндинг(на wordpress) c помощью visual composer.
Соответственно аддоном пихаю в ряд карусель а в карусель уже слайды в которых текстовые блоки с инфой.

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

Изображение "карточки товара"
http://joxi.ru/VrwbR6VFOLPyoA

void() 02.12.2017 23:44
Кажется понял. То есть вы сразу в карусель пихаете все товары, ок.

Вот рабочий вариант на первый случай.

Зависимости
В принципе все зависимости можно увидеть в разделе <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>

Some Way 03.12.2017 15:00
Цитата:
Сообщение от void()
Кажется понял. То есть вы сразу в карусель пихаете все товары, ок.
Совершенно верно, и хочу добиться результата, что бы ползунок (его диапазон выбора) отображал только те слайды в которых есть h6 с текстом 'EUR от 50 до 500'.
С вашей неоценимой помощью, у меня появился прогресс, последний скрипт начал прятать все слайды :)
Думаю, каким-то образом нужно сортировать слайды только по наявности текста со значением 'EUR и "стоимость слайда"' и показывать те, которые подходят под from и to(их и отображать, без класса тегу h6).
Таким образом при добавление нового слайда, с новой ценой он должен отобразиться при диапазоне выбора в который попадает.

Даже не знаю, может еще так, если у слайда есть текст "EUR" со значением 50, и ползунок установлен на 50 и 100 будут показываться все слайды цена которых не превышает 100, если ползунок "to" стоит на номере 350 а "from" на 250, показываются все слайды с текстом цены "EUR от 250 до 350" ну и так аж до 500.

void() 03.12.2017 16:04
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

Some Way 03.12.2017 18:17
Цитата:
Сообщение от void()
Залил архив с примером на гугл.диск - так будет проще
Действительно, все работает !
Но, проблема в том, что карусель я добавляю аддоном в админке( c помощью visual composer), не пишу html, кроме как 
<input type="text" id="range" value="" name="range">

Класс .mid, прописывал руками, что вообще не желательно( делал это для того, что бы получить хоть какой-то результат)!
Возможно ли без назначения класса тегу h6 отображать элементы только используя текст(цену) ?

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

З.Ы. Мне очень неудобно перед вами, за потраченое на мою проблему время, но за ваши комментарии в коде огромное спасибо, по скольку я только начал, это просто бесценные вещи(помогает разобраться в синтаксисе и в целом по написание кода, ведь я только открываю для себя такие вещи как "if","else","var")!!!

void() 03.12.2017 19:17
Some Way,
:D меня не напрягает. Все равно я все свободное время трачу на учебники, задачники и курсы по JS и решение самых разных задач по JS :)

Проблема в другом - я вас не понимаю. Не знаю, как обратиться к данным (товарам). Где они у вас лежат, какая у них структура и т.д. Может, кто-нибудь другой еще вам поможет)

Some Way 03.12.2017 19:37
Цитата:
Сообщение от void()
Проблема в другом - я вас не понимаю. Не знаю, как обратиться к данным (товарам). Где они у вас лежат, какая у них структура и т.д.
Все на самом деле проще некуда, наверное я объясняю не правильно...

  1. Есть page builder (visual composer) с помощью него я добавляю контент на страницу (таким методом добавил карусель, засунул туда слайды, они листаются).
  2. Товары, это и есть слайды карусели (добавил новый слайд с изображением и текстом) - получил новый товар.

void() 03.12.2017 19:52
Если слайды так выглядят:

<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');


И должно заработать.

Some Way 04.12.2017 15:21
Цитата:
Сообщение от void()
И должно заработать.
Если отдельно, как в вашем архивчике, все работает, но когда пытаюсь подключить к сайту, ничего, скрином прикрепляю вид html, что бы наглядно было видно мой лес дремучий, использовал уже непосредственно слайдер на базе owl-carousel, что бы нам было проще :)
http://joxi.ru/a2XKLJ4H1v8Nvm

Цитата:
Сообщение от void()
var prise = document.querySelectorAll('.content-section span');
Изменял значения на : h6, owl-item, добился только исчезания всех слайдов, но это уже хоть что-то, есть хоть реакция на действие, раньше вообще глухо было.
Перечитываю ваши сообщения, ищу что еще можно изменить.


Часовой пояс GMT +3, время: 12:59.
Страница 2 из 3 < 1 2 3 >
Показывать 40 сообщений этой темы на одной странице