Magento 2 如何在可配置产品上显示简单的产品库存？

Question

This is not a question but a possible solution it's an answer on how to show simple product stock on a configurable product

I was search for this solution and noticed that a lot of people have asked this similar question and most of the answers were vague or the solutions were for magento 1 but that was until I stumble across this [solution][1] which was not for my exact problem but it was doing what I want just not for stock but SKUs,so I made a few adjustments and came up with the solution below for stock

Answer 1

A drop-down list is the attribute used on the configurable product

Create a plugin

namespace Vendor\Module\Plugin;


class Configurable
{

    public function aftergetJsonConfig(
        \Magento\ConfigurableProduct\Block\Product\View\Type\Configurable $subject,
        $result
    ) {

        $jsonResult = json_decode($result, true);
        $jsonResult['stockqtys']=[];

        foreach ($subject->getAllowProducts() as $simpleProduct) {
            $jsonResult['stockqtys'][$simpleProduct->getId()] = $this->getProductStock($simpleProduct->getId());
        }

        $result = json_encode($jsonResult);

        return $result;
    }

   public function getProductStock($productId)
    {   
        $objectManager =  \Magento\Framework\App\ObjectManager::getInstance(); 
        $stockRegistry = $objectManager->get('\Magento\CatalogInventory\Api\StockRegistryInterface');
        return $stockRegistry->getStockItem($productId)->getQty();        
         
    }
}

Create etc\di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">

<type name="Magento\ConfigurableProduct\Block\Product\View\Type\Configurable">
        <plugin  disabled="false"  name="Vendor_Module_Plugin" sortOrder="10" type="Vendor\Module\Plugin\Configurable"/>
    </type>
    
</config>

view/frontend/web/js/stockswitch.js

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

    return function(targetModule){

        var reloadPrice = targetModule.prototype._reloadPrice;
        var reloadPriceWrapper = wrapper.wrap(reloadPrice, function(original){

            var result = original();
            var productStock = this.options.spConfig.stockqtys[this.simpleProduct];
            
            $('div.product-info-main .stock .value').html("");

            if(productStock != '') {
                $('div.product-info-main .stock .value').html(productStock);
            }   
            
            return result;
        });

        targetModule.prototype._reloadPrice = reloadPriceWrapper;
        return targetModule;
    };
});

view/frontend/requirejs-config.js

var config = {
    config: {
        mixins: {
            'Magento_ConfigurableProduct/js/configurable': {
                'Vendor_Module/js/stockswitch': true
            }
        }
    }
};

Override the default.phtml template and add the lines below where you want your stock to appear Vendor/Module/Magento_Catalog/templates/product/view/type/default.phtml

<div class="stock actual-qty"> <span class="value" > </span> </div> 

Please let me know on any improvements in the comments