JTL-Shop Fullscreen Overlay Suche Wie man eine Fullscreen Overlay Suche einbaut

json-style_2

JTL-Shop Fullscreen Overlay Suche

Die JTL-Shop Suchfunktion ist ein sehr nützliches Tool, nicht in allen Shops, aber in vielen. Leider sieht die herkömmliche Suche immer gleich blöd aus. Also haben wir uns mal rangemacht und eine Fullscreen Overlay Suche integriert. Geht ganz einfach und funktioniert hervorragend.

Was ist die Fullscreen Overlay Suche? Solche Fullscreen Overlay Suchfelder sieht man sehr oft in aktuellen Webseiten. Die Suche wird dort einfach in einem Fullscreen Overlay angezeigt. Ist das Ganze sinnvoll? Ehrlich gesagt einen großen Sinn hat das ganze nicht, sieht aber sehr gut aus.

Die Fullscreen Overlay Suche könnt Ihr in wenigen Schritten auch in Euren JTL-Shop einbauen. Dafür benötigt Ihr nur etwas CSS und Java Kenntnisse. Im Shopsystem solltet Ihr Euch natürlicherweise auch auskennen.

Fangen wir mit der eigentlichen Suchfunktion an. Diese könnt Ihr nicht ganz löschen, da Bestandteile davon benötigt werden. Als Grundgerüst nehmen wir das EVO-Template von JTL.

Die Suchfunktion findet Ihr in der Datei „header_shop_nav.tpl und sieht so aus:

{block name="navbar-productsearch"}
 <li id="search">
 <form action="navi.php" method="GET">
 <div class="input-group">
 <input name="qs" type="text" class="form-control ac_input" placeholder="{lang key='search'}" autocomplete="off" />
 <span class="input-group-addon">
 <button type="submit">
 <span class="fa fa-search"></span>
 </button>
 </span>
 </div>
 </form>
 </li>
 {/block}{* /navbar-productsearch *}

Daraus macht Ihr folgendes:

<!--// Overlay Suche ###################################-->
<li class="cart-menu bs-hover-enabled pull-right"><a href="#search"><span class="fa fa-search"></span></a></li>
<!--// Overlay Suche ###################################-->

Nun ist die Suche erstmal komplett gekillt. Da alle Suchfunktionen weg sind, lediglich der Suchbutton (Lupe) ist noch sichtbar hat aber keinerlei Funktion.

Als Nächstes bauen wir mal etwas Funktion in das Ganze. Dafür schreibt Ihr Euch eine kleine js Datei und ladet diese in das Shopsystem. Benennen könnt Ihr diese, wie Ihr wollt. In diesem Beispiel nennen wir diese overlaysuche.js.

Overlay Suche

In die overlaysuche.js Datei müsst Ihr diesen Code schreiben:

// Overlay Suche ###################################
$(function () {
$('a[href="#search"]').on('click', function(event) {
event.preventDefault();
$('#search').addClass('open');
$('#search > form > input[type="search"]').focus();
});
$('#search, #search button.close').on('click keyup', function(event) {
if (event.target == this || event.target.className == 'close' || event.keyCode == 27) {
$(this).removeClass('open');
}
});
});

Damit die overlaysuche.js auch in eurem Shop aktiv wird müsst Ihr diese in die templates.xml eintragen. Dies sollte in der Zeile der „jtl3.js passieren. Das kann dann so aussehen

<JS Name="jtl3.js">
....
<File Path="js/overlaysuche.js"/>
....
..
.
</JS>

Im nächsten Step, müssen die Suchfelder wieder in den Shop integriert werden. Wir haben es im aktuellen Fall, in den Footer eingebaut da es dort am übersichtlichsten war. Ihr könnt diesen Code aber an eine frei gewählte Stelle packen.

<!--// Overlay Suche ###################################--><div id="search">
<button type="button" class="close"><i class="fa fa-times" aria-hidden="true"></i></button>
<div class="col-md-6">
{block name="navbar-productsearch"}
<form action="navi.php" method="GET">
<input name="qs" type="search" placeholder="{lang key='search'}" autocomplete="off" />
<button type="submit" class="btn btn-primary submit">{lang key='search'}</button>
</form>
{/block}{* /navbar-productsearch *}
</div>
</div>

