Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

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


Recommended Posts

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

Изображение

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

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

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

Надіслати
Поділитися на інших сайтах


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

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

post-19940-0-93367100-1343310751_thumb.jpg

Надіслати
Поділитися на інших сайтах

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

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

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

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

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

Надіслати
Поділитися на інших сайтах


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

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

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

Надіслати
Поділитися на інших сайтах

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

Надіслати
Поділитися на інших сайтах


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

Логично!!! А как осуществить?
Надіслати
Поділитися на інших сайтах

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

.product-grid .name a {

добавил

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

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

margin-bottom: 4px;

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

text-align: center;

text-decoration: none;

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

  • +1 3
Надіслати
Поділитися на інших сайтах


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

.product-grid .name {

display: table-cell;

vertical-align: middle;

height: 40px;

}

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

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

Надіслати
Поділитися на інших сайтах


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

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

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

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


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

Надіслати
Поділитися на інших сайтах

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

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

Надіслати
Поділитися на інших сайтах


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

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

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

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

  • +1 1
Надіслати
Поділитися на інших сайтах


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

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

Надіслати
Поділитися на інших сайтах


  • 3 months later...

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

Если речь идет о списке товаров в категории, то в файле 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:

  • +1 1
Надіслати
Поділитися на інших сайтах


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

_profisale.ru

Надіслати
Поділитися на інших сайтах


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

.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/

Надіслати
Поділитися на інших сайтах


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

[.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;}
Надіслати
Поділитися на інших сайтах


Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
  • Зараз на сторінці   0 користувачів

    • Ні користувачів, які переглядиють цю сторінку
×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.