Magento 2 – How to Access Configurable Product Stock Qty via JS

configurable-productmagento2

Someone knows how to get qty for each simple product of configurable product via javascript in product page?

It seems that spConfig retrieved with

#product_addtocart_form": {
    "configurable": {
        "spConfig": <?php /* @escapeNotVerified */ echo $block->getJsonConfig() ?>
    }
}

hasn't data about qty.

I have to retrieve it with custom code or do you have some hints on how to find qty information?

Best Answer

Thx to @Amit Bera for hints, here my answer.

Override \Magento\ConfigurableProduct\Model\ConfigurableAttributeData and extends getAttributeOptionsData() adding qty field:

/**
 * @var \\Magento\CatalogInventory\Api\StockStateInterface
 */
protected $_stockState;



/**
 *
 */
public function __construct(
    \Magento\CatalogInventory\Api\StockStateInterface $stockState
) {

    $this->_stockState = $stockState;

}



/**
 * @param Attribute $attribute
 * @param array $config
 * @return array
 */
protected function getAttributeOptionsData($attribute, $config) {

    $attributeOptionsData = [];
    foreach ($attribute->getOptions() as $attributeOption) {

        $optionId = $attributeOption['value_index'];

        $attributeOptionsData[] = [
            'id' => $optionId,
            'label' => $attributeOption['label'],
            'products' => isset($config[$attribute->getAttributeId()][$optionId])
                ? $config[$attribute->getAttributeId()][$optionId]
                : [],
            'qty' => isset($config[$attribute->getAttributeId()][$optionId][0])
                ? $this->_stockState->getStockQty($config[$attribute->getAttributeId()][$optionId][0])
                : '',
        ];
    }

    return $attributeOptionsData;

}

Now in \app\code\xxx\yyy\view\frontend\templates\product\view\type\options\configurable.phtml you could retrieve simple product qty with simple js:

var config = <?php /* @escapeNotVerified */ echo $block->getJsonConfig() ?>;
.....
// loop options config.attributes[attribute_id].options
// for each simple product to obtain:
// Object {id: "231", label: "M", products: ["2089"], qty: 2}

Simple Configurable Products

http://www.magentocommerce.com/magento-connect/simple-configurable-products.html

BCP - Better Configurable Products

http://www.magentocommerce.com/magento-connect/better-configurable-products.html

Magento – How to get stock quantity of child product from configurable product in Magento 1.9

       -----------Create controller-------------

         <?php
class Magento_Guys_IndexController extends Mage_Core_Controller_Front_Action
{
    public function indexAction()
    {
        echo "Thank you !";
    }
     public function genCartAction()
    {
        $id = $this->getRequest()->getParam('pid');
        $_product = Mage::getModel('catalog/product')->load($id);
        $buy = Mage::helper('checkout/cart')->getAddUrl($_product);
        echo $qty = (int) Mage::getModel('cataloginventory/stock_item')->loadByProduct($_product)->getQty();

        //echo $id;
        //echo $this->getRequest()->getParam('id');;
    }
}
?>

    ----------------Change Add to cart code-------------------

    <?php if ($_product->isAvailable()): ?>
              <b class="available_quanity" style="display: none">Available Quantity :</b> <span id="simplestock" class="simplestock">Please select a color to view the quantity</span>
            <?php endif; ?>
            </div>
            <?php if(!$_product->isGrouped()): ?>
            <div class="qty">
                <label for="qty"><?php echo $this->__('Qty:') ?></label>
                  <?php $i = 0; ?>
                  <select id="qty" class="input-text" name="qty" style="width:50px;">
                    <?php while($i<=(int) Mage::getModel('cataloginventory/stock_item')->loadByProduct($_product)->getQty()):?>
                      <option value="<?php echo $i; ?>"><?php echo $i++; ?></option>
                    <?php endwhile; ?>
                  </select>
            </div>
            <?php endif; ?>

    ----------------Add Ajax for get Quantity---------------

    <script>
    jQuery(document).ready(function() {
        jQuery(".product-options select[id^='attribute']").on('change', function() {
            var id = getSimpleProductId();
            var qty = "";
            jQuery('.available_quanity').show();
            jQuery("#fancybox-loading").show();
            jQuery.ajax({      
                type: "POST",
                data: 'pid=' + id,
                url:'https://www.thewirelesscircle.com/guys/index/genCart',
                success:function(response){ 
                    if (response) {
                        qty = response;
                        var x = document.getElementById("qty");
                        var i;
                        removeOptions(x);
                        for(i=1;i<=qty;i++) {
                            var option = document.createElement("option");
                            option.text = i;
                            option.value = i;
                            x.add(option);
                        }
                    }
                    jQuery("#fancybox-loading").hide();
                }
            });

        });
    });

    </script>

    ---------------Get Selected Option Id in Magento-------------------

    <script type="text/javascript">
        function removeOptions(selectbox)
        {
            var i;
            for(i = selectbox.options.length - 1 ; i >= 0 ; i--)
            {
                selectbox.remove(i);
            }
        }
        function getSimpleProductId() {
            var productCandidates = [];
            jQuery.each(spConfig.settings, function (selectIndex, select) {
                var attributeId = select.id.replace('attribute', '');
                var selectedValue = select.options[select.selectedIndex].value;

                jQuery.each(spConfig.config.attributes[attributeId].options, function(optionIndex, option) {

                    if (option.id == selectedValue) {
                        var optionProducts = option.products;

                        if (productCandidates.length == 0) {
                            productCandidates = optionProducts;
                        } else {
                            var productIntersection = [];
                            jQuery.each(optionProducts, function (productIndex, productId) {
                                if (productCandidates.indexOf(productId) > -1) {
                                    productIntersection.push(productId);
                                }
                            });
                            productCandidates = productIntersection;
                        }
                    }
                });
            });
            return (productCandidates.length == 1) ? productCandidates[0] : null;
        }
    </script>

Best Answer

Related Solutions

Retrieve Simple Product Price for Configurable Product

Simple Configurable Products

BCP - Better Configurable Products

Magento – How to get stock quantity of child product from configurable product in Magento 1.9

Related Topic