Nun solltet Ihr schon die Overlay Suche sehen können. Sieht zwar noch scheiße aus, aber wir haben schon etwas an Funktion. Nun müsst Ihr das Ganze noch in einen schönen Style verpacken.

Dafür die CSS Datei eures Templates geöffnet und dort die folgenden Anweisungen reingeschrieben.

 /* Overlay Suche ##################################*/
#search {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
z-index: 101;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-transform: translate(0px, -100%) scale(0, 0);
-moz-transform: translate(0px, -100%) scale(0, 0);
-o-transform: translate(0px, -100%) scale(0, 0);
-ms-transform: translate(0px, -100%) scale(0, 0);
transform: translate(0px, -100%) scale(0, 0);
opacity: 0;
}
@media (min-width: 992px) {
#search {max-width: 100% !important;}
#search form {
position: relative;
margin-top: 45%;
margin-bottom: 0;
}
#search.open {
-webkit-transform: translate(0px, 0px) scale(1, 1);
-moz-transform: translate(0px, 0px) scale(1, 1);
-o-transform: translate(0px, 0px) scale(1, 1);
-ms-transform: translate(0px, 0px) scale(1, 1);
transform: translate(0px, 0px) scale(1, 1);
opacity: 1;
}
#search input[type="search"] {
position: absolute;
top: 50%;
width: 100%;
color: rgb(255, 255, 255);
background: rgba(0, 0, 0, 0);
font-size: 60px;
font-weight: 300;
text-align: center;
border: 0px;
margin: 0px auto;
margin-top: -50px;
padding-left: 30px;
padding-right: 30px;
outline: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
#search .btn {
position: absolute;
top: 50%;
left: 50%;
margin-top: 80px;
margin-left: -75px;
}
#search .close {
position: fixed;
top: 15px;
right: 15px;
color: #fff;
background-color: transparent;
border-color: transparent;
opacity: 1;
padding: 10px 17px;
font-size: 27px;
}

 

Fertig ist die Overlay Suche

Und das war es schon, nun habt Ihr eine Coole Fullscreen Overlay Suche die über den gesamten Monitor aufgeht.

Weitere Themen zu JTL-Shop

Teile uns

Schreibe einen Kommentar

Über WAM

Die WAM - Webagentur-Meerbusch. Die Typo3 und Wordpress Agentur aus Meerbusch bei Düsseldorf in NRW. Ganz nach dem Motto: Wenn man es ins Netz stellen kann, können wir es bauen. Und das schon seit über 10 Jahren.

-
Das Archiv
Werbung
Haendlerbund_Leistungen_265x221_animiert
Datenschutz-Übersicht
logo_wam_gray

Hier können Sie einstellen welche Cookies unsere Webseite auf Ihrem Endgerät speichern „Local Storage“ darf. Diese werden beim nächsten besuch auf unserer Webseite reaktiviert. Diese Einstellungen können Sie jederzeit wieder ändern. Dazu klicken Sie unten Links auf das Zahnradsymbol.

Sie können die Cookies nach dem Besuch unserer Webseite natürlich auch bedenkenlos löschen. Dazu müssen Sie die entsprechenden Einstellungen in Ihrem Browser vornehmen.

Unbedingt notwendige Cookies

Unbedingt notwendige Cookies sollten jederzeit aktiviert sein, damit wir deine Einstellungen für die Cookie-Einstellungen speichern können.

  • pll_language .

Cookie zur Verarbeitung eines mehrsprachiges System. Inhalte auf de / en / fr - Ablaufdatum 1 Jahr

  • reCAPTCHA ist ein CAPTCHA-System,

das es Webhostern ermöglicht, zwischen menschlichen und automatisierten Zugriffen auf Websites zu unterscheiden.

Unternehmen, das die Daten verarbeitet
Google Ireland Ltd
Gordon House, Barrow Street
Dublin 4
IE

Datenschutzerklärung

