Page 1 of 3
Show "Out of stock" message on product listing pages
Posted: Wed Jul 07, 2021 9:02 am
by 14Steve14
Does anyone know of a way of adding an "Out of Stock" message/banner across an out of stock product on the product listing pages, not the actual product page.
I saw this on another non Phoenix site and thought it may be good to show a product that is out of stock, just so customers can see that the item should be stocked. Currently on my site the image can be shown when at zero stock but its not until the customers actually clicks on the product that they see it is out of stock.
Please see image for better explanation
out-of-stock.png
Re: Show "Out of stock" message on product listing pages
Posted: Wed Jul 07, 2021 9:12 am
by raiwa
Re: Show "Out of stock" message on product listing pages
Posted: Wed Jul 07, 2021 9:58 am
by 14Steve14
Thanks for that. It may work, and may also replace other older code that I have already installed on the product info page that Gary wrote ages ago.
Re: Show "Out of stock" message on product listing pages
Posted: Wed Jul 07, 2021 7:07 pm
by lecarlb
@14Steve14 here's how it look on one of my Phoenix sites. I thought it was better because it was nonintrusive.
Re: Show "Out of stock" message on product listing pages
Posted: Thu Jul 08, 2021 11:27 am
by Nigel
I buy online from the wholesale arm of Heineken.
They put a thin red border around the item box (card) and disable the add to basket + / - options too.
It works well with all other info options about the product still available.
Re: Show "Out of stock" message on product listing pages
Posted: Thu Jul 08, 2021 1:20 pm
by burt
Somewhat similar would be the Supporters Code "s01e10 - Sale Sticker".
What that one does is put up a little "sticker" on product listings when the product is on a special offer.
You could rework that to look for quantity at hand and place a "sticker" or banner ...
Not super straightforward, but definitely doable.
Re: Show "Out of stock" message on product listing pages
Posted: Fri Jul 09, 2021 11:46 am
by 14Steve14
burt wrote: ↑Thu Jul 08, 2021 1:20 pm
Somewhat similar would be the Supporters Code "s01e10 - Sale Sticker".
What that one does is put up a little "sticker" on product listings when the product is on a special offer.
You could rework that to look for quantity at hand and place a "sticker" or banner ...
Not super straightforward, but definitely doable.
Welcome back
@burt Gary. Glad to see you here again, even if not full time.
I did look at that and see that it is basically controlled by a few lines of code about the specials, but being a code idiot I have no idea where to start on how to select the out of stock items.
I may have to buy the mod recommended by Rainer and see if that can be changed. Cheap enough if its not what I want completely, but may do some of it.
Re: Show "Out of stock" message on product listing pages
Posted: Fri Jul 09, 2021 11:47 am
by 14Steve14
14Steve14 wrote: ↑Fri Jul 09, 2021 11:46 am
burt wrote: ↑Thu Jul 08, 2021 1:20 pm
Somewhat similar would be the Supporters Code "s01e10 - Sale Sticker".
What that one does is put up a little "sticker" on product listings when the product is on a special offer.
You could rework that to look for quantity at hand and place a "sticker" or banner ...
Not super straightforward, but definitely doable.
Welcome back @burt Gary. Glad to see you here again, even if not full time. I hope everything is as good as it can be.
I did look at that and see that it is basically controlled by a few lines of code about the specials, but being a code idiot I have no idea where to start on how to select the out of stock items.
I may have to buy the mod recommended by Rainer and see if that can be changed. Cheap enough if its not what I want completely, but may do some of it.
Re: Show "Out of stock" message on product listing pages
Posted: Sat Jul 10, 2021 12:37 pm
by burt
It would be something like (changing L26 in the file), to (note, untested!):
Code: Select all
<script>$('.btn-buy').each(function() { var quantity = $(this).data('in-stock'); if (quantity < 1) {
This is targetting every "buy" button, looking at it's quantity and determining if quantity is fewer than 1, if yes, show the sticker. Obviously change the sticker appropriately in the language file.
Rainers solution likely does more, so it would be worth checking that out as the "sticker" solution is just cosmetic and requires user to have javascript turned on...
Re: Show "Out of stock" message on product listing pages
Posted: Sat Jul 10, 2021 11:20 pm
by shopify
Sold Out.jpg
I've done this using if ($listing['in_stock'] == 0 {
//Show add to cart button
} else {
//Show sold out button
}
But I like the look of that
@lecarlb sold out button. I wonder how he did that button.