Tutorial: Einbindung von Content-Seiten per jQuery-Overlay

Foto Jan Griesel
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. 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:
Wie können wir uns weiter verbessern?
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.
Viele Grüße Team xyz
    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:

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

    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.


Vorheriger Blog

Die Webinar-Themen (ab 16.00 Uhr): Quick-Start-Guide, Payment und Offene Fragerunde

Zum vorherigen Blog

Nächster Blog

MeinPaket.de: plentymarkets ist vom Start an mit dabei!

Zum nächsten Blog

Nach oben