Jump to content

HOW TO? - Traffic Lights for Stock Availability

anth.payne

By anth.payne
in General topics

 Share

Recommended Posts

anth.payne Newbie

anth.payne

Posted
Posted

I am currently attempting to look into the possibility of having a 'Traffic Light' type system for stock levels. I don't think it is ideal displaying QTY of stock available, nor is it ideal just having in stock/out of stock message.

I think it would be a good idea to have something along the lines of:

Out of Stock = Red
Less then 10 in stock = Amber
More than 10 in stock = Green

Whether this would be a separate traffic light type image or whether the background colour of 'Add to Cart' button changes...

I was hoping someone may beable to point me in the right direction of making these sorts of edits, or whether someone has achieved this already?

PLEASE HELP!
------------------------------------------------------------

SOLVED

As in my posts below, I have now achieved this. To get this working in the Product details page, Product list and Featured products page on the homepage, three files need changing:

/themes/prestashop/product.tpl
/themes/prestashop/product-list.tpl
/modules/homefeatured/homefeatured.tpl

I have attached the 3 files in a zip, along with a green, amber and red traffic light images if you wish to use, or feel free to create your own.

You will need to edit the location of the images in the attached files. Open them, and search amber.png (or green, or red).

It is essential that you have 'Display available quantities on product page' enabled within Preferences >> Products for this to work.

ENJOY...

Traffic-Lights.zip

  • Like 2
Link to comment
Share on other sites
CYTechnologies Newbie

CYTechnologies

Posted
Posted

Hey auth.payne,


This would be quite easy to accomplish, open your product view template and do some quick if else statements.

<?php
if($quantity < 10)
{
?>
Yellow light
<?php
}
else if($quantity == 0)
{
?>
Red - out of stock
<?php
}
else
{
<?php
Green - all is good.
?>
<?php
}
?>



This should give you a direction at least :)

Link to comment
Share on other sites
CYTechnologies Newbie

CYTechnologies

Posted
Posted

I had a chance to look at the products page finally haha


do a search for "number of item in stock"

and you will see the below code:


quantity == 0)} style="display:none;"{/if}>
{$product->quantity|intval}
quantity > 1} style="display:none;"{/if} id="quantityAvailableTxt">{l s='item in stock'}
quantity < 2} style="display:none;"{/if} id="quantityAvailableTxtMultiple">{l s='items in stock'}



PS is already doing the quantity checks, you just have to put in your images for green, yellow, or red in comparison to the above conditions.

So for example:

{if $product->quantity <= 0} {/if}
{if $product->quantity >= 1 && $product->quantity <=5} {/if}
{if $product->quantity >=6} {/if}



Hope that helps point everyone in the right direction :-)

Link to comment
Share on other sites
  • 2 weeks later...
anth.payne Newbie

anth.payne

Posted
  • Author
Posted

After some playing around with the PHP, think i've come up with a solution...

The attached product.tpl file will show "Availability: *traffic-lights.png*" under the price

If you replace the product.tpl file with the attached file, and create a couple of images (not forgetting to edit the image locations in the file) (NB - Look in the 'Availability' and 'Number of Item in Stock' sections)

It is important that within Preferences > Products, you must make the following setting to get it to function correctly:

Allow out of stock ordering: No
Display available quantities on product page: Yes

#Unfortunately I am now struggling with the Product-List.tpl file, i've edited the code, so the traffic light appears below the View button (as opposed to instock/out of stock appearing to the left of the price). Problem being i cant get the right traffic light to appear, its either red, or green! (green when it should be amber).

13523_70N5rLFxmzE6mVpVpB7K_t

Link to comment
Share on other sites
anth.payne Newbie

anth.payne

Posted
  • Author
Posted

Which files have you downloaded? I was having similar issue initially.

Make sure you are using the files in the Original Post.

Also, ensure that 'Allow Out of Stock Ordering' is disabled in Preferences > Products, this seems to break the traffic lights when stock is 0.

Link to comment
Share on other sites
Masternet Newbie

Masternet

Posted
Posted
Which files have you downloaded? I was having similar issue initially.

Make sure you are using the files in the Original Post.

Also, ensure that 'Allow Out of Stock Ordering' is disabled in Preferences > Products, this seems to break the traffic lights when stock is 0.


I have downloaded the files you attached here

I have disabled the stock ordering and seems works fine when stock is 0, but when stock is more than 6 still having problems.

2ecaf37955.png

4c15fabc9c.png

794c7c7621.png

4d41fe4355.png

d450383208.png

76697b8eda.png
Link to comment
Share on other sites
anth.payne Newbie

anth.payne

Posted
  • Author
Posted

Took a brief look, it looks like this may be because the combination quantity overrides the default product quantity.

