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

JTL-Shop Fullscreen Overlay Suche

• WAM
• JTL Shop 3 - 4 Tipps
• Montag - 29 . Januar . 2018

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.

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