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;
  • Are you using swatch or dropdown? Sep 10, 2018 at 14:02
  • I am using swatches
    – Ravi Soni
    Sep 10, 2018 at 14:06
  • Can you update what you have done? Sep 10, 2018 at 14:08
  • I am working in swatch-renderer.js on _OnClick: function ($this, $widget, eventName) { function. var color = $label.html(); var size = $this.html(); window.location.hash = '?size='+size+'&color='+color; but it's not working properly. Can you please give your code in answer.
    – Ravi Soni
    Sep 10, 2018 at 14:10
  • Can you update the _onClick function to your question? Sep 10, 2018 at 14:12

1 Answer 1


Try this code for _OnClick function:

_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);


        //window.location.hash = '?size='+size+'&color='+color;

    if ($widget.inProductList) {
        $input = $widget.productForm.find(
            '.' + $widget.options.classes.attributeInput + '[name="super_attribute[' + attributeId + ']"]'

    if ($this.hasClass('disabled')) {

    if ($this.hasClass('selected')) {
        $this.attr('aria-checked', false);
    } else {
        $parent.attr('option-selected', $this.attr('option-id')).find('.selected').removeClass('selected');
        $input.attr('data-attr-name', this._getAttributeCodeById(attributeId));
        $widget._toggleCheckedAttributes($this, $wrapper);


    if ($widget.element.parents($widget.options.selectorProduct)
    ) {

    var i =0;
    var hashUrl = '';
        if(i > 0) hashUrl+= '&';
    if(hashUrl) window.location.hash = '?'+hashUrl;

Magento2 already have an option to select it by attribute code and option Id. You can also see the function _EmulateSelected where it triggers click for each selected options.

You can also check the function _EmulateSelected from where it check the parameters from the url and return the selected options with attribute code to the function _RenderControls. In the function _RenderControls you can find the line $widget._EmulateSelected($widget._getSelectedAttributes()); at the end of the function which tells that options are selected.

The code is not tested but it should works.

  • Thank You so much for help. Can you please add code for append label instead of value. hashUrl+=$(this).attr('attribute-code')+'='+$i need lable here;
    – Ravi Soni
    Sep 11, 2018 at 7:21
  • Dont use label as if you check their code they have read attribute code instead of label and option id instead of label. Thats why I have added this only and it works. Sep 11, 2018 at 7:24
  • Thank You it help me, Yes it's magento default they read attribute code. But here I need crack that and apply our customisation to read label. I am working here _getSelectedAttributes: function () { but still not get what I want.
    – Ravi Soni
    Sep 11, 2018 at 10:26
  • Done............
    – Ravi Soni
    Sep 11, 2018 at 17:10
  • Hi Sukumar Gorai, Your code works fine when i refresh the same category page. But in my case I want the size URL gets appended when the page gets refresh as well as when i go to the different category then also i need the previous size URL to get append. Please help me. Thanks in advance. May 17, 2019 at 6:49

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.