shopware6 variant select

_shopware6_variant_select-README.md

1. Add files
2. Clear Cache
3. Build Storefront
4. Enjoy

buy-widget-form.html.twig

{# extend buy-widget-form #}
{% sw_extends '@Storefront/storefront/page/product-detail/buy-widget-form.html.twig' %}

{% block page_product_detail_buy_quantity_container %}
    <div class="col-12 col-sm-4 d-flex align-items-end">
        {% block page_product_detail_buy_quantity %}
            <div class="form-group">
                <label for="lineItems[{{ product.id }}][quantity]">{{ 'detail.orderItemQuantity'|trans|sw_sanitize }}</label>
                <select name="lineItems[{{ product.id }}][quantity]"
                        class="custom-select product-detail-quantity-select">
                    {% for quantity in range(product.minPurchase, product.calculatedMaxPurchase, product.purchaseSteps) %}
                        <option value="{{ quantity }}">
                            {{ quantity }}{% if product.packUnit %} {{ product.packUnit }}{% endif %}
                        </option>
                    {% endfor %}
                </select>
            </div>
        {% endblock %}
    </div>
{% endblock %}

main.js

// Add Plugin in /custom/plugins/THEMEPLUGIN/src/Resources/app/storefront/src/main.js

import VariantSwitchPlugin from './variant-switch/variant-switch.plugin';

// if not set yet: const PluginManager = window.PluginManager;
PluginManager.override('VariantSwitch', VariantSwitchPlugin, '[data-variant-switch]');

variant-switch.plugin.js

// create file in /custom/plugins/THEMEPLUGIN/src/Resources/app/storefront/src/variant-switch

import VariantSwitchBasePlugin from 'src/plugin/variant-switch/variant-switch.plugin';
import Iterator from 'src/helper/iterator.helper';

export default class VariantSwitchPlugin extends VariantSwitchBasePlugin {

    /**
     * returns the current selected
     * variant options from the form
     *
     * @private
     */
    _getFormValue() {
        const serialized = {};
        Iterator.iterate(this._radioFields, field => {
            if (VariantSwitchPlugin._isFieldSerializable(field)) {
                if (field.selected) {
                    serialized[field.parentNode.name] = field.value;
                }
            }
        });

        return serialized;
    }

}