Get quantity in stock for items added in cart in JS

In your phtml file :

<script type="text/x-magento-init">
{
"#idofyourdiv" : {
"yourJSdefinedinRequireJS" : {
"data1" : "data1",
"data2" : "data2",
"data3" : "data3",
}
}
}
</script>

In your JS :

define([
    'jquery',
    'mage/translate',
    'jquery/ui'
], function ($, $t) {
    'use strict';

    $.widget('mage.yourjsdefinedinrequirejs', {
        options: {
data1: data1,
data2: data2,
data3:data3
},
...
....
... (normal build up with _create or _init)
var data1 = this.options.data1;
// data1 var contains your information now from the phtml fille

});
return $.mage.yourjsdefinedinrequirejs;
});

Example :

Phtml :

<form
data-mage-init='{"quantity" : { "enabled" : true, "qtyfield": ".quantity.qty"}}' >

quantity.js

define([
    'jquery',
    'mage/translate',
    'jquery/ui'
], function ($, $t) {
    'use strict';

    $.widget('mage.quantity', {
        options: {
            enabled: true,
            qtyfield: '.quantity'
        },
        _create: function () {
            if (this.options.enabled) {
                this._bindqty();
            }
        },
        _bindqty: function () {
            var self = this.element;
            var selectqtyfield = $(this.options.qtyfield);
            var qtyfields = self.find(selectqtyfield);

            $(qtyfields).each(function () {
                var qtyfield = jQuery(this),
                    input = qtyfield.find('input[type="number"]'),
                    btnUp = qtyfield.find('.quantity-up'),
                    btnDown = qtyfield.find('.quantity-down'),
                    min = input.attr('min'),
                    max = input.attr('max');

                btnUp.click(function () {
                    var oldValue = parseFloat(input.val());
                    if (oldValue >= max) {
                        var newVal = oldValue;
                    } else {
                        var newVal = oldValue + 1;
                    }
                    qtyfield.find("input").val(newVal);
                    qtyfield.find("input").trigger("change");
                });

                btnDown.click(function () {
                    var oldValue = parseFloat(input.val());
                    if (oldValue <= min) {
                        var newVal = oldValue;
                    } else {
                        var newVal = oldValue - 1;
                    }
                    qtyfield.find("input").val(newVal);
                    qtyfield.find("input").trigger("change");
                });
            });
        }
    });

    return $.mage.quantity;

});

requireJs

var config = {
    paths: {
        'quantity' : 'js/quantity',
    },
    shim: {
        'quantity' : {
            'deps' : ['jquery']
        }
    }
};

Leave a comment

Your email address will not be published. Required fields are marked *