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


Изменения В Превью Товара

Автор evros, 02 февр. 2017 22:09
превью товара

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

#1 evros

evros

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

  • Пользователи
  • PipPipPipPip
  • 284 сообщений
  • ГородМосква

Отправлено 02 Февраль 2017 - 22:09

Нужна помощь в изменении превью товара в каталоге.

1. Кнопку "В КОРЗИНУ", краткое описание товара и звезды рейтинга разместить в низу превью статично, как на рисунке 1.

2. Оставить выпадание кнопок "В ИЗБРАННОЕ", "В СРАВНЕНИЕ" и "БЫСТРЫЙ ПРОСМОТР" при наведении курсора на фото., как на рисунке 2.

Заранее благодарю!

Прикрепленные изображения

  • Рисунок 1. Превью товара.jpg
  • Рисунок 2. При наведении курсора на фото.jpg

#2 Vaccina

Vaccina

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

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

Отправлено 03 Февраль 2017 - 07:04

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

Зайдите в раздел Сайт - Редактор шаблонов - Товары - найдите:
<!-- Вывод товаров ТАБЛИЦЕЙ -->
	 <div class="products-grid row">
		 {% FOR goods %}
		 <div class="item">
			 <div class="item-inner" itemscope itemtype="http://schema.org/Product">
			 <form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" class="product-form-{goods.MIN_PRICE_NOW_ID} goodsListForm">
				 <input type="hidden" name="hash" value="{HASH}" />
				 <input type="hidden" name="form[goods_from]" value="{goods.GOODS_FROM}" />
				 <input type="hidden" name="form[goods_mod_id]" value="{goods.MIN_PRICE_NOW_ID}" />
				 <div class="product-image">
				 <a href="{goods.URL_MIN_PRICE_NOW | url_amp}" title="{goods.NAME}" class="product-img">
					 <img class="goods-image-small" src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=sunrise{% ELSE %}{goods.IMAGE_MEDIUM}{% ENDIF %}" alt="{goods.NAME}" title="{goods.NAME}" itemprop="image">
					 {% IF goods.IS_NEW %}
					 <span class="ico-new">Новинка</span>
					 {% ELSEIF goods.IS_TOP %}
					 <span class="ico-best">Хит</span>
					 {% ENDIF %}
					 {% IF goods.MAX_DISCOUNT %}
					 <span class="ico-sale">Скидка</span>
					 {% ENDIF %}
					 <div class="mask"></div>
				 </a>
				 <div class="actions">
					 <div class="group-mask">
					 <div class="inner-mask">
						 <div class="ratings">
						 <a href="{goods.URL | url_amp}" title="Перейти к отзывам">
							 <div class="rating-box">
							 {% IF goods.OPINION_RATING_VALUE %}
							 <span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
								 <meta itemprop="worstRating" content = "1">
								 <meta itemprop="bestRating" content = "10">
								 <meta itemprop="ratingValue" content = "{goods.OPINION_RATING_VALUE}">
								 <meta itemprop="reviewCount" content = "{goods.OPINION_RATING_CNT_ALL}">
								 <div class="rating" style="width:{goods.OPINION_RATING_VALUE}0%" alt="{goods.OPINION_RATING_VALUE}" title="Рейтинг товара"></div>
							 </span>
							 {% ELSE %}
								 <div class="rating" style="width:0%" alt="Рейтинг не определён" title="Рейтинг не определён"></div>
							 {% ENDIF %}
							 </div>
						 </a>
						 </div>
						 <div class="addtocart">
						 <!--a class="add-cart quick button button2" title="Быстро оформить заказ">Добавить в корзину</a-->
						 <a class="add-cart button button2" title="В корзину" data-tooltip="В корзину">Добавить в корзину</a>
						 </div>
						 <div class="add-to-links">
						 <!-- Если есть возможность добавить товар в избранное -->
						 {% IF goods.IS_HAS_IN_FAVORITES_LIST %}
							 <a class="add-wishlist added"
							 data-action-is-add="0"
							 data-action-add-url="{FAVORITES_ADD_URL}"
							 data-action-delete-url="{FAVORITES_DELETE_URL}"
							 data-action-add-title="Добавить &laquo;{goods.NAME}&raquo; в избранное"
							 data-action-delete-title="Убрать &laquo;{goods.NAME}&raquo; из избранного"
							 data-add-tooltip="В Избранное"
							 data-del-tooltip="Убрать из избранного"
							 data-tooltip="Убрать из избранного"
							 title="Убрать &laquo;{goods.NAME}&raquo; из избранного"
							 href="{FAVORITES_DELETE_URL}?id={goods.MIN_PRICE_NOW_ID}&amp;return_to={CURRENT_URL | urlencode}"
							 ><i class="fa fa-heart"></i></a>
						 {% ELSE %}
							 <a class="add-wishlist"
							 data-action-is-add="1"
							 data-action-add-url="{FAVORITES_ADD_URL}"
							 data-action-delete-url="{FAVORITES_DELETE_URL}"
							 data-action-add-title="Добавить &laquo;{goods.NAME}&raquo; в избранное"
							 data-action-delete-title="Убрать &laquo;{goods.NAME}&raquo; из избранного"
							 data-add-tooltip="В Избранное"
							 data-del-tooltip="Убрать из избранного"
							 data-tooltip="В Избранное"
							 title="Добавить &laquo;{goods.NAME}&raquo; в избранное" href="{FAVORITES_ADD_URL}?id={goods.MIN_PRICE_NOW_ID}&amp;return_to={CURRENT_URL | urlencode}"
							 href="{FAVORITES_ADD_URL}?id={goods.MIN_PRICE_NOW_ID}&amp;return_to={CURRENT_URL | urlencode}"
							 ><i class="fa fa-heart"></i></a>
						 {% ENDIF %}
						 <!-- END Если есть возможность добавить товар в избранное -->
						 <!-- Если в тарифном плане подключен модуль сравнения товаров и он не выключен в настройках магазина -->
						 {% IF TARIFF_FEATURE_GOODS_COMPARE && SETTINGS_COMPARE_DISABLE=0 %}
							 {% IF goods.IS_HAS_IN_COMPARE_LIST %}
							 <a class="add-compare added"
								 data-action-is-add="0"
								 data-action-add-url="{COMPARE_ADD_URL}"
								 data-action-delete-url="{COMPARE_DELETE_URL}"
								 data-action-add-title="Добавить &laquo;{goods.NAME}&raquo; в список сравнения с другими товарами"
								 data-action-delete-title="Убрать &laquo;{goods.NAME}&raquo; из списка сравнения с другими товарами"
								 data-prodname="{goods.NAME}"
								 data-produrl="{goods.URL}"
								 data-id="{goods.ID}"
								 data-mod-id="{goods.MIN_PRICE_NOW_ID}"
								 data-add-tooltip="В Сравнение"
								 data-del-tooltip="Убрать из сравнения"
								 data-tooltip="Убрать из сравнения"
								 title="Убрать &laquo;{goods.NAME}&raquo; из списка сравнения с другими товарами"
								 href="{COMPARE_DELETE_URL}?id={goods.MIN_PRICE_NOW_ID}&amp;from={goods.GOODS_FROM}&amp;return_to={CURRENT_URL | urlencode}"
							 ><i class="fa fa-retweet"></i></a>
							 {% ELSE %}
							 <a class="add-compare"
								 data-action-is-add="1"
								 data-action-add-url="{COMPARE_ADD_URL}"
								 data-action-delete-url="{COMPARE_DELETE_URL}"
								 data-action-add-title="Добавить &laquo;{goods.NAME}&raquo; в список сравнения с другими товарами"
								 data-action-delete-title="Убрать &laquo;{goods.NAME}&raquo; из списка сравнения с другими товарами"
								 data-prodname="{goods.NAME}"
								 data-produrl="{goods.URL}"
								 data-id="{goods.ID}"
								 data-mod-id="{goods.MIN_PRICE_NOW_ID}"
								 data-add-tooltip="В Сравнение"
								 data-del-tooltip="Убрать из сравнения"
								 data-tooltip="В Сравнение"
								 title="Добавить &laquo;{goods.NAME}&raquo; в список сравнения с другими товарами"
								 href="{COMPARE_ADD_URL}?id={goods.MIN_PRICE_NOW_ID}&amp;from={goods.GOODS_FROM}&amp;return_to={CURRENT_URL | urlencode}"
							 ><i class="fa fa-retweet"></i></a>
							 {% ENDIF %}
						 {% ENDIF %}
						 <!-- END Если в тарифном плане подключен модуль сравнения товаров и он не выключен в настройках магазина -->
						 <div class="quickview-wrap">
							 <a class="quickview" href="{goods.URL_MIN_PRICE_NOW}" title="Быстрый просмотр &laquo;{goods.NAME}&raquo;" data-tooltip="Быстрый просмотр"><i class="fa fa-eye"></i><span>Быстрый просмотр</span></a>
						 </div>
						 </div>
					 </div>
					 </div>
				 </div>
				 </div>
				 <div class="product-shop">
				 <meta itemprop="name" content="{goods.NAME}">
				 <meta itemprop="description" content="{% IF goods.DESCRIPTION_SHORT %}{goods.DESCRIPTION_SHORT}{% ELSE %}Описание отсутствует{% ENDIF %}">
				 <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>
				 <!-- Выводим 2 характеристики -->
				 {% IFNOT goods.goods_attr_list_empty %}
					 <div class="attr-list">
					 {% FOR goods_attr_list %}
					 {% IF goods.goods_attr_list.index > 2 %}{break}{% ENDIF %}
					 <div class="attr">
						 <span class="name">{goods.goods_attr_list.NAME}:</span>
						 <span class="value">{goods.goods_attr_list.VALUE}</span>
					 </div>				
					 {% ENDFOR %}		
					 </div>
				 {% ENDIF %}
				 </div>
			 </form>
			 </div>
		 </div>
		 {% ENDFOR %}
	 </div>


