1

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? – Sukumar Gorai Sep 10 '18 at 14:02
  • I am using swatches – Ravi Soni Sep 10 '18 at 14:06
  • Can you update what you have done? – Sukumar Gorai Sep 10 '18 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 '18 at 14:10
  • Can you update the _onClick function to your question? – Sukumar Gorai Sep 10 '18 at 14:12
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);



        //console.log($parent);

        //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')) {
        return;
    }

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

    $widget._Rebuild();

    if ($widget.element.parents($widget.options.selectorProduct)
            .find(this.options.selectorProductPrice).is(':data(mage-priceBox)')
    ) {
        $widget._UpdatePrice();
    }

    $widget._loadMedia(eventName);
    $input.trigger('change');
    var i =0;
    var hashUrl = '';
    $('.swatch-attribute[option-selected]').each(function(index){
        if(i > 0) hashUrl+= '&';
        hashUrl+=$(this).attr('attribute-code')+'='+$(this).attr('option-selected');
        i++;
    });
    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 '18 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. – Sukumar Gorai Sep 11 '18 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 '18 at 10:26
  • Done............ – Ravi Soni Sep 11 '18 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. – Flying Finner May 17 at 6:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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