[Gelöst] Suchfeld-Verhalten der mobilen Ansicht (XS) auf die mobile Quwer-Ansicht (S) ausweiten

Hallo,

ich möchte gerne das Verhalten des Suchfeldes im XS-Status (Phone) auf den S Status (PhoneLandscape) ausweiten, also dass nur ein Such-Icon angezeigt wird, auf das man klicken kann, damit darunter das Sucheingabefeld geöffnet wird.

Das müsste doch eigentlich recht einfach gehen…

Meine erster Versuch, die entsprechenden Mediaqueries für den PhoneLandscapeViewport in meiner LESS-Datei header.tpl zu deaktivieren, brachte mich nicht zum Ziel: Der Search-Toggle-Button ist zwar da, aber ein Klick auf ihn führt zu nichts. Undecided Da muss also noch Javascript im Spiel sein:

Zweiter Versuch: Ich habe mir die jquery.search.js angeschaut, finde da aber keine Zeile oder Einstellung, die ausschließlich auf den XS-Status reagiert.

Dritter Versuch: Ich habe in der jquery.shopware-responsive.js gesucht, ob das Plugin eventuell nur in bestimmten Status geladen wird, aber nein - es wird unabhängig vom Viewport immer geladen.

 

Nun bin ich am Ende mit meinen Ideen… Kann mir jemand von euch einen Tipp geben? Habe ich etwas entscheidendes übersehen?

Hallo Marco,

in der jquery.search.js bist du schon richtig. Dort gibt es 2-3 Stellen mit ‘xs’, bspw:

StateManager.registerListener({
      state: 'xs',
      enter: function () {
             if (opts.activeOnStart) {
                 me.openMobileSearch();
             }
      },
      exit: function () {
           me.closeMobileSearch();
      }
});

 

1 Like

Vielen Dank mbus, für den Hinweis, jetzt komme ich weiter.

Ich dachte, dass die Status Einstellungen oben in den Parametern stehen und nicht direkt hard codiert sind. Deshalb habe ich soweit unten gar nicht mehr geschaut.

In Zukunft nutze ich dann mal die Suchfunktion im Editor … soll ja helfen. Wink

Gruß, Marco

Hallo Marco,

hast du es geschafft die Suchfunktion anzupassen.

Ich habe derzeit genau das selbe Problem und komme leider nicht weiter. Könntest du mir helfen?

Ich habe die jquery.search.js aus dem ResponsiveTheme in mein Theme unter MeinTheme/themes/Frontend/Paipa/frontend/_public/src/js kopiert.

Ich habe die theme.php angepasst und folgendes mit eingefügt:

/** @var array Defines the files which should be compiled by the javascript compressor */
    protected $javascript = ‚src/js/jquery.search.js‘;

Ich habe die jquery.search.js Datei angepasst. Ich habe ‚xs‘ in ‚l‘ umbenannt um zu testen ob sich etwas tut. Leider kein Ergebnis.

Was mache ich noch falsch?

Freue mich über eure Rückmeldung.

Grüße

Christian

 

Hallo Christian,

Dein Vorgehen ist grundsätzlich richtig, deshalb kann ich nicht genau sehen, woran es liegt. Check mal folgendes:

  1. Cache gelöscht, neu kompiliert?

  2. Hast Du die Status an allen drei Stellen verändert? Sie müssen in der registerListener-Funktion hinzugefügt werden, in der showresult-Funktion sowie der onClickSearchEntry-Funktion rausgenommen werden.

  3. Gib Deiner modifizierten Datei mal einen anderen Namen und binde diese in Deine Theme.php ein.

    protected $javascript = [
    ‚…‘,
    ‚src/js/DeinNeuerName.js‘
    ];

  4. Hast Du Deine Theme.php auch brav in Dein neues Frontend-Profil kopiert und auch dort modifiziert?

Gruß, Marco

Hallo Marco,

vielen, lieben Dank für deine Antwort.

Habe alles wie in deinen Punkten geschrieben gemacht. 1. 3. 4. Alles versucht. Leider ohne Erfolg.

Was meinst du mit 2. " müssen rausgenommen werden?"

StateManager.registerListener({
                state: 'l',
                enter: function () {
                    if (opts.activeOnStart) {
                        me.openMobileSearch();
                    }
                },
                exit: function () {
                    me.closeMobileSearch();
                }
            });

 

if (!StateManager.isCurrentState('l') ) {
                $body.on(me.getEventName('click touchstart'), $.proxy(me.onClickBody, me));
            }

$.publish('plugin/swSearch/onClickSearchEntry', [me, event]);

            if (!StateManager.isCurrentState('l') ) {
                return;
            }

 

Selbst wenn ich alle ‘xs’ in der .js in ‘l’ umbenenne (3 an der Zahl) ändert sich nichts am verhalten. Mobile Suche kommt immernoch erst bei ‘xs’. Sieht irgendwie so aus als würde es die .js gar nicht annehmen und immer aus dem original-template nehmen. Muss ich die alte jquery.search.js irgendwie überschreiben oder ähnliches?

In der Theme.php passt eigentlich alles… Hast du noch einen Rat?

Grüße

Chris

Hallo Christian,

dann noch einmal im Detail: In der Javascript Datei gibt es drei Funktionen:

Die erste registriert für die kleinen Viewports die Mobilen Funktionen: Da musst Du auch die großen Vieports ergänzen

        // Hier wurde S bis XL ergänzt
        StateManager.registerListener([
            {
                state: ['xs', 's', 'm', 'l', 'xl'],
                enter: function () {
                    if (opts.activeOnStart) {
                        me.openMobileSearch();
                    }
                },
                exit: function () {
                    me.closeMobileSearch();
                }
            }          
        ]);

Die zweite Funktion löscht die Suchergebnisse und sendet die AJAX Antwort. Den Ausschluss der kleinen Viewports durch die if-Abfrage musst Du entfernen:

       // Abfragebkomplett raus!
        //if (!StateManager.isCurrentState(['xs', 's', 'm', 'l'])) {
            $body.on(me.getEventName('click touchstart'), $.proxy(me.onClickBody, me));
        //}

Das dritte ist das onClickTrigger Event zum Ein- und Ausblenden der Suchleiste. Auch hier muss die einschränkende if-Abfrage raus:

        // Abfrage komplett raus!
        //if (!StateManager.isCurrentState(['xs', 's', 'm', 'l'])) {
        // return;
        //}

Gruß, Marco

Ist es möglich, dass dieser workaround bei der Vers. 5.2.21 nicht mehr geht?

Ich probier das jetzt nen paar Stunden vergeblich. Mit eigener .js wie auch der jquery.search.js passiert da einfach nix.

mit 5.2.18 geht es jedenfalls noch.
Mein Problem damit ist jedoch, dass beim viewport wechsel die enter und exit funktionen nicht getriggert werden.

            StateManager.registerListener({
                state: ['xs', 's'],
                enter: function () {
                    console.log('enter');
                    if (opts.activeOnStart) {
                        me.openMobileSearch();
                    }
                },
                exit: function () {
                    console.log('exit');
                    me.closeMobileSearch();
                }
            });

Woran könnte das liegen?

 

beste grüße

Mit der sw 5.4.5 gehts auch nicht

die js wird aber geladen
ein test alert den ich setzte  wird aisgegeben.
 

Ich würde dieses Theme auch gerne nochmal aufgreifen:

StateManager.registerListener([
        {
            state: ['m', 'l', 'xl'],
            enter: function() {
                console.log("Hallo Welt");
                $('.product--details .tab-menu--cross-selling a.tab--title').on("click", function (e) {
                    e.preventDefault();
                });
            }
        },
    ]);

funktioniert nicht und der folgende JS Code funktioniert

StateManager.registerListener([
        {
            state: 'm',
            enter: function() {
                console.log("Hallo Welt");
                $('.product--details .tab-menu--cross-selling a.tab--title').on("click", function (e) {
                    e.preventDefault();
                });
            }
        },
    ]);

Shopware: 5.4.6

Weiß vielleicht jemand warum das so ist?

Vielen Dank vorab.

VG