замените на:
<!-- Вывод товаров ТАБЛИЦЕЙ -->
	 <div class="products-grid row">
		 {% FOR goods %}
		 <div class="item">
			 <div class="item-inner" itemscope itemtype="http://schema.org/Product">
			 <form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" class="product-form-{goods.MIN_PRICE_NOW_ID} goodsListForm">
				 <input type="hidden" name="hash" value="{HASH}" />
				 <input type="hidden" name="form[goods_from]" value="{goods.GOODS_FROM}" />
				 <input type="hidden" name="form[goods_mod_id]" value="{goods.MIN_PRICE_NOW_ID}" />
				 <div class="product-image">
				 <a href="{goods.URL_MIN_PRICE_NOW | url_amp}" title="{goods.NAME}" class="product-img">
					 <img class="goods-image-small" src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=sunrise{% ELSE %}{goods.IMAGE_MEDIUM}{% ENDIF %}" alt="{goods.NAME}" title="{goods.NAME}" itemprop="image">
					 {% IF goods.IS_NEW %}
					 <span class="ico-new">Новинка</span>
					 {% ELSEIF goods.IS_TOP %}
					 <span class="ico-best">Хит</span>
					 {% ENDIF %}
					 {% IF goods.MAX_DISCOUNT %}
					 <span class="ico-sale">Скидка</span>
					 {% ENDIF %}
					 <div class="mask"></div>
				 </a>
				 <div class="actions">
					 <div class="group-mask">
					 <div class="inner-mask">
						 <div class="add-to-links">
						 <!-- Если есть возможность добавить товар в избранное -->
						 {% IF goods.IS_HAS_IN_FAVORITES_LIST %}
							 <a class="add-wishlist added"
							 data-action-is-add="0"
							 data-action-add-url="{FAVORITES_ADD_URL}"
							 data-action-delete-url="{FAVORITES_DELETE_URL}"
							 data-action-add-title="Добавить &laquo;{goods.NAME}&raquo; в избранное"
							 data-action-delete-title="Убрать &laquo;{goods.NAME}&raquo; из избранного"
							 data-add-tooltip="В Избранное"
							 data-del-tooltip="Убрать из избранного"
							 data-tooltip="Убрать из избранного"
							 title="Убрать &laquo;{goods.NAME}&raquo; из избранного"
							 href="{FAVORITES_DELETE_URL}?id={goods.MIN_PRICE_NOW_ID}&amp;return_to={CURRENT_URL | urlencode}"
							 ><i class="fa fa-heart"></i></a>
						 {% ELSE %}
							 <a class="add-wishlist"
							 data-action-is-add="1"
							 data-action-add-url="{FAVORITES_ADD_URL}"
							 data-action-delete-url="{FAVORITES_DELETE_URL}"
							 data-action-add-title="Добавить &laquo;{goods.NAME}&raquo; в избранное"
							 data-action-delete-title="Убрать &laquo;{goods.NAME}&raquo; из избранного"
							 data-add-tooltip="В Избранное"
							 data-del-tooltip="Убрать из избранного"
							 data-tooltip="В Избранное"
							 title="Добавить &laquo;{goods.NAME}&raquo; в избранное" href="{FAVORITES_ADD_URL}?id={goods.MIN_PRICE_NOW_ID}&amp;return_to={CURRENT_URL | urlencode}"
							 href="{FAVORITES_ADD_URL}?id={goods.MIN_PRICE_NOW_ID}&amp;return_to={CURRENT_URL | urlencode}"
							 ><i class="fa fa-heart"></i></a>
						 {% ENDIF %}
						 <!-- END Если есть возможность добавить товар в избранное -->
						 <!-- Если в тарифном плане подключен модуль сравнения товаров и он не выключен в настройках магазина -->
						 {% IF TARIFF_FEATURE_GOODS_COMPARE && SETTINGS_COMPARE_DISABLE=0 %}
							 {% IF goods.IS_HAS_IN_COMPARE_LIST %}
							 <a class="add-compare added"
								 data-action-is-add="0"
								 data-action-add-url="{COMPARE_ADD_URL}"
								 data-action-delete-url="{COMPARE_DELETE_URL}"
								 data-action-add-title="Добавить &laquo;{goods.NAME}&raquo; в список сравнения с другими товарами"
								 data-action-delete-title="Убрать &laquo;{goods.NAME}&raquo; из списка сравнения с другими товарами"
								 data-prodname="{goods.NAME}"
								 data-produrl="{goods.URL}"
								 data-id="{goods.ID}"
								 data-mod-id="{goods.MIN_PRICE_NOW_ID}"
								 data-add-tooltip="В Сравнение"
								 data-del-tooltip="Убрать из сравнения"
								 data-tooltip="Убрать из сравнения"
								 title="Убрать &laquo;{goods.NAME}&raquo; из списка сравнения с другими товарами"
								 href="{COMPARE_DELETE_URL}?id={goods.MIN_PRICE_NOW_ID}&amp;from={goods.GOODS_FROM}&amp;return_to={CURRENT_URL | urlencode}"
							 ><i class="fa fa-retweet"></i></a>
							 {% ELSE %}
							 <a class="add-compare"
								 data-action-is-add="1"
								 data-action-add-url="{COMPARE_ADD_URL}"
								 data-action-delete-url="{COMPARE_DELETE_URL}"
								 data-action-add-title="Добавить &laquo;{goods.NAME}&raquo; в список сравнения с другими товарами"
								 data-action-delete-title="Убрать &laquo;{goods.NAME}&raquo; из списка сравнения с другими товарами"
								 data-prodname="{goods.NAME}"
								 data-produrl="{goods.URL}"
								 data-id="{goods.ID}"
								 data-mod-id="{goods.MIN_PRICE_NOW_ID}"
								 data-add-tooltip="В Сравнение"
								 data-del-tooltip="Убрать из сравнения"
								 data-tooltip="В Сравнение"
								 title="Добавить &laquo;{goods.NAME}&raquo; в список сравнения с другими товарами"
								 href="{COMPARE_ADD_URL}?id={goods.MIN_PRICE_NOW_ID}&amp;from={goods.GOODS_FROM}&amp;return_to={CURRENT_URL | urlencode}"
							 ><i class="fa fa-retweet"></i></a>
							 {% ENDIF %}
						 {% ENDIF %}
						 <!-- END Если в тарифном плане подключен модуль сравнения товаров и он не выключен в настройках магазина -->
						 <div class="quickview-wrap">
							 <a class="quickview" href="{goods.URL_MIN_PRICE_NOW}" title="Быстрый просмотр &laquo;{goods.NAME}&raquo;" data-tooltip="Быстрый просмотр"><i class="fa fa-eye"></i><span>Быстрый просмотр</span></a>
						 </div>
						 </div>
					 </div>
					 </div>
				 </div>
				 </div>
				 <div class="product-shop">
				 <meta itemprop="name" content="{goods.NAME}">
				 <meta itemprop="description" content="{% IF goods.DESCRIPTION_SHORT %}{goods.DESCRIPTION_SHORT}{% ELSE %}Описание отсутствует{% ENDIF %}">
	 <div class="ratings">
						 <a href="{goods.URL | url_amp}" title="Перейти к отзывам">
							 <div class="rating-box">
							 {% IF goods.OPINION_RATING_VALUE %}
							 <span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
								 <meta itemprop="worstRating" content = "1">
								 <meta itemprop="bestRating" content = "10">
								 <meta itemprop="ratingValue" content = "{goods.OPINION_RATING_VALUE}">
								 <meta itemprop="reviewCount" content = "{goods.OPINION_RATING_CNT_ALL}">
								 <div class="rating" style="width:{goods.OPINION_RATING_VALUE}0%" alt="{goods.OPINION_RATING_VALUE}" title="Рейтинг товара"></div>
							 </span>
							 {% ELSE %}
								 <div class="rating" style="width:0%" alt="Рейтинг не определён" title="Рейтинг не определён"></div>
							 {% ENDIF %}
							 </div>
						 </a>
						 </div>
				 <div class="product-name"><a href="{goods.URL_MIN_PRICE_NOW | url_amp}" title="{goods.NAME}" itemprop="url">{goods.NAME}</a></div>
	 <div class="addtocart">
						 <!--a class="add-cart quick button button2" title="Быстро оформить заказ">Добавить в корзину</a-->
						 <a class="add-cart button button2" title="В корзину" data-tooltip="В корзину">Добавить в корзину</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>
				 <!-- Выводим 2 характеристики -->
				 {% IFNOT goods.goods_attr_list_empty %}
					 <div class="attr-list">
					 {% FOR goods_attr_list %}
					 {% IF goods.goods_attr_list.index > 2 %}{break}{% ENDIF %}
					 <div class="attr">
						 <span class="name">{goods.goods_attr_list.NAME}:</span>
						 <span class="value">{goods.goods_attr_list.VALUE}</span>
					 </div>				
					 {% ENDFOR %}		
					 </div>
				 {% ENDIF %}
				 </div>
			 </form>
			 </div>
		 </div>
		 {% ENDFOR %}
	 </div>

