Dokumentation für Popup (lightbox)

Transkript

1 Dokumentation für Popup (lightbox) Für das Popup muss eine kleine Anpassung im wpshopgermany Plugin vorgenommen werden und zwar in der Datei../wp-content/plugins/wpshopgermany/controllers/WarenkorbController.class.php Da der Code da leider nicht sehr übersichtlich ist suchst du besser nach folgendem Codeabschnitt: if (get_option('wpshopgermany_basketredirect') == 1) { header("location: $_SERVER['SERVER_NAME']."/".$_SERVER['PHP_SELF']."/? page_id=".get_option('wpshopgermany_basketpage')."&do=".$this->do); die(); else { header("location:".$_request['myreferer']); die(); Und ersetzt ihn mit diesem hier: if (get_option('wpshopgermany_basketredirect') == 1) { header("location: $_SERVER['SERVER_NAME']."/".$_SERVER['PHP_SELF']."/? page_id=".get_option('wpshopgermany_basketpage')."&do=".$this->do); die(); else { $suchmuster = '/\?[a-z]*\=[a-z]*/'; $_REQUEST['myReferer'] = preg_replace($suchmuster, "", $_REQUEST['myReferer']); header("location:".$_request['myreferer']."?lightbox=an"); die(); Den grünen Teil habe ich hinzugefügt und bewirkt folgendes: In $_REQUEST['myReferer'] steht die Url des Artikel den man eben gekauft hat und diesem wird?lightbox=an hinzugefügt um ebenen einen abfragbaren Parameter zu haben da header alle vorherigen Parameter löscht Folgender Code dient dazu, das keine fehlerhafte URL erzeugt wird. $suchmuster = '/\?[a-z]*\=[a-z]*/'; $_REQUEST['myReferer'] = preg_replace($suchmuster, "", $_REQUEST['myReferer']); Dieser Teil entfernt übergebene Parameter aus der url. Steht dort zum Beispiel domain.de/warenkorb/?do=remove würde ohne die Entfernung die url domain.de/warenkorb/?do=remove?lightbox=an beim einkaufen erzeugt werden und das kann nicht abgefragt werden bzw. es kann auch zu fehlern kommen wie Seite nicht gefunden Die restlichen Änderungen sind in der Theme Hab mich hier bedient - > Aber musste noch mit jquery.noconflict(); erweitert werden damit die anderen scripte

2 nicht blockiert werden. Falls du mal den code einsetzt wo noch keine jquery eingebunden wird musst du vor <script type="text/javascript"> noch foldes einfügen <script type="text/javascript" src=" Du kannst auch mehrere verschiedene Popups gestalten und durch einen Link aufrufen oder durch bestimmta abfragen öffnen In der footer.php einfach folgenden code vor </body> einfügen <a href="#?w=350" rel="lightbox" class="poplight"></a> <div id="lightbox" class="lightbox_block"> <p> Ihre Uhr wurde in den Warenkorb gelegt! </p> <p><a href="warenkorb/" style="font-size:1.3em; text-decoration:underline; marginbottom:10px;"><b>zum Warenkorb</b></a><br> oder <br> <a href="?do=einkaufen" style="text-decoration:underline"><b>weiter einkaufen</b></a> </p> </div> <script type="text/javascript"> var $j = jquery.noconflict(); $j(document).ready(function(){ $j.fn.popopen = function(){ popid = $j(this).attr('rel'); //Get lightbox Name popurl = $j(this).attr('href'); //Get lightbox href to define size //Pull Query & Variables from href URL query= popurl.split('?'); dim= query[1].split('&'); popwidth = dim[0].split('=')[1]; //Gets the first query string value

3 //Fade in the lightbox and add close button $j('#' + popid).fadein().css({ 'width': Number( popwidth ) ).prepend('<a href="?lightbox=aus" class="close"><img src="<?php bloginfo('template_directory');? >/close_pop.png" class="btn_close" title="close Window" alt="close" /></a>'); //Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css var popmargtop = ($j('#' + popid).height() + 80) / 2; var popmargleft = ($j('#' + popid).width() + 80) / 2; //Apply Margin to lightbox $j('#' + popid).css({ 'margin-top' : -popmargtop, 'margin-left' : -popmargleft ); //Fade in Background $j('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag. $j('#fade').css({'filter' : 'alpha(opacity=80)').fadein(); //Fade in the fade layer ; //When you click on a link with class of poplight and the href starts with a # $j('a.poplight[href^=#]').click(function() { $j(this).popopen(); //Run popopen function on click return false; ); <?php if ($_REQUEST['lightbox'] == "an" ) {?> $j('a.poplight[href=#?w=350]').popopen(); //Run popopen function once on load <?php?> //Close lightboxs and Fade Layer $j('a.close, #fade').live('click', function() { //When clicking on the close or fade layer... $j('#fade,.lightbox_block').fadeout(); //fade them both out $j('#fade').remove(); return false; );

4 popopen ); </script> Und in der styles.css ganz unten diesen Code einfügen /* */ /* [CSS POPUP] */ /* */ #fade { display: none; background: #000; position: fixed; left: 0; top: 0; z-index: 10; width: 100%; height: 100%; opacity:.70; z-index: 9999;.lightbox_block{ display: none; background: #fff; padding: 20px; border: 5px solid #ddd; float: left; font-size: 1.2em; position: fixed; top: 50%; left: 50%; z-index: 99999; -webkit-box-shadow: 0px 0px 20px #000; -moz-box-shadow: 0px 0px 20px #000; box-shadow: 0px 0px 20px #000; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; img.btn_close {

5 float: right; margin: -45px -45px 0 0;.lightbox p { padding: 5px 10px; margin: 5px 0; /*--Making IE6 Understand Fixed Positioning--*/ *html #fade { position: absolute; *html.lightbox_block { position: absolute;