Как реализовать простой фильтр товаров?
Есть левый сайт бар и контентная часть.
1. Как только мы попадаем на страницу у нас отображается список товаров, он ограничек кол-вом, например 10. (можно список из 10 последних добавленных).
2. В сайд баре расположены категории товаров. Нажимаем на категорию и в контентной части отображаются товары из этой категории, но уже все (или к примеру не более 50).
3.А сама ссылка в сайтбаре расскрывается на подкатегории, с которыми мы можем проделать тоже самое.
Как такое чудо можно реализовать, в jq и js не силен, но разобраться смогу. Сайт давольно простой, каких то супер крутых новаротов не нужны. Хочу все это сделать на клиентской стороне, без использования сервера.
- Вопрос задан более трёх лет назад
- 4777 просмотров
Комментировать
Решения вопроса 2
программист-велосипедист
Обычно фильтры — это AJAX запрос к контроллеру ( обработчеку всего это добра ) с уточняющим параметром, тот в свою очередь делает подзапрос в базу данных. Получает ответ , отдаёт на страницу , JS перерисовывает область товаров и вуаля. Фильтр сработал.
Хочу все это сделать на клиентской стороне, без использования сервера.
для этого надо выгружать все товары на страницу , потом прятать по категории, потом показывать . что не есть гуд
Ответ написан более трёх лет назад
Нравится 1 3 комментария
Novamoscow @Novamoscow Автор вопроса
На сколько сложно реализовать предложенный метод ? Я делаю 3 — 4 сайт, с сервером ни разу не работал.
Novamoscow @Novamoscow Автор вопроса
еще такой вопрос, я как верстальщик, на какой стадии все это должен оставить? Я так понимаю, мне нужно только алгоритм связи с сервером написать, чтобы сайт отдавал запрос в базу и принимал его ( ну и отрисовка результата)
Novamoscow: если опыт нету, то сложно. Делается это после того, как будет написан обработчик ajax запросов. Т.е. область ответственности верстальщика заканчивается на клиенте.
Сергей delphinpro @delphinpro Куратор тега CSS
frontend developer
Нельзя это сделать только на клиенте. Если конечно у вас не 10-20-30 товаров всего.
В реальном магазине сотни, а то и тысячи товаров. Все их на страницу вы не загрузите (ну вы-то может и загрузите, только ни один пользователь не будет ждать пока загрузится эта ваша мега-страница).
А значит фильтр должен отправлять запросы на сервер, получать от него список товаров, соответствующих фильтру и показывать их.
Вам, как верстальщику, разумеется, не нужно бросаться писать серверные скрипты, с этим штатный программист прекрасно справится (да и не пустит он вас на свою территорию =)). А вот что от вас нужно — это написать на js весь интерактив фильтра, отправку запроса с параметрами, получение ответа и рендеринг сетки товаров. Формат запросов-ответов нужно обсудить с программистом. Как именовать параметры, в каком формате он будет отдавать данные (json/html).
Для верстки и отладки (для себя) можно самому написать простенький php скриптик-заглушку, который будет реагировать на пару фильтров и отдавать несколько тестовых товаров. Или воспользоваться dev-сервером проекта, если он есть.
Как сделать — Фильтр элементов
Узнать, как фильтровать элемент DIV на основе его имени класса.
Фильтр элементов DIV
Показать все Машины Животные Фрукты Цветы
Создание фильтра элементов DIV
Шаг 1) Добавить HTML:
Пример
Шаг 2) Добавить CSS:
Пример
.filterDiv float: left;
background-color: #2196F3;
color: #ffffff;
width: 100px;
line-height: 100px;
text-align: center;
margin: 2px;
display: none; /* Скрыто по умолчанию */
>
/* В класс «show» добавляется к отфильтрованные элементы */
.show display: block;
>
/* Стиль кнопок */
.btn border: none;
outline: none;
padding: 12px 16px;
background-color: #f1f1f1;
cursor: pointer;
>
/* Добавить светло-серый фон на наведении курсора мыши */
.btn:hover background-color: #ddd;
>
/* Добавить темный фон для активной кнопки */
.btn.active background-color: #666;
color: white;
>
Шаг 3) Добавить JavaScript:
Пример
filterSelection(«all»)
function filterSelection(c) var x, i;
x = document.getElementsByClassName(«filterDiv»);
if (c == «all») c = «»;
// Добавить класс «show» (display:block) к отфильтрованным элементам и удалите класс «show» из элементов, которые не выбраны
for (i = 0; i < x.length; i++) w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], «show»);
>
>
// Показать отфильтрованные элементы
function w3AddClass(element, name) var i, arr1, arr2;
arr1 = element.className.split(» «);
arr2 = name.split(» «);
for (i = 0; i < arr2.length; i++) if (arr1.indexOf(arr2[i]) == -1) element.className += " " + arr2[i];
>
>
>
// Скрыть элементы, которые не выбраны
function w3RemoveClass(element, name) var i, arr1, arr2;
arr1 = element.className.split(» «);
arr2 = name.split(» «);
for (i = 0; i < arr2.length; i++) while (arr1.indexOf(arr2[i]) > -1) arr1.splice(arr1.indexOf(arr2[i]), 1);
>
>
element.className = arr1.join(» «);
>
// Добавить активный класс к текущей кнопке управления (выделите ее)
var btnContainer = document.getElementById(«myBtnContainer»);
var btns = btnContainer.getElementsByClassName(«btn»);
for (var i = 0; i < btns.length; i++) btns[i].addEventListener("click", function() var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(» active», «»);
this.className += » active»;
>);
>
filter
Устанавливает фильтр (визуальный эффект) или их сочетание для элемента. К фильтрам относится изменение прозрачности, добавление тени, трансформация и др.
Синтаксис
filter: progid:DXImageTransform.Microsoft.Фильтр(свойства)Фильтры
Alpha Настраивает прозрачность объекта. BasicImage Устанавливает параметры цвета, поворота изображения или прозрачности. Blur Размывает содержимое. Chroma Показывает определенные цвета прозрачными. DropShadow Отображает тень. Emboss Показывает содержимое объекта в виде барельефа. Engrave Показывает содержимое объекта в виде черно-белой гравюры. Glow Добавляет свечение вокруг краев. Gradient Создаёт линейный градиент. ICMFilter Преобразует цвета содержимого на основе профиля системы управления цветом (Image Color Management, ICM). Light Создает эффект лучей света. MaskFilter Показывает прозрачные пикселы как цветную маску, а непрозрачные пикселы наоборот, прозрачными. Matrix Изменяет размер, поворачивает или отражает объект на основе матричных преобразований. MotionBlur Размывает объект так, словно он быстро движется. Shadow Добавляет тень. Wave Вносит волнообразные искажения.
HTML5 CSS2.1 IE Cr Op Sa Fx
filter 
Браузеры
В IE6 и в IE7 фильтры применяются только для элементов, у которых установлено свойство hasLayout.
Internet Explorer 9 не добавляет фильтры к элементам при печати документа.