Перейти к содержанию
GeorgyM

Как в категории, в карточке с товаром, картинку поместить слева, все остальное справа

Рекомендуемые сообщения

Всем привет.

 

Хочу чтобы в категории, на карточке товара, слева была картинка от верха до низа, а справа от нее Цена и кнопка добавить в корзину. Похоже на Вид список, только по горизонтали несколько товаров.

 

не могу понять как этого эффекта добиться.

 

Кто нибудь в курсе?

 

Это вот под таким адресом.

 

/index.php?route=product/category

 

 

Вид сетка.

 

Не могу разобраться в category.tpl

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

так переделайте внешний вид сетка...

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

 запутался в коде не могу сэмитировать работу как list для области - не уверен что кто то разберется

Ну на всякий пэйнт выкладываю - нарисовал как смог

 

fb6240f0fabc.jpg

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Очень легко, открыть файл stylesheеt.css и начать верстаь, возможно понадобится внести пару правок в скелет category.tpl.

 

Только, врятли кто-то распишет как именно это сделать, так как тут надо сесть и потратить немало времени, чтобы сверстать это у себя, а потом предоставить вам код...

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Очень легко, открыть файл stylesheеt.css и начать верстаь, возможно понадобится внести пару правок в скелет category.tpl.

 

Только, врятли кто-то распишет как именно это сделать, так как тут надо сесть и потратить немало времени, чтобы сверстать это у себя, а потом предоставить вам код...

Cпасибо за подсказку

 

stylesheet.css - я понимаю как поправить

 

Но для того чтобы добиться того результата которого я хочу, надо внести пару правок в скелет category.tpl

 

Вот собственно в этих правках то и проблема.

 

Не могу сделать так, чтобы картинка встала слева, а все остальное справа сверху.

 

О каких пару правок идет речь - кто-нибудь умеет это делать ?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Достаточно внести изменения только в файл стилей.

 

В админке в настройках поставьте -  " * Размер изображения в списке товаров: 90 на 90 px "

 

Потом для файла стилей измените следующие стили на эти:



.product-grid > div {
	width: 246px; /*ИЗМЕНИЛ*/
	display: inline-block;
	vertical-align: top;
	margin-left: 10px; /*ИЗМЕНИЛ*/
	margin-bottom: 15px; 
	border: 1px solid #ccc; /*ИЗМЕНИЛ*/
}
#column-left + #column-right + #content .product-grid > div {
	width: 125px;
}
.product-grid .image {
	display: inline-block; /*ИЗМЕНИЛ*/
	float: left; /*ИЗМЕНИЛ*/
	padding: 10px;
	margin-bottom: 0px;
}
.product-grid .image img {
	padding: 3px;
	border: 1px solid #E7E7E7;
}
.product-grid .name a {
	color: #38B0E3;
	font-weight: bold;
	text-decoration: none;
	display: inline; /*ИЗМЕНИЛ*/
	margin-bottom: 4px;
}
.product-grid .description {
	display: none;
}
.product-grid .rating {
	display: block;
	margin-bottom: 4px;
}
.product-grid .price {
	display: inline-block; /*ИЗМЕНИЛ*/
	font-weight: bold;
	color: #333333;
	margin-bottom: 4px;
}
.product-grid .price-old {
	color: #F00;
	text-decoration: line-through;
}
.product-grid .price-new {
	font-weight: bold;
}
.product-grid .price .price-tax {
	display: none;
}
.product-grid .cart {
	margin-bottom: 3px;
}
.product-grid .wishlist, .product-grid .compare {
	margin-bottom: 3px;
}
.product-grid .wishlist a {
	color: #333333;
	text-decoration: none;
	padding-left: 18px;
	display: inline-block; /*ИЗМЕНИЛ*/
	background: url('../image/add.png') left center no-repeat;
}
.product-grid .compare a {
	color: #333333;
	text-decoration: none;
	padding-left: 18px;
	display: inline-block; /*ИЗМЕНИЛ*/
	background: url('../image/add.png') left center no-repeat;
}

все изменения я пометил комментарием /*ИЗМЕНИЛ*/, получилось точь в точь, как на вашей картинке...

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Достаточно внести изменения только в файл стилей.

 

В админке в настройках поставьте -  " * Размер изображения в списке товаров: 90 на 90 px "

 

Потом для файла стилей измените следующие стили на эти:



