Offcanvas Warenkorb abändern

Hallo,

Man kann den Offcanvas Warenkorb ja so einstellen ob er als Popup aufgeht oder auf der rechten Seite erscheint sobald man ein Produkt in den Warenkorb gelegt hat. Mich nervt bei beiden Lösungen vorallem dieser schwarzer overlay Effekt - kann man den irgendwo abstellen? Oder gibt es ein Plugin das einfach nur auf der Produktseite sagt, dass das Produkt den Warenkorb hinzugefügt worden ist - ohne das erst ein schwarzer overlay Effekt kommt, den man wegklicken muss?

 

 

 

In meinem Shop habe ich das programmieren lassen (müssen). Beim Einkauf mehrerer Positionen fördert die Standardlösung meiner Meinung nicht gerade den Bestellfluss.

@FranzderFranke schrieb:

Hallo,

Man kann den Offcanvas Warenkorb ja so einstellen ob er als Popup aufgeht oder auf der rechten Seite erscheint sobald man ein Produkt in den Warenkorb gelegt hat. Mich nervt bei beiden Lösungen vorallem dieser schwarzer overlay Effekt - kann man den irgendwo abstellen? Oder gibt es ein Plugin das einfach nur auf der Produktseite sagt, dass das Produkt den Warenkorb hinzugefügt worden ist - ohne das erst ein schwarzer overlay Effekt kommt, den man wegklicken muss?

Hallo,

eigentlich dürfte es schon ausreichen, eine eigene JavaScript-Datei im Theme einzubinden: Using CSS and JavaScript in themes . In diese Datei müsste dann einfach nur folgender Inhalt hinein:

;(function ($) {
    'use strict';

    $.overridePlugin('swAddArticle', {
        init: function () {
            var me = this,
                opts = me.opts;

            // Applies HTML data attributes to the current options
            me.applyDataAttributes();

            opts.showModal = false;

            // Will be automatically removed when destroy() is called.
            me._on(me.$el, opts.eventName, $.proxy(me.sendSerializedForm, me));

            // Close modal on continue shopping button
            $('body').delegate('*[data-modal-close="true"]', 'click.modal', $.proxy(me.closeModal, me));

            StateManager.addPlugin(opts.productSliderSelector, 'swProductSlider');
        }
    });
})(jQuery);

Schon müsste es funktionieren wie gewünscht, dass die Aktion trotzdem weiterhin ausgeführt wird, aber die Modalbox nicht angezeigt wird.

Beste Grüße

Sebastian

1 „Gefällt mir“

 

@sschreier schrieb:

@FranzderFranke schrieb:

Hallo,

Man kann den Offcanvas Warenkorb ja so einstellen ob er als Popup aufgeht oder auf der rechten Seite erscheint sobald man ein Produkt in den Warenkorb gelegt hat. Mich nervt bei beiden Lösungen vorallem dieser schwarzer overlay Effekt - kann man den irgendwo abstellen? Oder gibt es ein Plugin das einfach nur auf der Produktseite sagt, dass das Produkt den Warenkorb hinzugefügt worden ist - ohne das erst ein schwarzer overlay Effekt kommt, den man wegklicken muss?

Hallo,

eigentlich dürfte es schon ausreichen, eine eigene JavaScript-Datei im Theme einzubinden: https://developers.shopware.com/designers-guide/css-and-js-files-usage/#add-javascript-files: . In diese Datei müsste dann einfach nur folgender Inhalt hinein:

;(function ($) {
‚use strict‘;

$.overridePlugin(‚swAddArticle‘, {
init: function () {
var me = this,
opts = me.opts;

// Applies HTML data attributes to the current options
me.applyDataAttributes();

opts.showModal = false;

// Will be automatically removed when destroy() is called.
me._on(me.$el, opts.eventName, $.proxy(me.sendSerializedForm, me));

// Close modal on continue shopping button
$(‚body‘).delegate(‚*[data-modal-close=„true“]‘, ‚click.modal‘, $.proxy(me.closeModal, me));

StateManager.addPlugin(opts.productSliderSelector, ‚swProductSlider‘);
}
});
})(jQuery);

Schon müsste es funktionieren wie gewünscht, dass die Aktion trotzdem weiterhin ausgeführt wird, aber die Modalbox nicht angezeigt wird.

Beste Grüße

Sebastian

