Offcanvas Warenkorb wird FullScreen nach Enter im Anzahl Items Counter

Shopware 6 (German) Sonstiges
1

Hallo, mir ist folgendes Problem aufgefallen, zuerst bei einem kostenlosem Theme, dass ich nutze, dann aber auch bei dem SW6 Demo Theme.
Wenn ich Items im Warenkorb habe und im Offcanvas Warenkorb nicht den Counter nutze sondern eine neue Zahl eintippe muss ich ja entweder mit der Maus aus dem Feld klicken (dann aktualisiert es) oder aber ich drücke Enter, dann aktualisiert es auch, aber der Offcanvas Cart erstreckt sich FullScreen über den Bildschirm. Auch die URL ändert sich zu: MEINE URL/staging2/checkout/offcanvas)

Screenshot 2022-07-11 171055
Screenshot 2022-07-11 1710551920×1020 84.6 KB

Hat noch jemand das Problem? Gibt es einen fix dafür?
Ich denke aus Reflex drücken da viele Enter, die die Anzahl per Tastatur ändern…

Danke und VG

2

Ich bin mir nicht sicher, vermute aber es findet ein redirectTo/ eine Weiterleitung zu „checkout/offcanvas“ wodurch eben das Template (über die ganze Seite) des Offcanvas Warenkorb angezeigt wird.
Entweder ist ein Fehler im Template vorhanden, oder irgendetwas im JS wird nicht richtig ausgeführt.
Normalerweise sollte der Inhalt des Offcanvas Warenkorb ersetzt werden statt dem redirectTo/ der Weiterleitung.

Ich vermute, dass irgendwo ein submit des Forms stattfindet, statt dass es im JS erfolgt.

3

Welche twig Datei ist denn die relevante hierfür?
/component/checkout/offcanvas-cart.html.twig
oder
/component/checkout/offcanvas-cart-summary.html.twig

im offcanvas-cart.html.twig
ist zumindest der item-counter drinnen
Redirect To / forward to ist in beiden drinnen.

{% sw_extends '@Storefront/storefront/utilities/offcanvas.html.twig' %}

{% block utilities_offcanvas_meta %}
    {% set isAjaxOffcanvas = true %}

    {{ parent() }}
{% endblock %}

{% block utilities_offcanvas_close_text %}
    {{ "checkout.continueShopping"|trans|sw_sanitize }}
{% endblock %}

{% block utilities_offcanvas_close_icon %}
    {% sw_icon 'arrow-head-left' style { 'size': 'sm' } %}
{% endblock %}

