Jump to content

How to show discount icon on products

AndersHelbo
 Share

Recommended Posts

AndersHelbo Newbie

AndersHelbo

Posted
  • Author
Posted

hello

 

where you want to display icon? homefeatured module? product list?

and what theme you use? default?

 

Hi. I want to display an icon over the image that tells the costumer, that the products has a discount. Not how much the product cost, but just the test "Discount".

 

The websites is http://www.runnerslab.dk with a costum made template from an external designer.

Link to comment
Share on other sites
vekia Apprentice

vekia

Posted
Posted

Yes! That's exactly what I mean :D But it's a danish website, so the text should be "TILBUD" instead of "DISCOUNT".

 

no worries, you will be able to translate it :)

ok! so let's start

 

i will start this guide with standard product listings in categories.

 

in this case please open product-list.tpl file

you've got there something like:

	<!-- Products list -->
	<ul id="product_list" class="clear">
	{foreach from=$products item=product name=products}
		<li class="ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.index % 2}alternate_item{else}item{/if} clearfix"> 
...
...

right after

<li class="ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.index % 2}alternate_item{else}item{/if} clearfix">

 add this code:

{if isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}
<span class="discount_badge">
{l s='discount!'}
</span>
{/if}

then open:

 

you've got there code with styles for #featured-products_block_center li

add there position:relative; like i show below

 

#featured-products_block_center li {
margin-right: 25px;
padding: 0;
width: 160px;
height: 245px;
position:relative;
}

right after code above, insert these styles (just copy and paste)

#featured-products_block_center li .discount_badge {
	position:absolute;
	right:0px;
	top:0px;
	background:red;
	color:white;
	text-transform:uppercase;
	z-index:2;
	padding:5px 10px;
}

effect (it's only example - you will see badge only for product with real discount)

TMXdXsk.png

  • Like 1
Link to comment
Share on other sites
  • 1 month later...
ALMAJ Newbie

ALMAJ

Posted
Posted

no worries, you will be able to translate it :)

ok! so let's start

 

i will start this guide with standard product listings in categories.

 

in this case please open product-list.tpl file

you've got there something like:

	<!-- Products list -->
	<ul id="product_list" class="clear">
	{foreach from=$products item=product name=products}
		<li class="ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.index % 2}alternate_item{else}item{/if} clearfix"> 
...
...

right after

<li class="ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.index % 2}alternate_item{else}item{/if} clearfix">

 add this code:

{if isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}
<span class="discount_badge">
{l s='discount!'}
</span>
{/if}

then open:

 

you've got there code with styles for #featured-products_block_center li

add there position:relative; like i show below

 

#featured-products_block_center li {
margin-right: 25px;
padding: 0;
width: 160px;
height: 245px;
position:relative;
}

right after code above, insert these styles (just copy and paste)

#featured-products_block_center li .discount_badge {
	position:absolute;
	right:0px;
	top:0px;
	background:red;
	color:white;
	text-transform:uppercase;
	z-index:2;
	padding:5px 10px;
}

effect (it's only example - you will see badge only for product with real discount)

TMXdXsk.png

 

Hello vekia, tanks for the tutorial, but i missed the second part, when you say "then open:" what file do i open?

tanks again.

Link to comment
Share on other sites
rschwendeman Newbie

rschwendeman

Posted
Posted (edited)

I am confused. If under this section of the code,

{if isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}
<span class="discount_badge">
{l s='discount!'}
</span>
{/if}

 where it says discount if I wanted to change it to say "REDUCED" I would just change  from:

{l s='discount!'}

to

{l s='On SALEt!'}

Then it should work, correct? However I am still showing "Discount".. I have no cache and cleared everything else... Any ideas? Am I missing something really stupid...?

 

Example is here: http://interiorcollection.net/cms/en/4-reproductions

 

Also, for some reason the CSS styling is not taking either...

Edited by rschwendeman (see edit history)
Link to comment
Share on other sites
  • 2 weeks later...
jokerstar Newbie

jokerstar

Posted
Posted (edited)

Doesnt work with presta 1.5.6.2 or I made somtg bad.

Vekia in your tutorial smt missing there is your text:

 

Add this code:

{if isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}
<span class="discount_badge">
{l s='discount!'}
</span>
{/if}

then open: (?WHAT?)

 

you've got there code with styles for #featured-products_block_center li

add there position:relative; like i show below
 

#featured-products_block_center li {
margin-right: 25px;
padding: 0;
width: 160px;
height: 245px;
position:relative;
}

 

Well I opened root/presta/modules/homefeatured/homefeatured.css 

and add your code there, but it doesnt work well, there is only text discount but not backgroud color and other atributes

Edited by jokerstar (see edit history)
Link to comment
Share on other sites
vekia Apprentice

