Jump to content
abe666

Display stock availability in product listing for Prestashop 1.7.3

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

hello
Why partially solved?
 

if you will use {else} with <span>out of stock</span> it should do the job. Or i missed something?

Share this post


Link to post
Share on other sites

 

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

Share this post


Link to post
Share on other sites
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

I also need this, but I have no idea whre to put that code or what is needed beforehand. Is there a module, even if paid, for that?

Thank you

Share this post


Link to post
Share on other sites

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 3

Share this post


Link to post
Share on other sites
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
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

What about product with versions?
This solution works only when default version has count > 0 or product has no versions.

Ok, i checked and found this:

$product['quantity_all_versions']

 

Edited by almakot (see edit history)

Share this post


Link to post
Share on other sites

Hi i want to do this but with every size like that:

Captffure.PNG.0f4aa9324ddd4d49c1bf0f4d67a0f877.PNG

Do you have any idea ?

Share this post


Link to post
Share on other sites

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

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
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
Posted (edited)

This work for products without combinations.

To check the total of all combinations, the variable is $product.quantity_all_versions

Edited by LuigiD (see edit history)

Share this post


Link to post
Share on other sites

Can you put on a third option?
Items not available, but that can be sold, that indicates "TO ORDER"

Share this post


Link to post
Share on other sites

This works great on classic theme for 1.7.6.2, thank you!

I would like to hide this info from visitors, and only display it to logged-in customers. What should I add to this code ?

Share this post


Link to post
Share on other sites

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

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

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

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

×
×
  • Create New...

Important Information

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