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.

enter image description here

2 Answers 2


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)

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.

enter image description here

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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