[solved] Display "SOLD" ribbon over the product image when item no longer available

GoneVintage · May 25, 2013

Hi everyone,

I'm trying to display "SOLD" ribbon over the product image when item no longer available - just like the "NEW" one.

As I sell vintage collectibles, most of them are single items and I do not want to ruin my SEO with 404 pages when an item sells. So I decided to keep my inventory ( one never knows what will come for sale), but keep the visitor informed and avoid misunderstanding.

Any help will be appreciated.

Thanks,

Peter

vekia · May 25, 2013

you can use simple condition:

{if $product.quantity==0}
IMG HERE
{/if}

you have to put it to product-list.tpl file

GoneVintage · May 25, 2013

Hi Vekia,

Thanks for the quick reply. You mean I should replace the IMG HERE with img src="" tag to display my custom image? How would I place it to the top right corner of the product image? Thanks.

vekia · May 25, 2013

<a class="product_img_link" href="..." title="..."><img src="..." alt="..." width="124" height="124">----> HERE <------</a>

put there the code:

<img src="YOUR_IMAGE" style="position:absolute; right:0px; top:0px; />

effect:

GoneVintage · May 25, 2013

You took my breath away! Literally! Thanks a million.

p.s. any help on uploading product feed to Google Merchant? All free modules seem to generate feeds with errors, especially on shipping

p.s. What do you think about my new color Scheme? Honestly, please

Edited May 25, 2013 by FountainPenMarket (see edit history)

vekia · May 25, 2013

hello

texture in the background looks fantastic :-) btw. i really like gray designs (my site is also gray!)

if it is possible - please create new thread with google merchant - im really interested in this topic because i don't know anything about it, it's time to learn something

GoneVintage · May 25, 2013

Thanks!

Still struggling with the SOLD image situation:) My two attempts so far resulted in:

1. misaligned product image

2. nothing changed

Your screenshot is still a 'mirage'

I'll start the thread and hope it'll help you to develop a working module, generating feeds accepted by Google Merchant. I was forced to start an Adwords Campaign in order to use Google Merchant, but now my feeds are rejected due to numerous errors.

p.s. Your color scheme is just awesome!

Edited May 25, 2013 by FountainPenMarket (see edit history)

vekia · May 25, 2013

hey

can you paste here a code with your product foreach?(from product-list.tpl) I will re-create it for displaying your sold ribbon (paste the url to the ribbon too)

GoneVintage · May 25, 2013

You're just fantastic!

Here's the original one:

{foreach from=$products item=product name=products}

{if isset($comparator_max_item) && $comparator_max_item}

<label for="comparator_item_{$product.id_product}">{l s='Select to compare'}</label>

</p>

{/if}

</div>

<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" alt="{$product.name|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><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|escape:'htmlall':'UTF-8'|truncate:35:'...'}</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>