Vielen Dank für deine Hilfe, leider habe ich es noch nicht hinbekommen den script zum laufen zu bekommen - ist mein erstes mal mit Shopware :slight_smile:

  • Datei als test.js in das folder js hochgeladen und dann in der theme.php ganz unten den Code eingefügt:

    protected $javascript = array(
    ‚src/js/test.js‘
    );

Bekomme da nur einen weißen Bildschirm ohne Fehlermeldung. Ich weiß nicht ob ich das jetzt falsch eingbunden habe.

@FranzderFranke schrieb:

 

@sschreier schrieb:

@FranzderFranke schrieb:

Hallo,

Man kann den Offcanvas Warenkorb ja so einstellen ob er als Popup aufgeht oder auf der rechten Seite erscheint sobald man ein Produkt in den Warenkorb gelegt hat. Mich nervt bei beiden Lösungen vorallem dieser schwarzer overlay Effekt - kann man den irgendwo abstellen? Oder gibt es ein Plugin das einfach nur auf der Produktseite sagt, dass das Produkt den Warenkorb hinzugefügt worden ist - ohne das erst ein schwarzer overlay Effekt kommt, den man wegklicken muss?

Hallo,

eigentlich dürfte es schon ausreichen, eine eigene JavaScript-Datei im Theme einzubinden: https://developers.shopware.com/designers-guide/css-and-js-files-usage/#add-javascript-files: . In diese Datei müsste dann einfach nur folgender Inhalt hinein:

;(function ($) {
‚use strict‘;

$.overridePlugin(‚swAddArticle‘, {
init: function () {
var me = this,
opts = me.opts;

// Applies HTML data attributes to the current options
me.applyDataAttributes();

opts.showModal = false;

// Will be automatically removed when destroy() is called.
me._on(me.$el, opts.eventName, $.proxy(me.sendSerializedForm, me));

// Close modal on continue shopping button
$(‚body‘).delegate(‚*[data-modal-close=„true“]‘, ‚click.modal‘, $.proxy(me.closeModal, me));

StateManager.addPlugin(opts.productSliderSelector, ‚swProductSlider‘);
}
});
})(jQuery);

Schon müsste es funktionieren wie gewünscht, dass die Aktion trotzdem weiterhin ausgeführt wird, aber die Modalbox nicht angezeigt wird.

Beste Grüße

Sebastian

Vielen Dank für deine Hilfe, leider habe ich es noch nicht hinbekommen den script zum laufen zu bekommen - ist mein erstes mal mit Shopware :)

  • Datei als test.js in das folder js hochgeladen und dann in der theme.php ganz unten den Code eingefügt:

protected $javascript = array(
‚src/js/test.js‘
);

Bekomme da nur einen weißen Bildschirm ohne Fehlermeldung. Ich weiß nicht ob ich das jetzt falsch eingbunden habe.

Hallo,

hast du die Zeilen in der Theme.php - Datei (die aus deinem eigenen Theme) zwischen dem protected $license - Eintrag und vor dem public function createConfig - Eintrag eingefügt?

Versuch es mal mit:

protected $javascript = [
     'src/js/test.js'
];

Und leg die Datei dann unter diesem Pfad ab: „/themes/Frontend/EIGENES_THEME/frontend/_public/src/js“.

Beste Grüße

Sebastian

du musst den Eintrag auf jeden Fall vor der letzten schließenden Klammer haben, und da du doch sicher dein eigenes Template erstellt hast, musst du auch den Skript in deinen js-Ordner kopieren und auch die Änderung der Theme.php in deinem Template vornehmen,

Uwe

 

 

Irgendwie bin ich zu blöd, ich bekomme das einfach nicht hin. Habe schon 100 Plugins damals bei Osscomerce händisch „eingearbeitet“ aber hier sehe ich seid Stunden nur eine „weiße Seite“ wenn ich versuche den Code einzufügen.

Habe kein eigenes Template sondern benutze: themes/Frontend/Responsive

 

Vielleicht mache ich auch ein absoluten Anfänger Fehler , da ich mich mit Javascript gar nicht auskenne. Ich benutze die neuste Shopware Version. Habe auch gesehen das man im Backend im Theme eine Css oder js script hinzufügen kann - muss ich da noch etwas einfügen?

@FranzderFranke schrieb:

Irgendwie bin ich zu blöd, ich bekomme das einfach nicht hin. Habe schon 100 Plugins damals bei Osscomerce händisch „eingearbeitet“ aber hier sehe ich seid Stunden nur eine „weiße Seite“ wenn ich versuche den Code einzufügen.

Habe kein eigenes Template sondern benutze: themes/Frontend/Responsive

 

