Перейти к содержанию
Официальный форум поддержки Simpla

Как установить правильно иконку СКИДКА, НОВИНКА и т.д.

jora
 Поделиться Подписчики 0

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

jora

jora

Опубликовано
Опубликовано

Я пытаюсь установить иконки СКИДКА, ХИТ, НОВИНКИ... но данные иконки отображаются на сайте не корректно, а именно.

В css устанавливаю вот этот код:

.product_1, .product_2, .product_3 {
width:74px; height:74px; position: absolute; z-index:1; float:left;
}
.product_0 {
display:none;
}
.product_1 {
background:url("../images/icon-hit.png") no-repeat;
}
.product_2 {
background:url("../images/icon-new.png") no-repeat;
}
.product_3 {
background:url("../images/icon-sale.png") no-repeat;

.product .product_cart .left .product_i .product_1, .product .product_cart .left .product_i .product_2, .product .product_cart .left .product_i .product_3, .product .product_cart .left .product_i .product_0 {
position: relative; top:-10px;display:block;
}


Далее в main.tpl устанавливаю вот эту строчку:

div class="product_1"


Все вроде нормально отображает НО данные иконки отображаются под изображением товара, а не над ним!!

Как это возможно исправить?? Подскажите пожалуйста.

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

maksam07

Опубликовано
Опубликовано 

.product .product_cart .left .product_i .product_1, .product .product_cart .left .product_i .product_2, .product .product_cart .left .product_i .product_3, .product .product_cart .left .product_i .product_0 {position: relative; top:-10px;display:block;}
у меня этого кода нет, может изза него? а так у меня все так же..
Ссылка на сообщение
Поделиться на другие сайты
koteyka

koteyka

Опубликовано
Опубликовано

Используйте zindex для иконок. Установите значение первого слоя. Тогда они будут в самом верху. В мозиле нажмите ctrl+shift+i, на нижней панели выберите 3D и увидите на каком слое у Вас иконки. С помощью zindex Вы сможете переместить их наверх.

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

jora

Опубликовано
  • Автор
Опубликовано

С помощью zindex..... я понимаю, что они будут вверху Но оно не выходит! как стояла иконка под изображением так и стоит :(

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

jora

Опубликовано
  • Автор
Опубликовано 

<!-- Фото товара -->                		<div class="image">                <div class="product_1"></div>		{if $product->image}			<a href="products/{$product->url}"><img src="{$product->image->filename|resize:250:280}" style="position: relative !important;z-index: 9999999999999999 !important;" alt="{$product->name|escape}"/></a>			{/if}		</div>		<!-- Фото товара (The End) -->
Ссылка на сообщение
Поделиться на другие сайты
maksam07

maksam07

Опубликовано
Опубликовано

jora у меня так, попробуй

<!-- Фото товара -->		{if $product->image}<div class="product_icon_3"></div>		<div class="image">			<a href="products/{$product->url}" свое пиши...</a>		</div>		{/if}		<!-- Фото товара (The End) -->
Ссылка на сообщение
Поделиться на другие сайты
maksam07

maksam07

Опубликовано
Опубликовано 

.product_icon_1, .product_icon_2, .product_icon_3 {	width:76px; height:76px; position: absolute; z-index:9999999; float:left;}.product_icon_0 {	display:none;}.product_icon_1 {	background:url(.png) no-repeat;}.product_icon_2 {	background:url(.png) no-repeat;}.product_icon_3 {	background:url(.png) no-repeat;}
Ссылка на сообщение
Поделиться на другие сайты
RodgerFox

RodgerFox

Опубликовано
Опубликовано

Вы что издеваетесь? Как вообще можно сравнивать исходники с разных сайтов? =DD
Уважаемый jora, если не знаете html/css, то тут трудно будет помочь, только сделать сразу.
И так, у нас есть блок, в котором находится товар (каталог или отдельная страница, не важно).

<div class="item">
 {if $product->variants|count > 1}
   <span class="black-label"> </span>
 {/if}
 <img />
 <h1 />
 <price />
   ....
</div>


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

{if $product->variants|count > 1}


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

div.item {position: relative;}


для метки: 

.blacl-label {position: absolute; z-index: 10; top: 5px; left: 5px; width: ##px; height: ##px; background: url('ССЫЛКА_НА_КАРТИНКУ_МЕТКИ_АМИНЬ') no-repeat top left;}

Главное тут это абсолютное позиционировние для метки и расположение её, а так же з-индекст, что бы не скрывалась за другими элементами, так же можно метку поставить в шатамэлэ коде перед закрытием дива.
Код написан для человека, понимающий хотя бы часть тегов и более менее css2.1
Ссылка на сообщение
Поделиться на другие сайты
jora

jora

Опубликовано
  • Автор
Опубликовано

RodgerFox - да не знаю .... и что? и нет тут ничего такова. Все учатся и я пытаюсь методом тыка разобраться!!! А если Вы разбираетесь то 5+ Вам за это! а все что Вы расписали тут я попробую... и мне очень интересно как оно заработает!! за совет спасибо ...

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

koteyka

Опубликовано
Опубликовано

Стили:

.hit {
background: url(../images/hit.png) no-repeat;
position:absolute;
width:60px;
       height:60px;
margin:150px 0 0 145px;
}

.act {
background: url(../images/action.png) no-repeat;
position:absolute;
width:60px;
       height:60px;
margin:150px 0 0 145px;
}

.new {
background: url(../images/news.png) no-repeat;
position:absolute;
width:60px;
       height:60px;
margin:150px 0 0 145px;
}



В main.tpl: (рейтинг уберите, если его у вас нет)

<!-- Список товаров-->{*<h6>Рекомендуемые товары</h6>*}<ul class="tiny_products">	{foreach $featured_products as $product}	<!-- Товар-->	<li class="product">				<!-- Фото товара -->		{if $product->image}		<div class="image">                	<div class="hit"></div>			<a href="products/{$product->url}"><img src="{$product->image->filename|resize:200:200}" alt="{$product->name|escape}"/></a>			                </div>		{/if}		<!-- Фото товара (The End) -->		<!-- Название товара -->		<h3><a data-product="{$product->id}" href="products/{$product->url}">{$product->name|escape}</a></h3>		<!-- Название товара (The End) -->		                		<!-- Рейтинг -->                    <div class="testRater_sm" id="product_{$product->id}">                            <div class="statVal">                                    <span class="rater_sm">                                            <span class="rater-starsOff_sm" style="width:60px;">                                                                                         <span class="rater-starsOn_sm" style="width:{$product->rating*60/5|string_format:"%.0f"}px"></span>                                            </span>                                            <span class="test-text">                                                    <span class="rater-rating_sm">{$product->rating|string_format:"%.1f"}</span> (голосов <span class="rater-rateCount_sm">{$product->votes|string_format:"%.0f"}</span>)                                            </span>                                    </span>                            </div>                    </div>                 <!-- Рейтинг (The End) -->                                   		{if $product->variants|count > 0}		<!-- Выбор варианта товара -->		<form class="variants" action="/cart">			<table>			{foreach $product->variants as $v}			<tr class="variant">				<td>					<input id="featured_{$v->id}" name="variant" value="{$v->id}" type="radio" class="variant_radiobutton" {if $v@first}checked{/if} {if $product->variants|count<2}style="display:none;"{/if}/>				</td>				<td>					{if $v->name}<label class="variant_name" for="featured_{$v->id}">{$v->name}</label>{/if}				</td>				<td>					{if $v->compare_price > 0}<span class="compare_price">{$v->compare_price|convert}</span>{/if}					<span class="price">{$v->price|convert} <span class="currency">{$currency->sign|escape}</span></span>                                        <br>                                        {if $v->stock == 0}                                 <h5>Под заказ. Звоните.</h5>                                        {else}                                 <h5>Есть в наличии!</h5>                                        {/if}				                                </td>			</tr>			{/foreach}			</table>                        {if $v->stock != 0}			<input type="submit" class="button" value="в корзину" data-result-text="добавлено"/>                        {/if}		</form>		<!-- Выбор варианта товара (The End) -->		{else}                 <h5>Нет в наличии</h5>		{/if}	</li>	<!-- Товар (The End)-->	{/foreach}			</ul>{/if}


По тому же принципу Акции и Новинки
Ссылка на сообщение
Поделиться на другие сайты
  • 6 месяцев спустя...
Andrey11

Andrey11

Опубликовано
Опубликовано

день добрый.

 поставил стикеры  "спецпредложение" и "акция"

иконки "спецпредложение" отображаются как надо. но не могу справиться с акцией.

в какой-то теме на форуме рекомендовали использовать условие  {if $v->compare_price > 0}

почему-то иконку смещает на один товар вперед. т.е. стикер присваивается справа стоящему товару.

 

шаблон products.tpl
<!-- Картинка товара /-->
        <div class="product_block_img">
            <div class="product_img">
            
             <a href="products/{$product->url}">
            {if $v->compare_price > 0}<span class="action" title="Акция"></span>{/if}
            {if $product->featured}<span class="special" title="Спецпредложение"></span>{/if}
                <img src="{$product->image->filename|resize:300:300}" alt="{$product->name|escape}"/>
              </a>
              </div>
              <div class="product_name" tooltip='product' product_id='{$product->product_id}'>
              <a href="products/{$product->url}" {if $product->featured}class="product_name_link_hit"{else}class="product_name_link"{/if}>{$product->name|escape}</a>
              </div>
        </div>
        <!-- Картинка товара #End /-->

подскажите пожалуйста что не так делаю. в коде не силен.

Ссылка на сообщение
Поделиться на другие сайты
  • 5 месяцев спустя...
Karen

Karen

Опубликовано
Опубликовано

 

Стили:

.hit {
	background: url(../images/hit.png) no-repeat;
	position:absolute;
	width:60px;
        height:60px;
	margin:150px 0 0 145px;
}

.act {
	background: url(../images/action.png) no-repeat;
	position:absolute;
	width:60px;
        height:60px;
	margin:150px 0 0 145px;
}

.new {
	background: url(../images/news.png) no-repeat;
	position:absolute;
	width:60px;
        height:60px;
	margin:150px 0 0 145px;
}

 

В main.tpl: (рейтинг уберите, если его у вас нет)

<!-- Список товаров-->
{*<h6>Рекомендуемые товары</h6>*}
<ul class="tiny_products">

	{foreach $featured_products as $product}
	<!-- Товар-->
	<li class="product">
		
		<!-- Фото товара -->
		{if $product->image}
		<div class="image">
                	<div class="hit"></div>
			<a href="products/{$product->url}"><img src="{$product->image->filename|resize:200:200}" alt="{$product->name|escape}"/></a>
			
                </div>
		{/if}
		<!-- Фото товара (The End) -->

		<!-- Название товара -->
		<h3><a data-product="{$product->id}" href="products/{$product->url}">{$product->name|escape}</a></h3>
		<!-- Название товара (The End) -->
		
                
		<!-- Рейтинг -->
                    <div class="testRater_sm" id="product_{$product->id}">
                            <div class="statVal">
                                    <span class="rater_sm">
                                            <span class="rater-starsOff_sm" style="width:60px;">
                                           
                                              <span class="rater-starsOn_sm" style="width:{$product->rating*60/5|string_format:"%.0f"}px"></span>
                                            </span>
                                            <span class="test-text">
                                                    <span class="rater-rating_sm">{$product->rating|string_format:"%.1f"}</span> (голосов <span class="rater-rateCount_sm">{$product->votes|string_format:"%.0f"}</span>)
                                            </span>
                                    </span>
                            </div>
                    </div>
                 <!-- Рейтинг (The End) -->  
                                 

		{if $product->variants|count > 0}
		<!-- Выбор варианта товара -->
		<form class="variants" action="/cart">
			<table>
			{foreach $product->variants as $v}
			<tr class="variant">
				<td>
					<input id="featured_{$v->id}" name="variant" value="{$v->id}" type="radio" class="variant_radiobutton" {if $v@first}checked{/if} {if $product->variants|count<2}style="display:none;"{/if}/>
				</td>
				<td>
					{if $v->name}<label class="variant_name" for="featured_{$v->id}">{$v->name}</label>{/if}
				</td>
				<td>
					{if $v->compare_price > 0}<span class="compare_price">{$v->compare_price|convert}</span>{/if}
					<span class="price">{$v->price|convert} <span class="currency">{$currency->sign|escape}</span></span>
                                        <br>
                                        {if $v->stock == 0}
                                 <h5>Под заказ. Звоните.</h5>
                                        {else}
                                 <h5>Есть в наличии!</h5>
                                        {/if}				
                                </td>
			</tr>
			{/foreach}
			</table>
                        {if $v->stock != 0}
			<input type="submit" class="button" value="в корзину" data-result-text="добавлено"/>
                        {/if}
		</form>
		<!-- Выбор варианта товара (The End) -->
		{else}
                 <h5>Нет в наличии</h5>
		{/if}

	</li>
	<!-- Товар (The End)-->
	{/foreach}
			
</ul>
{/if}

 

По тому же принципу Акции и Новинки

С рейтингом работать не будет?

Ссылка на сообщение
Поделиться на другие сайты
  • 1 месяц спустя...
  • 6 месяцев спустя...
aidynchik

aidynchik

Опубликовано
Опубликовано (изменено)

На главное странице сделал, все работает =) а как это же самое сделать на странице категории товаров?

 

А, все, сделал =) в том же месте только в шаблоне products.tpl поставить по условию

 

{if $product->featured}
          <div class="hit"></div>
        {/if}
Изменено пользователем aidynchik
Ссылка на сообщение
Поделиться на другие сайты

Присоединяйтесь к обсуждению

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

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

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

Загрузка...
×
 Поделиться
Подписчики 0
Перейти к списку тем
×
×
  • Создать...