POP UP Layer für Newsletter oder Versandkostenhinweise?

[toppi]

Hallo,
beim Googeln bin ich gerade auf eine Seite gestoßen, bei der ein Shop einen "Layer" an der linken Seite integriert hat und zwar für "Newsletter" und die "Versandkosten".
Zu sehen ist das hier bei diesem Shop http://goo.gl/Jyqzvm

Ist so etwas hier auch mit dem modified-Shop möglich? Hat einer so etwas gemacht und falls ja, wie?

Danke im voraus für Möglichkeiten und Hinweise.

MFG

Linkback: https://www.modified-shop.org/forum/index.php?topic=31394.0

[Guenter59]

Hi Toppi
Das läßt sich selbstverständlich machen. Muß sich nur noch jemand finden, der Lust dazu hat.
Eventuell gibt es auch Ähnliches, was man anpassen kann.

Hier ( auf dieser Seite ) gibt es ja auch sowas ( Feedback - <--------  links ). Fährt nur nicht so weit aus

Gruß
GMS

[Guenter59]

Nochmal Hi Toppi
Dafür gibt es verschiedene Ansätze ( javascript/jquery ).
Es wäre aber sogar mit reinem css machbar.
GMS

[toppi]

@Guenter59

Danke erstmal

Hier ( auf dieser Seite ) gibt es ja auch sowas ( Feedback - <--------  links ). Fährt nur nicht so weit aus

Dieses mit dem Feedback habe ich bereits gesehen. Ich vermute, dass dies ähnlich ist, wie mit den Bookmarks am rechten Bildschirmrand.

Dafür gibt es verschiedene Ansätze ( javascript/jquery ).
Es wäre aber sogar mit reinem css machbar.

Dies mit den Bookmarks habe ich bereits im Shop umgesetzt.

Hat zufällig jemand so etwas mit einem ausfahrenden Banner, wie in dem angegebenen Link umgesetzt?

Danke für entsprechende Tipps im voraus.

MFG

[karsta.de]

Hallo Tobbi,
habe dir hier mal eine ausfahrende Box mit css umgesetzt. Eigentlich ganz einfach an deine Wünsche anzupassen.
BG kgd

[toppi]

@kgd

Danke für den Dateianhang.

Habe dies soeben auch schon ausprobiert. Änderungen der Farbe, Breite, Höhe usw. alles kein Problem,
nur mit der ausfahrenden Box ist dies so eine Sache, denn letztendlich verweist diese auf die "BOX NEWSLETTER", welche bereits auch im Footer unten integriert ist.
Eine entsprechend neue Box hierfür ist für mich sonst kein Problem, allerdings weiß ich nicht, wie ich es realisieren kann, dass auf Klick bzw. Ausfahren, dann die Newsletter-Anmeldeseite erscheint (da, wo man auch den Sicherheitscode einträgt), siehe Screenshot im Anhang.

Eigentlich wollte ich genau so ein ausfahrendes Newsletter-Bild mit senkrechter Schrift (Newsletter-Anmeldung) wie im Beispiel-Link, siehe auch im Anhang den dafür vorgesehenen Gutschein.

Ich hoffe, ich habe das verständlich ausgedrückt und mir kann hier jemand dann behilflich sein.
Danke auch im voraus für Unterstützung.

[Guenter59]

Hi Toppi
Das sollte wohl auch nur als Vorlage dienen.
1. <div id="fahrendebox">{$box_NEWSLETTER}></div> : irgendwo in index.html
2. {$box_NEWSLETTER} ersetzen durch <a href = "newsletter.php">Hier kommt ein Bild mit dem quer gestellten "Newsletter " hin </a>
3. Die style-sachen in die stylesheet.css

So in etwa

Eigentlich müßte auch noch die Größe der Seite abgefragt werden, sonst ist der "Layer " bei kleinen Fenstern auf der Shop-Seite und nicht daneben.

Das könntest Du z.B. dadurch lösen, daß Du ein Mediaquery in die stylesheet.css machst und die style-Sachen dann da rein machst.
So in etwa:

Code: CSS  [Auswählen]

 #fahrendebox {
display:none;
}
@media (min-width: 1050px){
#fahrendebox {position:fixed;top:50px;left:0px;width:50px;height:100px;z-index:0;background-color:#FF9933; overflow:hidden;display:block;}
#fahrendebox:hover {width:300px;height:100px;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}
}
 

Gruß
GMS

PS:Ich habe es jetzt nicht in allen Browsern ausprobiert. Das solltest Du noch machen.

[toppi]

Danke , hat mir ja schon prima geholfen, nur noch ein kleines Problem,
es wird der linke Teil meines Layers angezeigt, siehe hier: http://goo.gl/e3RXKZ

und kann ich dann evtl. noch einen Text auf der Anmeldeseite hinzufügen:

z.B.
Für Ihre Anmeldung erhalten Sie einen 5-Euro-Gutschein geschenkt.
Diesen erhalten Sie nach erfolgreicher Bestätigung des Newsletters.

Danke im voraus
MFG

[karsta.de]

Ich würde es so umsetzen.
Einmal eine Box, wenn man wie du es mit Bild umsetzen will und einmal die Möglichkeit einen Text zu verwenden bzw. den Inhalt einer Box.

Um zusätzlich Text auf die Anmeldeseite hinzuzufügen, solltest du das vielleicht mit einer zusätzlichen Textvariable in der temlates/xtc5/module/create_account.html machen.

BG kgd

[toppi]

@kgd

Die ausfahrende Box wird nun richtig angezeigt.
Was mir jetzt aber nur noch fehlt ist, wenn die Box ausgefahren wird, die Verlinkung zur Newsletter-Anmeldeseite.

Wie kann ich das hinbekommen?

Danke im voraus.

MFG

[Guenter59]

@Toppi

die Verlinkung zur Newsletter-Anmeldeseite.

Hatte ich Dir 3 Beiträge vorher schon geschrieben.
GMS

[toppi]

Habe es so wie 3 Beiträge vorher erwähnt eingebaut:
Das steht bei mir auf der index.html
<div id="fahrendebox"><a href = "newsletter.php"><img src="{$tpl_path}img/layer_newsletter_gutschein.png" title="Newsletter Gutschein erhalten" alt="Newsletter Werbegutschein"  /></a></div>

Nur  dann ist die Ansicht der Box nicht mehr richtig.

Leider weiß ich nicht, was ich da ändern muss.

MFG

[Guenter59]

Hi toppi
Stimmt, da habe ich was geändert, aber Dir nicht mitgeteilt
css noch mal austauschen
Dafür geht es jetzt auch langsam wieder zurück 

Code: CSS  [Auswählen]

 
 #fahrendebox {
display:none;
}
@media (min-width: 1050px){
#fahrendebox {
position:fixed;
top:50px;
left:-425px;
z-index:0;
background-color:#FF9933;
overflow:hidden;
display:block;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}
#fahrendebox:hover {
left:0px;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}
}

 

Greetz
GMS

PS:left und top mußt Du ( eventuell ) an Deine Bedürfnisse anpassen

[Guenter59]

Das sieht doch jetzt gut aus!
top noch wieder auf 180px und es passt
GMS

[toppi]

Super einwandfrei