Jump to content

[SOLVED] Displaying offer sign and percentage fall on category page.


Recommended Posts

Hi.

 

I have this problem that whenever i try to make a price fall on some of my products it doesn't display it to the customer when they surf my category page. The discount only shows when they enter the product page of the specific product.

 

I would like to have a little sign in the upper right corner of the product thumbnail the be shown on the category page and also a percentage fall below the price of the product.

 

How can i create this?

 

Here is a link to my category page. The product i have created a price fall on is the last product.

 

http://olivereggertsen.dk/12-armbaand

 

 

Thanks in advance

Link to comment
Share on other sites

 

 

I would like to have a little sign in the upper right corner of the product thumbnail the be shown on the category page and also a percentage fall below the price of the product.

what kind of sign you want to display there? And what if you define specific price with amount, not in percentages?

 

please share product-list.tpl file, then I will prepare code for you :)

Link to comment
Share on other sites

Yes i am looking for something like that :-) I'd actually prefer the discount on the product list page to be in percentages but with amount would also work.

 

Here is my product-list.tpl :-)

 

{if isset($products)}
    <!-- Products list -->
    <ul id="product_list" class="clearfix">
    {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.iteration%5 == 0}last_row_item{else}item{/if}">
    <a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}">
        <img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" 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>
    <p class="clear"></p>
    <h3><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|escape:'htmlall':'UTF-8'|truncate:26:'...':true}</a></h3>
  <div class="content_price">
 
    {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}<span class="price" style="display: inline;">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span><br />{/if}
                {if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}<span class="availability">{if ($product.allow_oosp || $product.quantity > 0)}{l s='Available'}{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}{l s='Product available with different options'}{else}{l s='Out of stock'}{/if}</span>{/if}
</div>
 
</li>
    {/foreach}
    </ul>
    <!-- /Products list -->
{/if}
Link to comment
Share on other sites

ok, so for the first you will need to add position:relative to:

#product_list li {
text-align: center;
float: left;
width: 142px;
padding: 16px;
margin-bottom: 14px;
margin-right: 20px;
background-color: #fff;
position:relative;
}

it's a part of http://olivereggertsen.dk/themes/test/css/product_list.css line 4

 

then in the same file add #product_list .specialoffer class, like:

.specialoffer {
	padding:5px; 
	position:absolute;
	color:white;
	background:red;
	top:0px;
	right:0px;
	z-index:9;
	display:block;
}

in your .tpl file add:

...

...

<li class="ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.iteration%5 == 0}last_row_item{else}item{/if}">
{if $product.specificPrice AND $product.specificPrice.reduction}
<span class="specialoffer">{l s='special'}</span>
{/if}
    <a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}">
        <img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" he

...

...

Link to comment
Share on other sites

ok, so for the first you will need to add position:relative to:

#product_list li {
text-align: center;
float: left;
width: 142px;
padding: 16px;
margin-bottom: 14px;
margin-right: 20px;
background-color: #fff;
position:relative;
}

it's a part of http://olivereggertsen.dk/themes/test/css/product_list.css line 4

 

then in the same file add #product_list .specialoffer class, like:

.specialoffer {
	padding:5px; 
	position:absolute;
	color:white;
	background:red;
	top:0px;
	right:0px;
	z-index:9;
	display:block;
}

in your .tpl file add:

...

...

<li class="ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.iteration%5 == 0}last_row_item{else}item{/if}">
{if $product.specificPrice AND $product.specificPrice.reduction}
<span class="specialoffer">{l s='special'}</span>
{/if}
    <a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}">
        <img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" he

...

...

 

 

 

 

 

 

I have now modified the files, but nothing happened on the site :-/

Link to comment
Share on other sites

to display price without reduction use:

{$product.price_without_reduction}

to display reduction value use (real amount based od product price)

{$product.reduction}

ti display reduction value use:

{$product.specific_prices.reduction}

in some cases you will need to use also (regarding to the first two examples):

{convertPrice price=$product.price_without_reduction}

or

{convertPrice price=$product.reduction}

use this code there, where you want to display information about reduction :)

Link to comment
Share on other sites

product-list.tpl file,right below (after)

    {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}<span class="price" style="display: inline;">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span><br />

something like:

...

...

    {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}<span class="price" style="display: inline;">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span><br />{$product.specific_prices.reduction}{/if}

{if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}<span class="availability">{if ($product.allow_oosp || $product.quantity > 0)}{l s='Available'}{elseif (isset($product.quantity_all_versions) && 

...

...

Link to comment
Share on other sites

product-list.tpl file,right below (after)

    {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}<span class="price" style="display: inline;">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span><br />

something like:

...

...

    {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}<span class="price" style="display: inline;">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span><br />{$product.specific_prices.reduction}{/if}

{if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}<span class="availability">{if ($product.allow_oosp || $product.quantity > 0)}{l s='Available'}{elseif (isset($product.quantity_all_versions) && 

...

...

 

 

Thank you! :-)

 

Lastly, would it be possible to get a - (minus) in front of the reduction so that the customers can see that it's a reduction?

Link to comment
Share on other sites

sure, just use - sign before variable {$product.specific_prices.reduction}

 

Thank you :-)

 

I just discovered that now all the products on the list have "-0.00 kr." written below. How can i modify it so it is just the discounted products that have the discount amount below the price?

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

this code should help:

{if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}-{$product.specific_prices.reduction}{/if}

 

 

It did work, except the "-" sign which is still below the other products.

 

And now, the reduction below the discounted one is written like this: -95.000000

 

 

See here: http://olivereggertsen.dk/12-armbaand

Link to comment
Share on other sites

ok so can you please attach full code of your product-list.tpl file

i will check it :)

 

 

Here you go :-)

 

 

 

{if isset($products)}
    <!-- Products list -->
    <ul id="product_list" class="clearfix">
    {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.iteration%5 == 0}last_row_item{else}item{/if}">
  {if $product.specific_prices AND $product.specific_prices.reduction}
        <span class="specialoffer">{l s='special'}</span>
        {/if}
    <a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}">
        <img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" 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>
    <p class="clear"></p>
    <h3><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|escape:'htmlall':'UTF-8'|truncate:26:'...':true}</a></h3>
  <div class="content_price">
 
    {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}<span class="price" style="display: inline;">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span><br />{if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}-{convertPrice price=$product.specific_prices.reduction}{/if}{/if}
                {if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}<span class="availability">{if ($product.allow_oosp || $product.quantity > 0)}{l s='Available'}{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}{l s='Product available with different options'}{else}{l s='Out of stock'}{/if}</span>{/if}
</div>
 
</li>
    {/foreach}
    </ul>
    <!-- /Products list -->
{/if}
Link to comment
Share on other sites

{if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}  {if $product.specific_prices AND $product.specific_prices.reduction}-{convertPrice price=$product.specific_prices.reduction}{/if}{/if}{/if}

i think that this code will solve problem! can you try? use it instead of {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}-{convertPrice price=$product.specific_prices.reduction}{/if}{/if}

Link to comment
Share on other sites

×
×
  • Create New...