0

I'm not good at Magento coding, so bear with me. I want to expose swatches for products with quantity 0 in the product list (changing the text with a ligther color with CSS for example)

example:

how i want the product list to look like

I'm using BSS Simple Details on Configurable Product module for dynamically swapping product details.

The way everything works right now is perfect, all I would like is for people to know stock status at a glance.

How would one go about this?

thanks

Improve this question

1 Answer 1

Reset to default
0

In your case, it will be possible to show the stock status for the configurable attribute option. Because your products have only one attribute. And its possible to grey out the not available options.

But if you have more than one configurable attribute (e.q. Product Short: Size and Color), this is not so simple. It's not possible to show the quote status in the attribute option, because the attribute option is not a product. You need a matrix table to show the stock status of configurable products in a glace. There are few modules for this use case. But i think, these extension will not solve your problem, because you want to show the stock status at a glance in the category page.

I think, you will not find a module for this use case. But as developer, i know, that its possible to solve this specific use case. But you wrote, that you are not good in coding. Maybe this is not an option for you. But if you like the challange, have a look at this file: vendor/magento/module-swatches/view/base/web/js/swatch-renderer.js Copy the file to app/design/frontend/{VendorName}/{themeName}/Magento_Swatches/web/js/swatch-renderer.js and have a look to the _UpdatePrice method or have a look to your module, you already use. maybe there is a way to add the required javascript code. Maybe there is a much easier solution for your case with a modul? Let me know!

Improve this answer
2
  • Hey, thanks for your extensive answer. The simple products are based on a single configurable attribute (power). I was thinking in the line of: Creating an 'out of stock SKU' class in CSS and adding it to the swatch conditionally, based on the quantity of the SKU (in this case 0). Where could I add this logic?
    – kray
    May 14, 2022 at 13:58
  • Welp, I found where the container class is being inserted ( _RenderSwatchOptions in swatch-renderer.js). ----------------- if (type === 0) { // Text html += '<div class="' + optionClass + ' text" ' + attr + '>' + (value ? value : label) + '</div>'; } ---------------- but getting the quantity for the simple product into a variable, so I can use it for a condition, is above my knowledge.
    – kray
    May 20, 2022 at 18:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.