vekia

Posted
Posted

+

 

add to css file:
 

.discount_badge{
	position:absolute;
	right:0px;
	top:0px;
	background:red;
	color:white;
	text-transform:uppercase;
	z-index:2;
	padding:5px 10px;
	
}

+

 

add position:relative; to:

#product_list.grid li {
overflow: hidden;
margin-bottom: 14px;
padding: 10px;
border: 1px solid #eee;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
display: inline-block;
width: 153px;
height: 270px;
position: relative;
}

it's not default theme, it's customized default theme :P you've got totally different product list, it's not the same list as author of this topic has got) 

Link to comment
Share on other sites
jokerstar Newbie

jokerstar

Posted
Posted (edited)

this code above is for product lists,

so add code to global.cs

if you want additional information about discount on featured products module - you have to modify module template file and also paste appropriate css styles

I found out thet there is some badge in presta name . discount (zlavnena cena) but for me it only works in minilist only after reload page, it doesnt wokr when i switch from list to minilist view.

Edited by jokerstar (see edit history)
Link to comment
Share on other sites
jokerstar Newbie

jokerstar

Posted
Posted (edited)

well I did it by other way I added to productl-list.tpl one line.

find this paragraph in product list:

Before: 

 
<div class="center_block">
                <a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}">
                    {if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="on_sale">{l s='On sale!'}</span>{/if}
                    <img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html'}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />
                    {if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/if}
                </a>
                <h3>{if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/if} {if isset($product.pack_quantity) && $product.pack_quantity}{$product.pack_quantity|intval|cat:' x '}{/if}<a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|truncate:35:'...'|escape:'htmlall':'UTF-8'}</a></h3>
                <p class="product_desc"><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}" >{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}</a></p>
            </div>
 
AFTER:
<div class="center_block">
                <a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}">
                    {if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="on_sale">{l s='On sale!'}</span>{/if}
                    {elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="discount">{l s='Reduced price!'}</span>{/if}
 
                    <img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html'}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />
                    {if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/if}
                </a>
                <h3>{if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/if} {if isset($product.pack_quantity) && $product.pack_quantity}{$product.pack_quantity|intval|cat:' x '}{/if}<a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|truncate:35:'...'|escape:'htmlall':'UTF-8'}</a></h3>
                <p class="product_desc"><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}" >{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}</a></p>
            </div>
 
LEGEND: Green-ADDED; Red-DELETED
 
Now I can see discount on place we is show On sale. So if you have some discount now it will be automaticly show in corner.
 
But vekia, please can you check my web a tell me where is problem. When you choose grid use F5(refresh site) everything is ok, but then click on minilist view and there is nothing about Discount or On sale. So in minilist refresh site and there will be now minilist-badges so after refresh it is ok. But again if you go to grid view and refresh site and then go back to minilist, Discount and On sale minilist-badges disappear.
Can you help me with this issue please?
Edited by jokerstar (see edit history)
Link to comment
Share on other sites
  • 1 year later...
REGI0 Newbie

REGI0

Posted
Posted (edited)
Hello i would like to add "promotion" logo to my shop.
I added code to product-list.tpl and homefeatured.css but there was no css effect so i added below code to global.css 
 
.discount_badge{
	position:absolute;
	right:0px;
	top:0px;
	background:red;
	color:white;
	text-transform:uppercase;
	z-index:2;
	padding:5px 10px;
	
}

After this step the text background is the red as on the picture below but "promotion" text is still shifted to the right. I think the position: relative; is missing but where to add this

 

 

 224.jpg

Please help thanks in advance

Edited by REGI0 (see edit history)
Link to comment
Share on other sites
  • 4 months later...
  • 1 year later...
syed.obaid Newbie

syed.obaid

Posted
Posted (edited)

I have same issue in my theme i want to add the discount tag infront of my product on homepage . i already try but it's can't work.

 

My website URL is : apparelprime.com

please help me also i attach the file can you edit on these files.

cshomefeatured.css

product-list.tpl

Edited by syed.obaid
i forgetton the files for attch (see edit history)
Link to comment
Share on other sites
  • 2 years later...
gabgar Newbie

gabgar

Posted
Posted (edited)

SOLVED:

I just add : $product.manufacturer_name and the name.

Hi, i would like to do the same as AndersHelbo, (from the top of the post) but only with one difference.

What i need is show the badge  only for a particular manufacter, in fact 3 different manufacters, I have different discounts for different products but i only need to add the badge to a 3 manufacters.

https://www.tiendamotocenter.com/3000-cascos-de-moto

For example AGV and GIVI HELMETS should show the badge.

Is it possible

Edited by gabgar (see edit history)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...