jQuery range slider + carousel price
Здравствуйте !
Заранее прошу прощения, за свои познания, по этому и решил обратиться за помощью к вам. Я, только начал изучение библиотеки а мне дали задание, весьма сложное для начинающего... Нужно создать 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 |
Цитата:
|
Вот пример. У вас скрипт отдает две переменные 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>
|
Цитата:
Цитата:
Наверное это вы и имели в виду ? Картинки хранятся в медиатеке сайта 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> |
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. Потом еще нужно будет продумать, как не слать много запросов на сервер, нужно сделать задержку (таймаут) после события изменения бегунка. Иначе будет не очень круто, на каждое микродвижение бегунка будут идти запросы. Другой вариант - отсылать по нажатию на кнопку, после того как будет задан диапазон. |
Цитата:
Мне казалось, что можно как-то намного проще прикрутить ползунок к слайдеру изображений и отображать контент в соответствии с диапазоном. |
Вот самый простой пример, который я смог придумать. Но он не подходит для боевого проекта. Если только для себя или в учебных целях.
<!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,
В основном потому, что данные (картинки и цены) прописаны в JS. Строки 13-18. А это значит, что когда в магазин нужно будет добавить новые товары или удалить какие-то из них, то придется изменять вручную и этот JS. То есть не получится так, что добавил товар через админку или изменил цену и все работает, придется еще тут правки вносить. |
Цитата:
Примерно с таким кодом моя карусель показывает слайды <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), верно ? |
| Часовой пояс GMT +3, время: 21:50. |