Magento 2 mixin file not calling for this target file "Magento_ConfigurableProduct/js/configurable" why?

Question

I am planning to write a mixin for configurable product varient selection stock and qty update in pdp. This is my requirejs-config.js file:app/code/Vendor/Module/view/frontend/requirejs-config.js with this code:

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

This is my mixin file: app/code/Vendor/Module/view/frontend/web/js/configurable-item-mixin.js with this code:

define(['jquery'], function ($) {
'use strict';
return function (Configurable) {
 return Configurable.extend({
 console.log("hello);
 });
 } });

The console statement is not logging in browser dev tools. My main concern is this mixin file not calling. If I change this target class: Magento_ConfigurableProduct/js/configurable to something else like swatch-renderer then my mixin file is calling. But I want to extend the configurable js file for my requirement. How can I achieve this ?

Answer 1

Something like this should do the trick. setup:upgrade

define([
 'jquery'
], function ($) {
 'use strict';
 return function (widget) {
 $.widget('mage.configurable', widget, {
 /**
 * This method is called when a configurable option is selected.
 
 * @param {Object} element
 * @private
 */
 _configureElement: function (element) {
 
 this._super(element);
 // --- Your Custom Logic Starts Here ---
 var selectedProductId = this.options.spConfig.productId; // The ID of the currently selected simple product
 var selectedOptions = this.options.spConfig.config; // Selected options data
 console.log('Configurable option selected!');
 console.log('Selected Simple Product ID:', selectedProductId);
 console.log('Selected Options:', selectedOptions);
 
 // var productData = this.options.spConfig.index[selectedProductId];
 // console.log('Selected Product Data:', productData);
 // --- Your Custom Logic Ends Here ---
 },
 /**
 * You can override other methods as needed.
 * For example, if you want to modify how prices are reloaded:
 * _reloadPrice: function () {
 * this._super(); // Call original method
 * console.log('Price reloaded after option selection.');
 * // Add custom price display logic here
 * },
 */
 });
 return $.mage.configurable;
 };
});

• shankar boss: No, this is not working Elfling..
• elfling: Apologies, I've been away, still no joy?
• shankar boss: no, Still the file is not loading.