[РЕШЕНО] Выравнивание кнопки "купить" на главной странице

[Einshtein]

Думаю многие уже задумывались что не очень органично смотрятся товары на главной странице когда у них разной длины название и у некоторых есть звездочки с рейтингом, а у других нету. Изза этого кнопка "купить" под каждым товаром находится не на одном уровне

Я тут чуток покалупался и выяснил что кнопка "купить" привязана к диву отвечающему за вывод названия товара. Тобишь в зависимости от длины (высоты) названия товара - кнопка "купить" будет опускаться на расстояние указанное в стилях. Я пробовал перепривязать кнопку к картинке - но в таком случае если название длинне чем заданая высота у товара - то кнопка купить налезает на название товара. Короче как не крутил - не вертел - нифига путнего не получилось.

Нужен свежий взгляд на эту проблему.

МБ ктонить уже себе делал и готов поделится идеями?

[Tom]

Интересная тема!

[ingenerks]

Вопрос в другом, по чему нужно выровнять. Либо тогда для названия указать фиксированый блок и после него кнопка купить. Но тогда когда название маленькое, между кнопкой и заголовком будут большие пробелы, в отличии от тех, где текста много и кнопка опустится ниже.

Я понимаю так хочешь выровнять. Если да тогда блок с кнопкой <div class="cart"> нужно вынести за предел того блок в котором он находится а блоку родителя задать фиксированную высоту!!!!

[Einshtein]

да гдето так и хотел. Но у меня есть товары у которых оочень длинные названия, например "Шестиканальный беспроводный электронный стетоскоп YA6890KT"

И соответственно кнопка купить будет улетать либо налазить на текст. И в противном случае если в одной строке с таким товаром будет товар с названием "инкубатор Vimar-60" , то будет большое и некрасивое растояние.

Я както прикидывал, что для нормального визуального восприятия - в названии должно быть не более 25 символов (вместе с пробелами) .

Исходя из этого нужно сделать отступ от изображения с учетом возможности рейтинга + 25 символов. И если товар будет с длинным названием - нужно его както прятать (обрезать)

Но вот как сделать красивое "обрезание" - я хз :)

[Tom]

Вопрос в другом, по чему нужно выровнять. Либо тогда для названия указать фиксированый блок и после него кнопка купить. Но тогда когда название маленькое, между кнопкой и заголовком будут большие пробелы, в отличии от тех, где текста много и кнопка опустится ниже.

Я понимаю так хочешь выровнять. Если да тогда блок с кнопкой <div class="cart"> нужно вынести за предел того блок в котором он находится а блоку родителя задать фиксированную высоту!!!!

по подробней можно?

[putnik]

По мне так уж лучше будет большое и некрасивое расстояние, чем обрезанный и не понятный заголовок. Я бы фиксировал высоту на 3 строчки. Редко попадается название в одну. А названия в 2 строки и в 3 строки будут смотреться нормально!

[Tom]

По мне так уж лучше будет большое и некрасивое расстояние, чем обрезанный и не понятный заголовок. Я бы фиксировал высоту на 3 строчки. Редко попадается название в одну. А названия в 2 строки и в 3 строки будут смотреться нормально!

Логично!!! А как осуществить?

[Aleksey]

Чтобы выровнять кнопку купить я сделал так. В файле stylesheet.css, в

.product-grid .name a {

добавил

display: block; - текст отображается как блок

height: 28px; - высота блока, в моем случае в 2 строки текста

margin-bottom: 4px;

overflow-y: hidden; - текст, который не умещается скрывается (не отображается)

text-align: center;

text-decoration: none;

Не знаю, как с точки зрения правильности, но получил то, что хотел. Т.е. в любом товаре все ровно :)

[putnik]

В ксс прописать для отображения сеткой

.product-grid .name {

display: table-cell;

vertical-align: middle;

height: 40px;

}

Высоту примерно указал...

Только display: table-cell; Ослик ниже 8-й версии по моему не понимает. Есть еще вариант с 2-мя дивами. Если интересно - можно описать.

[rb2]

Думаю многие уже задумывались [...] Изза этого кнопка "купить" под каждым товаром находится не на одном уровне

Нужен свежий взгляд на эту проблему.

МБ ктонить уже себе делал и готов поделится идеями?