I am assuming the number displayed is the QTY available for that given combination selection?

If you want to take a look at the `// Combinations` section i think the issue is here.

If not it'll be a few days before i can troubleshoot this behaviour.

Link to comment
Share on other sites
  • 5 months later...
ihackpro Newbie

ihackpro

Posted
Posted

Thanks for the module!
Is there any way to insert a similar behaviour but adding a image saying "under order" or "available in 1 week"?
The shop I am configuring doesn't have stock so I have "allow to order without stock", and want to insert an image to let the client see that have to wait a few days.
Thanks in advance

Link to comment
Share on other sites
anth.payne Newbie

anth.payne

Posted
  • Author
Posted

I beleive there is a problem when a product has combinations resulting in images not appearing - unfortunately I have not had the time to look at this.

With regards to the 'Available in x days' - this is a feature already available, but not using an image - to use an image you would need have the same image for ALL out of stock products. Otherwise for each individual product you would need to edit the 'override the default out of stock message'.

Link to comment
Share on other sites
  • 3 months later...
LukeH Newbie

LukeH

Posted
Posted
I beleive there is a problem when a product has combinations resulting in images not appearing - unfortunately I have not had the time to look at this.

With regards to the 'Available in x days' - this is a feature already available, but not using an image - to use an image you would need have the same image for ALL out of stock products. Otherwise for each individual product you would need to edit the 'override the default out of stock message'.


This is a great mod for PrestaShop although I have found that I have a problem with items that have combination's not showing the images and still displaying stock quantities.

Any idea which file creates combo's? I'll take a look at it.

Luke.
Link to comment
Share on other sites
anth.payne Newbie

anth.payne

Posted
  • Author
Posted

Firstly I'd just like to apologise for my lack of input on this - things are a bit hectic currently.

If you take a look in product.tpl

There is a section //Combinations which references the combination quantity. I'm not 100% certain this is what the cause is but is certainly suspicious.

You can reference the sections <!-- availability --> and <!-- number of item in stock --> in product.tpl for the logic i used for displaying the traffic lights.

Link to comment
Share on other sites
  • 6 months later...
nikmagnus Newbie

nikmagnus

Posted
Posted

Hi there

I have a (in my humble opinion) a better way to do this. Im using PS1.4.0.15
Instead of having a traffic light, I have a red sign for out of stock an amber sign for low on stock or a green light for lots of stock. This seems like a much more intuitive way. Next to it says the amount of stock left.

See the included image.

Simply modify the "number of items in stock" section of the product.tpl in your theme.
Here is what I've done:

            <!-- number of item in stock -->


available_for_order OR $PS_CATALOG_MODE} style="display: none;"{/if}>
               {if $product->quantity > 5}{l s='Plenty in Stock'}
               {elseif $product->quantity > 0}{l s='Only '}{$product->quantity|intval}{l s=' left in stock'}
               {elseif $product->quantity < 1}{l s='None left in stock'}
               {/if}



Also included are the icons needed to drive this: put inside yourtheme/img/icon folder.

Hope you find this useful!
Cheers, Nik

39907_lrxzpL0wiBEI4gBQjukr_t

stop-go-warning.zip

Link to comment
Share on other sites
  • 6 months later...
  • 1 year later...
CSilva Newbie

CSilva

Posted
Posted

Hi there

 

I have a (in my humble opinion) a better way to do this. Im using PS1.4.0.15

Instead of having a traffic light, I have a red sign for out of stock an amber sign for low on stock or a green light for lots of stock. This seems like a much more intuitive way. Next to it says the amount of stock left.

 

See the included image.

 

Simply modify the "number of items in stock" section of the product.tpl in your theme.

Here is what I've done:

			<!-- number of item in stock -->


available_for_order OR $PS_CATALOG_MODE} style="display: none;"{/if}>
			{if $product->quantity > 5}[img={$img_dir}icon/go.png]{l s='Plenty in Stock'}
			{elseif $product->quantity > 0}[img={$img_dir}icon/warning.png]{l s='Only '}{$product->quantity|intval}{l s=' left in stock'}
			{elseif $product->quantity < 1}[img={$img_dir}icon/stop.png]{l s='None left in stock'}
			{/if}

 

Also included are the icons needed to drive this: put inside yourtheme/img/icon folder.

 

Hope you find this useful!

Cheers, Nik

 

Hi there,

 

could this work to create something similar (like in the attached picture), in Prestashop 1.5?

 

 

 

thanks,

post-524580-0-19863700-1365780579_thumb.jpg

Link to comment
Share on other sites
  • 2 years later...
  • 11 months later...
  • 3 months later...
Guest
This topic is now closed to further replies.
 Share
Go to topic listing
×
×
  • Create New...