Jump to content
GoneVintage

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

Recommended Posts

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

  • Like 2

Share this post


Link to post
Share on other sites

you can use simple condition:

 

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

 

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

  • Like 2

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

 

EbyOBoZ.png

  • Like 3

Share this post


Link to post
Share on other sites

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 by FountainPenMarket (see edit history)

Share this post


Link to post
Share on other sites

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 :)

  • Like 1

Share this post


Link to post
Share on other sites

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 by FountainPenMarket (see edit history)

Share this post


Link to post
Share on other sites

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)

  • Like 1

Share this post


Link to post
Share on other sites

You're just fantastic!

Here's the original one:

 

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

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

Share this post


Link to post
Share on other sites

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

 

VLtwvgA.png

  • Like 5

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

im just wondering how it's possible.

You uploaded it into production version?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

  • Like 2

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

"the devil is in the details" ;-)

  • Like 1

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

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:

 

<!-- MODULE Home Featured Products -->

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

<!-- /MODULE Home Featured Products -->

 

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!

Share this post


Link to post
Share on other sites

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

you use default homefeatured module?

Share this post


Link to post
Share on other sites

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}

Share this post


Link to post
Share on other sites

Thanks for the answer.

 

It didn't work for me.

 

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

 

Thank you.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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}

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

{/if}

</div>

</li>

Edited by FountainPenMarket (see edit history)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by FountainPenMarket (see edit history)

Share this post


Link to post
Share on other sites

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

Thank you.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by Raj_Malhotra (see edit history)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Hello

 

I found finally :)

 

i putted

 

<li style="position:relative;"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} {if $smarty.foreach.products.index % 3 == 0}first_item_line{/if} {if ($smarty.foreach.products.index + 1) % 3 == 0}last_item_line{/if} clearfix">

<div class="center_block">

{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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

everything depens on where you exactly want to display this,

product page is totally diferent than product-list page.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

<ul data-role="listview" id="category-list" class="ui-listview ui-grid-a">
{foreach from=$products item=product name=products}
<li class="ui-block-{if $smarty.foreach.products.index % 2}b{else}a{/if} product-list-row">
<a href="{$product.link|escape:'htmlall':'UTF-8'}" data-ajax="false">
<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)))}
<p class="ui-li-price">
{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}
<p class="ui-li-price-info {$info3_class}"><span>{$info3_str}</span></p>
<p class="availability">
{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}
{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><!-- #category-list -->
{/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. 

Share this post


Link to post
Share on other sites

you have to define in parent div position:relative;

then ribbon will use parent position, not window position 

Share this post


Link to post
Share on other sites

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 license@prestashop.com 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 <contact@prestashop.com>
*  @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

Share this post


Link to post
Share on other sites

you posted url to product page, not category view.

this modification displays ribbon on products list, not product page

Share this post


Link to post
Share on other sites

your page loads loads and finally die

i can't open this website.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

anybody can help ?

Share this post


Link to post
Share on other sites

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 by zaraka (see edit history)

Share this post


Link to post
Share on other sites

Hello people!


 


I also would like to show sold ribbon on sold out products


 


I opened product-list.tpl and I added this code: {if $product.quantity==0}<img src="https://www.liquorla...d-Out-small.png" style="position:absolute; top:0px; right:0px; "/>{/if}


 


in this position: http://gyazo.com/284...13c47061e307c2c but is not showing on the website


http://elpatioantiguedades.com/tienda/muebles-pintados-jardin/40-pareja-de-mesitas-de-noche-decapadas-antiguas.html


 


Hope someone will be able to help me!


 


Thanks in advance!


Share this post


Link to post
Share on other sites

Guess this one is not working in prestashop 1.6?  :unsure:

  • Like 1

Share this post


Link to post
Share on other sites

thank you for your code, it also works for on sale ribbon on product-list.tpl, because i only had on sale ribbon in product page and not for pictures on the category. So i add code in product-list.tpl

 

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

---> add this after---> <div class="reduction_img_container"><p class="reduction_img">En solde</p></div>

 

French version

 

 

 

 

--------------------------

www.shamyna.fr

--------------------------

Edited by bine93 (see edit history)

Share this post


Link to post
Share on other sites

HOW to make it work on prestashop 1.6??

What should I do to show the sold-out image on products in the product-list?

Share this post


Link to post
Share on other sites

When I add this code in product-list.tpl line 260:
 

{if $product.quantity==0}<img src="url/small.png" style="position:absolute; top:0px; right:0px; "/>{/if}

it works fine on the product/category pages. But on my home page the new products block dissappears. How come?


This is the code in context:
 

 <div class="left-block">
					<div class="product-image-container">
						<a class="product_img_link"	href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}" itemprop="url">
							<img class="replace-2x img-responsive" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html':'UTF-8'}" alt="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" title="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} itemprop="image" />
							{if $product.quantity==0}<img src="url/small.png" style="position:absolute; top:0px; right:0px; "/>{/if}
						</a>
						{if isset($quick_view) && $quick_view}
							<a class="quick-view" href="#" rel="{$product.link|escape:'html':'UTF-8'}">
								<span>{l s='Quick view'}</span>
							</a>
						{/if}
						
						
					</div>
				</div> 

I also tried this out: https://www.prestashop.com/forums/topic/323879-mark-few-products-as-sold/?p=1955319

EDIT: I found the reason to why the new products block dissappears. You have to clear cache from the backend then it should work :)
 

