Как реализовать простой фильтр товаров?
Есть левый сайт бар и контентная часть.
1. Как только мы попадаем на страницу у нас отображается список товаров, он ограничек кол-вом, например 10. (можно список из 10 последних добавленных).
2. В сайд баре расположены категории товаров. Нажимаем на категорию и в контентной части отображаются товары из этой категории, но уже все (или к примеру не более 50).
3.А сама ссылка в сайтбаре расскрывается на подкатегории, с которыми мы можем проделать тоже самое.
Как такое чудо можно реализовать, в jq и js не силен, но разобраться смогу. Сайт давольно простой, каких то супер крутых новаротов не нужны. Хочу все это сделать на клиентской стороне, без использования сервера.
- Вопрос задан более трёх лет назад
- 4852 просмотра
Комментировать
Решения вопроса 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-сервером проекта, если он есть.
Фильтр веб-страниц на JavaScript: эффективная фильтрация и сортировка данных
Создание веб-страниц с динамической фильтрацией и сортировкой данных — важная задача для многих проектов. Это может быть интернет-магазин, портфолио, каталог товаров или любой другой веб-проект, где пользователь ожидает возможности быстро находить необходимую информацию. В этой статье мы рассмотрим, как создать эффективный фильтр веб-страниц на JavaScript, используя HTML, CSS и JavaScript.
Если вы еще не начали карьеру в IT, приходите на наш бесплатный вебинар, чтобы узнать, как начать зарабатывать с помощью зерокодинга и нейросетей!
Основы фильтрации и сортировки
1. HTML и CSS: создание основы
Прежде чем приступить к JavaScript, нужно создать основу для веб-страницы. Это включает в себя HTML-разметку и CSS-стилизацию элементов. Создадим простую модель списка товаров:
Как сделать — Фильтр элементов
Узнать, как фильтровать элемент 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»;
>);
>
как сделать фильтр поиска?
всем привет не судите строго за вопрос, только начинаю изучать) нужно сделать меню поиска, состоящее из фильтров. в меню фильтра должен показывать выбранный фильтр, а весь список фильтра показывается в выпадающем меню, проблема в том что не получается «поставить» выбранный фильтр в меню данного фильтра.
Отслеживать
задан 12 июн 2020 в 12:11
23 3 3 бронзовых знака
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
надеюсь правильно тебя понял, вот примерный код того что ты хочешь
public selectedFilter: string; // . public selectFilter(filter: string): void
Немного обьясню что происходит, на каждый элемент ngFor мы указыва функцию на клик которая принимает как параметр название фильтра, либо сам фильтр (это может быть как обьект так и простой тип данных), ну присваеваем в переменную выбранный фильтр
Также такие вот действия в представлении: typeDropdown = !typeDropdown я бы советовал всё таки вынести в компонент (ts файл), это неявная логика и вообщемто принято разделять логику от представления, инлайн функции не приветствуются