ecomsolver@gmail.com    Need Help? 0141-4029663

How to show x-left in configurable product in Magento 2

By September 25, 2018
How to show x-left in configurable product in Magento 2

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 type of businesses ranging from small cap to large enterprises. To run a successful ecommerce store it requires great efforts to be done by the store owner to maintain products and all. Many products sold online comes in different size, color, length. 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 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.

The particular product is selected.

<?php
$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

<?php

$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","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>

 

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

Surbhi

Author Surbhi

More posts by Surbhi

Join the discussion 18 Comments

  • soi keo says:

    I got what you intend, thanks for putting up. Woh I am lucky to find this website through google.

  • SURBHI says:

    Hey, Thank you for reaching us. I am glad you find it useful. If have any query then please write it below. We are here to provide you with top class web solutions.

  • SURBHI says:

    Thank you for reaching us and saving our site to your bookmarks.

  • build to print services says:

    Thank you for every oother informative web site. Where else could I get that kind of information written in such an ideal approach?
    I’ve a venture that I am simply now operating on, and I have
    been on the look out for such info.

  • Sida says:

    Excellent post. I was checking continuously this weblog and I
    am impressed! Extremely helpful info particularly the final section 🙂 I take
    care of such information a lot. I used to be looking for this certain information for a very long time.
    Thanks and best of luck.

    • SURBHI says:

      Hey, Thank you for reaching us. I am glad you find it useful. For any query related to this please ping us. We are here to provide you with top class web solutions.

  • sevenbites says:

    Your method of telling all in this article is actually Good, all can effortlessly know it, Thanks
    a lot.

  • julietagooch says:

    Good info. Lucky me to read this blog.

    • SURBHI says:

      Hey, Thank you for reading our blog. I am glad you find it useful. For any query related to this please ping us. We are here to provide you with top class web solutions.

  • 3d models says:

    I think the admin of this website is actually working hard
    in support of his web site, since here every material is quality based data.

  • Sheldon Quinton says:

    Simply wanna state that this is extremely helpful, Thanks for taking your time to write this.

  • 11bet says:

    We’re a group of volunteers and starting a brand new scheme in our community.
    Your website offered us with useful information to work on. You have done an impressive task and
    our whole community will likely be grateful to you.

  • kho hang si nguyen kien says:

    Fantastic website. Plenty of helpful info here. I am sending it to several buddies ans additionally
    sharing in delicious. And naturally, thank you.

  • sida.vn says:

    Excellent website. Lots of helpful info here. I am sending it to some buddies ans also sharing
    in delicious. And of course, thank you to your effort!

Leave a Reply