2021-04-21 20:29:06
Фильтры - это полностью кастомный блок, которому нет никаких аналогов в геткурсе, т.е. тут только HTML, CSS и JS.
Фильтр сделан довольно хитро) Если посмотреть на страницу в режиме редактирования, то там будет только одна карточка тренировки (кстати, это обычный блок плиток). Эта карточка в просмотре страницы дублируется скриптом столько раз сколько нужно, и каждая копия карточки заполняется определённой информацией.
Эта информация о карточках (т.е. их содержимое), которой оперирует скрипт, храниться в отдельном JS-блоке на странице в формате JSON (см. 2ой скрин). Так было сделано, чтобы:
— Ускорить работу страницы. Если бы все карточки были заранее добавлены на страницу, то, во-первых, она бы долго грузилась, а, во-вторых, фильтрация скриптом по содержимому карточек работала бы слишком медленно. Т.к. скрипту пришлось бы парсить содержимое каждой карточки перед фильтрацией, а их может быть сотни. И поэтому был выбран формат JSON, который позволяет хранить данные в человекопонятной форме, но, при этом, является готовым массивом данных для работы скрипта фильтрации.
— Обойтись без хостинга. В идеальном мире у нас бы была база данных с этими карточками, но т.к. в геткурсе нет баз данных, которыми мы можем оперировать, а внешнюю базу данных делать слишком накладно, было решено использовать JSON для хранения этих данных.
Ниже фильтров есть ещё блок сортировки, и тут скрипт использует тот же JSON, чтобы выводить карточки в нужном порядке.
538 viewsedited 17:29
D
