A configurable product seems like a single product with drop-down lists of options for each variation. Each option is a separate simple product with a unique SKU.
The admin can track the inventory of each product variation for configurable products. However, the default Magento 2 does not bifurcate the products display in frontend based on its availability.
For configurable products, what if a customer adds the option that is not in stock and he is taken to the cart only to find out that he can’t make the purchase now! Isn’t it the example of bad shopping experience!
The solution is to show Magento 2 Out of Stock associated products in configurable products dropdown. When associated products of the configurable products are shown under the separate dropdown along with their stock status, it makes it easy for customers to decide which products to add in cart and for which product, to subscribe for the alert notification when back in stock. To enable the notification facility, you can try the Magento 2 Out of Stock Notification extension!
To display the separate dropdown for out of stock associated products in configurable products, follow this method:
Method to Show Magento 2 Out of Stock Associated Products in Configurable Products Dropdown:
Step 1: Create registration.php file in app/code[Vendor]/[Namespace]/
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'[Vendor]_[Namespace]',
__DIR__
);
Step 2: Create module.xml file in app/code/[Vendor]/[Namespace]/etc
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="[Vendor]_[Namespace]" setup_version="1.0.0"/>
</config>
Step 3: Create catalog_product_view_type_configurable.xml file in app/code/[Vendor]/[Namespace]/view/frontend/layout
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="product.info.options.wrapper">
<block class="Magento\ConfigurableProduct\Block\Product\View\Type\Configurable" name="child-drop-down" template="[Vendor]_[Namespace]::product/child-drop-down.phtml" before="-"/>
</referenceBlock>
</body>
</page>
Step 4: Create child-drop-down.phtml file in app/code/[Vendor]/[Namespace]/view/frontend/templates/product
<?php $registry = $this->_helperFactory->get('Magento\Framework\Registry'); ?>
<?php $_productId = $registry->registry('product')->getId() ?>
<?php $helper = $this->helper('[Vendor]\[Namespace]\Helper\Data'); ?>
<?php $childProducts = $helper->getChildProducts($_productId);
if ( !empty($childProducts) ):?>
<div class="out-of-stock-child-products">
<div class="col-sm-12">
<div class="col-sm-12">
<label class="label" for="product_id" style="font-weight: bold"><span><?php echo __('Please select a product') ?></span></label>
<div class="control">
<select name="product_id" id="product_id" title="<?php echo __('Please select a product') ?>"
class="input-text">
<option value=""><?php echo __('Please select a product.') ?></option>
<?php foreach ($childProducts as $key => $value): ?>
<option value="<?php echo $key ?>"><?php echo $value ?></option>
<?php endforeach; ?>
</select>
<div class="product-error"
style="color: red; display: none"><?php echo __('Please select a product.') ?></div>
</div>
</div>
</div>
</div>
Step 5: Create Data.php file in app/code/[Vendor]/[Namespace]/Helper
namespace [Vendor]\[Namespace]\Helper;
use Magento\CatalogInventory\Model\Stock\Item;
use Magento\Catalog\Model\ProductFactory;
class Data extends AbstractHelper
{
public function __construct(Context $context, ProductFactory $productFactory, Item $stockItem)
{
parent::__construct($context);
$this->productFactory = $productFactory;
$this->stockItem = $stockItem;
}
public function getChildProducts($_productId)
{
$outOfStockProducts = array();
try {
$configProduct = $this->productFactory->create()->load($_productId);
$childProducts = $configProduct->getTypeInstance()->getUsedProducts($configProduct);
foreach ($childProducts as $childProduct) {
$stockItem = $this->getStockItem($childProduct->getID());
if ( !$stockItem->getQty() ) {
$outOfStockProducts[$childProduct->getID()] = $childProduct->getName();
}
}
} catch (\Exception $e) {
return $e->getMassage();
}
return $outOfStockProducts;
}
public function getStockItem($productId)
{
$stockItem = $this->stockItem->load($productId, 'product_id');
return $stockItem;
}
}
The above code is compatible with Meetanshi’s Magento 2 Out of Stock Notification extension.
The result is displayed in the frontend:
Using this method, the customers can know the stock status of their desired configurable associated product and hence accordingly make the purchase or decide to wait!
Thank you.
