Pass Simple product id along with the swatch options attribute in swatch renderer .js magento 2.4

Question

We get swatch options by swatch renderer .js file. I want to pass the product id of the simple product along with the swatch option. Please see attached screenshot. I want to pass a simple product id in the highlighted part in inspecting.

Answer 1

You will have to pass $widget in the Renderswatch option first like -

_RenderSwatchOptions: function (config, controlId, $widget) {

Then in the _RenderControls function update the swatch option function call with 3 arguments like -

options = $widget._RenderSwatchOptions(item, controlLabelId, $widget)

Answer 2

I see that you mess a bit. It couldn't be attached there because in other cases there are more then 1 attribute.

You could have an access to products id into swatch-renderer.js widget. It's already contains all of simple products id into variable optionsMap. The methods _CalcProducts returns it always. Honestly _CalcProducts returns the first product id (from array) which have the matched attribute options. So, if all attributes selected you can be sure with correct product id. But before it could be a little bit incorrect.

I suppose the best way to use core Magento 2 data and widget and don't create customization in this case.