Я задумывался. Секунд 10 думал :) Переставил цену и кнопку сразу под картнку - результат идеальный.

[putnik]

Это получается рейтинг и описание после цены и кнопки заказать идут?

Мне чет не нравится такая штукенция....

[ingenerks]

Могу предложить такой вариант и расписать как реализовать вверху название товара потом фото а под фото кнопка купить

[putnik]

Так это не снимает основной проблемы. Если название слишком длинное,то кнопка купить так же съедет и будет значительно ниже остальных.

Получается просто местами поменяете...

[ingenerks]

тогда нужно выбрать товар с максимально большим названием и исходя из этого формировать блоки

[rb2]

Это получается рейтинг и описание после цены и кнопки заказать идут?

Мне чет не нравится такая штукенция....

Главное, на что реагирует вначале покупатель, готовый в принципе купить - внешний вид и цена. Затем - да, есть ли реальные отзывы. И название товара, чтобы уточнить, туда ли попал, или выбрать вариант среди похожих.

Скажу по секрету - некоторые вообще самый минимум информации оставляют и убирают все лишнее. И так гораздо проще становится магазином пользоваться. Особенно каталожно-витринными страницами, где разнобой, мелькание и обилие одинаковых мелких элементов только хуже делают

[putnik]

Чет я ступнул на счет .product-grid .name. Тема то про главную страницу. Смотрите нужный стиль. Суть такая-же...

По мне так то, что на картинке - необходимый минимум! Меньше не надо, больше тоже....

[deposit]

Может быть кто-то сталкивался, пожалуйста, подскажите как вывести нулевой рейтинг, чтоб тоже отображался в списке товаров?

[vjmarcus]

Друзья, я так и не понял, как решить эту проблему.

[CODEONETEAM]

Может быть кто-то сталкивался, пожалуйста, подскажите как вывести нулевой рейтинг, чтоб тоже отображался в списке товаров?

Если речь идет о списке товаров в категории, то в файле catalogviewthemeимя_вашей_темыtemplateproductcategory.tpl ищем блок:

<?php if ($product['rating']) { ?>
  <div class="rating"><img src="catalog/view/theme/default/image/stars-<?php echo $product['rating']; ?>.png" alt="<?php echo $product['reviews']; ?>" /></div>
<?php } ?>

В данном блоке нужно убрать условие вывода:

<?php if ($product['rating']) { ?>
<?php } ?>

То есть итоговый блок должен выглядеть так:

<div class="rating"><img src="catalog/view/theme/default/image/stars-<?php echo $product['rating']; ?>.png" alt="<?php echo $product['reviews']; ?>" /></div>

В остальных местах, где необходимо выводить нулевой рейтинг делаем правки по аналогии. :wink:

[ProfiSale]

просто обрезал названия товаров (тут есть тема, где я спрашивал как это сделать) + при наведении появляется полный текст. - более-менее выравнилось. Вот только "..." дабавляется ко всем названиям, даже которые и не обрезаются.

_profisale.ru

[vjmarcus]

Друзья! Пробовал по совету Алексея добавить

.product-grid .name a {

добавил

display: block; - текст отображается как блокheight: 28px; - высота блока, в моем случае в 2 строки текстаmargin-bottom: 4px;overflow-y: hidden; - текст, который не умещается скрывается (не отображается)text-align: center;text-decoration: none;

а также по совету Путника

[.product-grid .name {display: table-cell;vertical-align: middle;height: 40px;}

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

 

http://gedamebel.tmweb.ru/

[deposit]

CODEONETEAM, безгранично благодарен вам за оказанную мне помощь! Большущее спасибо! :-) благодарен вам за помощь! Спасибо!

[vjmarcus]

Profysale - а как вы вывели на главной 6 товаров по горизонтали ? у меня почему то только 4 выводятся, что на это влияет?

[CODEONETEAM]

CODEONETEAM, безгранично благодарен вам за оказанную мне помощь! Большущее спасибо! :-)

Всегда пожалуйста! :wink:

[putnik]

...а также по совету Путника

[.product-grid .name {display: table-cell;vertical-align: middle;height: 40px;}

В Вашем случае нужно добавлять в.box-product .name aТ.е. у Вас будет:

.box-product .name a {color: #38B0E3;font-weight: bold;text-decoration: none;margin-bottom: 4px;display: table-cell;vertical-align: middle;height: 40px;}