Select default Options of Configurable product by URL query

Checking recently how we can select default options of configurable product by URL query, we thought that maybe would be useful to share it with you. So here we are!

Firstly checking the configurable.js under

vendor/magento/module-configurable-product/view/frontend/web/js/configurable.js

we can see on line 59 a comment that says

// Override defaults with URL query parameters and/or inputs values

by the function _overrideDefaultsSo the next step will be to find the id / value of the option fields and add them to the url. We can easily do that by inspecting the input elements in frontend finding the option id and value to set. Inspecting the div element for the grey colour option on the following product http://demo.magevision.com/hero-hoodie.html we will see the information that we need. The aria-describedby="option-label-color-90" and the option-id ="52", meaning the id for the attribute colour is 90 and the id for the option grey is 52. By adding these values as parameters to the url we will land to the product page with this option preselected. The URL will look like

http://demo.magevision.com/hero-hoodie.html#90=52

Feel free to share this post and ask your questions in the comments below.

Till next time!