How to show x-left in configurable product in Magento2

In a modern world, an e-commerce platform Magento is well known for its flexibility and open-source ecosystem.  It is powerful enough to handle all types of businesses ranging from small-cap to large enterprises. To run a successful eCommerce store requires great efforts to be done by the store owner to maintain products and all. Many products sold online come in different sizes, colors, lengths. While displaying these products on the front end, it is important to make the options clear as well as variations in quantity left in stock.

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 variants according to specific length and size. Actually, that script is pretty useful for everyone so we decided to share the script on our blog.

A particular product is selected.

load the stock_threshold_qty and product qty

$objectManager = \Magento\Framework\App\ObjectManager::getInstance();

$StockState = $objectManager->get('\Magento\CatalogInventory\Api\StockStateInterface');

$qtyPro = $StockState->getStockQty($_product->getId(), $_product->getStore()->getWebsiteId());

$conf = $objectManager->get('Magento\Framework\App\Config\ScopeConfigInterface')->getValue('cataloginventory/options/stock_threshold_qty', \Magento\Store\Model\ScopeInterface::SCOPE_STORE);

Specific size and length of a configurable product is selected

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 an 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","visible");

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","visible");

var hidden_text = $('#remaining_id').val();

$('#'+hidden_text).css("visibility","hidden");

$('#remaining_id').val('remaining_'+r+'_'+se);

}

});

}, 2000);

});

</script>

The specific product of selected size and length has been added to the cart.

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 the use of the latest technology. Contact us now for more queries related to the web.