Это обреточный блок. Он создает заголовок, змейку товаров и ссылку типа ВСЕ КУРСЫ ПО ИСТОРИИ (выглядит как кнопка).
Все ширины в змейке одинаковы и заданы прямо внутри глобального блока .product. Вообще его доку тоже полезно бы посмотреть.
.product висит на том же узле что и .shelf__item
Кнопка может быть либо .shelf__details либо .shelf__load-more (смотри дальше).
Заголовок может быть .shelf__heading - когда просто заголовок (секции в каталоге). А может быть и .shelf__title - когда название придемета (на главной).
В определенных кейсах нам нужно показывать не всю простыню элементов, а только первые четыре штучки. Когда предпросматрвиаем категорию, там, как правило, не полный список, а список ограниченный одной или двумя строками.
Проблема в том, что одна строка - это четыре элемента на десктопах,
три на планшетах и т.д. Да еще и два кейса: когда обрезаем одной строкой или двумя.
Чтобы это сделать это обрезание добавляем классы
.shelf_rows_1 или .shelf_rows_2. Они будут обрезать все,
что выводится после четвертого или после третьего айтема на соответствующих
экранах.
В этом случае есть смысл выводить в DOM только 4 или 8 элементов. Все возможные элементы отправлять на фронт не надо. Они обрезаны навсегда и никогда не будут увидены.
(Здесь и далее, когда я говорю, что обрезано в одну иле две строки я имеюю ввиду десктопную версию. При этом когда она перестраивается в мобилки там может быть до черта строк.
Возможен еще один кейс. Когда мы находимся на развернутой странице предмета, мы в принципе так же обрезаем хвосты модификаторами .shelf_rows_1 и .shelf_rows_2. Но в этом случае мы все-таки расчитываем на то, что пользователь захочет посмотреть полный список клацнув на "ПОКАЗАТЬ ЕЩЕ".
Соответствено у нас возможно два состояния. Дефотное состоние, когда остаток списка обрезан (как и раньше). И состояние развернутого списка, когда показывается все, что есть на полке. Все что было скрыто ранее модификаторами. Эти состояние хранит скрытый чекбокс .shelf__collapse, а кнопка "ПОКАЗАТЬ ЕЩЕ", соответственно лейбл на него. Они должны быть связаны через for и id. Если на странице несколько полок, то и айдишники у чекбоксов разные. А жаба-скрипт не нужен.
Здесь, кстати, вместо .shelf__details кнопочка обернута в .shelf__load-more (разные отступы). Ну и вообще в этом случае у кнопки и разметка посложнее так как в кнопке тоже надо менять текст.
Ну и само собой весь список надо выводить целиком. Все что есть в базе данных выплевываем на фронт. Когда модификатор обрезания будет снят, все что было скрыто пропукается.
Жара начинается, когда нужно обработать пограничные кейсы.
Вот, например, обрезаем одну строку, а нас всего четыре элемента. В таком случае кнопку "ПОКАЗАТЬ ЕЩЕ" выводить и вовсе не надо. Она просто исчезнет при клике потому что показывать больше нечего.
Или надо? На планшетах то три элемента, а четвертый скрыт. Значит все-таки надо, но не всегда.
А если элементов два? То тогда кнопка совсем не нужна.
Получается, что надо обработать кейсы 1, 2, 3, 4 плиток когда обрезаем в одну строку и 1, 2, 3, 4, 5, 6, 7, 8 плиток когда обрезаем две.
Получается, что надо знать количество элементов уже на фронте, чтобы
версткапоскрывала кнопку. Для этого давай выводить модификаторы:
.shelf_items_1
.shelf_items_2
.shelf_items_3
и так далее до
.shelf_items_8
А можно и вообще всегда и во всех кейсах выводить эти модификаторы. Ну так для сохранения общности, чтобы if/else не плодить. Выводишь блок .shelf, выведи заодно и то, сколько в нем айтемов. Хоть .shelf_items_100500. Используются, правда, только первые 8, но и фиг с ним. Пусть болтаются.
И больше ничего не требуется, на самом деле. Верстка сама со всем справится. Были обработаны все возможные селекторы типа .shelf_rows_1.shelf_items_4 и все че надо скрыто на нужных ширинах экранов.
Смотрим.
Кнопка скрыта всегда
Кнопка скрыта всегда
Кнопка скрыта всегда
Кнопка скрыта на телефонах, на малых планшетах - там и так по четыре штуки. Показана на больших планештах, там три штуки. И потом снова скрыта на десктопах, ибо там снова четыре штуки.
Кнопка скрыта всегда
Кнопка скрыта всегда. Все уместились в обрезание в шесть айтемов.
Кнопка скрыта всегда. Все уместились в обрезание в шесть айтемов.
Кнопка скрыта всегда. Все уместились в обрезание в шесть айтемов.
Кнопка скрыта всегда. Все уместились в обрезание в шесть айтемов.
Кнопка скрыта всегда. Все уместились в обрезание в шесть айтемов.
Кнопка скрыта на десктопах. Там показываются все 7. На мобилах, малых и больших планшетах кнопка нужна, потому что там обрезано до 6.
Кнопка скрыта на десктопах. Там показываются все 8. На мобилах, малых и больших планшетах кнопка нужна, потому что там обрезано до 6.