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. 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:

    <div style="height: 30px; font-size: 18px; color: #fff; background-color: #517488; border-bottom: 1px solid #334955; padding-top: 10px;">
   		<span style="padding-left: 10px;">Wie können wir uns weiter verbessern? </span>
    </div>
    <div style="padding: 5px; line-height: 16px; margin: 15px 0 15px 0;">
    	Unser Unternehmen ist stets bemüht, sich zu verbessern. Über Vorschläge zum Sortiment oder die Usability der Seite würden wir uns sehr freuen. 
    	<br />
    	Viele Grüße
    	Team xyz
    </div>
[FORM]

6. 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.
7. 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>
    <div id="overlay">
        <div class="contentWrap"></div>
    </div>
  

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

	
<script type="text/javascript"><!--mce:0--></script>
  

9. 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; }
  

10. 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.