Stock Management by colours/ Displaying a picture with a colour...

[CSilva]

Hi,

 

i'm developing a online shop, but the products i'm selling are not easy to manage by quantities, so i thought in a better way to inform the clients about the stock, for example, using a picture with a colour, different colours mean different availabilities (yellow - low in stock, red- out of stock, blue- under order, red- out of order).

 

There's an attached picture that shows my idea.

 

My question is if there is a module that allows me to display a picture in each product, instead of the quantities, or if someone could help me developing a solution to display them.

 

 

I think this would be an excelent module!!!

 

 

Thanks,

[PascalVG]

You could add something like this to the file /themes/<your theme folder/product.tpl, maybe just below the

<div id="short_description_block">

...

</div>

 

<div id="short_description_block">
...
</div>       // closing tag of "short_description_block"
<div class="product_availability">          // add this block of code
   {if $product->quantity > 10}
       <img src="{$img_dir}green.png" alt="More than 10 products" width="28" height="28" />
       {l s='In stock' js=1}
   {elseif $product->quantity >= 1}
       <img src="{$img_dir}yellow.png" alt="Less than 10 products" width="28" height="28" />
       {l s='Low in stock' js=1}
   {elseif $product->quantity == 0}
       <img src="{$img_dir}red.png" alt="Out of stock" width="28" height="28" />
       {l s='Out of stock' js=1}
   {elseif $product->quantity == -1}
       <img src="{$img_dir}blue.png" alt="Under order" width="28" height="28" />
       {l s='Under order' js=1}
   {/if}
</div>

 

(This code expects that your round, coloured pictures are placed in the "/themes/<your theme folder>/img/" folder (red.png, blue.png, yellow.png and green.png))

 

I wasn't sure how PS defines/manages 'Under Order" status. (is there a variable for it?), so I just used the product->quantity, when set to -1. Please adjust if there is a better test for it.

 

Above code Is very basic of course. There may need to be more tests if the product is really for sale, or only to 'look at' (catalog mode), if back order is possible etc. etc. Maybe you can have a look in the product.tp file under the header

<--Availability -->

where they do some more tests. Just wanted to show you how to add the pictures and quantity test.

 

 

My 2 cents,

Pascal.

[CSilva]

Hi PascalVG,

 

thanks a lot for your solution! I'm going to test it, and then i'll tell if it worked fine!

 

 

best regards,

 

CSilva

[CSilva]

Hi PascalVG,

 

i've tested and it worked fine, except when you have a product with different attributes, like colors, for example, then the colour doesn't change, and i don't really know in what quantity is it based on.

 

Other question is how do i change the availability information on the category to the same as with the colors (In stock, out of stock, under order, low in stock). Is it on the productlist.tpl file?

 

 

thanks again,

 

regards

[PascalVG]

Hi CSilva,

 

Glad the basic idea works. Indeed, as I said above, I didn't make any detailed quantity checks, just a 'proof of concept'. In the file I mentioned above are many more checks they do, probably also for attribute specific countings etc.

 

As I mentioned before, check out the part below <!-- Availability --> Here the create the default in stock message, the amount of products in stock, and warning if only a few left. What you can try is to integrate/replacethe default messages with your dots in the following code parts.

 

 

<!-- availability -->

<p id="availability_statut"{if ($product->quantity <= 0 && !$product->available_later && $allow_oosp) OR ($product->quantity > 0 && !$product->available_now) OR !$product->available_for_order OR $PS_CATALOG_MODE} style="display: none;"{/if}>

<span id="availability_label">{l s='Availability:'}</span>

<span id="availability_value"{if $product->quantity <= 0} class="warning_inline"{/if}>

{if $product->quantity <= 0}{if $allow_oosp}{$product->available_later}{else}{l s='This product is no longer in stock'}{/if}{else}{$product->available_now}{/if}

</span>

</p>

 

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

{if ($display_qties == 1 && !$PS_CATALOG_MODE && $product->available_for_order)}

<p id="pQuantityAvailable"{if $product->quantity <= 0} style="display: none;"{/if}>

<span id="quantityAvailable">{$product->quantity|intval}</span>

<span {if $product->quantity > 1} style="display: none;"{/if} id="quantityAvailableTxt">{l s='item in stock'}</span>

<span {if $product->quantity == 1} style="display: none;"{/if} id="quantityAvailableTxtMultiple">{l s='items in stock'}</span>

</p>

{/if}

 

<!-- Out of stock hook -->

<p id="oosHook"{if $product->quantity > 0} style="display: none;"{/if}>

{$HOOK_PRODUCT_OOS}

</p>

 

<p class="warning_inline" id="last_quantities"{if ($product->quantity > $last_qties OR $product->quantity <= 0) OR $allow_oosp OR !$product->available_for_order OR $PS_CATALOG_MODE} style="display: none"{/if} >{l s='Warning: Last items in stock!'}</p>

</div>

 

You can either replace the red texts with, or just add after it, the image that belongs to it.

 

Give it a try!

 

Almost any text in PS you can translate in the localization->translations menu. In this case probably choose Front office translations and choose your theme and flag of the country you want to translate to. If just 'different English', choose the USA flag. Find the text your want to change and type a new text next to it.

 

Hope this helps,

Pascal

[CSilva]

thanks a lot Pascal!

 

I'm going to make some more tests and try to solve the question of the quantities for different attributes!

 

 

ragards,

 

CSilva

[PascalVG]

If you change the amounts of the different attribute-products, you see that the above code already changes accordingly.

(see this (temporary link) and click on the colours. see the amount changing...)

http://prestatestshop.buymethai.com/index.php?id_product=2&controller=product#/color-metal

[CSilva]

Yes you're right, but for example, for the metal, green and blue colors, it would be better if the colour turns into yellow (Low in stock)...

 

Thats what i would like to change!

Edited April 19, 2013 by CSilva (see edit history)

[PascalVG]

if you put instead of the "available now" the first two parts we created (green and yellow), thus including the code that says:

{if $product->quantity > 10}

and

 

{elseif $product->quantity >= 1}

 

then it will do these additional tests before it decides to put either in 'stock', or 'low in stock'

 

(So we add there the additional test if it is low in stock or not)

[CSilva]

Hi Pascal,

 

i'm not sure if i understood your last post. Do you mean to put the code to display the green and yellow colours on <!-- availability -->?

 

 

thanks,

[PascalVG]

Hi CSilva,

I will have a look today/tomorrow to see if I can give you some more detailed answer. I saw there are a few less obvious things going on in the code, probably the css 'arranges' things out of sight here.

 

I'll come back on this.

[CSilva]

Hi Pascal,

 

i just need that the stock (availability) information displayed on the products list of a category (or sub-category), coincides with the information of the availability on the product page!

 

If i can make this work, it will be perfect for me! ;-)

 

 

thanks,