Задать вопрос
@nik8n

Фильтры товаров интернет-магазина, как грамотно реализовать обмен данными с сервером?

Здравствуйте, я делаю проект интернет-магазина с базой данных на сервере (node js + javascript (чистый) + postgreSQL)

Я успешно реализовал фильтры товаров на странице клиента следующим образом:
При выборе клиентом какой-то опции на сервер отправляется fetch запрос методом POST (данные фильтров в body)
После ответа сервера данные принимаются на стороне клиента, разбираются и обновляется часть страницы. и все отлично. Но

1. В этом подходе есть недостаток в том, что иногда мне нужно передавать ссылки на страницы с уже выбранными категориями
2. Когда я захожу на популярные сайты ( яндекс маркет, ламода и т.п) то там при выборе опций на клиенте параметры фильтра помещаются в строку запроса (в query параметры GET запроса).

Скажите как правильно это нужно реализовывать? почему популярные сайты добавляют параметры фильтров в строку запроса, а не передают их скрыто?

Большое спасибо
P.S. может быть есть хорошие книги, статьи, где это подробно описано. Буду благодарен за ссылки
  • Вопрос задан
  • 555 просмотров
Подписаться 1 Простой 5 комментариев
Решения вопроса 1
@foterio
Если это не GraphQL api, у которого любой запрос это POST, то общепринято для получения информации использовать GET запрос. Так же это сделано для того, чтобы вы могли поделиться этой ссылкой с другим человеком и еще чтобы правильно работало SEO.

Выглядеть это должно примерно вот так.
1. Для начала разберемся с pagination, тут есть два пути:
А. Передавать два параметра, limit - кол-во записей, offset - отступ
Первая страница /producst?limit=20&offset=0
Вторая страница /producst?limit=20&offset=20

B. Передавать только page, и уже на backend'е высчитывать limit и offset для обращения в БД
Первая страница /producst
Вторая страница /producst?page=2
// Тут мы для первой страницы можем забить и не передавать никакие значения,
// так как на backend'е предусматриваем page = 1 по дефолту.

2. Значения фильтров так же передаем параметрами
/producst?page=2&categoryIds=15,7,23
3. И затем на backend'е уже парсим наши фильтры, незабывая предусмотреть дефолтные значения для фильтров. Есть разные подходы, первое что пришло в голову, это следующее решение
let filter = {
  // тут можно предусмотреть некоторые значения фильтра по дефолту
  isAvailableOnStock: true,
}
// И затем парсим каждое значение
if (query.categoryIds) {
  // В зависимости от базы данных, а так же драйвера и ORM,
  // которые мы используем, будет отличаться
  // делайте это в соответсвии с документацией
  filter.category_id = In(query.categoryIds.split(','))
}
// Делаем запрос в нашу базу
// Для примера используется TypeORM
const products = await getRepository(Products).find({
  // Используем наш объект filter
  where: {
    ...filter,
  },
  // Сортируем результат по названию
  order: {
    title: 'ASC',
  }
})

P. S. Еще помните, что существует сортировка, по цене, по имени, и прочее, которую так же необходимо передавать через параметр и затем сортировать результат из базы данных через "ORDER BY"
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Rocket Смоленск
от 80 000 до 130 000 ₽
Wanted. Москва
от 250 000 до 400 000 ₽
Wanted. Санкт-Петербург
До 220 000 ₽
22 янв. 2025, в 04:08
6000 руб./за проект
21 янв. 2025, в 23:55
20000 руб./за проект
21 янв. 2025, в 23:35
80000 руб./за проект