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.
Write A Comment