Kategorien verarbeiteter Daten:
KlickpfadSichtbarkeit von Anzeigen messenMausbewegungZeitstempelKlicks auf Anzeigen verfolgenConversion-TrackingIPUhrzeit und Datum verfolgenVerfolgung des BenutzerstandortsBesucherverhaltenUser-AgentSpracheBesuchte WebseiteZeitzone

Rechtsgrundlage für die Datenverarbeitung: Einwilligung (DSGVO 6.1.a)

Datenübertragung außerhalb der EU
Dieser Anbieter kann Ihre personenbezogenen Daten außerhalb des EWR/der EU übertragen, speichern oder verarbeiten. Diese Länder haben möglicherweise nicht das gleiche Datenschutzniveau und die Durchsetzung Ihrer Rechte kann eingeschränkt oder nicht möglich sein.
Cookies, die in Ihrem Browser gesetzt werden Cookiename Beispielwert Ablaufzeit Typ Domain rc::a MjNxdWs3M2o5ZGt­x Persistent Funktion www.google.com

  • Google Fonts

ist ein Dienst, der es Websites ermöglicht, bestimmte Schriftarten für ihre Gestaltung zu verwenden.

Unternehmen, das die Daten verarbeitet
Google Ireland Ltd
Gordon House, Barrow Street
Dublin 4
IE

Datenschutzerklärung

Rechtsgrundlage für die Datenverarbeitung: Einwilligung (DSGVO 6.1.a)

  • Google Maps

ist ein von Google entwickeltes Web-Mapping-Produkt.

Unternehmen, das die Daten verarbeitet
Google Ireland Ltd
Gordon House, Barrow Street
Dublin 4
IE

Datenschutzerklärung

Kategorien verarbeiteter Daten
Betrugserkennung und -präventionSichtbarkeit von Anzeigen messenZeitstempelIPUhrzeit und Datum verfolgenVerfolgen des BenutzergerätsVerfolgung des BenutzerstandortsBesucherverhaltenUser-AgentSpracheBesuchte WebseiteZeitzone

Rechtsgrundlage für die Datenverarbeitung: Einwilligung (DSGVO 6.1.a)

Datenübertragung außerhalb der EU
Dieser Anbieter kann Ihre personenbezogenen Daten außerhalb des EWR/der EU übertragen, speichern oder verarbeiten. Diese Länder haben möglicherweise nicht das gleiche Datenschutzniveau und die Durchsetzung Ihrer Rechte kann eingeschränkt oder nicht möglich sein.

Drittanbieter-Cookies

Diese Website verwendet Google Analytics, um anonyme Informationen wie die Anzahl der Besucher der Website zu sammeln.

Betreibergesellschaft der Google-Analytics-Komponente ist die Google Inc., 1600 Amphitheatre Pkwy, Mountain View, CA 94043-1351, USA.

Name des Cookies: _ga
Inhalte: GA1.2.1970440283.1622365906
Ablaufdatum des Cookies : 1 Jahr - Nur bei Verbindungen zur gleichen Website

Name des Cookies: _gat_gtag_UA_1602708_1
Inhalte: 1
Ablaufdatum des Cookies : 1 Minute - Nur bei Verbindungen zur gleichen Website

Name des Cookies: _gid
Inhalte: GA1.2.1949554392.1622365906
Ablaufdatum des Cookies : 24 Stunden - Nur bei Verbindungen zur gleichen Website

Name des Cookies: chimpstatic
Inhalte: E-Mail Adresse bei Newsletter anmeldung
Ablaufdatum des Cookies : 24 Stunden - Nur bei Verbindungen zur gleichen Website

Zusätzliche Cookies

Diese Website verwendet die folgenden zusätzlichen Cookies:

Name des Cookies: pll_language
Cookie zur Verarbeitung eines mehrsprachiges System. Inhalte auf de / en / fr - Ablaufdatum 1 Jahr - Nur bei sicheren Verbindungen zur gleichen Website

Name des Cookies: moove_gdpr_popup
Cookie zur Speicherung der Funktion der Cookieseinstellung - Ablaufdatum 1 Jahr - Nur bei Verbindungen zur gleichen Website