Рекомендуемые товары, на главной и проблема высоты

Коллеги, салют!

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

Добавил товары в модуль, вроде бы все ничего, но сталкиваюсь с такой картиной:



Проблема в 3 строке, почему то товар он сразу отображает в 4 столбце, а не в 1.

Думал проблема в товаре, менял как можно, изменений никаких. В чем проблема? куда копать?

Сайт: https://shop.print-mir.ru/
Главная страница

Благодарю!

 

Код:

.product-thumb .caption {
    padding: 0 20px;
    min-height: 250px;
}

 

Если текста больше, то делаете min-height больше. Например, 300px

 

Помогло! Спасибо за помощь!!

 

Единственное что, есть такой момент:
В моем случае помог min-height 280, проблема решилась. Но высота ячеек с товарами визуально - излишне большая. Делаешь меньше высоту - таблица портится.


Я так понимаю в целом эта проблема зависит от кол-ва букв в описании товара... буду как то разбираться с этим.

Мало ли если есть какое то готовое решение, буду признателен!

 

Если кому поможет, можно сделать margin-top для цены, визуально сделает приятнее

.product-thumb .price {
color: #444;
margin-top: 25px;
}

И добавил к твоему коду margin-bottom:
.product-thumb .caption {
padding: 0 10px;
min-height: 280px;
margin-bottom: -40px;
}

Стало получше

 

Ну вы еще можете использовать свойство "clear:both;" (без указания высоты) и разные селекты CSS для разных размеров, но это уже нужно лапками ковыряться)) И в таком случае карточки будут неравномерными по высоте как у вас было, но будут в строках отображаться.

Еще как вариант, можете уменьшить вывод превью текста (обрезать его), но это еще вопрос SEO, что тексты не полностью отображаются.

 

Это вы ещё на разных экранах не смотрели... Гляньте там, например там.

Если задавать фиксированную высоту, то нужно делать это для разных разрешений экрана. В опенкартовских шаблонах диапазоны такие: до 767 рх, 768-991 рх, 992-1199 рх, от 1200 рх. В отдельных шаблонах есть и дополнительные.

Попробуйте совсем убрать описание из модулей и задать высоту названия (.product-thumb .caption h4). Это будет смотреться более гармонично.

Если выводить именно через "рекомендуемые", то желательно выводить количество товаров кратное 2,3,4 (например, 12). В этом случае на разных экранах будет полное заполнение строк. Правда, на маленьких это будет колбаса...
Кстати, есть модули выводящие товары из категорий, или выборочные. И их можно выводит в виде карусели или табов.

 

Что то мудрите тут Фиксируем высоту названия товара на две строки, фиксируем описание на нужную высоту, а все лишнее скрываем overflow:hidden

 

флексы ж более универсально.
для контейнера прописываем какой-то ид, например id="featured"

#featured {
display: flex;
flex-wrap: wrap;
align-items: stretch;
}

#featured .product-layout {
display: flex;
}

#featured .product-thumb {
display: flex;
flex-direction: column;
justify-content: space-between;
}

#featured .product-thumb .caption {
flex-grow: 1;
display: flex;
flex-direction: column;
}

#featured .product-thumb .price {
margin-top: auto;
}

 

Более универсально - это скрипт автоподбора высоты. В некоторых шаблонах он уже есть. Причём, бывает не только целиком на caption, но и отдельно на название, описание, атрибуты и опции. Например, как тут.
Не понимаю, почему его изначально в дефолтный шаблон не добавляют...

Ктати, скрипт только для caption есть в той теме.
Давно его использую.

 

а мне вариант с флексами нравится больше. эффект ровно тот же, скорость выше, юзер не видит "передёргивания" контента, пэйдж спид доволен отсутствием лишних скриптов

 

Скрипты вещь хорошая в CSS до тех моментов, когда нужно что-то корректировать в стилях. И потом приходится искать этот самый скрипт, который пишет стили в аттрибут style. Лучше уж создать десяток стилей с высотой и их добавлять. Не круто, конечно, но так хотя бы JS с CSS не пересекается.

Плюс как уже отметили, подергивание экрана. Ну и возможно, если где-то какой-то кривой скрипт, то до скрипта стилей может не дойти.

Ну а так и самому порой приходилось через JS делать некоторые вещи, ради экономии времени, сил и нервов)))

 

Передёргивания экрана не замечал, но возможно вы и правы...

 

А почему id, а не class? Лучше ведь чтобы сразу для всех модулей и в категории подходило...

 

ну да, если стоит задача так сделать везде, то ид не подойдет, лучше использовать класс.
для одного блока в целом без разницы