Перейти к содержимому


Оформление Товаров В Каталоге

Автор Дмитрий Шумский, 30 сент. 2016 18:18

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 8

#1 Дмитрий Шумский

Дмитрий Шумский

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 123 сообщений

Отправлено 30 Сентябрь 2016 - 18:18

Здравствуйте!

Аккаунт SL-396037

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

OO7jKTxRPXw.jpg

Спасибо!

#2 Mr.Nito

Mr.Nito

    Активный участник

  • Модераторы
  • 1 364 сообщений

Отправлено 30 Сентябрь 2016 - 19:48

Просмотр сообщенияДмитрий Шумский (30 Сентябрь 2016 - 18:18) писал:

Здравствуйте!

Аккаунт SL-396037

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

Прикрепленный файл OO7jKTxRPXw.jpg

Спасибо!
Здравствуйте.
В файле main.css найдите (546 строка)
.products-grid .item .product-image .actions {display: block;position: absolute;top: 0;left: 0;text-align: center;width: 100%;height: calc(100% - 50px);}
замените на
.products-grid .item .product-image .actions {display: block;text-align: center;width: 100%;height: calc(100% - 50px);}

замените
.products-grid .item .product-image .actions .ratings {margin-bottom: 15px;height: 20px;opacity: 0;filter: alpha(opacity=0);-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";-webkit-transform: translate(10px, -30px);-moz-transform: translate(10px, -30px);-o-transform: translate(10px, -30px);-ms-transform: translate(10px, -30px);transform: translate(10px, -30px);}
на
.products-grid .item .product-image .actions .ratings {margin-bottom: 15px;height: 20px;opacity: 1;}

Замените
.products-grid .item .product-image .actions .addtocart {margin-bottom: 15px;-ms-transform: scale(0,1);-webkit-transform: scale(0,1);transform: scale(0,1);}
на
.products-grid .item .product-image .actions .addtocart {margin-bottom: 15px;}

Замените
.products-grid .item .product-image .actions .add-to-links {opacity: 0;filter: alpha(opacity=0);-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";-webkit-transform: translate(-10px, 30px);-moz-transform: translate(-10px, 30px);-o-transform: translate(-10px, 30px);-ms-transform: translate(-10px, 30px);transform: translate(-10px, 30px);}
на
.products-grid .item .product-image .actions .add-to-links {opacity: 1;}
Затем удалите строки
.products-grid .item .product-image:hover .mask {opacity: 1;filter: alpha(opacity=100);-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";}

.products-grid .item .product-image:hover .actions .ratings {opacity: 1;filter: alpha(opacity=100);-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";-webkit-transform: translate(0px,0px);-moz-transform: translate(0px,0px);-o-transform: translate(0px,0px);-ms-transform: translate(0px,0px);transform: translate(0px,0px);}

.products-grid .item .product-image:hover .actions .add-to-links {opacity: 1;filter: alpha(opacity=100);-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";-webkit-transform: translate(0px,0px);-moz-transform: translate(0px,0px);-o-transform: translate(0px,0px);-ms-transform: translate(0px,0px);transform: translate(0px,0px);}

.products-grid .item .product-image:hover .actions .addtocart {-ms-transform: scale(1);-webkit-transform: scale(1);transform: scale(1);}

#3 Дмитрий Шумский

Дмитрий Шумский

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 123 сообщений

Отправлено 30 Сентябрь 2016 - 22:15

Просмотр сообщенияMr.Nito (30 Сентябрь 2016 - 19:48) писал:

Здравствуйте.
В файле main.css найдите (546 строка)
.products-grid .item .product-image .actions {display: block;position: absolute;top: 0;left: 0;text-align: center;width: 100%;height: calc(100% - 50px);}
замените на
.products-grid .item .product-image .actions {display: block;text-align: center;width: 100%;height: calc(100% - 50px);}

замените
.products-grid .item .product-image .actions .ratings {margin-bottom: 15px;height: 20px;opacity: 0;filter: alpha(opacity=0);-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";-webkit-transform: translate(10px, -30px);-moz-transform: translate(10px, -30px);-o-transform: translate(10px, -30px);-ms-transform: translate(10px, -30px);transform: translate(10px, -30px);}
на
.products-grid .item .product-image .actions .ratings {margin-bottom: 15px;height: 20px;opacity: 1;}

Замените
.products-grid .item .product-image .actions .addtocart {margin-bottom: 15px;-ms-transform: scale(0,1);-webkit-transform: scale(0,1);transform: scale(0,1);}
на
.products-grid .item .product-image .actions .addtocart {margin-bottom: 15px;}

Замените
.products-grid .item .product-image .actions .add-to-links {opacity: 0;filter: alpha(opacity=0);-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";-webkit-transform: translate(-10px, 30px);-moz-transform: translate(-10px, 30px);-o-transform: translate(-10px, 30px);-ms-transform: translate(-10px, 30px);transform: translate(-10px, 30px);}
на
.products-grid .item .product-image .actions .add-to-links {opacity: 1;}
Затем удалите строки
.products-grid .item .product-image:hover .mask {opacity: 1;filter: alpha(opacity=100);-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";}

.products-grid .item .product-image:hover .actions .ratings {opacity: 1;filter: alpha(opacity=100);-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";-webkit-transform: translate(0px,0px);-moz-transform: translate(0px,0px);-o-transform: translate(0px,0px);-ms-transform: translate(0px,0px);transform: translate(0px,0px);}

.products-grid .item .product-image:hover .actions .add-to-links {opacity: 1;filter: alpha(opacity=100);-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";-webkit-transform: translate(0px,0px);-moz-transform: translate(0px,0px);-o-transform: translate(0px,0px);-ms-transform: translate(0px,0px);transform: translate(0px,0px);}

.products-grid .item .product-image:hover .actions .addtocart {-ms-transform: scale(1);-webkit-transform: scale(1);transform: scale(1);}


Всё отлично. Подскажите пожалуйста, как в карточке название товара и цену установить между рейтингом и кнопкой "добавить в корзину" ?

клюква.jpg

Спасибо!

#4 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 01 Октябрь 2016 - 04:13

В шаблоне Товары найдите:
<div class="product-name"><a href="{goods.URL_MIN_PRICE_NOW | url_amp}" title="{goods.NAME}" itemprop="url">{goods.NAME}</a></div>
					<div class="price-box" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
					  <meta itemprop="priceCurrency" content="{CURRENCY_CHAR_CODE}"/>
					  {% IF goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>goods.MIN_PRICE_NOW %}
						<span class="price old-price {CURRENCY_CHAR_CODE}">{goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</span>
					  {% ELSEIF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %}
						<span class="price old-price {CURRENCY_CHAR_CODE}">{goods.MIN_PRICE_OLD | money_format}</span>
					  {% ENDIF %}
						<span class="price {CURRENCY_CHAR_CODE}" itemprop="price" content="{goods.MIN_PRICE_NOW}">{goods.MIN_PRICE_NOW | money_format}</span>
					</div>

перенесите его немного выше, поставив после:
{% ELSE %}
								  <div class="rating" style="width:0%" alt="Рейтинг не определён" title="Рейтинг не определён"></div>
								{% ENDIF %}
							  </div>
							</a>
						  </div>

#5 Дмитрий Шумский

Дмитрий Шумский

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 123 сообщений

Отправлено 01 Октябрь 2016 - 14:41

Просмотр сообщенияVaccina (01 Октябрь 2016 - 04:13) писал:

В шаблоне Товары найдите:
<div class="product-name"><a href="{goods.URL_MIN_PRICE_NOW | url_amp}" title="{goods.NAME}" itemprop="url">{goods.NAME}</a></div>
				 <div class="price-box" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
					 <meta itemprop="priceCurrency" content="{CURRENCY_CHAR_CODE}"/>
					 {% IF goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>goods.MIN_PRICE_NOW %}
					 <span class="price old-price {CURRENCY_CHAR_CODE}">{goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</span>
					 {% ELSEIF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %}
					 <span class="price old-price {CURRENCY_CHAR_CODE}">{goods.MIN_PRICE_OLD | money_format}</span>
					 {% ENDIF %}
					 <span class="price {CURRENCY_CHAR_CODE}" itemprop="price" content="{goods.MIN_PRICE_NOW}">{goods.MIN_PRICE_NOW | money_format}</span>
				 </div>

перенесите его немного выше, поставив после:
{% ELSE %}
								 <div class="rating" style="width:0%" alt="Рейтинг не определён" title="Рейтинг не определён"></div>
							 {% ENDIF %}
							 </div>
						 </a>
						 </div>

Попробовал вставить, но пишет, что неверный синтаксис.

Может как-то по другому?

#6 Дмитрий Шумский

Дмитрий Шумский

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 123 сообщений

Отправлено 02 Октябрь 2016 - 13:06

Здравствуйте!

Аккаунт SL-396037

Подскажите пожалуйста, как в каталоге в карточке товара название товара и цену установить между рейтингом и кнопкой "добавить в корзину" ?

Изображение

Спасибо!

#7 MikDark

MikDark

    Активный участник

  • Модераторы
  • 6 468 сообщений

Отправлено 02 Октябрь 2016 - 13:34

Просмотр сообщенияДмитрий Шумский (02 Октябрь 2016 - 13:06) писал:

Здравствуйте!

Аккаунт SL-396037

Подскажите пожалуйста, как в каталоге в карточке товара название товара и цену установить между рейтингом и кнопкой "добавить в корзину" ?

Изображение

Спасибо!

Здравствуйте. В шаблоне Товары Вам нужно найти код:
div class="price-box" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
					  <meta itemprop="priceCurrency" content="{CURRENCY_CHAR_CODE}"/>
					  {% IF goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>goods.MIN_PRICE_NOW %}
						<span class="price old-price {CURRENCY_CHAR_CODE}">{goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</span>
					  {% ELSEIF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %}
						<span class="price old-price {CURRENCY_CHAR_CODE}">{goods.MIN_PRICE_OLD | money_format}</span>
					  {% ENDIF %}
						<span class="price {CURRENCY_CHAR_CODE}" itemprop="price" content="{goods.MIN_PRICE_NOW}">{goods.MIN_PRICE_NOW | money_format}</span>
					</div>

вырезать его, и поставить перед: 
<div class="addtocart">
							<!--a class="add-cart quick button button2" title="Быстро оформить заказ">Добавить в корзину</a-->
							<a class="add-cart button button2" title="В корзину" data-tooltip="В корзину">Добавить в корзину</a>
						  </div>

#8 Дмитрий Шумский

Дмитрий Шумский

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 123 сообщений

Отправлено 02 Октябрь 2016 - 14:01

Просмотр сообщенияMikDark (02 Октябрь 2016 - 13:34) писал:

Здравствуйте. В шаблоне Товары Вам нужно найти код:
div class="price-box" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
					 <meta itemprop="priceCurrency" content="{CURRENCY_CHAR_CODE}"/>
					 {% IF goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>goods.MIN_PRICE_NOW %}
					 <span class="price old-price {CURRENCY_CHAR_CODE}">{goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</span>
					 {% ELSEIF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %}
					 <span class="price old-price {CURRENCY_CHAR_CODE}">{goods.MIN_PRICE_OLD | money_format}</span>
					 {% ENDIF %}
					 <span class="price {CURRENCY_CHAR_CODE}" itemprop="price" content="{goods.MIN_PRICE_NOW}">{goods.MIN_PRICE_NOW | money_format}</span>
				 </div>

вырезать его, и поставить перед:
<div class="addtocart">
						 <!--a class="add-cart quick button button2" title="Быстро оформить заказ">Добавить в корзину</a-->
						 <a class="add-cart button button2" title="В корзину" data-tooltip="В корзину">Добавить в корзину</a>
						 </div>


Ок, разобрался. Только теперь получается название товара, цена и кнопка "добавить в корзину" сплюснуты.

2.jpg

Подскажите пожалуйста, как сделать, чтобы между ними были пробелы, как было раньше?

Спасибо!

#9 MikDark

MikDark

    Активный участник

  • Модераторы
  • 6 468 сообщений

Отправлено 02 Октябрь 2016 - 14:09

Просмотр сообщенияДмитрий Шумский (02 Октябрь 2016 - 14:01) писал:

Ок, разобрался. Только теперь получается название товара, цена и кнопка "добавить в корзину" сплюснуты.

Прикрепленный файл 2.jpg

Подскажите пожалуйста, как сделать, чтобы между ними были пробелы, как было раньше?

Спасибо!

Добавьте в main.css
.price-box {
	padding: 10px;
}

Обратно в Каталог товаров


Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Рассвет
  5. → Каталог товаров
  6. Privacy Policy