Configurable.js Get stock value in dropdown options

[guillaumegb655]

Hello ! 

I need to get the stock value of a simple product in the dropdown selector from the configurable product page.

I found the _fillSelect method in 

module-configurable-product/view/frontend/web/js/configurable.js

I override it with 

app/code/Vendor/ConfigurableProduct/view/frontend/web/js/configurable-mixin.js

But I don't understand how to get the stock value and add it like this in the select :

<select>                   
         <option value="">Choose a size</option>
         <option data-stock="xxx">S</option>
         <option data-stock="xxx">M</option>
         <option data-stock="xxx">L</option>
</select>

Could you help me ? 

[theMageComp]

To get the stock value of a simple product in the dropdown selector from the configurable product page, you can follow the below steps:

1. Create a new mixin in your custom module. For example, app/code/Vendor/ConfigurableProduct/view/frontend/web/js/stock-mixin.js

2. In the stock-mixin.js, add the below code to override the _fillSelect method in the configurable.js:

define([
    'jquery',
    'mage/utils/wrapper'
], function ($, wrapper) {
    'use strict';

    return function (configurable) {

        return wrapper.wrap(configurable, function (originalFillSelect, element, attributeId, options, allowedProducts) {
            originalFillSelect(element, attributeId, options, allowedProducts);
            $.each(options, function (index, option) {
                var allowedProduct = allowedProducts[index],
                    stockQty = allowedProduct.stock_qty;

                if (option.hasOwnProperty('value') && option.value !== '') {
                    $(element).find('option[value="' + option.value + '"]').attr('data-stock', stockQty);
                }
            });
            return element;
        });
    };
});

In the requirejs-config.js file of your module, add the below code:

var config = {
    config: {
        mixins: {
            'Magento_ConfigurableProduct/js/configurable': {
                'Vendor_ConfigurableProduct/js/stock-mixin': true
            }
        }
    }
};

Now, in the configurable product template file, add the below code to display the stock value in the dropdown:

<select>                   
     <option value="">Choose a size</option>
     <?php foreach ($_children as $_child): ?>
          <option value="<?php echo $_child->getId() ?>" data-stock="<?php echo $_child->getExtensionAttributes()->getStockItem()->getQty(); ?>">
               <?php echo $_child->getAttributeText('size'); ?>
          </option>
     <?php endforeach; ?>
</select>

With the above code changes, you should be able to display the stock value of the simple product in the dropdown selector on the configurable product page.

See if this works for you.