@nik8n

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

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

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

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

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

Большое спасибо
P.S. может быть есть хорошие книги, статьи, где это подробно описано. Буду благодарен за ссылки
  • Вопрос задан
  • 499 просмотров
Решения вопроса 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"
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы
21 нояб. 2024, в 19:31
500 руб./за проект
21 нояб. 2024, в 19:28
200000 руб./за проект
21 нояб. 2024, в 19:09
5000 руб./за проект