Как реализовать простой фильтр товаров?
Есть левый сайт бар и контентная часть.
1. Как только мы попадаем на страницу у нас отображается список товаров, он ограничек кол-вом, например 10. (можно список из 10 последних добавленных).
2. В сайд баре расположены категории товаров. Нажимаем на категорию и в контентной части отображаются товары из этой категории, но уже все (или к примеру не более 50).
3.А сама ссылка в сайтбаре расскрывается на подкатегории, с которыми мы можем проделать тоже самое.
Как такое чудо можно реализовать, в jq и js не силен, но разобраться смогу. Сайт давольно простой, каких то супер крутых новаротов не нужны. Хочу все это сделать на клиентской стороне, без использования сервера.
- Вопрос задан более трёх лет назад
- 4836 просмотров
Комментировать
Решения вопроса 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-сервером проекта, если он есть.
как сделать фильтр поиска?
всем привет не судите строго за вопрос, только начинаю изучать) нужно сделать меню поиска, состоящее из фильтров. в меню фильтра должен показывать выбранный фильтр, а весь список фильтра показывается в выпадающем меню, проблема в том что не получается «поставить» выбранный фильтр в меню данного фильтра.
Отслеживать
задан 12 июн 2020 в 12:11
23 3 3 бронзовых знака
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
надеюсь правильно тебя понял, вот примерный код того что ты хочешь
public selectedFilter: string; // . public selectFilter(filter: string): void
Немного обьясню что происходит, на каждый элемент ngFor мы указыва функцию на клик которая принимает как параметр название фильтра, либо сам фильтр (это может быть как обьект так и простой тип данных), ну присваеваем в переменную выбранный фильтр
Также такие вот действия в представлении: typeDropdown = !typeDropdown я бы советовал всё таки вынести в компонент (ts файл), это неявная логика и вообщемто принято разделять логику от представления, инлайн функции не приветствуются
Как использовать фильтры и сортировку на сайте с помощью JavaScript
Узнайте, как использовать фильтры и сортировку на сайте с помощью JavaScript для улучшения пользовательского опыта и облегчения навигации.
Алексей Кодов
Автор статьи
1 июня 2023 в 15:38
Основная цель фильтров и сортировки на сайте — улучшение пользовательского опыта, путем облегчения навигации и поиска нужной информации. В этой статье мы рассмотрим, как использовать фильтры и сортировку на сайте с помощью JavaScript.
Фильтрация данных
Фильтрация — это процесс отбора определенных элементов из набора данных на основе заданных критериев. В JavaScript для фильтрации данных можно использовать метод filter() .
Пример использования метода filter()
Предположим, у нас есть массив объектов с данными о студентах:
const students = [ < name: "Alice", age: 20, course: "Web Development" >, < name: "Bob", age: 23, course: "Data Science" >, < name: "Carol", age: 22, course: "Web Development" >, ];
Теперь, если мы хотим отфильтровать студентов, которые изучают «Web Development», мы можем сделать это следующим образом:
const webDevStudents = students.filter( (student) => student.course === "Web Development" ); console.log(webDevStudents); // Output: [< name: "Alice", age: 20, course: "Web Development" >, < name: "Carol", age: 22, course: "Web Development" >]
Сортировка данных
Сортировка — это процесс упорядочивания данных в определенной последовательности (по возрастанию или убыванию). В JavaScript для сортировки данных можно использовать метод sort() .
Пример использования метода sort()
Используя тот же массив студентов, давайте отсортируем их по возрасту:
const sortedByAge = students.sort((a, b) => a.age - b.age); console.log(sortedByAge); // Output: [< name: "Alice", age: 20, course: "Web Development" >, < name: "Carol", age: 22, course: "Web Development" >, < name: "Bob", age: 23, course: "Data Science" >]
Теперь студенты отсортированы по возрастанию возраста.
Python-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT
Использование фильтров и сортировки вместе
Вы также можете комбинировать фильтрацию и сортировку для получения более точных результатов. Например, отфильтровать студентов по курсу и затем отсортировать их по возрасту:
const webDevAndSorted = students .filter((student) => student.course === "Web Development") .sort((a, b) => a.age - b.age); console.log(webDevAndSorted); // Output: [< name: "Alice", age: 20, course: "Web Development" >, < name: "Carol", age: 22, course: "Web Development" >]
Теперь наши данные отфильтрованы и отсортированы в соответствии с заданными критериями.
�� Важно помнить, что методы filter() и sort() не изменяют исходный массив, а возвращают новый массив с результатами.
Теперь вы знаете, как использовать фильтры и сортировку на сайте с помощью JavaScript. Эти методы могут быть очень полезными для улучшения пользовательского опыта и облегчения навигации по данным на вашем сайте. Удачи в изучении веб-разработки! ��
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 не добавляет фильтры к элементам при печати документа.