{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>

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

{if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}

{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>

{if isset($product.online_only) && $product.online_only}<span class="online_only">{l s='Online only'}</span>{/if}

{/if}

{if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.minimal_quantity <= 1 && $product.customizable != 2 && !$PS_CATALOG_MODE}

{if ($product.allow_oosp || $product.quantity > 0)}

{if isset($static_token)}

<a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add=1&id_product={$product.id_product|intval}&token={$static_token}", false)}" title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>

{else}

<a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add=1&id_product={$product.id_product|intval}", false)}" title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>

{/if}

{else}

{/if}

</div>

</li>

{/foreach}

vekia · May 25, 2013

{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">
<div class="left_block">
{if isset($comparator_max_item) && $comparator_max_item}
<p class="compare">
<input type="checkbox" class="comparator" id="comparator_item_{$product.id_product}" value="comparator_item_{$product.id_product}" {if isset($compareProducts) && in_array($product.id_product, $compareProducts)}checked="checked"{/if} />
<label for="comparator_item_{$product.id_product}">{l s='Select to compare'}</label>
</p>
{/if}
</div>
<div class="center_block">
<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.name|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}
{if $product.quantity==0}<img src="https://www.liquorland.com.au/lle2e/PublishingImages/Sold-Out-small.png" style="position:absolute; top:0px; right:0px;" />{/if}
</a>
<h3><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|escape:'htmlall':'UTF-8'|truncate:35:'...'}</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>
<div class="right_block">
{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>
{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}
{if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
<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>
{if isset($product.online_only) && $product.online_only}<span class="online_only">{l s='Online only'}</span>{/if}
{/if}
{if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.minimal_quantity <= 1 && $product.customizable != 2 && !$PS_CATALOG_MODE}
{if ($product.allow_oosp || $product.quantity > 0)}
{if isset($static_token)}
<a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add=1&id_product={$product.id_product|intval}&token={$static_token}", false)}" title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>
{else}
<a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add=1&id_product={$product.id_product|intval}", false)}" title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>
{/if}
{else}
<span class="exclusive"><span></span>{l s='Add to cart'}</span><br />
{/if}
{/if}
<a class="button lnk_view" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{l s='View'}">{l s='View'}</a>
</div>
</li>
{/foreach}

modified code above, and the effect is:

GoneVintage · May 25, 2013

I guess I owe you a drink! ( or two

Not only the file modification, but a free image, Thanks!

I'll post a link to your store on my blog, hope it leads some visitors to you.

See you at the Google Merchant feed thread.

Regards,

Peter

vekia · May 25, 2013

I guess I owe you a drink! ( or two

Not only the file modification, but a free image, Thanks!

I'll post a link to your store on my blog, hope it leads some visitors to you.

See you at the Google Merchant feed thread.

Regards,

Peter

You're welcome :-)

waiting for the final effect on your site :-)

i marked this thread as solved

regards

GoneVintage · May 25, 2013

Guess it somehow messes with the text and instead of staying at the right, it moves beneath the image and changes fonts and formatting ...

vekia · May 25, 2013

im just wondering how it's possible.

You uploaded it into production version?

GoneVintage · May 25, 2013

It's live now. I'll keep it that way until we find the solution. Browser Cache cleared.

vekia · May 25, 2013

OMG it was my mistake in the code, check:

{if $product.quantity==0}<img src="https://www.liquorland.com.au/lle2e/PublishingImages/Sold-Out-small.png" style="position:absolute; top:0px; right:0px; />{/if}

i forgot about " at the end of the style="

correct code:

{if $product.quantity==0}<img src="https://www.liquorland.com.au/lle2e/PublishingImages/Sold-Out-small.png" style="position:absolute; top:0px; right:0px; "/>{/if}

can you try with this?

GoneVintage · May 25, 2013

It's strange how the little stone can turn the car upside down - / old Bulgarian saying /

Works like a charm.

I'll try to do the trick with featured products file too

Double Solved !!!

p.s. If you like vintage pens, I know what your Christmas gift will be ...

vekia · May 25, 2013

"the devil is in the details" ;-)

fosg2000 · May 27, 2013

NICE !

try to do on my web : http://www.bostonrecycling.net/

and here is a sold out item :

http://www.bostonrecycling.net/home/49-power-supply-unit-panasonic-lsep1260unhb.html

i put the "sold out img" on my server :

http://bostonrecycling.net/images/Sold-Out-small.png

and i clear already my browser cache !

and by the way tell me what u thing about my web

GoneVintage · May 27, 2013

NICE !

try to do on my web : http://www.bostonrecycling.net/

and here is a sold out item :

http://www.bostonrec...ep1260unhb.html

i put the "sold out img" on my server :

http://bostonrecycli...d-Out-small.png

and i clear already my browser cache !

and by the way tell me what u thing about my web

Nice and clean design. Good color scheme. Categories and Products menu text is kinda hard to read - just my modest opinion. I would have chosen more "broad" font. I don't see "SOLD" image over product picture.

vekia · May 27, 2013

wow, I did not think many people will be interested in this topic

BernardoCR · June 5, 2013

Anyway how to add this on homefeatured module?

I try adding the same code on homefeatured.tpl but didn't work.

Here is the code:

<div id="featured-products_block_center" class="block products_block clearfix">

<h4 class="title_block">{l s='Featured products' mod='homefeatured'}</h4>

{if isset($products) AND $products}

<div class="block_content">

{assign var='liHeight' value=250}

{assign var='nbItemsPerLine' value=4}

{assign var='nbLi' value=$products|@count}

{math equation="nbLi/nbItemsPerLine" nbLi=$nbLi nbItemsPerLine=$nbItemsPerLine assign=nbLines}

{math equation="nbLines*liHeight" nbLines=$nbLines|ceil liHeight=$liHeight assign=ulHeight}

<ul style="height:{$ulHeight}px;">

{foreach from=$products item=product name=homeFeaturedProducts}

{math equation="(total%perLine)" total=$smarty.foreach.homeFeaturedProducts.total perLine=$nbItemsPerLine assign=totModulo}

{if $totModulo == 0}{assign var='totModulo' value=$nbItemsPerLine}{/if}

<li class="ajax_block_product {if $smarty.foreach.homeFeaturedProducts.first}first_item{elseif $smarty.foreach.homeFeaturedProducts.last}last_item{else}item{/if} {if $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 0}last_item_of_line{elseif $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 1} {/if} {if $smarty.foreach.homeFeaturedProducts.iteration > ($smarty.foreach.homeFeaturedProducts.total - $totModulo)}last_line{/if}">

<a href="{$product.link}" title="{$product.name|escape:html:'UTF-8'}" class="product_image"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" height="{$homeSize.height}" width="{$homeSize.width}" alt="{$product.name|escape:html:'UTF-8'}" />{if isset($product.new) && $product.new == 1}<span class="new">{l s='New' mod='homefeatured'}</span>{/if}</a>

<h5 class="s_title_block"><a href="{$product.link}" title="{$product.name|truncate:50:'...'|escape:'htmlall':'UTF-8'}">{$product.name|truncate:35:'...'|escape:'htmlall':'UTF-8'}</a></h5>

<div class="product_desc"><a href="{$product.link}" title="{l s='More' mod='homefeatured'}">{$product.description_short|strip_tags|truncate:65:'...'}</a></div>

<div>

<a class="lnk_more" href="{$product.link}" title="{l s='View' mod='homefeatured'}">{l s='View' mod='homefeatured'}</a>

{if $product.show_price AND !isset($restricted_country_mode) AND !$PS_CATALOG_MODE}<p class="price_container"><span class="price">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span></p>{else}<div style="height:21px;"></div>{/if}

{if ($product.id_product_attribute == 0 OR (isset($add_prod_display) AND ($add_prod_display == 1))) AND $product.available_for_order AND !isset($restricted_country_mode) AND $product.minimal_quantity == 1 AND $product.customizable != 2 AND !$PS_CATALOG_MODE}

{if ($product.quantity > 0 OR $product.allow_oosp)}

<a class="exclusive ajax_add_to_cart_button" rel="ajax_id_product_{$product.id_product}" href="{$link->getPageLink('cart')}?qty=1&id_product={$product.id_product}&token={$static_token}&add" title="{l s='Add to cart' mod='homefeatured'}">{l s='Add to cart' mod='homefeatured'}</a>

{else}

<span class="exclusive">{l s='Add to cart' mod='homefeatured'}</span>

{/if}

{else}

<div style="height:23px;"></div>

{/if}

</div>

</li>

{/foreach}

</ul>

</div>

{else}

<p>{l s='No featured products' mod='homefeatured'}</p>

{/if}

</div>

I think the modification should be around here:

<a href="{$product.link}" title="{$product.name|escape:html:'UTF-8'}" class="product_image"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" height="{$homeSize.height}" width="{$homeSize.width}" alt="{$product.name|escape:html:'UTF-8'}" />{if isset($product.new) && $product.new == 1}<span class="new">{l s='New' mod='homefeatured'}</span>{/if}</a>

Thank you!

vekia · June 5, 2013

give me information about your prestashop version and i will give U solution

you use default homefeatured module?

BernardoCR · June 5, 2013

Version 1.5.4.

I use default homefeatured module.

Thank you vekia.

Edited June 5, 2013 by BernardoCR (see edit history)

vekia · June 5, 2013

okay checked it

you have to edit <li>, add style="position:relative;"

and insert code with if condition:

<li style="position:relative;" class="ajax_block_product {if $smarty.foreach.homeFeaturedProducts.first}first_item{elseif $smarty.foreach.homeFeaturedProducts.last}last_item{else}item{/if} {if $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 0}last_item_of_line{elseif $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 1} {/if} {if $smarty.foreach.homeFeaturedProducts.iteration > ($smarty.foreach.homeFeaturedProducts.total - $totModulo)}last_line{/if}">
		    {if $product.quantity<=0}<img src="https://www.liquorland.com.au/lle2e/PublishingImages/Sold-Out-small.png" style="position:absolute; top:0px; right:0px; z-index:2; border:none;"/>{/if}

BernardoCR · June 6, 2013

Thanks for the answer.

It didn't work for me.

I putted the exact right code you posted on homefeatured.tpl.

Thank you.

vekia · June 6, 2013

Gracias de por adelantado y un saludo

please in english here, this is an english subsection, not everyone know spanish language

hope you understand

regards

vekia · June 6, 2013

Thanks for the answer.

It didn't work for me.

I putted the exact right code you posted on homefeatured.tpl.

Thank you.

can you paste the url to your page?

have you got SOLD OUT produts in the homefeatured?

BernardoCR · June 6, 2013

The url to my page is http://www.pinklife.com.br.

I did get sold out products in the homefeatured, but no image

vekia · June 6, 2013

hello

thanks for URL

i checked your shop, there is no sold out code, so try to:

1) turn force compilation on (make sure that you included to the homefeatured.tpl code that I pasted

2) are you sure that you use correct homefeatured.tpl file? I mean that sometimes this file also exist in the theme/YOUR_THEMES/modules/homefeatured/ directory - and if so - you have to apply changes there

regards

BernardoCR · June 6, 2013

Well, it worked.

I was using the default homefeatured file, instead of the theme's module.

I think this will be useful to many members.

Thank you very much vekia!

vekia · June 6, 2013

you're welcome

BernardoCR · June 10, 2013

Hello,

Might there be a mistake in the code.

Here is the problem:

I have an item that have to sizes, S and M.

S has 0 products in stock.

M still has 1 product in stock.

But the "SOLD OUT" image is showing anyway. It should only appear the sold out image when there were no items at all in stock.

Hope you can help me again.

Thank you.

vekia · June 10, 2013

well, code works only when you've got product without additional attributes... i will check the code asap.

GoneVintage · June 14, 2013

okay checked it

you have to edit <li>, add style="position:relative;"

and insert code with if condition:

<li style="position:relative;" class="ajax_block_product {if $smarty.foreach.homeFeaturedProducts.first}first_item{elseif $smarty.foreach.homeFeaturedProducts.last}last_item{else}item{/if} {if $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 0}last_item_of_line{elseif $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 1} {/if} {if $smarty.foreach.homeFeaturedProducts.iteration > ($smarty.foreach.homeFeaturedProducts.total - $totModulo)}last_line{/if}">
			{if $product.quantity<=0}<img src="https://www.liquorland.com.au/lle2e/PublishingImages/Sold-Out-small.png" style="position:absolute; top:0px; right:0px; z-index:2; border:none;"/>{/if}

Hi Vekia, Could you Please make it more clear for a rookie where exactly this code should be inserted? Thank you!

Here's my code:

<li class="ajax_block_product {if $smarty.foreach.homeFeaturedProducts.first}first_item{elseif $smarty.foreach.homeFeaturedProducts.last}last_item{else}item{/if} {if $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 0}last_item_of_line{elseif $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 1} {/if} {if $smarty.foreach.homeFeaturedProducts.iteration > ($smarty.foreach.homeFeaturedProducts.total - $totModulo)}last_line{/if}">

<a href="{$product.link}" title="{$product.name|escape:html:'UTF-8'}" class="product_image"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" height="{$homeSize.height}" width="{$homeSize.width}" alt="{$product.name|escape:html:'UTF-8'}" />{if isset($product.new) && $product.new == 1}<span class="new">{l s='New' mod='homefeatured'}</span>{/if}</a>

<p class="s_title_block"><a href="{$product.link}" title="{$product.name|truncate:50:'...'|escape:'htmlall':'UTF-8'}">{$product.name|truncate:35:'...'|escape:'htmlall':'UTF-8'}</a></p>

<div class="product_desc"><a href="{$product.link}" title="{l s='More' mod='homefeatured'}">{$product.description_short|strip_tags|truncate:65:'...'}</a></div>

<div>

<a class="lnk_more" href="{$product.link}" title="{l s='View' mod='homefeatured'}">{l s='View' mod='homefeatured'}</a>

{if $product.show_price AND !isset($restricted_country_mode) AND !$PS_CATALOG_MODE}<p class="price_container"><span class="price">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span></p>{else}<div style="height:21px;"></div>{/if}

{if ($product.id_product_attribute == 0 OR (isset($add_prod_display) AND ($add_prod_display == 1))) AND $product.available_for_order AND !isset($restricted_country_mode) AND $product.minimal_quantity == 1 AND $product.customizable != 2 AND !$PS_CATALOG_MODE}

{if ($product.quantity > 0 OR $product.allow_oosp)}

<a class="exclusive ajax_add_to_cart_button" rel="ajax_id_product_{$product.id_product}" href="{$link->getPageLink('cart')}?qty=1&id_product={$product.id_product}&token={$static_token}&add" title="{l s='Add to cart' mod='homefeatured'}">{l s='Add to cart' mod='homefeatured'}</a>

{else}

<span class="exclusive">{l s='Add to cart' mod='homefeatured'}</span>

{/if}

{else}

{/if}

</div>

</li>

Edited June 14, 2013 by FountainPenMarket (see edit history)

vekia · June 14, 2013

well, i'm not good teacher

this is a part of the homefeatured.tpl file located in the: modules/homefeatured/homefeatured.tpl

you've got there something like:

<li class="ajax_block_product {if $smarty.foreach.homeFeaturedProducts.first}first_item{elseif $smarty.foreach.homeFeaturedProducts.last}last_item{else}item{/if} {if $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 0}last_item_of_line{elseif $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 1} {/if} {if $smarty.foreach.homeFeaturedProducts.iteration > ($smarty.foreach.homeFeaturedProducts.total - $totModulo)}last_line{/if}">

all you have to do is to change this code to:

<li style="position:relative;" class="ajax_block_product {if $smarty.foreach.homeFeaturedProducts.first}first_item{elseif $smarty.foreach.homeFeaturedProducts.last}last_item{else}item{/if} {if $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 0}last_item_of_line{elseif $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 1} {/if} {if $smarty.foreach.homeFeaturedProducts.iteration > ($smarty.foreach.homeFeaturedProducts.total - $totModulo)}last_line{/if}">
{if $product.quantity<=0}<img src="https://www.liquorland.com.au/lle2e/PublishingImages/Sold-Out-small.png" style="position:absolute; top:0px; right:0px; z-index:2; border:none;"/>{/if}

i added to <li> object code: style="position:relative"

& below I inserted the code for SOLD OUT badge

GoneVintage · June 14, 2013

You Are a Great Teacher, Vekia!

I've learned so much from you. As many others did too.

Thanks again!

p.s. You could PM me your address so I can add you to my Christmas gifts list

There is only one thing left to do, We should try to add the image to the product.tpl

Edited June 14, 2013 by FountainPenMarket (see edit history)

BernardoCR · June 14, 2013

But this code doesn't solve my problem related to item attributes, right?

Thank you.

vekia · June 14, 2013

But this code doesn't solve my problem related to item attributes, right?

Thank you.

that's right, unfortunately this is only for products without combinations / attributes

BernardoCR · June 14, 2013

Did you find any way to make this work with combinations / attributes?

I tried to look how does product-list.php work, when showing that the items were sold out, but had no success.

Thank you.

BernardoCR · June 14, 2013

Did you find any way to make this work with combinations / attributes?

I tried to look how does product-list.php work, when showing that the items were sold out, but had no success.

Thank you.

outlet.ee · June 21, 2013

Hello,

I would be interested in a similar thing:

- if the item is sold, i.e. not active, the product page stays there except the ADD to CART button will be replaced with SOLD OUT button;

- no link from the site points to this kind of product.

This way Google is happy as there is no 404 and customers will not see the disabled products.

Raj_Malhotra · August 15, 2013

well, i'm not good teacher

this is a part of the homefeatured.tpl file located in the: modules/homefeatured/homefeatured.tpl

you've got there something like:

<li class="ajax_block_product {if $smarty.foreach.homeFeaturedProducts.first}first_item{elseif $smarty.foreach.homeFeaturedProducts.last}last_item{else}item{/if} {if $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 0}last_item_of_line{elseif $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 1} {/if} {if $smarty.foreach.homeFeaturedProducts.iteration > ($smarty.foreach.homeFeaturedProducts.total - $totModulo)}last_line{/if}">

all you have to do is to change this code to:

<li style="position:relative;" class="ajax_block_product {if $smarty.foreach.homeFeaturedProducts.first}first_item{elseif $smarty.foreach.homeFeaturedProducts.last}last_item{else}item{/if} {if $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 0}last_item_of_line{elseif $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 1} {/if} {if $smarty.foreach.homeFeaturedProducts.iteration > ($smarty.foreach.homeFeaturedProducts.total - $totModulo)}last_line{/if}">
{if $product.quantity<=0}<img src="https://www.liquorland.com.au/lle2e/PublishingImages/Sold-Out-small.png" style="position:absolute; top:0px; right:0px; z-index:2; border:none;"/>{/if}

i added to <li> object code: style="position:relative"

& below I inserted the code for SOLD OUT badge

Thank You It Worked!!!!

vekia · August 15, 2013

glad to hear that it works for you. may i know where you use this code? im so curious how it looks

Raj_Malhotra · August 15, 2013

glad to hear that it works for you. may i know where you use this code? im so curious how it looks

I add you code in

homefeatured.tpl file located in the: modules/homefeatured/homefeatured.tpl

Have a look at my website: www.indiaskylanterns.com

Iam Using: Prestshop Prestashop 1.5.3.1

I also tested it on Prestashop 1.5.4.1

It works!!!! Thank You....

Edited August 15, 2013 by Raj_Malhotra (see edit history)

niki64 · August 19, 2013

Hello everybody

I have fond a way to put the sold out on the product-list page

I use the code :

{if $product.quantity_all_versions == 0}<img src="http://www.friendsales.be/img/Sold-Out-small.png" style="position:relative; top:0px; right:0px; "/>{/if}

BUT it places the sold out image on top of the item , but not on the other image.

How can i make that it goes on the other image ? (hover ??

Thank you in advance if somebody has the info.

Nicolas

vekia · August 19, 2013

Hello everybody

I have fond a way to put the sold out on the product-list page

I use the code :

{if $product.quantity_all_versions == 0}<img src="http://www.friendsales.be/img/Sold-Out-small.png" style="position:relative; top:0px; right:0px; "/>{/if}

BUT it places the sold out image on top of the item , but not on the other image.

How can i make that it goes on the other image ? (hover ??

Thank you in advance if somebody has the info.

Nicolas

is there any chance to check your website where you've got this ribbon? if so, please share the url

niki64 · August 19, 2013

Hello

Thks i sended you on MP

Nicolas

niki64 · August 19, 2013

Hello

I found finally

i putted

{if $product.quantity_all_versions == 0}<img src="http://yoursite/Sold-Out-small.png" style="position:absolute; top:0px; right:0px; z-index:2; border:none;"/>{/if}

and it works also with products with attribute

Thks anyway

Nicolas

niki64 · August 20, 2013

Hello again,

i did it with the product-list page but i dont'find where to make the code in the product page

can you help ??

Thank you

Nicolas

vekia · August 20, 2013

everything depens on where you exactly want to display this,

product page is totally diferent than product-list page.

niki64 · August 20, 2013

Hi, for product page, i want to put it also over the picture.

regarding the code for the product-list, i see that it works perfectly when the products has attributes, but not when there is no attributes.

have you mayb an idea ??

Nicolas

e-piazza.biz · December 23, 2013

What about implementing this to the mobile default template?

I've tried to add the same line {if $product.quantity<=0}<img src="https://www.yoursite.com/Sold-Out-small.png" style="position:absolute; top:0px; right:0px; z-index:2; border:none;"/>{/if}

to mobile/product.tpl

but it shows the ribbon on the top of the page once I click on the item instead of showing it in the homepage.

then I've tried with category-product-list.tpl

{if isset($products)}

{foreach from=$products item=product name=products}

<div class="product_img_wrapper"><img class="ui-li-thumb" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'large_default')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" /></div>

<h3 class="ui-li-heading">{$product.name|escape:'htmlall':'UTF-8'}</h3>

{if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}

{if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}

{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}

{/if}

</p>

{assign var='info3_str' value=' '}

{assign var='info3_class' value='on_sale'}

{if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}

{capture assign='info3_str'}{l s='On sale!'}{/capture}

{elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}

{capture assign='info3_str'}{l s='Reduced price!'}{/capture}

{assign var='info3_class' value='discount'}

{/if}

{if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}

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

{else}

{/if}

</p>

{if isset($product.online_only) && $product.online_only}

<p class="online_only">{l s='Online only!'}</p>

{/if}

{if isset($product.new) && $product.new == 1}<p class="new">{l s='New'}</p>{/if}

{if $product.quantity==0}<img src="http://www.e-piazza.biz/img/Sold-Out-small-ribbon.png" style="position:absolute; top:0px; right:0px;" />{/if}

</a>

</li>

{/foreach}

</ul>

{/if}

It shows on the main list page but it's not aligned with the item image and it even makes the product image and info move to the right.

vekia · December 24, 2013

you have to define in parent div position:relative;

then ribbon will use parent position, not window position

luxnux · March 10, 2014

Hi Vekia,

i changed the code as you give, but it's not work for my template.

here is the original one :

{*
* 2007-2012 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <[email protected]>
*  @copyright  2007-2012 PrestaShop SA
*  @version  Release: $Revision: 7457 $
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}



{if isset($products)}

<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

	var windowWidth = $(window).width();
  	if(windowWidth<960){
			$.cookie("list", "gridview");
		$("#product_list li").removeClass('listview');
		$("#product_list li").addClass('gridview');
	}
	
  $(window).resize(function() {
  	var windowWidth = $(window).width();
	if(windowWidth<960){
			$.cookie("list", "gridview");
		$("#product_list li").removeClass('listview');
		$("#product_list li").addClass('gridview');
	}
  });
  
  
  if ($.cookie("list")=='gridview') {
	$("#product_list li").removeClass('listview');
	$("#product_list li").addClass('gridview');
	$("#listbtn").removeClass('active');
	$("#gridbtn").addClass('active');


} else if($.cookie("list")=='listview') {
	$("#product_list li").removeClass('gridview');
	$("#product_list li").addClass('listview');
		$("#gridbtn").removeClass('active');
	$("#listbtn").addClass('active');
}

else{
	$("#gridbtn").addClass('active');

}

});


 $(window).load(function() {

  
	$("#gridbtn").click(function() {
		$.cookie("list", "gridview");
		$("#product_list li").removeClass('listview');
		$("#product_list li").addClass('gridview');
		$("#listbtn").removeClass('active');
		$("#gridbtn").addClass('active');

	});
	
	$("#listbtn").click(function() {
		$.cookie("list", "listview");
		$("#product_list li").addClass('listview');
		$("#product_list li").removeClass('gridview');
		$("#gridbtn").removeClass('active');
		$("#listbtn").addClass('active');

	});
	
	
	
	
	$('.ajax_block_product').live('mouseenter mouseleave', function(event) {
  if (event.type == 'mouseenter') {
    
			$('.new',this).text("{l s='NEW'}");
			$('.on_sale',this).text("{l s='ON SALE'}");
			$('.discount',this).text("{l s='DISCOUNT'}");

    		$('.right_block',this).animate({
				opacity: 1
			}, 200, function() {
			
			}); 
  } else {
  			$('.new',this).html('<img src="{$img_dir}exc.png" alt="NEW"/>');
	$('.on_sale',this).html('<img src="{$img_dir}percent.png" alt="NEW"/>');  		
	$('.discount',this).html('<img src="{$img_dir}percent.png" alt="NEW"/>');
       		$('.right_block',this).animate({
				opacity: 0
			}, 200, function() {
			
			});
  }
});
	
	

	
	
	
	

	
	
  });
</script>



	<!-- Products list -->
	<ul id="product_list" class="clear">
	{foreach from=$products item=product name=products}
		<li class="ajax_block_product gridview {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.iteration%3 == 0}nomargin{/if} {if $smarty.foreach.products.index % 2}alternate_item{else}item{/if} clearfix">
												{if isset($product.new) && $product.new == 1}<span class="new"><img src="{$img_dir}exc.png" alt="Sale"/><span class="txt"></span></span>{/if}
												{if $product.quantity==0}<img src="https://www.liquorland.com.au/lle2e/PublishingImages/Sold-Out-small.png" style="position:absolute; top:0px; right:0px; "/>{/if}
						{if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="on_sale"><img src="{$img_dir}percent.png" alt="Sale"/><span class="txt"></span></span>
					{elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="discount"><img src="{$img_dir}percent.png" alt="Sale"/><span class="txt"></span></span>{/if}
			<div class="left_block">
				{if isset($comparator_max_item) && $comparator_max_item}
					<p class="compare hidden-phone" >
						<input type="checkbox" class="comparator" id="comparator_item_{$product.id_product}" value="comparator_item_{$product.id_product}" {if isset($compareProducts) && in_array($product.id_product, $compareProducts)}checked="checked"{/if} /> 
						<label for="comparator_item_{$product.id_product}">{l s='Select to compare'}</label>
					</p>
				{/if}
			</div>
			<div class="center_block">
				<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} />
				</a>
				<div class="textbox">
					<h3><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|escape:'htmlall':'UTF-8'|truncate:55:'...'}</a></h3>
					<p class="description"><a href="{$product.link|escape:'htmlall':'UTF-8'|truncate:360:'...'}" title="{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}" >{$product.description_short|strip_tags:'UTF-8'|truncate:220:'...'}</a></p>
					{if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
					<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>
					{/if}
					
					
					{if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.minimal_quantity <= 1 && $product.customizable != 2 && !$PS_CATALOG_MODE}
												<a class="button ajax_add_to_cart_button" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add&id_product={$product.id_product|intval}&token={$static_token}", false)}" title="{l s='Add to cart'}">{l s='Add to cart'}</a>
										{/if}	
		
				</div>					


				
			</div>
			<div class="right_block">
				{if isset($product.online_only) && $product.online_only}<span class="online_only">{l s='Online only!'}</span>{/if}
				
									{if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.minimal_quantity <= 1 && $product.customizable != 2 && !$PS_CATALOG_MODE}
									
									
									{if ($product.quantity > 0 OR $product.allow_oosp)}
	<a class="ajax_add_to_cart_button button" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add&id_product={$product.id_product|intval}&token={$static_token}", false)}" title="{l s='Add to cart'}"> <img src="{$img_dir}cart.png" alt="Sale"/></a>{/if}{/if}<a class="button"  href="{$product.link|escape:'htmlall':'UTF-8'}" title="{l s='View'}"><img src="{$img_dir}eye.png" alt="Sale"/></a>
				
			
		
			</div>
		</li>
	{/foreach}
	</ul>
	<!-- /Products list -->
{/if}

i followed as same as you post in first page.

you can see the live at tokomamanina.com

and the product with 0 stock is http://tokomamanina.com/index.php?id_product=36&controller=product

thank you

vekia · March 10, 2014

you posted url to product page, not category view.

this modification displays ribbon on products list, not product page

luxnux · March 12, 2014

you posted url to product page, not category view.

this modification displays ribbon on products list, not product page

Hi Vekia thank you,

i changed the 'product-list.tpl' with your condition code.

the right url : http://tokomamanina.com/index.php?id_category=7&controller=category&p=4

AE405 Hello Kitty Tutu set stock is 0

vekia · March 12, 2014

your page loads loads and finally die

i can't open this website.

Codek200 · March 20, 2014

Hi,

can I use this method to set different labels on the product pictures?

example: If a tag exist for the product (ex. inch or metric......)

It is possible to check the existing tags for the products and if a tag exisist, so it will display a label on the picture. I think so:

{if $tag.name='special'}
IMG INCH HERE
{/if}

{if $tag.name='metric'}
IMG METRIC HERE
{/if}

It will be a nice and simply method to manage different label pictures on the product pictures with tags.

belilan · March 31, 2014

Hello,

I would like to put a soldout ribbon that i made, but I am a little bit lost with all the comments.

did it finally work, and what is the right procedure to do it?

thanks a lot.

alif · July 16, 2014

you can use simple condition:
{if $product.quantity==0}
IMG HERE
{/if}
you have to put it to product-list.tpl file

Hello, I didn't fine product-list.tpl file in my cPanel File Manager. Please any one help me

Alif

inbokz · August 18, 2014

i tried on my prestashop 1.6 version.. its not working

anybody can help ?

zaraka · September 26, 2014

hello guys.

i am wondering if you can help me with this scenario:

i changed the product condition to have different values [ product class changed, admin dropdown, enum value set in dbase ]

now the ribbon/badge/sticker problem:

i have put a <if condition> not to check for stock=0, but to chek for the "product condition" and show specific badge

problem is that if i choose grid view all ok [ badge works like a charm, all good ], but in list view the badge is stretched to fill the width of the image container [ 180px ] i tried to get in and out of the <div> severral levels but image doesn't show

another approach would be to have a css badge on the image, but first i would like to understand why is the image streched in the list view

thanks

Edited September 26, 2014 by zaraka (see edit history)

Raj_Malhotra · October 4, 2014

Thank You It Worked!!!!

Which file we need to do changes in PS1.6?

[solved] Display "SOLD" ribbon over the product image when item no longer available

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment