I have configurable product. I want append URL once I click on configurable option with query string on the product detail page. Like, .html?size=XL&color=red And also once it append in the URL and If we try to Reload page then selected parameter will be selected after page load.

I have configurable product. I want append URL once I click on configurable option with query string on the product detail page. Like, .html?size=XL&color=red And also once it append in the URL and If we try to Reload page then selected parameter will be selected after page load.

Here what I did. I am not sure is this proper flow for this requirement Or not.

_OnClick: function ($this, $widget, eventName) {
        var $parent = $this.parents('.' + $widget.options.classes.attributeClass),
            $wrapper = $this.parents('.' + $widget.options.classes.attributeOptionsWrapper),
            $label = $parent.find('.' + $widget.options.classes.attributeSelectedOptionLabelClass),
            attributeId = $parent.attr('attribute-id'),
            $input = $parent.find('.' + $widget.options.classes.attributeInput);

        var color = $label.html();
        var size = $this.html();
        
        window.location.hash = '?size='+size+'&color='+color;