get stock of selected simple in magento

Question

I was wondering if it is possible to get the stock of the selected item ( i.e. in a dropdown) in a configurable product.

If you for example have a shirt, with multiple simples that represent sizes. When you select small, I want to get the stock of the small shirts. If you then change selection to medium, I would like to get the stock of the medium shirts.

Notice there is no page refreshing.

Answer 1

I've done something similar, I extended Mage_Catalog_Block_Product_View_Type_Configurable, specifically the getJsonConfig() method, as this provides the data for the dropdowns on a configurable product.

Something like this:

class Graphicalliance_Stockvalues_Block_Catalog_Product_View_Type_Configurable extends Mage_Catalog_Block_Product_View_Type_Configurable {

  public function getJsonConfig()
    {
        $config = parent::getJsonConfig();
        $config = Mage::helper('core')->jsonDecode($config);

        foreach ($config['attributes'] as $attid=>$attinfo) {
          foreach ($attinfo['options'] as $key=>$attoption) {
            // get stock value per product
            $stocks = array();
            foreach ($attoption['products'] as $prod) {
              $_product = Mage::getModel('catalog/product')->load($prod);
              $_qty = Mage::getModel('cataloginventory/stock_item')->loadByProduct($_product)->getQty();
              $stocks[$prod] = (int) $_qty;
            }
            $config['attributes'][$attid]['options'][$key]['stock'] = $stocks;
          }
        }

        return Mage::helper('core')->jsonEncode($config);
    }
}

That makes sure you get the stock value through to the frontend for each variation, so you don't have to refresh the page. You then need to modify the javascript handler to also update the stock display when a size/colour is selected.

In js/varien.configurable.js add a function to the Product prototpye object, something like this:

reloadStock: function(){
        for(var i=this.settings.length-1;i>=0;i--){
            var selected = this.settings[i].options[this.settings[i].selectedIndex];
            if(selected.config){
                var allowedProducts = selected.config.allowedProducts;
                if (allowedProducts.length==1 && selected.config.stock) {
                  var productStock = parseInt(selected.config.stock[allowedProducts[0]]);
                  if (productStock==0) {
                    $('product-stock').innerHTML = 'out of stock';
                  } else if (productStock<=1) {
                    $('product-stock').innerHTML = productStock + ' in stock';
                  } else {
                    $('product-stock').innerHTML = '';
                  }
                }
            }
        }
    },

Note you need an element with ID 'product-stock' where the stock display text is displayed.

You can then call this function where necessary, for example add it to the configureElement function in that same file, which if I remember correctly is run on page load:

this.reloadStock();

Look wherever reloadPrice() is being called and it should probably go just below it.

These code samples have been edited a bit to remove bits that aren't relevant to your question, so hopefully they are still syntactically correct.

Happy to help further, Hans