Jump to content

Display stock availability in product listing for Prestashop 1.7.3


abe666
 Share

Recommended Posts

Hi, help me with code to diplay information label product stock availability In Stock / Out of Stock in product listing.

Sample in attached picture.

For for Prestashop 1.7.3

 

Thanks

Screenshot-2018-4-13 Sekačky.png

 

Partialy Solved:

      {block name='product_miniature_item'}
        {if $product.quantity > 0}
            <span class="availability-list">In Stock</span>
        {/if}
      {/block}

 

 

Edited by abe666 (see edit history)

Share this post


Link to post
Share on other sites

  • 1 month later...
  • 2 weeks later...
On 27/5/2018 at 8:13 PM, rif_catalan said:

 

hi, and how to make it look green for available and red color for sold out, for ps 1.7.2.4 thanks  ??

 

This is a simple CSS question : )

Just add two classes in your if/else statement.

Share this post


Link to post
Share on other sites

  • 2 weeks later...

In your themefolder/templates/catalog/_partials/miniatures/product.tpm just before the the "thumbnail-container" div closes

 

{block name='product_miniature_item'}
        {if $product.quantity > 0}
            <span class="availability-list availability-list-in-stock">In Stock</span>

       {else}

            <span class="availability-list availability-list-out-of-stock">Out of Stock</span>
        {/if}
 {/block}

 

And in themefolder/assests/css/custom.css file (for example) something like

 

.availability-list{

padding: 4px;

color:white;

position: absolute;

right:0;

bottom:0;

}

.availability-list-in-stock{

background-color: green;

}

.availability-list-out-of-stock{

background-color red;

}

.thumbnail-container{

position: relative

}

That last one was just so that the text stays in the thumbnail, it may not be needed depending on your theme.

Keep in mind that i did not test this code but it should about work. 

 

Edited by Henri (see edit history)
  • Like 4

Share this post


Link to post
Share on other sites

  • 4 months later...
On 29/6/2018 at 5:45 PM, Henri said:

In your themefolder/templates/catalog/_partials/miniatures/product.tpm just before the the "thumbnail-container" div closes

 

{block name='product_miniature_item'}
        {if $product.quantity > 0}
            <span class="availability-list availability-list-in-stock">In Stock</span>

       {else}

            <span class="availability-list availability-list-out-of-stock">Out of Stock</span>
        {/if}
 {/block}

 

And in themefolder/assests/css/custom.css file (for example) something like

 

.availability-list{

padding: 4px;

color:white;

position: absolute;

right:0;

bottom:0;

}

.availability-list-in-stock{

background-color: green;

}

.availability-list-out-of-stock{

background-color red;

}

.thumbnail-container{

position: relative

}

That last one was just so that the text stays in the thumbnail, it may not be needed depending on your theme.

Keep in mind that i did not test this code but it should about work. 

 

running in the latest version of prestashop

Share this post


Link to post
Share on other sites

  • 3 months later...
On 6/29/2018 at 5:45 PM, Henri said:

.availability-list-out-of-stock{

background-color red;

}

Well, correcting "background-color red;" to "background-color : red;" helped a lot. Also, running position: center allows for a better placement with the quick-view. Done the following hack as well, changing the "quick-view" translation to "Quick-view ::" makes it a little more pretty.

Hope it helps someone!

 

Stock-avail.jpg

Stock-avail2.jpg

Share this post


Link to post
Share on other sites

  • 3 weeks later...

In Prestashop 1.7.*, Product.tpl. You should use ' product.quantity_all_versions '

{block name='product_miniature_item'}
                {if $product.quantity_all_versions < 1}
                    <span class="availability-list availability-list-out-of-stock">Out Of Stock</span>
                {/if}
             {/block} 

  • Like 1

Share this post


Link to post
Share on other sites

  • 6 months later...

Can u help me ?

