3

I need on configurable product page to show available inventory of simple products,while selecting options, like price will change on option change in same way.

Improve this question

3 Answers 3

Reset to default
4

Finally I found a way to show awailable QTY:

Override configurable.js:

vendor/magento/module-configurable-product/view/frontend/web/js/configurable.js

Add : 

jQuery('.myli').css('display','none');
 jQuery('#div'+config.allowedProducts).toggle();

In this function :

_getSimpleProductId:

and paste this code in your PHTML

 <?php 
    $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
    $product = $objectManager->get('Magento\Framework\Registry')->registry('current_product');//get current product
    $productTypeInstance = $product->getTypeInstance();
   if ($product->getTypeId() == \Magento\ConfigurableProduct\Model\Product\Type\Configurable::TYPE_CODE) {
    $usedProducts = $productTypeInstance->getUsedProducts($product);

    ?>
<ul><?php 
        foreach ($usedProducts  as $child) {?>
            <li class="myli" id="div<?php echo $child->getId()?>" style="display:none;list-style:none">
            <?php 
            $productStockObj = $objectManager->get('Magento\CatalogInventory\Api\StockRegistryInterface')->getStockItem($child->getId());
            echo "We have ".round($productStockObj->getData('qty'))." items in stock!";
            ?>
            </li>

 <?php    }   ?>

 </ul> <?php }else{
     $productStockObj = $objectManager->get('Magento\CatalogInventory\Api\StockRegistryInterface')->getStockItem($product->getId());
     echo "We have ".round($productStockObj->getData('qty'))." items in stock!";
     }?>
Improve this answer
5
  • Hi, can you please share the layout XML. I am implementing the same for one of my projects.
    – Kalyan Chakravarthi V
    Jul 2, 2018 at 14:06
  • No need to edit in layout.xml, Use above code in your phtml directly where you need to show
    – Ram Pratap Singh Gour
    Jul 3, 2018 at 5:24
  • Ok thanks, in our project swatches are there so doing changes in configurable.js is not working. Do you know where to change if swatches are there?
    – Kalyan Chakravarthi V
    Jul 3, 2018 at 5:27
  • Swatches should have their JS, Which will work on click on swatches, You have to check that JS and put above JS code there.
    – Ram Pratap Singh Gour
    Jul 3, 2018 at 5:30
  • Use this answer for configurable swatches - magento.stackexchange.com/questions/291072/…
    – Ranganathan
    Sep 27, 2019 at 9:39
0

The following solution will be changing StockStatus on the PDP when you selecting options(based on availability of the selected simple product):

app/code/VVin/ConfigurableStock/view/frontend/requirejs-config.js

var config = {
    config: {
        mixins: {
            'Magento_ConfigurableProduct/js/configurable': {
                'VVin_ConfigurableStock/js/configurable-mixin': true
            }
        }
    }
};

app/code/VVin/ConfigurableStock/view/frontend/web/js/configurable-mixin.js

define([
    'jquery',
    'underscore',
], function ($, _) {
    'use strict';

    return function (configurable) {
        $.widget('mage.configurable', $['mage']['configurable'], {
            /**
             * Returns Simple product Id
             *  depending on current selected option.
             *
             * @private
             * @param {HTMLElement} element
             * @returns {String|undefined}
             */
            _getSimpleProductId: function (element) {
                var allOptions = element.config.options,
                    value = element.value,
                    config;

                config = _.filter(allOptions, function (option) {
                    return option.id === value;
                });
                config = _.first(config);

                $('.option-stock').css('display', 'none');
                if (config && config.allowedProducts) {
                    $('#stock-' + config.allowedProducts).toggle();
                }

                return _.isEmpty(config) ?
                    undefined :
                    _.first(config.allowedProducts);

            },
        });
        return $['mage']['configurable'];
    };
});

app/code/VVin/ConfigurableStock/view/frontend/layout/catalog_product_view_type_configurable.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="product.info.configurable">
            <action method="setTemplate">
                <argument name="template" xsi:type="string">VVin_ConfigurableStock::configurable-available.phtml</argument>
            </action>
        </referenceBlock>
    </body>
</page>

app/code/VVin/ConfigurableStock/view/frontend/templates/configurable-available.phtml

<?php $product = $block->getProduct() ?>

<?php if ($block->displayProductStockStatus()) : ?>
    <ul>
        <?php foreach ($product->getTypeInstance()->getUsedProducts($product) as $child): ?>
            <li class="option-stock" id="stock-<?php echo $child->getId() ?>" style="display:none;list-style:none">
                <?php if ($child->getIsSalable()) : ?>
                    <div class="stock available" title="<?= $block->escapeHtmlAttr(__('Availability')) ?>">
                        <span><?= $block->escapeHtml(__('In stock')) ?></span>
                    </div>
                <?php else : ?>
                    <div class="stock unavailable" title="<?= $block->escapeHtmlAttr(__('Availability')) ?>">
                        <span><?= $block->escapeHtml(__('Out of stock')) ?></span>
                    </div>
                <?php endif; ?>
            </li>
        <?php endforeach; ?>
    </ul>
<?php endif; ?>

Tested on Magento 2.3.3.

Improve this answer
-1

I'm new to magento 2 .3.3 I want to display the quantities of all my products (simple and configurable products) in the product listing and in the product detail and in the product quickview. do you have a code to offer me? Thanks for your help

Improve this answer
1
  • Post this in the comment section or create new question.
    – Kowsigan Atsayam
    Jun 22, 2020 at 10:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.