В main.css - найдите:
.button2 {
border-color: #fff;
color: #fff;
background: linear-gradient(#7eb20f,#729414) !important;
font-size: 16px;
height: 42px;
}

после него пропишите:
.add-cart.button.button2{
font-size: 13px;
padding: 3px 10px;
}

далее найдите:
.products-grid .item .product-shop .attr-list {
width: 100%;
float: left;
overflow: hidden;
height: 0;
}

замените на:
.products-grid .item .product-shop .attr-list {
width: 100%;
float: left;
overflow: hidden;
height: 50px;
}

далее найдите:
.products-grid .item .product-shop {
	 position: absolute;
	 padding: 15px 20px;
	 bottom: 0;
	 left: 0;
	 width: 100%;
	 background-color: #ffffff;
	 text-align: center;
	 overflow: hidden;
	 text-overflow: ellipsis;
}

замените на:
.products-grid .item .product-shop {
	 padding: 15px 20px;
	 width: 100%;
	 background-color: #ffffff;
	 text-align: center;
	 overflow: hidden;
	 text-overflow: ellipsis;
}

далее найдите и удалите:
.products-grid .item:hover .product-shop .attr-list {margin-top: 10px;height: 50px;}


далее найдите:
.products-grid .item .item-inner {
position: relative;
padding-bottom: 80px;
border: 1px solid #eaeaea;
margin-bottom: 1px;
}

замените на:
.products-grid .item .item-inner {
position: relative;
border: 1px solid #eaeaea;
margin-bottom: 1px;
}

Результат в каталоге:
123.jpg

#3 evros

evros

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

  • Пользователи
  • PipPipPipPip
  • 284 сообщений
  • ГородМосква

Отправлено 03 Февраль 2017 - 20:18

Благодарю Вас!
Обратно в Каталог товаров


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

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

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