Magento2 core javascript object in custom javascript

Question

i would like to access the javascript object for the product custom options and need to change the price of the custom option. I have found below data for the custom options.

<script type="text/x-magento-init">
    {
        "#product_addtocart_form": {
            "priceOptions": {
                "optionConfig": {"1":{"1":{"prices":{"oldPrice":{"amount":1,"adjustments":[]},"basePrice":{"amount":1},"finalPrice":{"amount":1}},"type":"fixed","name":"Option1-1"},"2":{"prices":{"oldPrice":{"amount":2,"adjustments":[]},"basePrice":{"amount":2},"finalPrice":{"amount":2}},"type":"fixed","name":"Option1-2"},"3":{"prices":{"oldPrice":{"amount":3,"adjustments":[]},"basePrice":{"amount":3},"finalPrice":{"amount":3}},"type":"fixed","name":"Option1-3"},"4":{"prices":{"oldPrice":{"amount":4,"adjustments":[]},"basePrice":{"amount":4},"finalPrice":{"amount":4}},"type":"fixed","name":"Option1-4"}}},
                "controlContainer": ".field",
                "priceHolderSelector": "[data-role=priceBox]"
            }
        }
    }
</script>

My concern is that how can i access the optionConfig from the above object. So I can modified it before magento change update price and then magento will update price accordingly.

I have created the below javascript widget.

define([
    'jquery',
    'underscore',
    'mage/template',
    'priceUtils',
    'priceBox',
    'priceOptions',
], function ($, _, mageTemplate, utils) {
    'use strict';
    var globalOptions = {
        qtyFieldSelector: 'input.qty',
    };
    $.widget('mage.fixedprices', $.mage.priceOptions, {
        options: globalOptions,
        /**
         * @private
         */
        _create: function() {
            console.log('hey, fixedprices is loaded!')
            //bind click event of elem id
            this.element.on('change', function(e){
                console.log('change ME!');
            });
            this.element.on('change', this._onQtyFieldChanged.bind(this));
        },

        _onQtyFieldChanged: function onQtyFieldChanged(event) {
            console.log("Magentoins fixedPrices", this.options);            
        }
    });

    return $.mage.fixedprices;

});

I am getting optionConfig as null.

In your _create function: console.log(this.options.optionConfig)? — Khoa Truong
– Khoa Truong, Commented Sep 1, 2016 at 7:07
Correct approach is to use mix-ins. See working solution here : magento.stackexchange.com/a/172920/53806 — Jimmy Beats
– Jimmy Beats, Commented May 4, 2017 at 0:37

Aaron Allen · Accepted Answer · 2016-09-01 07:52:00Z

0

You can create the file view/frontend/requirejs-config.js in your module with this contents:

var config = {
    map: {
        '*': {
            priceOptions: 'Your_Module/js/your-script'
        }
    }
};

This will cause 'priceOptions' to refer to your script instead of Magento_Catalog/js/price-options. You should then have access to the options array from inside your script.

answered Sep 1, 2016 at 7:52

Aaron Allen

9,0492 gold badges29 silver badges37 bronze badges

Add a comment |

Stack Exchange Network

Magento2 core javascript object in custom javascript

1 Answer 1

Your Answer

Linked

Hot Network Questions

Magento2 core javascript object in custom javascript

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Hot Network Questions