{% block utilities_offcanvas_content %}
    {% block component_offcanvas_cart %}
        {% set isCartNotEmpty = (page.cart.lineItems|length > 0) %}

        <div class="offcanvas-cart">
            {% block component_offcanvas_cart_header %}
                <div class="row align-items-center h4 offcanvas-cart-header">
                    <div class="col">
                        {{ "checkout.cartHeader"|trans|sw_sanitize }}
                    </div>

                    {% set checkoutItemCounter = page.cart.lineItems|length %}

                    {% block component_offcanvas_cart_header_item_counter %}
                        {% if isCartNotEmpty %}
                            <div class="col-auto">
                                <small class="offcanvas-cart-header-count">
                                    {{ "checkout.itemCounter"|trans({'%count%': checkoutItemCounter})|sw_sanitize }}
                                </small>
                            </div>
                        {% endif %}
                    {% endblock %}
                </div>
            {% endblock %}

            {% block component_offcanvas_cart_flashbags %}
                <div class="flashbags">
                    {% for type, messages in app.flashes %}
                        {% sw_include '@Storefront/storefront/utilities/alert.html.twig' with {
                            type: type,
                            list: messages
                        } %}
                    {% endfor %}
                </div>
            {% endblock %}

            {% if isCartNotEmpty %}
                {% block component_offcanvas_cart_items %}
                    <div class="offcanvas-cart-items">
                        {% for lineItem in page.cart.lineItems %}
                            {% block component_offcanvas_cart_item %}
                                {# @deprecated tag:v6.5.0 - Template `offcanvas-item.html.twig` is deprecated. Use `storefront/component/line-item/line-item.html.twig` instead. #}
                                {% if feature('v6.5.0.0') %}
                                    {% sw_include '@Storefront/storefront/component/line-item/line-item.html.twig' with {
                                        displayMode: 'offcanvas',
                                        redirectTo: 'frontend.cart.offcanvas'
                                    } %}
                                {% else %}
                                    {% sw_include '@Storefront/storefront/component/checkout/offcanvas-item.html.twig' %}
                                {% endif %}
                            {% endblock %}
                        {% endfor %}
                    </div>
                {% endblock %}
            {% else %}
                {% block component_offcanvas_cart_empty %}
                    {% sw_include '@Storefront/storefront/utilities/alert.html.twig' with {
                        type: "info",
                        content: "checkout.emptyCart"|trans|sw_sanitize
                    } %}
                {% endblock %}
            {% endif %}

            {% if isCartNotEmpty %}
                {% block component_offcanvas_summary %}
                    {% sw_include '@Storefront/storefront/component/checkout/offcanvas-cart-summary.html.twig' %}
                {% endblock %}
            {% endif %}

            {% block component_offcanvas_cart_actions %}
                <div class="offcanvas-cart-actions">
                    {% block component_offcanvas_cart_actions_promotion %}
                        {% if isCartNotEmpty %}
                            <div class="js-offcanvas-cart-promotion">
                                {% block component_offcanvas_cart_actions_promotion_form %}
                                    <form action="{{ path('frontend.checkout.promotion.add') }}"
                                          class="offcanvas-cart-promotion-form js-offcanvas-cart-add-promotion"
                                          method="post">

                                        {% block component_offcanvas_cart_actions_promotion_form_csrf %}
                                            {{ sw_csrf('frontend.checkout.promotion.add') }}
                                        {% endblock %}

                                        {% block component_offcanvas_cart_actions_promotion_redirect %}
                                            <input type="hidden"
                                                   name="redirectTo"
                                                   value="frontend.cart.offcanvas">
                                        {% endblock %}

                                        {% block component_offcanvas_cart_actions_promotion_input_group %}
                                            <div class="input-group">
                                                {% block component_offcanvas_cart_actions_promotion_label %}
                                                    <label class="{{ visuallyHiddenClass }}" for="addPromotionOffcanvasCartInput">
                                                        {{ "checkout.addPromotionLabel"|trans|sw_sanitize }}
                                                    </label>
                                                {% endblock %}

                                                {% block component_offcanvas_cart_actions_promotion_input %}
                                                    <input type="text"
                                                           name="code"
                                                           class="form-control"
                                                           id="addPromotionOffcanvasCartInput"
                                                           placeholder="{{ "checkout.addPromotionPlaceholder"|trans|striptags }}"
                                                           aria-label="{{ "checkout.addPromotionLabel"|trans|striptags }}"
                                                           aria-describedby="addPromotionOffcanvasCart"
                                                           required="required">
                                                {% endblock %}

                                                {% block component_offcanvas_cart_actions_promotion_submit %}
                                                    {# @deprecated tag:v6.5.0 - Bootstrap v5 removes `input-group-append` wrapper and uses elements as direct childs of `input-group` #}
                                                    {% if feature('v6.5.0.0') %}
                                                        <button class="btn btn-secondary"
                                                                type="submit"
                                                                id="addPromotionOffcanvasCart">
                                                            {% sw_icon 'checkmark' %}
                                                        </button>
                                                    {% else %}
                                                        <div class="input-group-append">
                                                            <button class="btn btn-secondary"
                                                                    type="submit"
                                                                    id="addPromotionOffcanvasCart">
                                                                {% sw_icon 'checkmark' %}
                                                            </button>
                                                        </div>
                                                    {% endif %}
                                                {% endblock %}
                                            </div>
                                        {% endblock %}
                                    </form>
                                {% endblock %}
                            </div>
                        {% endif %}
                    {% endblock %}

                    {% block component_offcanvas_cart_actions_checkout %}
                        {# @deprecated tag:v6.5.0 - Bootstrap v5 removes `btn-block` class, use `d-grid` wrapper instead #}
                        {% if feature('v6.5.0.0') %}
                            <div class="d-grid">
                                <a href="{{ path('frontend.checkout.confirm.page') }}"
                                   class="btn begin-checkout-btn{% if isCartNotEmpty %} btn-primary{% else %} btn-light disabled{% endif %}"
                                   title="{{ "checkout.proceedToCheckout"|trans|striptags }}">
                                    {{ "checkout.proceedToCheckout"|trans|sw_sanitize }}
                                </a>
                            </div>
                        {% else %}
                            <a href="{{ path('frontend.checkout.confirm.page') }}"
                               class="btn btn-block begin-checkout-btn{% if isCartNotEmpty %} btn-primary{% else %} btn-light disabled{% endif %}"
                               title="{{ "checkout.proceedToCheckout"|trans|striptags }}">
                                {{ "checkout.proceedToCheckout"|trans|sw_sanitize }}
                            </a>
                        {% endif %}
                    {% endblock %}

                    {% block component_offcanvas_cart_actions_cart %}
                        {# @deprecated tag:v6.5.0 - Bootstrap v5 removes `btn-block` class, use `d-grid` wrapper instead #}
                        {% if feature('v6.5.0.0') %}
                            <div class="d-grid">
                                <a href="{{ path('frontend.checkout.cart.page') }}"
                                   class="btn btn-link"
                                   title="{{ "checkout.proceedToCart"|trans|striptags }}">
                                    {{ "checkout.proceedToCart"|trans|sw_sanitize }}
                                </a>
                            </div>
                        {% else %}
                            <a href="{{ path('frontend.checkout.cart.page') }}"
                               class="btn btn-block btn-link"
                               title="{{ "checkout.proceedToCart"|trans|striptags }}">
                                {{ "checkout.proceedToCart"|trans|sw_sanitize }}
                            </a>
                        {% endif %}
                    {% endblock %}
                </div>
            {% endblock %}
        </div>

        {% block component_offcanvas_cart_hidden_line_items_information %}
            {% sw_include '@Storefront/storefront/component/checkout/hidden-line-items-information.html.twig' with {
                cart: page.cart,
                lineItems: page.cart.lineItems
            } %}
        {% endblock %}
    {% endblock %}
{% endblock %}


{% block component_offcanvas_summary_content %}
    <div class="offcanvas-summary">
        <dl class="row offcanvas-summary-list">
            {% block component_offcanvas_summary_total %}
                {% block component_offcanvas_summary_total_label %}
                    <dt class="col-7 summary-label summary-total">
                        {{ "checkout.subtotalAmount"|trans|sw_sanitize }}
                    </dt>
                {% endblock %}

                {% block component_offcanvas_summary_total_value %}
                    <dd class="col-5 summary-value summary-total">
                        <strong>{{ page.cart.price.positionPrice|currency }}{{ "general.star"|trans|sw_sanitize }}</strong>
                    </dd>
                {% endblock %}
            {% endblock %}
        </dl>

        {% if page.cart.deliveries is defined %}
            {% for activeShipping in page.cart.deliveries.elements %}
                {% block component_offcanvas_summary_content_info %}
                    <div class="row offcanvas-shipping-info">
                        <span class="col-7 shipping-label shipping-cost">
                                <strong>{{ "checkout.summaryShipping"|trans|sw_sanitize }}</strong>
                                    {% if loop.first %}
                                        <small {% if page.shippingMethods|length %}class="js-toggle-shipping-selection"{% endif %}>
                                        ({{ activeShipping.shippingMethod.translated.name }})
                                    </small>
                                {% endif %}
                        </span>

                        <span class="col-5 pb-2 shipping-value shipping-cost">
                            <strong>+ {{ activeShipping.shippingCosts.totalPrice|currency }}</strong>
                        </span>
                    </div>
                {% endblock %}
            {% endfor %}

            {% set activeShipping = page.cart.deliveries.elements | first %}

            {% block component_offcanvas_summary_content_shipping %}
                {% if page.shippingMethods|length %}
                    <div class="offcanvas-shipping-preference mb-2 mt-2 offcanvas-shipping-preference--hidden">
                        <form
                            action="{{ path('frontend.checkout.configure') }}"
                            name="confirmShippingForm"
                            data-form-csrf-handler="true"
                            method="post">
                            {% block page_checkout_confirm_shipping_form_csrf %}
                                {{ sw_csrf('frontend.checkout.configure') }}
                            {% endblock %}

                            <input type="hidden" name="forwardTo" value="frontend.cart.offcanvas">

                            {% block component_offcanvas_summary_content_shipping_select %}

                                <select class="{{ formSelectClass }} mt-2 col-12" name="shippingMethodId">
                                    <option disabled>{{ "checkout.confirmChangeShipping"|trans|sw_sanitize }}</option>

                                    {% for shippingMethod in page.shippingMethods %}
                                        <option
                                            value="{{ shippingMethod.id }}"
                                            {% if shippingMethod.id is same as(activeShipping.shippingMethod.id) %}selected="selected"{% endif %} >
                                            {{ shippingMethod.translated.name }}
                                        </option>
                                    {% endfor %}
                                </select>

                            {% endblock %}
                        </form>
                    </div>
                {% endif %}
            {% endblock %}
        {% endif %}
    </div>

    {% block component_offcanvas_summary_tax_info %}
        <p class="offcanvas-cart-tax">
            <small>
                {{ "general.star"|trans|sw_sanitize }}
                {% if page.cart.price.taxStatus == "gross" %}
                    {{ "general.grossTaxInformation"|trans|sw_sanitize }}
                {% else %}
                    {{ "general.netTaxInformation"|trans|sw_sanitize }}
                {% endif %}
            </small>
        </p>
    {% endblock %}
{% endblock %}
4

@philip1 ich vermute, dass das Problem in offcanvas-item.html.twig ist, da ja das Problem erst beim Erhöhen der Anzahl auftritt.

Ich könnte mir vorstellen, dass ein data-form-auto-submit="true" vorhanden ist. Das würde dazu führen, dass die Form gesendet wird und eben ein Redirect stattfinden würde.

Treten denn in der Browser Entwicklerkonsole irgendwelche JavaScript Fehler auf?

5

Hi @abdullah danke für die Antwort.
Das war zwar nicht die Lösung (glaube ich mit beschränkten Programmierkenntnissen) aber ich bin einen Schritt weiter :slight_smile: Nachdem ich mir alles nochmal angeschaut hab und keine Fehler entdecken konnte hab ich mir nochmal die Offizelle Demo von SW6 angeschaut und festgestellt dass da ja eigentlich ein Dropdown drinnen ist.
Wir haben bei den Warenkorb Einstellungen die Max. Auswahlmenge recht früh auf 15.000 gesetzt weil wir das für unsere Produkte brauchen.
Wenn ich den Standard von 100 wiederherstelle kommt wieder das Dropdown.
Hab jetzt mal eine Weile rumgespielt. bis 101 kommt ein Dropdown, alles darüber kommt ein Textfeld mit den Counter Button, dann tritt auch der Fehler auf (wenn die eingegebene Menge auf Lager ist) Wenn man etwas über Lagermenge angibt bleibt der WK Offcanvas rechts wie er sein soll und der Hinweis „Es sind nur noch XY Stk. auf Lager“

Denke also das ist eher ein genereller Bug, bzw. wurde nicht sauber für Mengen über 100 Stk mitgedacht.

Vielleicht kannst du ja mal gegenchecken ob das bei deiner Installation den selben Fehler ausgibt?

Danke schonmal und VG

Screenshot 2022-07-14 085601
Screenshot 2022-07-14 085601400×541 29.6 KB

Screenshot 2022-07-14 085643

6

Hallo,

im Changelog von Version 6.4.13.0 ( Shopware Changelog Shopware 6 ) findest du folgendes: „NEXT-9423 - Mengen-Auswahlfeld wird zu Eingabefeld, sobald die Anzahl der Auswahloptionen 100 überschreitet“. Der automatische Wechsel von einem Auswahlfeld zu einem Eingabefeld ist also so gewollt, wenn die Menge 100 überschreitet.

Das von dir beschriebene Problem liegt auch nicht unbedingt an Shopware 6 selbst, sondern am Verhalten des „Nummernfeldes“ (browserseitig): platform/quantity.html.twig at trunk · shopware/platform · GitHub . Dieses erlaubt leider das Absenden des Feldes über die Enter-Taste mit so einem Verhalten, was eigentlich nicht unbedingt gewollt ist.

Am besten erstellst du dazu im issueTracker ( https://issues.shopware.com/ ) mal ein Ticket. Lösen lässt sich das Problem eigentlich nur, wenn man auf das Feld einen JavaScript-EventListener hängt, der die Enter-Taste blockiert/abfängt.

Grüße
Sebastian

7

Alles klar :slight_smile: Danke für den Hinweis. Hatte ich nicht auf dem Schirm. Werde ein Ticket erstellen.

8

Die Funktion, dass ab 101 ein Inputfeld für die Anzahl angezeigt wird, kannte ich nicht. Dachte es wäre eine Eigenentwicklung oder ein Drittplugin.
Mit der Shopware Version 6.4.13.0 habe ich mich noch nicht ganz auseinandergesetzt.

Ich habe mir Mal den Quelltext angeguckt und die Weiterleitung sollte eigentlich nicht im Offcanvas Warenkorb auftreten, sondern nur dann, wenn der default displayMode verwendet wird, da dann die Form das data-form-auto-submit="true" erhält.

Hast du mal das Verhalten mit dem Standard Shopware Theme getestet und ggf. alle Plugins deaktiviert?

9

Hi, ja hab ich versucht :slight_smile:
hat trotzdem nicht geklappt. Es ist auch eine recht neue Installation mit wenig Plugins…
Naja ich hab ein Ticket erstellt und für uns vorerst eine Lösung gefunden.
Das Dropdown kommt immer wenn es 100 Auswahlmöglichkeiten gibt, habe die Auswahlzahl auf 15.000 gelassen aber die Staffelung hochgesetzt, das geht für uns und so bleiben wir vorerst beim Dropdown…

10

Moin, gibt es hierzu mittlerweile eine Lösung?

11

Hi,

sind gerade auch über das Problem gestolpert. Lösung ist das Core OffCanvasCart Plugin zu überschreiben und einen EventHandler an das Form für die Anzahl zu hängen, was dann preventDefault macht und den Ajax Handler für das Anzahl Update feuert.

plugin-root/src/Resources/app/storefront/src/decorator/offcanvas-cart-decoration.js

import OffCanvasCartPlugin from 'src/plugin/offcanvas-cart/offcanvas-cart.plugin';
import DomAccess from 'src/helper/dom-access.helper';
import Iterator from 'src/helper/iterator.helper';

export default class MyOffCanvasCartPlugin extends OffCanvasCartPlugin {
    _registerEvents() {
        super._registerEvents();
        this._registerQuantityChangeFormTriggerEvents()
    }

    /**
     * Register event to handle changing product quantities via form submit
     *
     * @private
     */
    _registerQuantityChangeFormTriggerEvents() {
        const forms = DomAccess.querySelectorAll(document, ".cart-item-quantity-container", false);
        if (forms) {
            Iterator.iterate(forms, form => form.addEventListener('submit', this._onChangeProductQuantityForm.bind(this)));
        }
    }

    _onChangeProductQuantityForm(event) {
        event.preventDefault();
        const form = event.target;
        const selector = this.options.cartItemSelector;

        this.$emitter.publish('onChangeProductQuantity');

        this._fireRequest(form, selector);
    }
}

plugin-root/src/Resources/app/storefront/src/main.js

import MyOffCanvasCartPlugin from "./decorator/offcanvas-cart-decoration";
const PluginManger = window.PluginManager;
PluginManager.override('OffCanvasCart', MyOffCanvasCartPlugin, '[data-offcanvas-cart]');
1 „Gefällt mir“