Vielleicht mache ich auch ein absoluten Anfänger Fehler , da ich mich mit Javascript gar nicht auskenne. Ich benutze die neuste Shopware Version. Habe auch gesehen das man im Backend im Theme eine Css oder js script hinzufügen kann - muss ich da noch etwas einfügen?

Hallo,

erstell einfach über „Einstellungen“ -> „Theme Manager“ ein eigenes Theme, was vom Responsive Theme ableitet und nehme dort Änderungen vor - alle anderen Änderungen werden beim nächsten Update so und so wieder überschrieben (also die, die du im Responsive Theme von Shopware machst).

Einfacherer als in den Dokumentationen von Shopware kann man es leider nicht mehr erklären.

Sonst einfach mal die Debug - Parameter von Shopware der eigenen config.php - Datei ergänzen: Debugging Shopware .

Beste Grüße

Sebastian

1 „Gefällt mir“

Ich probier das gleich mit dem eigenen Template aus.

 

Wäre super wenn du nochmal auf mein Screenshot schaust ob dir da ein Fehler auffällt

 

@FranzderFranke schrieb:

Wäre super wenn du nochmal auf mein Screenshot schaust ob dir da ein Fehler auffällt

 

image

Hallo,

1.) nie im Leben ist das die Theme.php - Datei deines eigenen Themes, den diese hätte nur wenige Zeilen.

2.) die $javascript - Variable doppelt zu hinterlegen kann ja nur zu Fehlern führen…

3.) Änderungen in der Bare- oder Responsive - Theme.php - Datei werden bei jedem Update überschrieben - dort Änderungen zu machen, wäre also sinnfrei.

Beste Grüße

Sebastian

1 „Gefällt mir“

Hallo Sebastian,

Jetzt hat es geklappt, hatte den Responsive Ordnern per FTP verdoppelt. Wenn man im Backend einfach ein neues Template erstellt , - geht es genaus so wie du es geschrieben hast. Danke nochmal für deine Geduld.

So 100 % bin ich aber mit der Lösung noch nicht zufrieden. Kann man statt dem Popup “Artikel x wurde in den Warnkorb gelegt” dies nicht einfach im  oberen Header anzeigen lassen? ( Wie z.B. bei Zalando: ZALANDO)

Jetzt kommt halt gar keine Rückmeldung ob der Artikel im Warenkorb ist

Generell macht Shopware einen super Eindruck aber dieser Overlay Effekt würden meine (alte) Kundschaft sehr abschrecken.Das rechte Offcanvas Menü ist ja auch eine gute Idee aber warum mit diesem Overlay? Gibt es da kein Plugin das dies irgendwie anpasst?

 

Gruß Franz

 

 

@FranzderFranke schrieb:

Hallo Sebastian,

Jetzt hat es geklappt, hatte den Responsive Ordnern per FTP verdoppelt. Wenn man im Backend einfach ein neues Template erstellt , - geht es genaus so wie du es geschrieben hast. Danke nochmal für deine Geduld.

So 100 % bin ich aber mit der Lösung noch nicht zufrieden. Kann man statt dem Popup „Artikel x wurde in den Warnkorb gelegt“ dies nicht einfach im  oberen Header anzeigen lassen? ( Wie z.B. bei Zalando: https://www.zalando.de/reebok-classic-classic-face-fashion-sneaker-low-re011s04d-i11.html)

Jetzt kommt halt gar keine Rückmeldung ob der Artikel im Warenkorb ist

Generell macht Shopware einen super Eindruck aber dieser Overlay Effekt würden meine (alte) Kundschaft sehr abschrecken.Das rechte Offcanvas Menü ist ja auch eine gute Idee aber warum mit diesem Overlay? Gibt es da kein Plugin das dies irgendwie anpasst?

 

Gruß Franz

Hallo,

das freut mich, dass mein Lösungsvorschlag nun funktioniert.

Durchaus wäre die Lösung noch optimierbar - man könnte beispielsweise an einem gewünschten Bereich auf der Artikel-Detailseite einen ausgeblendeten div-Bereich updatesicher im eigenen Theme hinterlegen (Text als Textbaustein für die Übersetzbarkeit):

     {s name="AddArticleSuccessMessage"}Der Artikel wurde erfolgreich in den Warenkorb gelegt{/s} 

und dann einfach die Funktion so anpassen, dass diese beim Legen eines Artikels in den Warenkorb den ausgeblendeten div-Bereich einblendet:

;(function ($) {
    'use strict';

    $.overridePlugin('swAddArticle', {
        init: function () {
            var me = this,
                opts = me.opts;

            // Applies HTML data attributes to the current options
            me.applyDataAttributes();

            opts.showModal = false;

            // Will be automatically removed when destroy() is called.
            me._on(me.$el, opts.eventName, $.proxy(me.sendSerializedForm, me));

            // Close modal on continue shopping button
            $('body').delegate('*[data-modal-close="true"]', 'click.modal', $.proxy(me.closeModal, me));
  
            if($('#add_article_success_message').hasClass('is--hidden')){
                 $('#add_article_success_message').removeClass('is--hidden');
            }

            StateManager.addPlugin(opts.productSliderSelector, 'swProductSlider');
        }
    });
})(jQuery);

Und schon dürfte der Zalando - Effekt da sein. Auf jeden Fall sollte aber auch darauf geachtet werden, dass es auch bei allen Geräten (z.B. Smartphone) noch gut sichtbar ist.

Beste Grüße

Sebastian

Also Sebastian erst mal großes Lob für deinen kostenlosen Support Sonntag Nachts! Werde es später direkt mal ausprobieren.

An deiner Stelle würde ich dafür ein Plugin entwicklen und es zu Verkauf anbieten, ich glaube dafür würden viele Leute Geld ausgeben.

Die meisten Kunden sind einen Wareneinkauf über Amazon / Zahlando ect. gewöhnt und erwarten eine ähnliche Kaufabwicklung. Die “Offcanvas” mit diesen Overlays ist einfach zu gewöhnungsbedürftig auch wenn es das rechte Menü funktionell ist.

@FranzderFranke schrieb:

Also Sebastian erst mal großes Lob für deinen kostenlosen Support Sonntag Nachts! Werde es später direkt mal ausprobieren.

An deiner Stelle würde ich dafür ein Plugin entwicklen und es zu Verkauf anbieten, ich glaube dafür würden viele Leute Geld ausgeben.

Die meisten Kunden sind einen Wareneinkauf über Amazon / Zahlando ect. gewöhnt und erwarten eine ähnliche Kaufabwicklung. Die „Offcanvas“ mit diesen Overlays ist einfach zu gewöhnungsbedürftig auch wenn es das rechte Menü funktionell ist.

Hallo Frank,

das wäre durchaus denkbar, das auch als Plugin über den Shopware Store anzubieten. Es ist eben nur die Frage, wieviel Leute dafür wirklich Geld ausgeben würden und wieviele dann wieder sagen würden, dass dies doch eine „Grundfunktion“ und somit kostenlos sein sollte und es dann schon bei einem geringen Preis nicht erwerben.

Ebenso müsste man sich dann am besten auch verschiedene „Gestaltungsvarianten“ überlegen, sodass man nicht nur eine Möglichkeit (neben den im System vorhandenen) hat. Die Zalando - Variante wäre ja schonmal ein guter Ansatz - auch wenn man dort nicht sieht, was man im Warenkorb hat, sondern nur die Meldung erhält, das es sich jetzt im Warenkorb befindet.

Beste Grüße

Sebastian

Ich schaue mir auch grad mehrere Shopsysteme an, und bei jedem (JTL Shop / Magento 2 ) fehlt etwas, das man Nachkaufen muss. Shopware bietet da in der Grundausführung aber schon deutlich mehr als die anderen - bei der Warenkorb Einstellung sind die Entwickler aber über das Ziel hinaus geschossen und hier sollte es ein Plugin geben das ein paar Varianten zur Auswahl hat. Z.B. würde ich gerne sehen:

Der Klassiker (z.B. Amazon):

Man legt einen Artikel in den Einkaufswagen und man wird direkt zu einer Vorstufe des Einkaufswagen weitergeleitet. (Direkt zum Warenkorb ist aber auch in Ordnung, da man dort auch die Funktionen “ähnlich Artikel” ect einstellen kann.

Verkaufsförderlicher ist aber meiner Meinung nach einfach nur eine einfache Rückmeldung so wie du mir den Code zugeschickt hast.

Ich würde gerne auch noch den rechten Offcanvas Warenkorb sehen, aber ohne diesen dunklen Overlay Effekt, so dass nur der Warenkorb kurz angezeigt wird und dann wieder verschwindet

 

 

Wegen dem Div einbinden, welche Datei muss ich bearbeiten wenn ich das Textfeld direkt im Produkt Feld haben möchte (wie bei Zalando)

  • Der Textbaustein wird dann sicherlich im Backend erstellt.