How to show x-left in configurable product in Magento2

Recently our developer has made an extension on how to show x-left in a configurable product in Magento 2. The script shows the number of variant according to specific length and size. Actually, that script is pretty useful for everyone so we decided to share the script on our blog.

Load the stock_threshold_qty and product qty

$objectManager = \Magento\Framework\App\ObjectManager::getInstance( );
$StockState = $objectManager->get('\Magento\CatalogInventory\Api\StockStateInte rface');
$qtyPro = $StockState->getStockQty($_product->getId(), $_product->getStore()->getWebsiteId());
$conf = $objectManager->get('Magento\Framework\App\Config\ScopeConfigInte rface')->getValue('cataloginventory/options/stock_threshold_qty', \Magento\Store\Model\ScopeInterface::SCOPE_STORE);

get current product
$product = $objectManager->get('Magento\Framework\Registry')->registry('current_product');
$mTo = $product->getResource()->getAttribute('mto')->getFrontend()->getValue($product);
//get current product
$productTypeInstance = $product->getTypeInstance();
$configId = $product->getTypeId();

//Main configurable product ID
//echo $product->getName(); //Main Configurable Name

Check if product type is configurable and has option
<?php if ($configId == 'configurable') { ?>
<?php
$usedProducts = $productTypeInstance->getUsedProducts($product);
foreach ($usedProducts as $child) {
$sId = $child->getSize(); //Child Product Sku
$skU = $child->getSku(); //Child Product Sku
$sId_Length = $child->getLength(); //Child Product Sku
$qtyProd = $StockState->getStockQty($child->getId(), $child->getStore()->getWebsiteId());
$siZe = $child->getResource()->getAttribute('size')->getFrontend()->getValue($child);
if($siZe)
{
//echo "size h";
//echo "<br>";
}
$lenGth = $child->getResource()->getAttribute('length')->getFrontend()->getValue($child);
if($lenGth !="No")
{
//echo "length h";
//echo "<br>";
}
?>
<?php if ($qtyProd < $conf && $qtyProd > 0) { ?>
<div style="margin-top:-21px;" id="remaining_<?php echo $sId; ?>_<?php echo $sId_Length;?>" style="visibility:hidden;" class="availability only" title="Only <?php echo $qtyPro; ?> left">
Only <span style="line-height: 20px;" class="counter-label"><?php echo $qtyProd; ?></span> left in <?php echo $skU; ?>
</div>
<?php //echo "<br>"; ?>
<?php } } } ?>

Place the small js script end of the file -
<script>
require(['jquery'],
function($) {
setTimeout(function(){
var pri_id = 0;
$(".length .swatch-option").on("click", function(){
var se = $('.swatch-attribute.size').attr('option-selected');
if(se>0){
var r = $(this).attr('option-id');
$('#remaining_'+se+'_'+r).css("visibility","visibl e");
var hidden_text = $('#remaining_id').val();
$('#'+hidden_text).css("visibility","hidden");
$('#remaining_id').val('remaining_'+se+'_'+r);
}

});
$(".size .swatch-option").on("click", function(){
var se = $('.swatch-attribute.length').attr('option-selected');
if(se===undefined){
var r = $(this).attr('option-id');
$('#remaining_'+r+'_').css("visibility","visible") ;
var hidden_text = $('#remaining_id').val();
$('#'+hidden_text).css("visibility","hidden");
$('#remaining_id').val('remaining_'+r+'_');
}else{
var r = $(this).attr('option-id');
$('#remaining_'+r+'_'+se).css("visibility","visibl e");
var hidden_text = $('#remaining_id').val();
$('#'+hidden_text).css("visibility","hidden");
$('#remaining_id').val('remaining_'+r+'_'+se);
}
});
}, 2000);

});
</script>

Hope you like and find this small solution a useful one. Ecomsolver is a company promoted by a group of highly experienced professionals. Specializes in providing top-notch web solutions through innovation and use of latest technology. Contact us now for more queries related to web.