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]"

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.

], 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.


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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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