Каталог товаров со страницами и сортировкой по цене/в алфавитном порядке на чистом html, css, со скриптами?

Question

[Александр ⠀⠀⠀⠀]

Здравствуйте, очень хочу реализовать качественнвй каталог у себя на сайте.
Суть в том, что я совсем не понимаю как сделать перелистывание по страницам каталога, а так же сортировку товаров например по цене.
Как это примерно должно быть? Есть страница с категориями товаров: игрушки, одежда, техника. (примерно как на картинке)

Мы вибираем раздел и нас перекидывает на страницу этой категории.
Как вот здесь:


Вот отсюда я не понимаю..
текст выбранного нами раздела выделился жирным.
Ниже разделов распологаются кнопки сортировки, поиска товара. (который тоже не понятно как делать.)
Внизу (после 100 товаров идут страницы, которые мы можем перелистывать и искать новые товары.) поскажите что можно сделать. По идее через базу както можно реализовать. Но не знаю что именно нужно делать.
Суть в том, что это не совсем интернет магазин. Там не будет корзины, личного кабинета.

Comments

[Ankhena]

текст выбранного нами раздела выделился жирным.

Сравниваете href и урл в адресной строке, если совпадает, то добавляете класс.

Ниже разделов распологаются кнопки сортировки, поиска товара.

Отсюда разные варианты

[Александр ⠀⠀⠀⠀]

Ankhena, так ну а как сделать саму сортировку товаров?

[Александр ⠀⠀⠀⠀]

Может какой примео есть

[Ankhena]

Александр ⠀⠀⠀⠀, пример: любая CMS с каталогом.
Можно сортировать прям на странице, если показываются вообще все товары (у вас вроде не так, хотя в рамках одной категории может и так, я не знаю), можно аяксом к бэкэнду обращаться.

[Александр ⠀⠀⠀⠀]

Ankhena, так суть в том что не хочу cms использовать. Как без него сделать?

[Ankhena]

Александр ⠀⠀⠀⠀, я не предлагала вам использоватьCMS, вы попросили пример реализации.
Ну или любой урок по теме "сортировка товаров в каталоге интернет магазина". Первое во что тыкнулось (я его не смотрела, если что) https://webformyself.com/sortirovka-tovarov-v-kata...

Вы же даже не говорите, что у вас там вообще сделано или планируется. В каком виде каталог, на чем бэкэнд, какие фреймворки и т.д.

[Absolute138]

Не хватает исходный информации. Так понимаю, вы гонитесь за скоростью, типа - раз голый html, то будет супер-скорость и высокие оценки от G.PageSpeed и т.д.
Вы хотя бы пример блока товаров который идет в категории выложите. Может библиотеки какие подключены у вас... jQuery?

[Сергей c0re]

Александр ⠀⠀⠀⠀,
создаете массив json объектов товаров
его и выводите в контейнер.
если нужно сортировать, сортируете данный массив и заново выводите в контейнер.
как-то так.

[Kovalsky]

я совсем не понимаю как сделать перелистывание по страницам каталога, а так же сортировку товаров например по цене

Если вас интересует сам принцип, то их много же. Самые простые варианты которые приходят в голову:
По перелистыванию: если речь о pagination, то часто целевую страницу указывают в url параметрах - site.com/shoes/?page=17, в ответ на что бэкенд посылает страницу в которую впиливает нужную порцию товаров.
По сортировке: если пользователь хочет посмотреть все товары стоимостью от 20 до 675 рублей, то он выбирает эти значения на соответствующем элементе ввода, нажимает какую-нибудь кнопку "применить фильтр", клиент отправляет запрос типа site.com/products/?price_from=20&price_to=675, а сервер отдает отфильтрованный список товаров

Answer 1

[xmoonlight]

Перелистование: https://developer.mozilla.org/ru/docs/Web/API/Hist...
Сортировка, поиск: https://learn.javascript.ru/indexeddb

PS: includeHTML для простого создания SPA.