Jak ustawić pierwszą wartość opcji w produkcie konfigurowalnym Magento 2.1.x

Produkt konfigurowalny w Magento wymaga od klienta wyboru wariantu np. koloru, rozmiaru itp. Niestety nie możemy ustawić domyślnych wartości dla wariantów. Dlatego klient przed dodaniem produktu do koszyka musi wybrać wariant. Co zrobić by ustawić w magento domyślny wariant w produkcie konfigurowalnym?

Można nadpisać plik configurable.js w module module-configurable-product. Wprowadzając nim kilka dodatkowych linijek kodu javascript.

if (i == 0) {
    this.options.values[attributeId] = options[i].id;
}

Ten fragment kodu wprowadzamy w pętli generującej listę wariantów. Pierwszy wariant zostaje ustawiony jako domyślny.

if (window.location.href.indexOf('#') !== -1) {this._parseQueryParams(window.location.href.substr(window.location.href.indexOf('#') + 1));}

Druga zmiana jest wprowadzona tuż za pętlą generującą opcje i jest wykonywane tylko raz. Jej celem jest ustawienie odpowiedniego wariantu przekazywanego poprzez adres URL.

Tak więc obiekt _fillSelect pliku configurable.js powinien wyglądać następująco:

_fillSelect: function (element) {
        var attributeId = element.id.replace(/[a-z]*/, ''),
            options = this._getAttributeOptions(attributeId),
            prevConfig,
            index = 1,
            allowedProducts,
            i,
            j;

        this._clearSelect(element);
        element.options[0] = new Option('', '');
        element.options[0].innerHTML = this.options.spConfig.chooseText;
        prevConfig = false;

        if (element.prevSetting) {
            prevConfig = element.prevSetting.options[element.prevSetting.selectedIndex];
        }

        if (options) {
            for (i = 0; i < options.length; i++) {
                allowedProducts = [];
                if (prevConfig) {
                    for (j = 0; j < options[i].products.length; j++) {
                        // prevConfig.config can be undefined
                        if (prevConfig.config &&
                            prevConfig.config.allowedProducts &&
                            prevConfig.config.allowedProducts.indexOf(options[i].products[j]) > -1) {
                            allowedProducts.push(options[i].products[j]);
                        }
                    }
                } else {
                    allowedProducts = options[i].products.slice(0);
                }

                if (allowedProducts.length > 0) {
                    options[i].allowedProducts = allowedProducts;
                    element.options[index] = new Option(this._getOptionLabel(options[i]), options[i].id);
                    if (typeof options[i].price !== 'undefined') {
                        element.options[index].setAttribute('price', options[i].prices);
                    }
                    element.options[index].config = options[i];
                    index++;
                }
                //nowy kod - wybierz wartość pierwszego wariantu
                if (i == 0) {
                    this.options.values[attributeId] = options[i].id;
                }   
            }
            //nowy kod -  sprawdź czy wartość jest deklarowana z adresu URL, jęsli tak to zastosuj ją 
            if (window.location.href.indexOf('#') !== -1) {this._parseQueryParams(window.location.href.substr(window.location.href.indexOf('#') + 1));}
        }

    },

Położenie oryginalnego pliku:

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

Położenie pliku nadpisującego:

app/design/frontend/Vendor/Theme/Magento_ConfigurableProduct/web/js/configurable.js

Podobne artykuły