Suche Overlay: Zwei Plugins miteinander "verbinden" ?

atom

Hallo Liebe Gemeinde,

ich habe folgende zwei Plugins im Einsatz.

Einmal TB Search in Menu (hier wird ein genau wie von mri gewünschte Suche als Overlay bei Klick üebr die Seite gelegt. Leider wie der Name des Plugins bereits sagt nur angezeigt in einem Menü (bei mir derzeit im Footer Menü).

Das zweite Plugin heißt Sticky Side Buttons. Hier können Buttons an den Bidlschirmrand gelegt werden und mittel einer URL dann die jeweilige Funktion.

Ich würde nun gerne über diesen Sticky Side Button die Suche einbinden als genau diese Overlay Suche wie bei dem Plugin TB Search in Menu.

Ich habe bereits geschaut welchen Link Tb Search in Menu öffnet, leider ist dies einfach a href=#
Weiß jemand rat wie ich das realisieren kann?
Bzw. kennt ein Plugin oder Tutorial oder ähnliches welches ei nSuchfenster als Overlay öffnet und am besten als URL Link eingebunden werden kann ?

zu sehen hier: djft.de

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

b3317133

Ändere den Sticky Side Button in z.B. diesen Code:

HTML

<li id="ssb-btn-2" class="tb-search-item">
   <a href="#"><span class="fas fa-search tb-search"></span> Suche</a>
</li>

Ergänze ein JavaScript im Footer mit z.B. diesem Code (das ist eine Kopie von
[FONT=Courier New]/wp-content/plugins/tb-search-in-menu/js/main.js[/FONT] mit angepasstem ID [FONT=Courier New]#ssb-btn-2[/FONT]):

Code

jQuery(function($) {
    var tbSearch = $('.tb-menu-search');
    $('#ssb-btn-2').click(function(e) {
        e.preventDefault();
        $('.tb-menu-search').addClass('tb-search-active').fadeIn(200);
    });
    $('.tb-close').click(function() {
        $('.tb-menu-search').fadeOut(200);
    });
    $(document).on('keyup',function(evt) {
        if ($( '#tb-search' ).hasClass('tb-search-active') && evt.keyCode == 27) {
           $('.tb-menu-search').fadeOut(200);
        }
    });
});

Alles anzeigen

Damit würde es funktionieren.

atom

Bevor ich es falsch probiere, kannst du mir sagen welche Dateien es genau sind ?
Also insb. bei dem sticky-side-button Plugin. Udn muss ich diesen Code einfügen oder ersetzen (an welcher Stelle)?
Sorry meien Programmierkenntnisse reichen nicht so weit :/

Vielen Dank für die super schnelle Antwort und Idee

b3317133

Kenne weder das eine noch das andere Plugin und auch nicht das Theme. Wo man was genau einfügen kann oder ob/welche Filter, Code-Eingabemöglichkeiten o.ä. evtl. existieren, die man dafür nutzen könnte, lässt sich daher "von aussen" schwer sagen. Habe die o.g. Lösung einfach in Browser-Konsole & -Inspector ausprobiert.

Für Leute ohne Programmierkenntnisse könnte man ein kleines extra Plugin erstellen, das diese "Verbindung" ohne Änderungen in den beiden anderen Plugins realisiert, das wäre aber dann wohl eher was kleines für die Jobbörse hier im Forum, da es u.a. auch Zugriff auf Deine Seite zur Analyse und zum Testen erfordert.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Suche Overlay: Zwei Plugins miteinander "verbinden" ?

Jetzt mitmachen!