Форум

Some Way · #1 (**permalink**) 30.11.2017, 22:37

Здравствуйте !

Заранее прошу прощения, за свои познания, по этому и решил обратиться за помощью к вам.

Я, только начал изучение библиотеки а мне дали задание, весьма сложное для начинающего...
Нужно создать range slider с каруселью изображений товаров, и привязать ползунок к ценам, что бы в диапазоне от 50 до 500 при движение ползунка появлялись соответственные товары отсортированные в зависимости от выбранного диапазона цен.

Единственное что пока получилось так это сам ползунок

<script>

	jQuery(function(){

		jQuery("#range").ionRangeSlider({
			type: "double",
		    grid: true,
		    min: 0,
		    max: 500,
		    from: 200,
		    to: 300,
		    step: 100
		});
	});	

		
</script>

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

Проблема именно в том, что я только начал изучать javascript и попросту знаю всего ничего.

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

Изображение собственно по ссылке.
http://joxi.ru/Q2KLba5f4e1qLA.jpg

рони · #2 (**permalink**) 30.11.2017, 22:51

Сообщение от Some Way

carousel

на чём сделана?

void() · #3 (**permalink**) 01.12.2017, 00:52

Вот пример. У вас скрипт отдает две переменные from и to (диапазон). Его надо отправлять на сервер через AJAX и получать товары, а затем вставлять в слайдер. Так? А если товары типа уже загружены, то перебирать их в цикле и проверять, что если их цена больше from и меньше to, тогда их выводить в слайдер.
Строка 42.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/ion.rangeSlider.css">
    <link rel="stylesheet" href="css/ion.rangeSlider.skinFlat.css">
    <script src="js/jquery-1.12.3.min.js"></script>
    <script src="js/ion.rangeSlider.js"></script>
</head>
<body>

    <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: 300,
                type: 'double',
                step: 1,
                prefix: "$",
                grid: true
            });

            $range.on("change", function () {
                var $this = $(this),
                from = $this.data("from"),
                to = $this.data("to");

               /* И здесь нужно сформировать AJAX запрос на сервер. */

           });
        });

    </script>

</body>
</html>

Some Way · #4 (**permalink**) 01.12.2017, 16:14

Сообщение от рони

на чём сделана?

Использую для создания slickslider

Сообщение от void()

Вот пример. У вас скрипт отдает две переменные from и to (диапазон). Его надо отправлять на сервер через AJAX и получать товары, а затем вставлять в слайдер. Так? А если товары типа уже загружены, то перебирать их в цикле и проверять, что если их цена больше from и меньше to, тогда их выводить в слайдер.

Есть карусель, в ней-итэмы текстового блока в котором находится изображение и текст, нужно сделать так что бы при выборе от from к to на ползунке, в карусели отображались только те текстовые блоки с изображениями у которых цена(текст "EUR от min50 к max500") соответствует выбранному диапазону на ползунке.
Наверное это вы и имели в виду ?
Картинки хранятся в медиатеке сайта wordpress.

<div class="slick-slide slick-current slick-active" >
<span class="content-section">		  	
<img class="alignnone size-full wp-image-254" src="/wp-content/uploads/galery-9.png">
<p>185×210</p>
<h5>ORIGINAL LARGE Abstract Painting</h5>
<h6>EUR 400</h6>
<br>
</span>
</div>

void() · #5 (**permalink**) 01.12.2017, 17:06

~~OMG, здесь еще и bootstrap~~

Some Way,
Это не важно, что у вас карусель. Загвоздка в том, что нужно получить как-то карточки товара. Схема примерно такая:

1. Создаем файл php, что-то вроде shopCard.php. Закрываем его от индексации. В нем пишем:

<?php echo ... и отдаем готовый HTML клиенту здесь.

2. К тому коду, который я привел выше, добавляем на 42 строке аякс запрос к php. Что-то вроде этого:

function ajaxGet(){
var request = new XMLHttpRequest();
request.onreadystatechange = function(){
if(request.readyState == 4 && request.status == 200){
OVL.CARUSEL.innerHTML = request.response;
}
}
request.open('GET', 'shopCard.php');
request.send(from, to);
}

Передаем на сервер в параметрах from и to. А в php уже получаем from и to и отбираем картинки, тесты-описания, цену и т.д. и возвращаем готовый HTML. И вставляем его в карусель легким движением руки).

Это просто схема. Попробуйте для начала просто достучаться до сервера, передать ему параметры и получить хоть какой-то ответ. Затем ответ вставьте в карусель. После этого уже можно лучше проработать php. Откуда брать тексты и цены? Где-то в базе лежит, но где? И какова структура у картинок?

Или это я чет не понимаю?)

P.S. Потом еще нужно будет продумать, как не слать много запросов на сервер, нужно сделать задержку (таймаут) после события изменения бегунка. Иначе будет не очень круто, на каждое микродвижение бегунка будут идти запросы. Другой вариант - отсылать по нажатию на кнопку, после того как будет задан диапазон.

Some Way · #6 (**permalink**) 01.12.2017, 17:35

Сообщение от void()

OMG, здесь еще и bootstrap

Большое человеческое спасибо вам за ваш труд, пока слабо понимаю что к чему, но буду пробовать, по другому никак.
Мне казалось, что можно как-то намного проще прикрутить ползунок к слайдеру изображений и отображать контент в соответствии с диапазоном.

void() · #7 (**permalink**) 01.12.2017, 18:23

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Пример</title>
</head>
<body>

	<div class="owl-carousel"></div>
	<button onclick="sort();">Отсортировать</button>
	<script>

		/* Описываем здесь свои данные (например, ссылки на картинки по ключу цены) */
		var imges = {
			50: ['imges1', 'imges2', 'imges3','imges4'],
			100: ['imges5', 'imges6', 'imges7','imges8'],
			250: ['imges9', 'imges10', 'imges11','imges12']
		};

// Получаем owl-carousel в переменную
var carous = document.querySelector('.owl-carousel');

/* Это переменные, которые генерирует бегуток - значения ОТ и ДО */
var iFrom = 50;
var iTo = 250;

/* Перебераем данные и выводим в карусель только те, которые соответствуют требованиям from-to */
function sort(){
	for(var key in imges){
		if(key > iFrom && key < iTo){
			for(var k = 0; k < imges[key].length; k++){
				carous.innerHTML += '<img src="' + imges[key][k] + '">';
			}
		}
	}
}
</script>
</body>
</html>

Some Way · #8 (**permalink**) 01.12.2017, 18:52

Сообщение от void()

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

Спасибо вам огромное, буду пробовать, почему для проекта не сгодится ?

void() · #9 (**permalink**) 01.12.2017, 19:06

Some Way,
В основном потому, что данные (картинки и цены) прописаны в JS. Строки 13-18. А это значит, что когда в магазин нужно будет добавить новые товары или удалить какие-то из них, то придется изменять вручную и этот JS. То есть не получится так, что добавил товар через админку или изменил цену и все работает, придется еще тут правки вносить.

Some Way · #10 (**permalink**) 02.12.2017, 18:02

Сообщение от void()

То есть не получится так, что добавил товар через админку или изменил цену и все работает, придется еще тут правки вносить.

А если скрывать весь span c class="content-section" в котором есть class="mid" и уже потом привязать значения ползунка к классам.

Примерно с таким кодом моя карусель показывает слайды

<div class="slick-track">
	<div calss="slick-slide">
		<span class="content-section">
			<p><img src="izobrajenie"></p>
			<p>text small</p>
			<h5>LARGE text</h5>
			<h6><span class="mid">EUR 300</span></h6>
		</span>
	</div>
</div>

Но в таком случае придется редактировать не сам JS а слайд (добавлять тексту спан с классом цены например: low,mid,high), верно ?

Форум

Справочник

Discord чат

Курсы javascript