I have prestashop 1.7.6.1 and doesnt work this code :(

On 6/29/2018 at 5:45 PM, Henri said:

In your themefolder/templates/catalog/_partials/miniatures/product.tpm just before the the "thumbnail-container" div closes

 

{block name='product_miniature_item'}
        {if $product.quantity > 0}
            <span class="availability-list availability-list-in-stock">In Stock</span>

       {else}

            <span class="availability-list availability-list-out-of-stock">Out of Stock</span>
        {/if}
 {/block}

 

And in themefolder/assests/css/custom.css file (for example) something like

 

.availability-list{

padding: 4px;

color:white;

position: absolute;

right:0;

bottom:0;

}

.availability-list-in-stock{

background-color: green;

}

.availability-list-out-of-stock{

background-color red;

}

.thumbnail-container{

position: relative

}

That last one was just so that the text stays in the thumbnail, it may not be needed depending on your theme.

Keep in mind that i did not test this code but it should about work. 

 

Can u help me ?

I have prestashop 1.7.6.1 and doesnt work this code :(😢

Share this post


Link to post
Share on other sites

  • 2 weeks later...
On 10/8/2019 at 3:35 PM, Bosiu said:

Can u help me ?

I have prestashop 1.7.6.1 and doesnt work this code :(

Can u help me ?

I have prestashop 1.7.6.1 and doesnt work this code :(😢

Same here, nobody have the answer ?

With this code impossible to get quantity of current product.

Share this post


Link to post
Share on other sites

  • 2 months later...
  • 3 weeks later...

Okay, I answered my own question, here is the code to put in product.tpl (tested and working on Classic theme):

        {if $customer.is_logged && !$customer.is_guest}
            {block name='product_miniature_item'}
                {if $product.quantity > 0}
                    <span class="availability-list availability-list-in-stock">{l s='En Stock'}</span>
                    {else}
                    <span class="availability-list availability-list-out-of-stock">{l s='Sur Commande'}</span>
                {/if}
            {/block}
        {/if}

I wanted to show it under the product picture, so I placed it right after   <div class="product-description">

Hope this helps!

  • Like 1

Share this post


Link to post
Share on other sites

2 hours ago, CarolineinTo said:

Okay, I answered my own question, here is the code to put in product.tpl (tested and working on Classic theme):

        {if $customer.is_logged && !$customer.is_guest}
            {block name='product_miniature_item'}
                {if $product.quantity > 0}
                    <span class="availability-list availability-list-in-stock">{l s='En Stock'}</span>
                    {else}
                    <span class="availability-list availability-list-out-of-stock">{l s='Sur Commande'}</span>
                {/if}
            {/block}
        {/if}

I wanted to show it under the product picture, so I placed it right after   <div class="product-description">

Hope this helps!

If you not have combinations..

Share this post


Link to post
Share on other sites

Hi, I modified the code a bit and it just didn't work

I want 3 options
no stock and cannot be purchased - NOT AVAILABLE -
no stock and if you can buy - AVAILABLE IN 72 HOURS -
if there is stock - AVAILABLE -
What am i doing wrong?

 

{block name='product_miniature_item'}
        {if $product.quantity > 0}
            <span class="availability-list availability-list-in-stock">Disponible</span>             
            {else}
            {if $stock_available.out_of_stock=1}
                <span class="availability-list availability-list-encargo">Disponible en 72 horas</span>
            {else}
                <span class="availability-list availability-list-out-of-stock">No disponible</span>
            {/if}    
        {/if}
       {/block}

 

Gracias

Santi

 

 

Share this post


Link to post
Share on other sites

Whoever is searching for this functionality, I could not get it to work the way I wanted it in my new 1.7.6.3 install with the default classic template. I spent the past 4 hours getting it to behave the way I want it to using the native 'product flags' css feature:

--- themes/classic/assets/css/custom.css.orig    2020-02-16 00:13:33.561915916 +0100
+++ themes/classic/assets/css/custom.css    2020-02-16 00:14:46.556915637 +0100
@@ -3,3 +3,12 @@
  * A template should always ship with an empty custom.css
  */
 
+.product-flags li.product-flag.in-stock {
+  -webkit-box-ordinal-group: 0;
+  -ms-flex-order: -1;
+  order: -1;
+  background: #008000;
+  width: 100%;
+  text-align: center;
+  margin-top: 0 !important
+}


--- themes/classic/templates/catalog/product.tpl.orig    2020-02-16 00:08:08.033917157 +0100
+++ themes/classic/templates/catalog/product.tpl    2020-02-16 00:12:22.814916186 +0100
@@ -63,6 +63,9 @@
                   {foreach from=$product.flags item=flag}
                     <li class="product-flag {$flag.type}">{$flag.label}</li>
                   {/foreach}
+                  {if $product.quantity_all_versions > 0}
+                    <li class="product-flag in-stock">{l s='In stock' d='Shop.Theme.Catalog'}</li>
+                  {/if}
                 </ul>
               {/block}


--- themes/classic/templates/catalog/_partials/miniatures/product.tpl.orig    2020-02-15 22:47:35.251935593 +0100
+++ themes/classic/templates/catalog/_partials/miniatures/product.tpl    2020-02-16 00:19:01.386914665 +0100
@@ -88,6 +88,9 @@
           {foreach from=$product.flags item=flag}
             <li class="product-flag {$flag.type}">{$flag.label}</li>
           {/foreach}
+          {if $product.quantity_all_versions > 0}
+             <li class="product-flag in-stock">{l s='In stock' d='Shop.Theme.Catalog'}</li>
+          {/if}
         </ul>
       {/block}

 

Share this post


Link to post
Share on other sites

  • 1 month later...

In adition i used this to use attributes as flags

(prestashop 1.7.4.x)

in _partials/miniatures/product.tpl

 

                    {block name='product_flags'}
                        <ul class="product-flags">
                            {foreach from=$product.flags item=flag}
                                <li class="product-flag {$flag.type}">{$flag.label}</li>
                                {/foreach}
                            {foreach from=$product.features item=feature}
                                
                                {if $feature.name|strstr:"+"}
                                <li class="product-flag flag-{$feature.name|replace:"+":""}">{$feature.value} {$feature.name|replace:"+":""}</li>
                                    {/if}
                              {/foreach}
                        </ul>
                    {/block}

Then i just had to add a "+" to the name of my attributes to use it as a flag

Share this post


Link to post
Share on other sites

  • 2 months later...

Hi,

I like this idea but just not sure where to put the code: - Can anyone help?

{**
 * 2007-2016 PrestaShop
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Open Software License (OSL 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/osl-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-2016 PrestaShop SA
 * @license   http://opensource.org/licenses/osl-3.0.php Open Software License (OSL 3.0)
 * International Registered Trademark & Property of PrestaShop SA
 *}
<article class="product-miniature js-product-miniature" data-id-product="{$product.id_product}" data-id-product-attribute="{$product.id_product_attribute}" {if Context::getContext()->controller->php_self !== 'product'}itemscope itemtype="http://schema.org/Product"{/if}>
  <div class="thumbnail-container">
    {block name='product_thumbnail'}
      <a href="{$product.url}" {if Context::getContext()->controller->php_self !== 'product'}itemprop="url"{/if} class="thumbnail product-thumbnail">
        <img
          src = "{$product.cover.bySize.home_default.url}"
          alt = "{$product.cover.legend}"
          data-full-size-image-url = "{$product.cover.large.url}"
          {if Context::getContext()->controller->php_self !== 'product'}
          itemprop="image"
          {/if}
        >
      </a>
    {/block}

    <div class="product-description">
      {block name='product_name'}
        <span class="h3 product-title" {if Context::getContext()->controller->php_self !== 'product'}itemprop="name"{/if}><a href="{$product.url}">{$product.name|truncate:30:'...'}</a></span>
          <span class="hidden-sku" {if Context::getContext()->controller->php_self !== 'product'} itemprop="sku" {/if}>{$product.reference}</span>
          <div {if Context::getContext()->controller->php_self !== 'product'}itemprop="description"{/if} class="product-description-list">{$product.description_short|truncate:200:'...' nofilter}</div>
      {/block}

      {block name='product_price_and_shipping'}
        {if $product.show_price}
          <div class="product-price-and-shipping" {if Context::getContext()->controller->php_self !== 'product'}itemprop="offers" itemscope itemtype="https://schema.org/Offer"{/if}>
            {if $product.has_discount}
              {hook h='displayProductPriceBlock' product=$product type="old_price"}

              <span class="regular-price">{$product.regular_price}</span>
              {if $product.discount_type === 'percentage'}
                <span class="discount-percentage">{$product.discount_percentage}</span>
              {/if}
            {/if}

            {hook h='displayProductPriceBlock' product=$product type="before_price"}

            <span  class="price">{$product.price}</span>

              {if Context::getContext()->controller->php_self !== 'product'}
                  <meta itemprop="price" content="{preg_replace("/[^0-9\.\-]/","",$product.price)}" />
                  <meta itemprop="priceCurrency" content="{Context::getContext()->currency->iso_code}" />

                  {if $product.availability == 'available' || $product.availability == 'last_remaining_items'}
                      <link itemprop="availability" href="https://schema.org/InStock"/>
                  {else}
                      <link itemprop="availability" href="https://schema.org/OutOfStock"/>
                  {/if}
              {/if}

            {hook h='displayProductPriceBlock' product=$product type='unit_price'}

            {hook h='displayProductPriceBlock' product=$product type='weight'}
          </div>
        {/if}
      {/block}
    </div>
    {block name='product_flags'}
      <ul class="product-flags">
        {foreach from=$product.flags item=flag}
            <li class="{$flag.type}">{$flag.label}</li>
        {/foreach}
      </ul>
    {/block}
    <div class="highlighted-informations{if !$product.main_variants} no-variants{/if} hidden-sm-down">
      <span

        class="quick-view"
        data-link-action="quickview"
      > <i class="material-icons search">search</i> </span>
        <span class="h3 product-title product-title-hidden"><a href="{$product.url}">{$product.name|truncate:30:'...'}</a></span>
        <div class="product-add-to-cart">
            <form action="{Context::getContext()->link->getPageLink('cart',true)}" method="post" class="add-to-cart-or-refresh">
                <input type="hidden" name="token" value="{Tools::getToken(false)}">
                <input type="hidden" name="id_product" value="{$product.id}" class="product_page_product_id">
                <input type="hidden" name="id_customization" value="0" class="product_customization_id">
                <button class="btn btn-primary add-to-cart " data-button-action="add-to-cart" type="submit" {if $product.availability == 'available' || $product.availability == 'last_remaining_items'}{else}disabled{/if} >
                    <span class="icon-add-to-cart"></span>
                    {l s='Add to cart' mod='featuredproducts'}
                </button>
            </form>
        </div>
    </div>


    <div style="clear: both"></div>
  </div>
</article>

Share this post


Link to post
Share on other sites

  • 2 months later...
On 6/29/2018 at 12:45 PM, Henri said:

In your themefolder/templates/catalog/_partials/miniatures/product.tpm just before the the "thumbnail-container" div closes

 

{block name='product_miniature_item'}
        {if $product.quantity > 0}
            <span class="availability-list availability-list-in-stock">In Stock</span>

       {else}

            <span class="availability-list availability-list-out-of-stock">Out of Stock</span>
        {/if}
 {/block}

 

And in themefolder/assests/css/custom.css file (for example) something like

 

.availability-list{

padding: 4px;

color:white;

position: absolute;

right:0;

bottom:0;

}

.availability-list-in-stock{

background-color: green;

}

.availability-list-out-of-stock{

background-color red;

}

.thumbnail-container{

position: relative

}

That last one was just so that the text stays in the thumbnail, it may not be needed depending on your theme.

Keep in mind that i did not test this code but it should about work. 

 

AMAZING! Thanks a lot, I could make it work, and it looks great. I modified it a little bit, since I just wanted to show the label when there is no stock.

 

sinStock.png

Share this post


Link to post
Share on other sites

  • 1 month later...

I put my own code on a Prestashop 1.7.5.2 but the quantity displayed is problematic. It takes into account the quantity of the products in my cart.

<div class="block-availabilty availability col-xs-12 col-sm-1">
            {block name='product_availability'}
                {if $product.show_availability && $product.availability_message}
                  {if $product.availability == 'available' && $product.quantity > 0}
                        <span class="info-available" title="Disponible">D</span> - 
            {$product.quantity_all_versions|@var_dump}
                  {elseif isset($product.id_supplier) && $product.id_supplier == 2}
                        <span class="info-ntes" title="Disponible sur commande">C</span> - 
            {$product.quantity_all_versions|@var_dump}
                  {else}
                       <span class="info-unavailable" title="Temporairement indisponible">I</span> - 
            {$product.quantity_all_versions|@var_dump}
                  {/if}
                {/if}
            {/block}
          </div>

For example if product X has a quantity of 14 and I have 3 product X in my cart, the $product.quantity_all_versions on the product list and page is going to be 11...

Why does the quantity takes the product in my cart ?

When I'm logged with another person that doesn't have the X product in the cart, the quantity is right, which is good.

Edited by pranab13 (see edit history)

Share this post


Link to post
Share on other sites

  • 1 year later...
On 6/29/2018 at 6:45 PM, Henri said:

In your themefolder/templates/catalog/_partials/miniatures/product.tpm just before the the "thumbnail-container" div closes

 

{block name='product_miniature_item'}
        {if $product.quantity > 0}
            <span class="availability-list availability-list-in-stock">In Stock</span>

       {else}

            <span class="availability-list availability-list-out-of-stock">Out of Stock</span>
        {/if}
 {/block}

 

And in themefolder/assests/css/custom.css file (for example) something like

 

.availability-list{

padding: 4px;

color:white;

position: absolute;

right:0;

bottom:0;

}

.availability-list-in-stock{

background-color: green;

}

.availability-list-out-of-stock{

background-color red;

}

.thumbnail-container{

position: relative

}

That last one was just so that the text stays in the thumbnail, it may not be needed depending on your theme.

Keep in mind that i did not test this code but it should about work. 

 

The code worked fine but i need to apply it only if the "deny order" is selected 

thank you 

Share this post


Link to post
Share on other sites

  • 2 weeks later...

Hi, 

I am just curious can anyone tell me where the $product.availability and $product.availability_message variables are generated and assigned?

 

Thanks!

 

Share this post


Link to post
Share on other sites

  • 7 months later...
On 2/11/2020 at 7:29 PM, PAVON said:

Hi, I modified the code a bit and it just didn't work

I want 3 options
no stock and cannot be purchased - NOT AVAILABLE -
no stock and if you can buy - AVAILABLE IN 72 HOURS -
if there is stock - AVAILABLE -
What am i doing wrong?

 

{block name='product_miniature_item'}
        {if $product.quantity > 0}
            <span class="availability-list availability-list-in-stock">Disponible</span>             
            {else}
            {if $stock_available.out_of_stock=1}
                <span class="availability-list availability-list-encargo">Disponible en 72 horas</span>
            {else}
                <span class="availability-list availability-list-out-of-stock">No disponible</span>
            {/if}    
        {/if}
       {/block}

 

Gracias

Santi

 

 

Hi, did you find any solution for your issue? I have the same...

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

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

Create an account

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

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More