Edited by khaledsaied (see edit history)
  • Like 1

Share this post


Link to post
Share on other sites

Hi guys

 

Does anybody have this working correctly on Version 1.6.0.9????

 

I tried Vekia's original code but nothing the ribbon/sticker is not displayed...

 

Regards

Greg

Share this post


Link to post
Share on other sites

When I add this code in product-list.tpl line 260:

 

{if $product.quantity==0}<img src="url/small.png" style="position:absolute; top:0px; right:0px; "/>{/if}

it works fine on the product/category pages. But on my home page the new products block dissappears. How come?

 

 

This is the code in context:

 

 <div class="left-block">
					<div class="product-image-container">
						<a class="product_img_link"	href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}" itemprop="url">
							<img class="replace-2x img-responsive" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html':'UTF-8'}" alt="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" title="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} itemprop="image" />
							{if $product.quantity==0}<img src="url/small.png" style="position:absolute; top:0px; right:0px; "/>{/if}
						</a>
						{if isset($quick_view) && $quick_view}
							<a class="quick-view" href="#" rel="{$product.link|escape:'html':'UTF-8'}">
								<span>{l s='Quick view'}</span>
							</a>
						{/if}
						
						
					</div>
				</div> 

I also tried this out: https://www.prestashop.com/forums/topic/323879-mark-few-products-as-sold/?p=1955319

 

It's working. Thanks dude!

Edited by rukano (see edit history)

Share this post


Link to post
Share on other sites

Hi guys

 

Does anybody have this working correctly on Version 1.6.0.9????

 

I tried Vekia's original code but nothing the ribbon/sticker is not displayed...

 

Regards

Greg

I am using version 1.6.0.9 and it's working on mine ..

Share this post


Link to post
Share on other sites

Strange, i read everything here, but it still dont work for me :(

 

i changed in product-list.tpl the code:

                                <div class="left-block">
                                        <div class="product-image-container">
                                                <a class="product_img_link"     href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}" itemprop="url">
                                                        <img class="replace-2x img-responsive" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html'
:'UTF-8'}" alt="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" title="{if !empty($product.legend)}{$product.legend|escape:
'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} itemprop="image" />
                                {if $product.quantity==0}<img src="http://queensofstyle.net/img/sold3.png" style="position:absolute; top:0px; right:0px; "/>{/if}
                                                </a>
                                                {if isset($quick_view) && $quick_view}
                                                        <div class="quick-view-wrapper-mobile">
                                                        <a class="quick-view-mobile" href="{$product.link|escape:'html':'UTF-8'}" rel="{$product.link|escape:'html':'UTF-8'}">
                                                                <i class="icon-eye-open"></i>
                                                        </a>
                                                </div>

http://queensofstyle.net/en/63-sport

 

I want out of stock item to have ribbon Sold out .. 

 

 

what i'm doing wrong?

Share this post


Link to post
Share on other sites

Strange, i read everything here, but it still dont work for me :(

 

i changed in product-list.tpl the code:

                                <div class="left-block">
                                        <div class="product-image-container">
                                                <a class="product_img_link"     href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}" itemprop="url">
                                                        <img class="replace-2x img-responsive" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html'
:'UTF-8'}" alt="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" title="{if !empty($product.legend)}{$product.legend|escape:
'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} itemprop="image" />
                                {if $product.quantity==0}<img src="http://queensofstyle.net/img/sold3.png" style="position:absolute; top:0px; right:0px; "/>{/if}
                                                </a>
                                                {if isset($quick_view) && $quick_view}
                                                        <div class="quick-view-wrapper-mobile">
                                                        <a class="quick-view-mobile" href="{$product.link|escape:'html':'UTF-8'}" rel="{$product.link|escape:'html':'UTF-8'}">
                                                                <i class="icon-eye-open"></i>
                                                        </a>
                                                </div>

http://queensofstyle.net/en/63-sport

 

I want out of stock item to have ribbon Sold out .. 

 

 

what i'm doing wrong?

 

Give a try of this, dude:

 

product-list.tpl line 260:

 

  1. {if $product.quantity==0}<img src="url/small.png" style="position:absolute; top:0px; right:0px; "/>{/if}

 

change the img url to the specified image you uploaded

Share this post


Link to post
Share on other sites

To display the "sold" label in 1.6 do the following:

 

for product list images:

 

Edit product-list.pl

<div class="product-container" itemscope itemtype="http://schema.org/Product">
				<div class="left-block">
					<div class="product-image-container">
						<a class="product_img_link product_image" href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}" itemprop="url">
							<img class="replace-2x img-responsive" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html':'UTF-8'}" alt="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" title="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} itemprop="image" />
							{if isset($product.new) && $product.specific_prices} 
							{if $product.specific_prices}<span class="sale">{l s='Sale'}</span>{/if}
							{else}
							{if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/if}
							
						</a>
					</div>
				</div>

