Doclister. Как изменить параметра &display в зависимости от внешних условий?

Вопрос знатокам.
Через Doclister вывожу карточки в каталоге. По умолчанию &display=16.
При изменении ширины окна последний ряд получается «оборванным»…

Возможно менять параметр &display в зависимости от ширины окна?

19 комментариев

avatar
Тут скорее всего надо менять стиль в css
avatar
Изменение стилей не поможет, т.к. при сужении окна становится не чётное количество колонок — в последнем ряду 1-2 карточки не хватает…
avatar
Адаптивная верстка наше всё.
nth-of-type вам в руки.
avatar
И как nth-of-type сможет добавить «недостающие» карточки?
Doclister же выводит фиксированное количество.
avatar
Добавить нет, а вот убрать спокойно лишние.
avatar
Тогда получится, что какая-то карточка будет скрыта и юзер её не увидит… Заказчик будет не доволен (
avatar
Тогда добавьте лишние и скройте в полном размере, а показывайте когда окно будет уменьшаться и нужно добавить.
Можно попробовать через PHP определять ширину окна, но это будет срабатывать только при обновлении страницы. Если клиент будет вручную изменять размер окна браузера фишка не сработает.
Комментарий отредактирован 2020-08-19 09:51:57 пользователем 3fir
avatar
Задача решается исключительно средствами CSS, посмотрите на примере сетки Bootstrap
На большом экране выводим допустим 16 карточек. При уменьшении экрана ширина карточки сужается до предельного значения. На этой ширине делается брекпоинт и далее выводится 8 карточек в ряд. Далее карточки опять сужаются до минимальной ширины и выводим 4 карточки. И тд до самого маленького экрана, где выводим 1 или 2 карточки в ряд.

Вам повезло, у вас 16 карточек. А значит можно гибко настроить отображение для 1,2,4,8,16 карточке в ряд.
avatar
16 карточек по 16 в ряд… повезло так повезло :) И как это стандартной сеткой бутстрапа реализовать? Научите. Пример в студию.
А по 3 в ряд куда делись-то? :) Это же самый частый вариант при выводе карточек товаров.
avatar
Вызовите доклистер в другом сниппете и подставляйте туда какие нужно параметры.
avatar
В каком и как? Собственно в этом и вопрос…
avatar
Значит наймите программиста и он вам сделает. Как создать собственный сниппет в админке и вызвать из него другой сниппет это основа основ. ну и без начального знания PHP ничего не поймете.
avatar
16 само по себе плохое число. В ряду может быть 1,2,3 или 4 товара. Бывает, конечно, лепят 5 и более, но это уже частные случаи.
Чтобы все складывалось ровно, надо чтобы количество выводимых товаров делилось без остатка на 2,3 и 4. В этом случае для параметра display идеально подходят значения 12, 24, 36 и т.д.
Вряд ли количество выводимых товаров так жестко вписано в ваш адаптивный дизайн, что это требует обязательного наличия бубна и плясок.
avatar
24 прописал, стало лучше, спасибо
avatar
PHP ничего не знает о ширине окна. Но знает о типе устройства.
Можно для телефонов выводить другое количество например так. Установите данный плагин:
github.com/Dmi3yy/isMobile
<code>
if( $detect->isMobile() ){
 $modx->setPlaceholder('display' , 14 );
}else{
 $modx->setPlaceholder('display' , 16 );
}
</code>
В начале страницы вызовем сниппет с содержимым
&display=[+display+]
Как и предыдущие коментаторы я соглашусь что этот подход грубоват и нарушает принципы SEO, лучше выбрать сетку кратную 12, это сильно упростит вам жизнь.
Комментарий отредактирован 2020-08-19 13:20:05 пользователем abadello
avatar
Спасибо за инфу, пригодится!
На мобильных как раз нормально, там 1 или 2 в строке. Морока на десктопах.
Прописал display=24 — стало не идеально, но приличнее.
avatar
Не, ну если уж совсем охота заморочиться.
При загрузке страницы на js определяем нужные вам данные — размер монитора, тип девайса.
Отсылаем это аяксом на какой-то штепсель.
Там вызываем runSnippet('DocLister', array('display' => 'XXX')); и прочие параметры.
Ответ помещаем в нужный контейнер.
Но проще послать нахуй заказчика либо решить всё через css.
  • 1px
  • +1
avatar
На мой взгляд правильное решение вы предложили, кроме посыла заказчика.
Комментарий отредактирован 2020-08-20 08:16:04 пользователем Redduck
avatar
Ну тут такое… Я иногда бываю импульсивен =)
А вообще один раз пришлось делать таким образом фоны для сайта — генерил картинки в зависимости от разрешения браузера. За полтора года в кэше вышло примерно гигабайт разных файлов типа 455x1023.jpg. А потом разработчики сжалились и добавили background-size:cover.
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.