Skip to content

Autoselect of swatch options not working for dropdown attributes #4337

@designhunger

Description

@designhunger

Steps to reproduce

  1. Create a configurable product with a dropdown product attribute (f.ex. size)
  2. Visit product page with following syntax to preselect the attributes:
    http://myshop.com/productname.html?size=6

Expected result

The size with the option-id of 6 should be selected for the size attribute.

Actual result

The option is not selected if the attribute is a dropdown. Only visual and text swatches are selected.

Solution

The js file should differentiate between clickable attributes like swatches and dropdowns. Therefor the find statements should be altered in the _EmulateSelected function.

/module-swatches/view/frontend/web/js/SwatchRenderer.js

    /**
     * Emulate mouse click on all swatches that should be selected
     *
     * @private
     */
    _EmulateSelected: function () {
        var $widget = this,
            $this = $widget.element,
            request = $.parseParams(window.location.search.substring(1));

        $.each(request, function (key, value) {

            $this.find('.' + $widget.options.classes.attributeClass
                + '[attribute-code="' + key + '"] .swatch-select').val(value).change();


            $this.find('.' + $widget.options.classes.attributeClass
                + '[attribute-code="' + key + '"] .swatch-option[option-id="' + value + '"]').trigger('click');


        });
    },

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions