Popup Warenkorb

Archive Shopware 3.5
1

Ist es möglich das Warenkorb-Popup abzustellen?

2

Guck mal nach $.modal(result, '', modalConfig); $('#lbOverlay').css('opacity', '0').show().fadeTo('fast', '0.3'); in der jquery.shopware.js unter der Funktion $.basket Beide auskommentieren müsste eigentlich schon reichen. Gruß Patrick

3

[quote=“Patrick”]Guck mal nach $.modal(result, '', modalConfig); $('#lbOverlay').css('opacity', '0').show().fadeTo('fast', '0.3'); in der jquery.shopware.js unter der Funktion $.basket Beide auskommentieren müsste eigentlich schon reichen. Gruß Patrick[/quote] Nein, das reicht nicht… Damit wird bloß der abdeckende Hintergrund des Warenkorb-Popups erzeugt… Die ultimative Brutalo-Lösung: Den Inhalt der Datei “frontend\checkout\ajax_add_article.tpl” löschen… (Oder in “{if false}{/if}” einschließen…) Dann hat der Shop nichts mehr was er anzeigen kann…

1 „Gefällt mir“
4

Hallo! Danke für die Ansätze! Wenn ich es so machen wie du (avenger) es sagst, dann kommt statt dem Popup ein kleiner schwarzer Balken runter! Also nicht die optimale Lösung! Es soll halt nix passieren, ausser dem Adden im Warenkorb!

5

[quote=“baschti”]Hallo! Danke für die Ansätze! Wenn ich es so machen wie du (avenger) es sagst, dann kommt statt dem Popup ein kleiner schwarzer Balken runter! Also nicht die optimale Lösung! Es soll halt nix passieren, ausser dem Adden im Warenkorb![/quote] Den kannst Du per CSS platt machen…

6

So weit so gut, aber die AnmeldeBox benutzt den selben css code! Mist!

7

[quote=„baschti“]So weit so gut, aber die AnmeldeBox benutzt den selben css code! Mist![/quote] Auch kein Problem… Die Anmeldebox und der Checkout verwenden ja unterschiedliche Controller… Und da im „Body“-Tag auch die CSS-Klasse „ctl_{Controller}“ definiert ist (was mir schon immer gezeigt hat, dass die Shopware AG sich richtig Gedanken gemacht hat), kann man das mit dem CSS-Selektor „#body.ctl_detail …“ vor dem eigentlichen CSS nur auf diesen Fall beschränken… Mit CSS kann man wirklich jeden „Fliegenschiss“ auf dem Bildschirm stylen, und das auch noch (wie oben) situationsbezogen…

8

Haha! Und da verließen Sie Ihn! Grundkenntnisse hab ich ja, aber das scheint doch ne nummer zu hoch zu sein!

9

[quote=„baschti“]Haha! Und da verließen Sie Ihn! Grundkenntnisse hab ich ja, aber das scheint doch ne nummer zu hoch zu sein![/quote] Ach, nee, ist gar nicht so schwierig… Um das zu lösen, müssen wir die HTML-Elemente mit den CSS-Klassen „modal“ und „loadingIndicator“ dann ausblenden, wenn sie im Kontext des Controllers „detail“ auftreten. Die CSS-Klassen „modal“ und „loadingIndicator“ sind in der „plugins.css“ definiert. (Wie ist vollkommen egal). Um das Zeug nun loszuwerden kann man in „plugins.css“ oder „styles.css“ folgende CSS-Definition einbauen: body.ctl\_detail .modal, body.ctl\_detail .loadingIndicator { display:none !important; visibility:hidden !important; } Durch voranstellen von „body.ctl_detail“ vor die Klassenselektoren „.modal“ und „.loadingIndicator“ wird diese CSS-Definition eingeschränkt auf den Fall, dass sich die Elemente mit den CSS-Klassen „modal“ und „loadingIndicator“ innerhalb des „body“-Elements mit der CSS-Klasse „ctl_detail“ befinden. Wenn sich die Elemente mit den CSS-Klassen „modal“ und „loadingIndicator“ innerhalb von „body“-Elementen mit anderer CSS-Klasse befinden, dann gelten die Standard CSS-Definitionen dafür. Es lohnt sich unbedingt, sich sehr intensiv mit CSS auseinander zu setzen, man hat damit ein mächtiges Instrument für die Seitengestaltung zur Hand. Ich habe das damals mit http://www.amazon.de/Video2Brain-Die-Ku … 563&sr=1-1 gelernt…

10

waoh! cool von dir soviel hilfe zu geben! ich sehe mir das montag mal in ruhe an! grundlagen von css kann ich ja soweit, allerdings ist das ne nummer zu hoch! aber es lohnt wohl allemal sich damit ausseinander zusetzen!

11

Also! Funktioniert total super! Nur sieht der Code jetzt so aus: body.ctl\_listing .modal, body.ctl\_detail .modal, body.ctl\_listing #lbOverlay, body.ctl\_detail #lbOverlay, body.ctl\_detail .loadingIndicator, body.ctl\_listing .loadingIndicator { display:none !important; visibility:hidden !important; } Was das Problem mit sich bringt das der Vergleich der Produkte untereinander auf dem Listing jetzt auch nicht mehr geht! Wäre klasse wenn du mir dafür noch einen hint geben könntest.

12

Hey baschti, die Warenkorb-Modalbox könntest du aber einfacher deaktiveren. Du musst einfach nur das „click“-Event von der Basketform entfernen. Ist wesentlich sauberer als per CSS und !important die komplette Box auszublenden. jQuery('.basketform').unbind('submit'); Falls du im Artikel-Listing auch die Warenkorb-Modalbox deaktiveren willst, dann verwende einfach zusätzlich folgenden Code: jQuery('a.buynow').unbind('click'); Grüße und viel Erfolg, Stephan

13

[quote=„Stephan Pohl“]Hey baschti, die Warenkorb-Modalbox könntest du aber einfacher deaktiveren. Du musst einfach nur das „click“-Event von der Basketform entfernen. Ist wesentlich sauberer als per CSS und !important die komplette Box auszublenden. jQuery('.basketform').unbind('submit'); Falls du im Artikel-Listing auch die Warenkorb-Modalbox deaktiveren willst, dann verwende einfach zusätzlich folgenden Code: jQuery('a.buynow').unbind('click'); Grüße und viel Erfolg, Stephan[/quote] Denke nicht, dass das funktioniert… Denn der Popup-Warenkorb ist ja in der Shop-Antwort auf die Warenkorb-Ablage, und findet nicht zum Zeitpunkt der Warenkorbablage statt… ‚a.buynow‘ ist (laut „FireQuery“) auch nicht mit einem jQuery-Handle verknüpft.

14

[quote=„avenger“] Denke nicht, dass das funktioniert… Denn der Popup-Warenkorb ist ja in der Shop-Antwort auf die Warenkorb-Ablage, und findet nicht zum Zeitpunkt der Warenkorbablage statt… ‚a.buynow‘ ist (laut „FireQuery“) auch nicht mit einem jQuery-Handle verknüpft.[/quote] Hey avenger, schau dir bitte mal in der jquery.shopware.js die Funktion .basket.init an. Hier werden die Events Handler gesetzt: Zeile 2672 bis 2713 [code] (‚a.buynow‘).live(‚click‘, function (event) { event.preventDefault(); .ajax({ 'dataType': 'jsonp', 'beforeSend': function() { .loadingIndicator.open(); }, ‚url‘: (this).attr('href'), 'success': function (result) { .loadingIndicator.close(); .modal(result, '', modalConfig); (’#lbOverlay’).css(‚opacity‘, ‚0‘).show().fadeTo(‚fast‘, ‚0.3‘); ('.slider\_modal').ajaxSlider('locale', sliderConfig); (’.modal .close’).hide(); .basket.refreshDisplay(); } }) }); (’.basketform’).bind(‚submit‘, function (event) { event.preventDefault(); .ajax({ 'data': (this).serialize(), ‚dataType‘: ‚jsonp‘, ‚url‘: (this).attr('action'), 'beforeSend': function() { .loadingIndicator.open(); }, ‚success‘: function(result) { .loadingIndicator.close(); .modal(result, ‚‘, modalConfig); ('#lbOverlay').css('opacity', '0').show().fadeTo('fast', '0.3'); (’.slider_modal’).ajaxSlider(‚locale‘, sliderConfig); ('.modal .close').hide(); .basket.refreshDisplay(); } }); }); [/code] Prinzipiell ist deine Überlegung richtig. Der Warenkorbbutton ist aber ein Input Typ „submit“ und befindet sich in einer Form, die den Warenkorb über die Methode „addArticle“ im Controller „checkout“ in den Warenkorb legt. Durch das Binden des Events „submit“ auf die genannte Form und den Aufruf von „event.preventDefault()“ wird dieses Verhalten unterbunden. Deshalb wird auch an dieser Stelle ein AJAX Request gesendet, der als URL die Action der Form nutzt und den Inhalt (ajax_add_article.tpl) der Response (result) in einer Modalbox anzeigt ($.modal(result, ‚‘, modalConfig)). a.buynow hat einen Eventlistener, hier wird aber nicht die Methode „.bind()“ verwendet sondern „.live()“. „.live()“ bietet ein Lazy Event Binding, so dass Elemente, die per JS erstellt werden automatisch auch einen Eventlistener bekommen, falls Sie die angegebene Klasse besitzen. Auszug aus der jQuery API: .bind(): Attach a handler to an event for the elements. .live(): Attach a handler to the event for all elements which match the current selector, now and in the future. Viele Grüße, Stephan

15

[quote=“Stephan Pohl”] Prinzipiell ist deine Überlegung richtig. Der Warenkorbbutton ist aber ein Input Typ “submit” und befindet sich in einer Form, die den Warenkorb über die Methode “addArticle” im Controller “checkout” in den Warenkorb legt. Durch das Binden des Events “submit” auf die genannte Form und den Aufruf von “event.preventDefault()” wird dieses Verhalten unterbunden.[/quote] Ich habe das mal versucht, habe damit aber noch keinen Erfolg erzielt… Folgenden Code habe ich in “frontend\index\index.tpl” nach {block name='frontend\_index\_body\_inline'}{/block}eingefügt: <script type="text/javascript"> $(document).ready(function(){ $('.basketform').unbind('submit'); $('a.buynow').unbind('click'); }); </script>Dennoch ist das “submit”-Event von “basketform” immer noch an jQuery gebunden… Warum wird diese Bindung nicht gelöst???

16

Wir verwenden jQuery im noConflict-Modus, so dass nicht mehr das jQuery Objekt enthält. Probiere es mal mit einer anonymen Funktion aus: [code] (function() { (document).ready(function() { (’.basketform’).unbind(‚submit‘); ('a.buynow').unbind('click'); }); })(jQuery); [/code] Alternativ kannst du auch einfach nur die ".ready()"-Funktion von jQuery mit einen Alias verwenden: [code] jQuery(document).ready(function() { ('.basketform').unbind('submit'); (‚a.buynow‘).unbind(‚click‘); }); [/code] Viele Grüße, Stephan Pohl :shopware:

17

Vielen Dank für die viele Hilfestellung! Ihr seid klasse!

18

[quote=„Stephan Pohl“]Wir verwenden jQuery im noConflict-Modus, so dass nicht mehr das jQuery Objekt enthält.[/quote] Mmhh, das wundert mich jetzt aber... Denn ich verwende schon eine ganze Reihe von jQuery-Modulen, die die ""-Notation verwenden, und einwandfrei funktionieren… Zur Ausblendung des Warenkorbs: Die Lösung durch Deaktivieren der AJAX-Warenkorbablage (darauf läuft das „unbind“ ja letztendlich hinaus) finde ich nicht so prickelnd, weil dadurch ja dann wohl ein Seitenreload stattfindet.

19

Ich verstehe zwar weniger als die Hälfte von dem, was hier besprochen wird, aber ich habe versucht den vorgeschlagenen Code in der index.tpl unterzubringen um den Warenkorb im Header auszublenden. Hat leider nicht funktioniert. Hat jemand noch Ideen?

20

Hallo, ich würde ebenfalls gern in der Detailseite beim Klick auf „in den Warenkorb“ nicht diese Modalbox haben und auch nicht zur Kasse weitergeleitet werden. Die damals vorgeschlagene jQuery Funktion scheint es nicht mehr zu geben?

jQuery('.basketform').unbind('submit');

THX.