.product-grid > div {
	width: 246px; /*ИЗМЕНИЛ*/
	display: inline-block;
	vertical-align: top;
	margin-left: 10px; /*ИЗМЕНИЛ*/
	margin-bottom: 15px; 
	border: 1px solid #ccc; /*ИЗМЕНИЛ*/
}
#column-left + #column-right + #content .product-grid > div {
	width: 125px;
}
.product-grid .image {
	display: inline-block; /*ИЗМЕНИЛ*/
	float: left; /*ИЗМЕНИЛ*/
	padding: 10px;
	margin-bottom: 0px;
}
.product-grid .image img {
	padding: 3px;
	border: 1px solid #E7E7E7;
}
.product-grid .name a {
	color: #38B0E3;
	font-weight: bold;
	text-decoration: none;
	display: inline; /*ИЗМЕНИЛ*/
	margin-bottom: 4px;
}
.product-grid .description {
	display: none;
}
.product-grid .rating {
	display: block;
	margin-bottom: 4px;
}
.product-grid .price {
	display: inline-block; /*ИЗМЕНИЛ*/
	font-weight: bold;
	color: #333333;
	margin-bottom: 4px;
}
.product-grid .price-old {
	color: #F00;
	text-decoration: line-through;
}
.product-grid .price-new {
	font-weight: bold;
}
.product-grid .price .price-tax {
	display: none;
}
.product-grid .cart {
	margin-bottom: 3px;
}
.product-grid .wishlist, .product-grid .compare {
	margin-bottom: 3px;
}
.product-grid .wishlist a {
	color: #333333;
	text-decoration: none;
	padding-left: 18px;
	display: inline-block; /*ИЗМЕНИЛ*/
	background: url('../image/add.png') left center no-repeat;
}
.product-grid .compare a {
	color: #333333;
	text-decoration: none;
	padding-left: 18px;
	display: inline-block; /*ИЗМЕНИЛ*/
	background: url('../image/add.png') left center no-repeat;
}

все изменения я пометил комментарием /*ИЗМЕНИЛ*/, получилось точь в точь, как на вашей картинке...

Cпасибо - буду пробовать

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Достаточно внести изменения только в файл стилей.

 

В админке в настройках поставьте -  " * Размер изображения в списке товаров: 90 на 90 px "

 

Потом для файла стилей измените следующие стили на эти:



.product-grid > div {
	width: 246px; /*ИЗМЕНИЛ*/
	display: inline-block;
	vertical-align: top;
	margin-left: 10px; /*ИЗМЕНИЛ*/
	margin-bottom: 15px; 
	border: 1px solid #ccc; /*ИЗМЕНИЛ*/
}
#column-left + #column-right + #content .product-grid > div {
	width: 125px;
}
.product-grid .image {
	display: inline-block; /*ИЗМЕНИЛ*/
	float: left; /*ИЗМЕНИЛ*/
	padding: 10px;
	margin-bottom: 0px;
}
.product-grid .image img {
	padding: 3px;
	border: 1px solid #E7E7E7;
}
.product-grid .name a {
	color: #38B0E3;
	font-weight: bold;
	text-decoration: none;
	display: inline; /*ИЗМЕНИЛ*/
	margin-bottom: 4px;
}
.product-grid .description {
	display: none;
}
.product-grid .rating {
	display: block;
	margin-bottom: 4px;
}
.product-grid .price {
	display: inline-block; /*ИЗМЕНИЛ*/
	font-weight: bold;
	color: #333333;
	margin-bottom: 4px;
}
.product-grid .price-old {
	color: #F00;
	text-decoration: line-through;
}
.product-grid .price-new {
	font-weight: bold;
}
.product-grid .price .price-tax {
	display: none;
}
.product-grid .cart {
	margin-bottom: 3px;
}
.product-grid .wishlist, .product-grid .compare {
	margin-bottom: 3px;
}
.product-grid .wishlist a {
	color: #333333;
	text-decoration: none;
	padding-left: 18px;
	display: inline-block; /*ИЗМЕНИЛ*/
	background: url('../image/add.png') left center no-repeat;
}
.product-grid .compare a {
	color: #333333;
	text-decoration: none;
	padding-left: 18px;
	display: inline-block; /*ИЗМЕНИЛ*/
	background: url('../image/add.png') left center no-repeat;
}

все изменения я пометил комментарием /*ИЗМЕНИЛ*/, получилось точь в точь, как на вашей картинке...

 

 

Получается, что за счет обтекания получается нужная конструкция, но при этом блок с картинкой и блок с информацией это один и тот же блок, что накладывает ограничение по форматированию информации по товарам.

 

Именно по этому я и хотел разделить на 2 блока 1 блок - картинка, второй блок информация о товаре.

 

Поэтому я и писал, что хочу внести пару правок в скелет category.tpl, но не понял как это сделать.

 

Кто то знает как ?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.