Кнопка для добавления в корзину съезжает

[s01]

Здравствуйте, уважаемые форумчане.

ocStore 1.0.1 и OC 1.5.1

Такая проблема появилась - кнопка "купить" на разных товарах на разной высоте расположена.

Можно ли как-то сделать чтобы она была в одном месте у всех товаров, независимо от длины названия?

Может быть ее как-то можно передвинуть в самый низ или еще что сделать чтобы не отображалось так криво все?

[SlavkaWM]

можно сделать что угодно, вопрос только как ты хочеш чтоб это выглядело.

[s01]

можно сделать что угодно, вопрос только как ты хочеш чтоб это выглядело.

Немного переформулирую - что и где нужно прописать чтобы эти кнопки стояли ровно?

[tehnikawdom]

Здравствуйте, уважаемые форумчане.

ocStore 1.0.1 и OC 1.5.1

Такая проблема появилась - кнопка "купить" на разных товарах на разной высоте расположена.

Можно ли как-то сделать чтобы она была в одном месте у всех товаров, независимо от длины названия?

Может быть ее как-то можно передвинуть в самый низ или еще что сделать чтобы не отображалось так криво все?

присоединяюсь к вопросу.

хотя лучше будет вообще убрать кнопку "КУПИТЬ" в "Рекомендуемых".

кому надо купить - перейдёт, посмотрит и уже в детальном описании продукта нажмёт на "КУПИТЬ"

[s01]

присоединяюсь к вопросу.

хотя лучше будет вообще убрать кнопку "КУПИТЬ" в "Рекомендуемых".

кому надо купить - перейдёт, посмотрит и уже в детальном описании продукта нажмёт на "КУПИТЬ"

Это не выход.

Потому что в каталоге товаров такой же косяк если поставить вид "Витрина".

[pmp]

обрати внимание что они у тебя сьезжают потому что у тебя название товара разную длину имеет

значит выход - сделай все названия товара одинаковой длины (шучу)

попробуй как вариант названия товара поместить над картинкой

[nightguest]

В ocStore v0.2.2 (OpenCart 1.4.9.4) такая же проблема. Как решить?

[nashalneke]

В ocStore v0.2.2 (OpenCart 1.4.9.4) такая же проблема. Как решить?

.list td a

Попробуйте добавить:

height: 40px; /* подберите нужную высоту */
display: block;

[nightguest]

.list td a

Попробуйте добавить:

height: 40px; /* подберите нужную высоту */
display: block;

Параметра .list td a нет. Есть параметр .list td. Но если в него добавить

height: 40px; /* подберите нужную высоту */
display: block;

то весь товар выводится в один столбик, вместо четырех(((

[monax]

Дайте ссылку на сайт и вам подскажут, куда конкретно прописать.

[nashalneke]

Параметра .list td a нет. Есть параметр .list td. Но если в него добавить

height: 40px; /* подберите нужную высоту */
display: block;

то весь товар выводится в один столбик, вместо четырех(((

Выдержка из кода моего магазина:

.list {
	margin-bottom: 10px;
	width: 100%;
}
.list td {
	text-align: center;
	vertical-align: top;
	padding-bottom: 10px;
	height: 400px;
}
.list td a{
color: #000;
font-weight: bold;
font-size: 13px;
}

Если параметра не существует - добавьте его. 15 суток за такое не дают :)

Пэ.сэ. Каюсь, поторопился с советом. Ячейка содержит в себе как минимум 3 ссылки. Так что это свойство будет прописано для всех трех.

Сейчас исправим.

Змінено 13 листопада 2011 користувачем nashalneke

[rb2]

Можно ли как-то сделать чтобы она была в одном месте у всех товаров, независимо от длины названия?

Самый простой способ - переместить кнопку и выводить её сразу под картинкой. Картинка - Купить - название товара и т.д.

[nashalneke]

Так-с. На первый взгляд, решение найдено.

Супер простым его вряд ли назовешь :) На полную совместимость с браузерами претендовать рано, но мозила, опера и ишак 8 косяков не выдают.

Выдержка из css:

html {
	overflow: -moz-scrollbars-vertical;
	margin: 0;
	padding: 0;
	min-width: 1024px;
	overflow-x: scroll;
}
.list {
	margin-bottom: 10px;
	width: 100%;
	min-width: 700px;
}
.list td {
  height: auto;
	text-align: center;
	vertical-align: top;
	padding-bottom: 10px;
	border: 1px solid #ff0000; /* параметр временный, чтобы отследить отступы и границы элемента */
}
.list td.products_td {
        height: 400px;
	text-align: center;
	vertical-align: top;
	padding-bottom: 10px;
	border: 1px solid #d0d0d0; /* параметр временный, чтобы отследить отступы и границы элемента */
	background-color: #e7e7e7;
}

.list td a{
color: #000;
font-weight: bold;
font-size: 13px;
}
.list_td {
width: 100%; 
height: 100%;
position: relative;
}
.list td a.button_add_small {
position: absolute;
bottom: 0px;
right: 5px;
}

Файл catalog/view/theme/default/template/product/category.tpl

Ищем

<table class="list">
      <?php for ($i = 0; $i < sizeof($products); $i = $i + 4) { ?>
      <tr>
        <?php for ($j = $i; $j < ($i + 4); $j++) { ?>
        <td width="25%"><?php if (isset($products[$j])) { ?>

ячейке td добавляем класс и вставляем дополнительный div. В моем случае это:

<td width="25%" class="products_td"><div class="list_td">

Естественно, не забываем закрыть этот div перед закрывающим тегом </td>

Для чего это делается:

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

Добавленному блоку в ячейке продуктов (я его обозвал list_td) придаем 100%-ую ширину и высоту, а также относительное позиционирование. Просто ячейке мы этого не можем сделать. Наконец, для кнопки .buton_add_small устанавливаем абсолютное позиционирование.

Так как у меня используется короткое описание к товарам, пришлось установить минимальную ширину для всего документа и прокрутку, иначе при совсем уж малых размерах монитора 25%-я ширина ячейки продуктов превращается в тоненькое говнетсо, а кнопка "в корзину" вылазит на свободу.

Живой пример тут.

Пэ.Сэ. После таких манипуляций, пропадает полет товара в корзину :). Исправлю - напишу :)

[nightguest]

Огромное спасибо за советы, будем пробовать.