and add this code:

{if (!$allow_oosp && $product->quantity <= 0) || !$product->available_for_order || $PS_CATALOG_MODE}<span class="sold">{l s='sold'}</span>{/if}{/if}

so the code will look like this:

<div class="product-container" itemscope itemtype="http://schema.org/Product">
				<div class="left-block">
					<div class="product-image-container">
						<a class="product_img_link product_image" href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}" itemprop="url">
							<img class="replace-2x img-responsive" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html':'UTF-8'}" alt="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" title="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} itemprop="image" />
							{if isset($product.new) && $product.specific_prices} 
							{if $product.specific_prices}<span class="sale">{l s='Sale'}</span>{/if}
							{else}
							{if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/if}
							{if (!$allow_oosp && $product->quantity <= 0) || !$product->available_for_order || $PS_CATALOG_MODE}<span class="sold">{l s='sold'}</span>{/if}
							{/if}

						</a>
					</div>
				</div>

For the product page edit product.tpl:

<!-- product img-->        
			<div id="image-block" class="clearfix">
				<!--{if $product->new}
					<span class="new-box">
						<span class="new-label">{l s='New'}</span>
					</span>
				{/if}
				{if $product->on_sale}
					<span class="sale-box no-print">
						<span class="sale-label">{l s='Sale!'}</span>
					</span>
				{elseif $product->specificPrice && $product->specificPrice.reduction && $productPriceWithoutReduction > $productPrice}
					<span class="discount">{l s='Reduced price!'}</span>
				{/if}-->
				
				{if $have_image}

and add the same code:

{if (!$allow_oosp && $product->quantity <= 0) || !$product->available_for_order || $PS_CATALOG_MODE} <span class="sold">{l s='sold'}</span>{/if}

so the final product.tpl looks:

<!-- product img-->        
			<div id="image-block" class="clearfix">
				<!--{if $product->new}
					<span class="new-box">
						<span class="new-label">{l s='New'}</span>
					</span>
				{/if}
				{if $product->on_sale}
					<span class="sale-box no-print">
						<span class="sale-label">{l s='Sale!'}</span>
					</span>
				{elseif $product->specificPrice && $product->specificPrice.reduction && $productPriceWithoutReduction > $productPrice}
					<span class="discount">{l s='Reduced price!'}</span>
				{/if}-->
				{if (!$allow_oosp && $product->quantity <= 0) || !$product->available_for_order || $PS_CATALOG_MODE} <span class="sold">{l s='sold'}</span>{/if}
				{if $have_image}

Now go to global.css and add this:

.sold{background: url("../img/sold.png") no-repeat scroll 0 0;height: 230px;right: 24px;position: absolute;top: 4px;width: 228px;z-index: 1;text-indent: -9999px;}

ofcourse you will have to create a proper sold" badge and upload it.

 

Clear cache, adjust position of sold badge by modifying css values, you're done!

 

 

WARNING:

The above method is for displaying sold badge for product with "do not allow order" state.

If you like to display it on products with quantity<=0 regardless of the allow or not state then changing:

if (!$allow_oosp && $product->quantity <= 0) || !$product->available_for_order || $PS_CATALOG_MODE} <span class="sold">{l s='sold'}</span>{/if}

to


if ($product->quantity <= 0)} <span class="sold">{l s='sold'}</span>{/if}

should do the trick.

 

EDIT:

Teh code does work only for product.tpl

don't know why it doesn't on product-list.tpl

Edited by letrof (see edit history)

Share this post


Link to post
Share on other sites