27.03.2020, 18:52
Banner auf allen Seiten, wenn Klick, dann Cookie setzen um für Folgeseiten auszublenden
Hallo zusammen,
hier eine Kleinigkeit, die für einen Kunden entstanden ist und evtl. für andere Shops auch interessant sein könnte.
Nur für RESPONSIVE Systeme!
Auf https://t2.responsive-shop.com/ sieht man unten ein Banner, was einfach nur ein Stück Werbung sein könnte:
Dieses ist auf allen Seiten sichtbar. Klickt man drauf wird ein Cookie gesetzt und das System weiß beim nächsten Aufruf, dass es dieses entweder gar nicht mehr oder eine kleinere Version wie diese:
anzeigen soll. Klickt man auf das kleine Banner, öffnet sich wieder das große.
Man kann es natürlich individuell anpassen.
Wer sich da selber dran versuchen möchte, hier der Code, den man dafür nur ans Ende in das Feld Fußbereich über Layout > Kopf/Fuß einstellen muss:
hier eine Kleinigkeit, die für einen Kunden entstanden ist und evtl. für andere Shops auch interessant sein könnte.
Nur für RESPONSIVE Systeme!
Auf https://t2.responsive-shop.com/ sieht man unten ein Banner, was einfach nur ein Stück Werbung sein könnte:
Dieses ist auf allen Seiten sichtbar. Klickt man drauf wird ein Cookie gesetzt und das System weiß beim nächsten Aufruf, dass es dieses entweder gar nicht mehr oder eine kleinere Version wie diese:
anzeigen soll. Klickt man auf das kleine Banner, öffnet sich wieder das große.
Man kann es natürlich individuell anpassen.
Wer sich da selber dran versuchen möchte, hier der Code, den man dafür nur ans Ende in das Feld Fußbereich über Layout > Kopf/Fuß einstellen muss:
<style>
#OL_Wrapper,#OL_WrapperK {width: 100%;position: fixed;z-index: 10001;left: 50%;transform: translate(-50%,0);bottom:0;}
#OL_Meldung,#OL_MeldungK {background: #EEEEEE;text-align:center;width:50%;min-width: 350px;box-sizing:border-box;margin: 0 auto;z-index:100000;width:100%;text-align:center;max-width: 500px;box-shadow: 2px 2px 2px 1px rgba(0,0,0,0.2);display:none;}
#OL_Meldung,#OL_MeldungK{padding: 1rem;}
#OL_Meldung p {font-size:12px;padding-right: 20px;padding-left: 20px;margin-top: -1em;}
@media (max-width: 890px) {
#OL_Meldung {width: 80%;font-size:1em;padding: 15px 20px}
}
@media (max-width: 760px) {
#OL_Meldung,#OL_MeldungK {font-size:0.8em;width: 100%;min-width: 95%;}
#OL_Wrapper,#OL_WrapperK {transform: none!important;left: 0!important;}
}
</style>
<div id=OL_Wrapper onclick="OL_Cookie('OL','1',3600);$('#OL_Wrapper').hide();"><div id=OL_Meldung>MEINE WERBUNG GROSS!
<a href="s.php?a=54"><img src=https://pic.powergap.de/zeitlose-High-Heels-rot.54t.jpg></a>
</div></div>
<div id=OL_WrapperK onclick="$('#OL_WrapperK').hide();$('#OL_Wrapper').show();$('#OL_Meldung').show();$('#OL_Meldung').addClass('animated slideInUp');"><div id=OL_MeldungK>MEINE WERBUNG KLEIN!</div></div>
<script>
function OL_Cookie(name,value,days){document.cookie = 'OL=; Max-Age=-99999999;'; var date=new Date();date.setTime(date.getTime()+(days*24*60*60*1000)); var expires='; expires='+date.toGMTString(); document.cookie=name+'='+value+expires+'; path=';}
function OL_getCookieValue(a) {var b = document.cookie.match('(^|;)s*' + a + 's*=s*([^;]+)');return b ? b.pop() : '';}
var OLcookie = window.setInterval(function(){ if(typeof $ != 'undefined'){ window.clearInterval(OLcookie);
var OL_val = OL_getCookieValue("OL");
if(OL_val!='1'){$("#OL_Meldung").show();$("#OL_Meldung").addClass("animated slideInUp");} else {$("#OL_MeldungK").show();$("#OL_MeldungK").addClass("animated slideInUp");}
],10);
</script>
#OL_Wrapper,#OL_WrapperK {width: 100%;position: fixed;z-index: 10001;left: 50%;transform: translate(-50%,0);bottom:0;}
#OL_Meldung,#OL_MeldungK {background: #EEEEEE;text-align:center;width:50%;min-width: 350px;box-sizing:border-box;margin: 0 auto;z-index:100000;width:100%;text-align:center;max-width: 500px;box-shadow: 2px 2px 2px 1px rgba(0,0,0,0.2);display:none;}
#OL_Meldung,#OL_MeldungK{padding: 1rem;}
#OL_Meldung p {font-size:12px;padding-right: 20px;padding-left: 20px;margin-top: -1em;}
@media (max-width: 890px) {
#OL_Meldung {width: 80%;font-size:1em;padding: 15px 20px}
}
@media (max-width: 760px) {
#OL_Meldung,#OL_MeldungK {font-size:0.8em;width: 100%;min-width: 95%;}
#OL_Wrapper,#OL_WrapperK {transform: none!important;left: 0!important;}
}
</style>
<div id=OL_Wrapper onclick="OL_Cookie('OL','1',3600);$('#OL_Wrapper').hide();"><div id=OL_Meldung>MEINE WERBUNG GROSS!
<a href="s.php?a=54"><img src=https://pic.powergap.de/zeitlose-High-Heels-rot.54t.jpg></a>
</div></div>
<div id=OL_WrapperK onclick="$('#OL_WrapperK').hide();$('#OL_Wrapper').show();$('#OL_Meldung').show();$('#OL_Meldung').addClass('animated slideInUp');"><div id=OL_MeldungK>MEINE WERBUNG KLEIN!</div></div>
<script>
function OL_Cookie(name,value,days){document.cookie = 'OL=; Max-Age=-99999999;'; var date=new Date();date.setTime(date.getTime()+(days*24*60*60*1000)); var expires='; expires='+date.toGMTString(); document.cookie=name+'='+value+expires+'; path=';}
function OL_getCookieValue(a) {var b = document.cookie.match('(^|;)s*' + a + 's*=s*([^;]+)');return b ? b.pop() : '';}
var OLcookie = window.setInterval(function(){ if(typeof $ != 'undefined'){ window.clearInterval(OLcookie);
var OL_val = OL_getCookieValue("OL");
if(OL_val!='1'){$("#OL_Meldung").show();$("#OL_Meldung").addClass("animated slideInUp");} else {$("#OL_MeldungK").show();$("#OL_MeldungK").addClass("animated slideInUp");}
],10);
</script>