Anleitung zum Erstellen eines Pop-Ups für das Shopsystem xt:Commerce

Eine häufige Kundenanforderung besteht darin, zeitlich begrenzte Aktionen oder Angebote auf der Homepage prominent so darzustellen, dass der potentielle Kunde die Information auch sicher aufnimmt.

 

Eine gute Möglichkeit, um das zu erreichen, ist zum Beispiel ein Pop-up auf der Startseite. Nur wie kann man es schnell einbauen?

Hier lesen Sie eine kurze und einfache Anleitung, wie Sie in wenigen Schritten ein attraktives Pop-up (Layer-Modul) inklusive Druck-Funktion für das Shopsystem xt: Commerce erstellen können. Der Besucher des Shops kann damit z.B. auf Aktionsangebote hingewiesen werden.

 

Hier kommen Sie direkt zum Download

 

So einfach geht es:

 

1. Schritt: Fügen Sie folgenden Code am Ende der Datei „general.js“ ein:

jQuery(document).ready(function(cash) {
if ($.cookie(‘the_cookie’)) {  }
else {
$(“a[rel*=facebox]“).facebox();
$.facebox(“#divpopup”,”facebox”,true);
$.cookie(‘the_cookie’, ‘the_value’, { expires: 1 });
setTimeout(‘$.facebox.close()’, 20000);
}
})

 

2. Schritt: Fügen Sie folgenden Code in Ihre /javascript/general.js.php-Datei vor der Zeile general.js ein:

<script type=”text/javascript” src=”templates/’ . CURRENT_TEMPLATE . ‘/javascript/facebox.js”></script>
<script src=”templates/’ . CURRENT_TEMPLATE . ‘/javascript/cookie.js”></script>

 

3. Schritt: Editieren Sie die Datei facebox.js, ersetzen Sie dabei „your_template“ mit dem Namen Ihres Templates.

loadingImage: ‘templates/your_template/img/facebox/loading.gif’,
closeImage: ‘templates/your_template/img/facebox/closelabel.gif’,
printImage: ‘templates/your_template/img/facebox/print.gif’,

 

4. Schritt: Fügen Sie bei der index.html Ihres Templates folgenden Code ein:

<div id=”divpopup” style=”display:none;”>
<p>YOUR TEXT</p>
<img src=”templates/your_template/img/demo.jpg” alt=”flyer” width=”600″ height=”350″>
</div>

Editieren Sie den Inhalt im div: Im Beispiel wird ein Bild (demo.jpg) angezeigt. Hier kann auch Text stehen oder sich ein Video befinden. Ändern Sie “your_template” mit Ihrem Template-Verzeichnis ab.

 

5. Schritt: Extrahieren Sie die Datei webtec-braun_-_xtc_frontpage_layer_popup.zip und laden Sie alle Dateien in Ihr Template-Verzeichnis.

 

6. Schritt: Ändern Sie hier die gewünschte Anzeigedauer des Popups:

setTimeout(‘$.facebox.close()’, 30000);
Ändern Sie einfach die Zahl 30000 (steht für Millisekunden) in den gewünschten Wert ab oder entfernen Sie die Zeile, wenn Sie die Anzeigedauer nicht begrenzen wollen.

 

7. Schritt: Laden Sie Ihren XTC-Shop erneut und genießen Sie!

 

 

Hier kommen Sie direkt zum Download!

• xtc javascript close popup
• bilder popup xtcmodified
• xtcmodified popup bilder
• xtcmodified content bilder auch als popup
• xtcmodified artikel popup
• xt commerce popup in gif
• xt commerce popup fenster
• xt commerce popup bild
• xt commerce layer auf startseite generieren
• seite im popup fenster xt commerce