Tutorial: Einbindung von Content-Seiten per jQuery-Overlay

05.10.2010 16:27
von Jan Griesel

Seit einiger Zeit ist es in Mode gekommen, besonders wichtige Informationen am linken oder rechten Browser-Rand per Button zugänglich zu machen. Dadurch wird das bestehende Webshop-Layout nicht beeinflusst, sondern nur erweitert. Dieses Tutorial beschreibt die einzelnen Arbeitsvorgänge, um einen entsprechenden Button integrieren zu können. Die dabei verwendeten CSS-Angaben müssen dabei natürlich auf Ihre Bedürfnisse angepasst werden.

Der erste div-Container ist Ihr Button, der nun immer auf der linken Seite Ihrer Webseite angezeigt wird. Der div-Container mit der id=“overlay“ erscheint nur, wenn der Button im ersten Container per Klick aktiviert wurde.

1. 1. Grundvoraussetzung für dieses Tutorial ist: das MainLayout_Standalone muss leer sein. Dies können Sie im eingeloggten Zustand prüfen. Öffnen Sie dazu das Menü Layout > Layout-Generator.

      Nun wählen Sie links im ersten Dropdown-Menü Layout Ihr Design aus und im zweiten Bereich Seiten-Layout das Template MainLayout_Standalone. Das nun geöffnete Bearbeitungsfenster sollte bis auf die Variable [MainColumn] nichts enthalten.

   2. Öffnen Sie nun das Menü Content > Einstellungen > Formulare. Dort legen Sie nun ein neues Formular mit dem Namen „Feedback“ an. Füllen Sie die Felder aus, die für Ihr Feedback-Formular benötigt werden und speichern Sie das Formular durch Klick auf das Speichern-Symbol.
   3. Nun legen Sie eine Content-Seite an. Öffnen Sie dazu das Menü Content > Content-Seiten bearbeiten > Conten-Seiten anzeigen. Legen Sie hier nun eine neue Content-Seite mit dem Namen Feedback an. Klicken Sie dazu auf das Plus-Symbol in der oberen linken Ecke.
   4. Klicken Sie nun am Anfang der Zeile der neuen Content-Seite auf das Ordner-Symbol (blauer Ordner), um die Content-Seite zu bearbeiten.
   5. Im geöffneten Bearbeitungsfenster sehen Sie oben links das Speichern-Symbol. Rechts daneben können Sie in dem Dropdown-Menü den Editor auswählen. Stellen Sie diesen nun auf Texteditor und fügen Sie den folgenden Code ein:

1. 1. Danach klicken Sie oben auf das Tab Einstellungen. Dort gibt es die Option Seiten-Layout. Hier wählen Sie nun MainLayout_Standalone aus. Im Bereich Formular einfügen wählen Sie noch Feedback aus und speichern Ihre Auswahl durch Klick auf das Speichern-Symbol.
   2. Nun muss die neue Content-Seite in Ihren Webshop eingebunden werden. Dies wird über jQuery, HTML und CSS realisiert. Öffnen Sie das Menü Layout > Layout-Generator und wählen Sie im Dropdown-Menü Seiten-Layout das Template MainLayout_Content aus. Dort fügen Sie nun an oberster Position im Editorfeld folgenden Code ein:

<div class="btn_overlay">
 <a href="http://stand.alone/content/seite/" rel="#overlay" style="text-decoration: none;" id="FeedbackTriggerId">
  <img src="Pfad/zum/button" title="Was denken Sie über unseren Shop?">
 </a>
</div>

1. 1. Im zweiten Editorfeld fügen Sie bitte an letzter Position folgenden Code ein:

1. 1. Nun klicken Sie auf den Link CSS (links neben dem Dropdown-Menü). Im folgenden Bearbeitungsfenster scrollen Sie ganz nach unten und fügen folgenden Code ein:

  
  .btn_overlay { 
                    position:fixed; 
                    top:50%; 
                    margin-top:-75px; 
                    left:0;
               } 
  #overlay     { 
               background-color:#fff;
                    display:none;
                    border:1px solid #d0d0d0; 
                    padding:10px; 
                    -webkit-border-radius: 5px; 
                    -moz-border-radius: 5px; 
                    -khtml-border-radius: 5px; 
                    border-radius: 5px; 
                    -webkit-box-shadow: 0 0 10px #8f8f8f; 
                    -moz-box-shadow: 0 0 10px #8f8f8f; 
                    box-shadow: 0 0 10px #8f8f8f;
               } 
  
  #overlay .close { 
        background-image:url(/images/icons/silk/overlay_close.png ); 
                    position:absolute; 
                    right:-10px; 
                    top:-10px; 
                    cursor:pointer; 
                    height:35px; 
                    width:35px; 
                  } 
  
  .contentWrap   { 
        height:350px;
                    width:500px; 
                 } 
  
  img  { border:0; }
  

1. Sie bekommen nun an der linken Seite einen Button angezeigt, der durch eine Überlagerung oberhalb Ihres normalen Contents erscheint. Sie sollten noch beim Einbinden des Codes im Template Mainlayout_Content daran denken, eine Button-Grafik einzufügen. Mit passender Beschriftung natürlich. Um Ihren Button immer mittig an der linken Seite darzustellen, gilt es, je nach Buttongröße, den Wert margin-top: anzupassen. Dieser Wert muss immer halb so groß sein, wie Ihr Button hoch ist. Wenn Ihr Button also 150px hoch ist, muss der Wert auf -75px gesetzt sein. Wenn der Button 100px hoch ist, muss der Wert auf -50px gesetzt sein usw.