Select dropdown anstatt input radio für Varianten im Frontend

Hi, versuche gerade anstatt input radios eine select Box zu generieren, mit den jeweiligen Optionen als Dropdown.

Das funktioniert auch ganz gut in der configurator.html.twig und im Frontend werden auch alle dargestellt - jedoch lädt’s kurz im Frontend und dann passiert nichts ( ich bleib immer noch auf der gleichen Variante ) mein Verdacht liegt daran, dass die Funktion in variant-switch.plugin.js direkt on change reagiert und die select box keinen gültigen Wert hat / den Wert nicht verarbeiten kann?

Wäre super wenn jemand Ahnung hätte wodran das liegen könnte / was ich bei dem select Element beachten müsste

Grüße

Ich habe das gleiche Problem. Würde auch gerne ein paar Tipps haben.

Man kann das einfach per Bootstrap machen:

{% sw_extends '@Storefront/storefront/page/product-detail/configurator.html.twig' %}

{% block page_product_detail_configurator_options %}

    {% if group.displayType == 'text' %}
        
            
                
                    {% for option in group.options %}
                        {% if option.id in page.product.optionIds %}
                            {{ option.translated.name }}
                        {% endif %}
                    {% endfor %}
                
                
                    {% for option in group.options %}

                        {% set optionIdentifier = [group.id, option.id]|join('-') %}
                        {% set isActive = false %}
                        {% set isCombinableCls = 'is-combinable' %}

                        {% if option.id in page.product.optionIds %}
                            {% set isActive = true %}
                        {% endif %}

                        {% if not option.combinable %}
                            {% set isCombinableCls = false %}
                        {% endif %}

                        {% if option.configuratorSetting.media %}
                            {% set displayType = 'media' %}
                            {% set media = option.configuratorSetting.media %}
                        {% else %}
                            {% set displayType = group.displayType %}
                            {% if option.media %}
                                {% set media = option.media %}
                            {% else %}
                                {% set media = false %}
                            {% endif %}
                        {% endif %}

                        {% block page_product_detail_configurator_option %}
                            
                                {% block page_product_detail_configurator_option_radio %}
                                    {{ parent() }}
                                {% endblock %}
                            
                        {% endblock %}

                    {% endfor %}
                
            
        
    {% else %}
        {{ parent() }}
    {% endif %}
{% endblock %}

 

2 Likes

Viel Spaß damit: