Jump to content

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


Recommended Posts

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

В 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"


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

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

Link to post
Share on other sites

.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;}
у меня этого кода нет, может изза него? а так у меня все так же..
Link to post
Share on other sites

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

Link to post
Share on other sites

<!-- Фото товара -->                		<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) -->
Link to post
Share on other sites

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

<!-- Фото товара -->		{if $product->image}<div class="product_icon_3"></div>		<div class="image">			<a href="products/{$product->url}" свое пиши...</a>		</div>		{/if}		<!-- Фото товара (The End) -->
Link to post
Share on other sites

.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;}
Link to post
Share on other sites

Вы что издеваетесь? Как вообще можно сравнивать исходники с разных сайтов? =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
Link to post
Share on other sites

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

Link to post
Share on other sites

Стили:

.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}


По тому же принципу Акции и Новинки
Link to post
Share on other sites
  • 6 months later...

день добрый.

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

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

в какой-то теме на форуме рекомендовали использовать условие  {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 /-->

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

Link to post
Share on other sites
  • 5 months later...

 

Стили:

.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}

 

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

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

Link to post
Share on other sites
  • 1 month later...
  • 6 months later...

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

 

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

 

{if $product->featured}
          <div class="hit"></div>
        {/if}
Edited by aidynchik
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...