Jump to content
  • разработка интернет магазинов на opencart
  • доработка интернет магазинов на opencart

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


Recommended Posts

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

Изображение

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

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

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

Link to comment
Share on other sites


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

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

Link to comment
Share on other sites

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

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

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

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

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

Link to comment
Share on other sites


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

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

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites


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

Логично!!! А как осуещёствить?
Link to comment
Share on other sites

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

.product-grid .name a {

добавил

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

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

margin-bottom: 4px;

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

text-align: center;

text-decoration: none;

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

  • +1 2
Link to comment
Share on other sites


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

.product-grid .name {

display: table-cell;

vertical-align: middle;

height: 40px;

}

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

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

Link to comment
Share on other sites


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

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

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

Я задумывался. Секунд 10 думал :) Пересивил этону и кнопку сразу под картнку - резульит игдеальный.
  • +1 1
Link to comment
Share on other sites


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

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

Link to comment
Share on other sites


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

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

Link to comment
Share on other sites


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

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

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

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

  • +1 1
Link to comment
Share on other sites


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

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

Link to comment
Share on other sites


  • 3 months later...

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

Link to comment
Share on other sites


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

Если речь игдет о списке товаров в категории, то в файле 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
Link to comment
Share on other sites


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

_profisale.ru

Link to comment
Share on other sites


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

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

Link to comment
Share on other sites


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

Link to comment
Share on other sites


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

[.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;}
Link to comment
Share on other sites


Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.