Neu Shop5 Plugin: Dezente Meldung statt großer Dialog "Artikel wurde dem Warenkorb hinzugefügt"

fibergirl

Sehr aktives Mitglied
14. April 2016
824
249
Nicht für jeden Shop und jede Branche ist die große modale Anzeige passend, dass der Artikel dem Warenkorb hinzugefügt wurde.
Vielleicht möchte man stattdessen ein flüssiges Kauferlebnis bieten, das dem Kunden nicht nach jedem Klick eine Entscheidung aufnötigt, ob er weiter einkaufen oder zum Warenkorb geleitet möchte.

Dieses kleine kostenlose Plugin ersetzt den Dialog auf der Produktdetailseite, den Produktlisten und in der Wunschliste durch eine "Snackbar", eine dezente Meldung am Bildschirmrand, die von allein wieder verschwindet und keine Aufmerksamkeit oder Reaktion erfordert.

Die Meldung richtet sich farblich nach dem Template.
Erscheinungsbild, Text, Ort und Dauer der Anzeige können aber noch weiter angepasst werden:

aha_basket_snackbar.png


Die Idee zu diesem Plugin wurde inspiriert durch den "Snackbar"-Vorschlag von @FPrüfer von 2016.
Diese Version des Snackbar wurde mit dem Bootstrap4-Element "Toast" erstellt, und ist daher nur für ein NOVA (-Child) Template bestimmt, nicht für das EVO-Template.

Ich möchte mich an dieser Stelle für die Hilfe aus dem Forum, und insbesondere auch für alle Tipps und Anregungen bedanken!

Viele Grüße,
fibergirl
 

Anhänge

  • aha_basket_snackbar_1-0-0.zip
    5,1 KB · Aufrufe: 62

ascsoft

Sehr aktives Mitglied
3. Oktober 2010
284
27
Hallo, Wie wird das Plugin Installiert ?

Wenn ich es in den Ordner /includes/plugins kopiere, bekomme ich die Meldung das das Plugin fehlerhaft ist.

lg
Micha
 

jürgenk

Mitglied
27. April 2020
62
4
Ich habe das Plug In mit dem Admorris Pro Template getestet und es funktioniert in dem Sinne das gar keine Anzeige mehr dargestellt wird. Gibt es eine Lösung für Templates von Fremd Anbietern?
 

fibergirl

Sehr aktives Mitglied
14. April 2016
824
249
Hallo @jürgenk ,

Templates von Fremdanbietern können ganz unterschiedlich sein.
Ich weiß rein gar nichts über das Admorris Pro Template. Habe auch keinen Zugriff darauf. Verwendet es auch Bootstrap4? Das wäre in diesem Fall Voraussetzung.

Am besten wäre es wohl, den Template-Hersteller zu bitten, das Plugin für Dich anzupassen (liegt ja im Klartext vor).
Beziehungsweise eine eigene entsprechende Option in sein Template einzubauen.

Gruß,
fibergirl
 

2009Butch

Aktives Mitglied
27. Dezember 2017
72
8
hoher Norden
Hallo,
ich habe das Plugin installiert, aber leider wird jetzt gar kein Popup mehr angezeigt.
Das Plugin habe ich im Admin unter Plugins hochgeladen, ich bekomme auch keine Fehlermeldung und die Einstellung sind soweit ich das sehen kann richtig , also nicht Transparent und Anzeigedauer steht nicht auf 0. Irgendeine Idee was ich falsch gemacht haben könnte?
 

SHAAN

Sehr aktives Mitglied
26. August 2020
443
121
Nicht für jeden Shop und jede Branche ist die große modale Anzeige passend, dass der Artikel dem Warenkorb hinzugefügt wurde.
Vielleicht möchte man stattdessen ein flüssiges Kauferlebnis bieten, das dem Kunden nicht nach jedem Klick eine Entscheidung aufnötigt, ob er weiter einkaufen oder zum Warenkorb geleitet möchte.

Dieses kleine kostenlose Plugin ersetzt den Dialog auf der Produktdetailseite, den Produktlisten und in der Wunschliste durch eine "Snackbar", eine dezente Meldung am Bildschirmrand, die von allein wieder verschwindet und keine Aufmerksamkeit oder Reaktion erfordert.

Die Meldung richtet sich farblich nach dem Template.
Erscheinungsbild, Text, Ort und Dauer der Anzeige können aber noch weiter angepasst werden:

Den Anhang 58207 betrachten


Die Idee zu diesem Plugin wurde inspiriert durch den "Snackbar"-Vorschlag von @FPrüfer von 2016.
Diese Version des Snackbar wurde mit dem Bootstrap4-Element "Toast" erstellt, und ist daher nur für ein NOVA (-Child) Template bestimmt, nicht für das EVO-Template.

Ich möchte mich an dieser Stelle für die Hilfe aus dem Forum, und insbesondere auch für alle Tipps und Anregungen bedanken!

Viele Grüße,
fibergirl
MEGA MEGA MEGA !!! Danke @fibergirl
 

net97

Gut bekanntes Mitglied
31. März 2011
255
9
Das Plugin ist ja echt klasse! Vielen Dank, genau das was ich gesucht habe.
Einen kleinen Schöhnheitsfehler gibt es bei mir allerdings: Wenn ich in der Galerieansicht einen Artikel in den Warenkorb hinzugefügt habe (mit Warenkorb-Button Plus), dann wird der Artikel ausgegraut und es erscheint ein rotierender Kreis über dem Artikel. Dieser geht auch nicht mehr weg. Ausser man lädt die Seite neu.
Hat jemand einen Tip?
 

roots

Aktives Mitglied
9. April 2018
82
11
Hallo, vielen Dank für das Plugin! Richtig gut! Kaum zu glauben dass es so was dezentes nicht von Haus aus von JTL gibt.

Eine Nachfrage: kann es auch unterbunden werden, dass beim Klick auf "in den Warenkorb" auf einer Artikeldetailseite diese Seite neu geladen wird? Oder müssen wir da warten, bis JTL das Neuladen an der Stelle anders gestaltet?
In der Artikelübersicht (Liste) funktioniert es wunderbar.
 

roots

Aktives Mitglied
9. April 2018
82
11
Einen kleinen Schöhnheitsfehler gibt es bei mir allerdings: Wenn ich in der Galerieansicht einen Artikel in den Warenkorb hinzugefügt habe (mit Warenkorb-Button Plus), dann wird der Artikel ausgegraut und es erscheint ein rotierender Kreis über dem Artikel. Dieser geht auch nicht mehr weg. Ausser man lädt die Seite neu.
Wir versuchen, das Warenkorb-Button Plus Plugin zum laufen zu bringen, das klappt allerdings bisher noch nicht. Daher kann ich (noch) nicht sagen, ob wir dieses Problem auch haben.
 

fibergirl

Sehr aktives Mitglied
14. April 2016
824
249
Liebe Leute,

da hier verschiedene Fragen und Wünsche zum Plugin aufgelaufen sind:
ich habe derzeit keinen Zugriff auf einen JTL- Shop, und sehe daher momentan keine Möglichkeit, Änderungen und Anpassungen an dem Plugin vorzunehmen.

Das Plugin steht hier aber im Quelltext zum Herunterladen bereit.
Ich hätte kein Problem damit, wenn jemand, ob Servicepartner oder nicht, das Plugin nimmt, überarbeitet und unter eigenem Namen wieder veröffentlicht!
Ob es jetzt um das Funktionieren in der Galerieansicht geht ("zu meiner Zeit" gabs da gar keinen Kaufbutton) oder eine verbesserte Kompatibilität zu anderen Plugins oder Templates.
Ich würde mich freuen, wenn es auf diese Weise noch etwas nützlicher wird.

Viele Grüße,
fibergirl
 
  • Gefällt mir
Reaktionen: recent.digital

recent.digital

Offizieller Servicepartner
SPBanner
8. Juli 2015
666
170
Wuppertal
Liebe Leute,

da hier verschiedene Fragen und Wünsche zum Plugin aufgelaufen sind:
ich habe derzeit keinen Zugriff auf einen JTL- Shop, und sehe daher momentan keine Möglichkeit, Änderungen und Anpassungen an dem Plugin vorzunehmen.

Das Plugin steht hier aber im Quelltext zum Herunterladen bereit.
Ich hätte kein Problem damit, wenn jemand, ob Servicepartner oder nicht, das Plugin nimmt, überarbeitet und unter eigenem Namen wieder veröffentlicht!


Viele Grüße,
fibergirl


Wir schauen uns das morgen im Team mal an und helfen gerne, sofern (zeitlich) machbar. Das 5.2 Update steht ja auch vor der Tür.

Richtig guter Community-Ansatz. ❤️
 

roots

Aktives Mitglied
9. April 2018
82
11
Kann ich nicht bestätigen. Bei uns funktioniert es auch in der Galerieansicht. JTL Shop 5.1.5
Ich muss hier noch etwas klar stellen:

Uns ging es um das Funktionieren von diesen zwei Plugins miteinander:
Leider sind diese noch nicht kompatibel. Jeweils für sich funktionieren sie, doch wenn beide aktiv sind verschwinden die Buttons aus der Galerieansicht, es steht nur noch "In den Warenkorb", nicht klickbar. Die Snackbar popups funktionieren weiter.
Ich war in Kontakt mit dem support von knowmates diesbezüglich und dieser war sehr freundlich und hilfsbereit, konnte in dem Rahmen aber das Problem nicht lösen, da die Verbesserung eher am snackbar Plugin geschehen sollten.

Einen teilweise hilfreichen Vorschlag hatten sie dennoch: unten stehende Veränderung am Code. Das führt dazu, dass "In den Warenkorb" klickbar geworden ist, die Mengen Schaltflächen fehlen aber weiter und der Button wird weiter nicht korrekt dargestellt (nur als Text).
Wenn sich @RECENTmarketing oder andere das Plugin genauer anschauen, ist das vielleicht ein guter Start. Unser Entwickler schafft es vermutlich nicht mehr vor unserem Shop Upgrade diese Sache genauer anzuschauen.

in der Datei ....../aha_basket_snackbar/frontend/js/snackbar.js
zwischen
Code:
$(document).bind('evo:loaded.io.request', function(data, status) {
und
Code:
if ((status.req.name == 'pushToBasket') && (status.status == 'success')) {
folgende Zeile einzufügen.
Code:
$('.product-wrapper').removeClass('loading');

Und noch screenshots: einmal mit deaktivierter snackbar, einmal mit aktivierter snackbar.
Wichtig: aktuell muss in den Warenkorb-Button Plus Einstellungen die Option "Nur bei mouse-over anzeigen" deaktiviert sein, wird im nächsten Update des Plugins verbessert.
 

Anhänge

  • Screenshot from 2022-10-20 11-22-37.png
    Screenshot from 2022-10-20 11-22-37.png
    77,4 KB · Aufrufe: 13
  • Screenshot from 2022-10-20 11-21-25.png
    Screenshot from 2022-10-20 11-21-25.png
    78 KB · Aufrufe: 13

SHAAN

Sehr aktives Mitglied
26. August 2020
443
121
Moin @roots ,

hier eine mögliche Lösung um es in der Galerieansicht ausgeben zu lassen.

Im Anhang habe ich dir die Datei item_box.tpl angehängt. Die Datei einfach unter /templates/MEINS/productlist einfügen und dann die gewünschten css Anpassungen über den JTL Theme Editor machen.

Das sind unsere Anpassungen in der my-nova.scss die du vermutlich nur zum Teil benötigst:

CSS:
// Produkt List
  
    .productbox-inner .item-list-basket-details {
        margin-top: 0;
    }
  
    #product-list .product-wrapper {
        //border: 7px solid #f7f5f0;
        //margin-bottom: 0rem !important;
        //background: white;
    }
  
    #product-list .product-wrapper:not(:last-child) {
        margin-bottom: 1rem;
    }
  
    .productbox-inner .productbox-options {
        min-height: 10rem;
    }
 
  
    .productbox.productbox-hover:hover .productbox-inner::before {
        bottom: 0rem;
        //left: -1.3rem;
       // right: -1.3rem;
       // top: -1.3rem;
        box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.4);
    } 
  
    .productbox.productbox-hover:hover .productbox-ribbon.ribbon {
        //top: 0.5rem;
       // left: -1.8rem;
        //transition: all 0.0s ease-in-out;
    }
 
    .productbox-inner .productbox-title {
        height: 4.2rem;
    }
  
    .productbox-inner .item-delivery-status {
        margin-bottom: 0;
    }
 
    .productbox-inner .rating {
        position: absolute;
        margin-top: -1.2rem;
    }
 
    .productbox-title a {
        text-decoration: none;
        font-weight: 900;
        font-size: 1rem;
        margin-top: 5px;
        margin-bottom: 5px;
        color: $secondary;
    }
  
    .productbox-ribbon.ribbon {
        left: -1.5rem;
    }
  
    .productbox.productbox-hover .productbox-inner::before {
       // transition: 0.1s cubic-bezier(.68,-0.55,.27,1.55);
    }
   
    .productbox-options .delivery-status .status-0::before {
        background: #b90000;
        border-radius: 35%;
        content: "•••";
        font-size: 0.7rem;
        color: #b90000;
        margin-right: 5px;
    }
  
    .productbox-options .delivery-status .status-0 {
        font-size: 0.7rem;
        text-transform: uppercase;
    }
 
    .productbox-options .delivery-status .status-1::before {
        background: #f39932;
        border-radius: 35%;
        content: "•••";
        font-size: 0.7rem;
        color: #f39932;
        margin-right: 5px;
    }
  
    .productbox-options .delivery-status .status-1 {
        font-size: 0.7rem;
        text-transform: uppercase;
    }
  
    .productbox-options .delivery-status .status-2::before {
        background: #1C871E;
        border-radius: 35%;
        content: "•••";
        font-size: 0.7rem;
        color: #1C871E;
        margin-right: 5px;
    }
  
    .productbox-options .delivery-status .status-2 {
        font-size: 0.7rem;
        text-transform: uppercase;
    }
  
  
    .base_price {
        font-size: 0.7rem;
        font-weight: 400;
        font-family: "Comfortaa", "Open Sans", sans-serif;
        line-height: 0.7rem;
    }
  
  
    .basket-details-add-to-cart {
        margin-bottom: 1rem;
    }
 

Anhänge

  • item_box.zip
    3,3 KB · Aufrufe: 4

roots

Aktives Mitglied
9. April 2018
82
11
Vielen Dank, Shaan!

Wir haben die Änderungen für die Galerieansicht übernommen. So kommen wir allein mit dem snackbar Plugin zurecht, das glücklicherweise auch mit PHP 8.0 funktioniert.
Das Warenkorb Button Plus benötigen wir so nicht, war auch nicht kompatibel.

Ein paar weitere Anpassungen bei diesem Themenbereich werden wir noch angehen, die haben wir vor dem Upgrade auf Shop 5 nicht mehr geschafft.
  • Höhenverschiebungen in der Galerieansicht, vor allem in der mobilen Ansicht (wenn Artikelname und Infos unterschiedlich viele Zeilen ergeben; Unterschied ob Variationen verfügbar)
  • Hinzufügen der Funktion zu den "Product slidern"
  • Button Animation: nach Klick zu Häckchen, wie es in der Artikeldetailansicht passiert
  • Neuladen der Artikeldetailseite bei Klick auf in Warenkorb umgehen
Gerne könnt ihr euch an uns wenden, wenn ihr unsere Anpassungen übernehmen wollt (sobald sie fertig sind).

Hier der Link zum Shop zur Ansicht: https://www.rootsofcompassion.org/
 

eRock Marketing

Offizieller Servicepartner
SPBanner
9. Januar 2018
468
172
@wawi-dl Wie meinst du das?
Im Snackys arbeitet das ja bewusst schon seit eh und je anders.
Wir arbeiten mit einem Sidebasket der dann aufklappt (und simpel per Klick auf X oder restliche Fläche direkt wieder geschlossen wird).

Die "Übergroßen Meldungen" haben wir demnach gar nicht ;)
 

fibergirl

Sehr aktives Mitglied
14. April 2016
824
249
@roots
Hach, ein "Zur Kasse" Link direkt im Snackbar! 😊 Ist das schön!

Darauf war ich damals nicht gekommen.
Als weitere Einstellung im Plugin: Optional ein Link "Zur Kasse", "Zum Warenkorb", oder gar keiner.
Naja, vielleicht bauts ja noch mal jemand ein 😉

LG, fibergirl
 
Ähnliche Themen
Titel Forum Antworten Datum
Kein Import von neu angelegten Kunden im JTL Shop5? JTL-Wawi 1.6 0
Neu Installation JTL Shop5 auf Ionos - 500 Fehler Installation / Updates von JTL-Shop 3
IndexNow in shop5? Einrichtung JTL-Shop5 2
Paypal Zahlungziel Shop5 WAWI 1.6.45.2 Einrichtung JTL-Shop5 1
Neu Ust.-ID wird aus Shop5 nicht in Wawi übernommen JTL-Wawi - Fehler und Bugs 11
Neu Installation JTL-Shop5 ohne die PHP-Erweiterung "php-imagick" Installation / Updates von JTL-Shop 1
Update von Plugins für JTL-Shop4 auf JTL-Shop5 Upgrade JTL-Shop4 auf JTL-Shop5 3
Neu Aufteilen der Sitemap im JTL Shop5 Allgemeine Fragen zu JTL-Shop 3
Neu Alterssichtprüfung DHL einrichten Shop5/Wawi Allgemeine Fragen zu JTL-Shop 0
Neu Großes LOB an JTL Wawi und Shop5 JTL-Wawi - Ideen, Lob und Kritik 0
Neu Paypal Plugin Update usw. kann mir bitte jemand den Unterschied erklären? Plugins für JTL-Shop 0
Neu EU-Cookie-Plugin für Shop 5 Plugins für JTL-Shop 2
Neu Probleme mit Produktbewertung für Rich-Snippets und Trusted Shops Plugin (Vers. 4.09) [JTL Shop 4.05] Plugins für JTL-Shop 0
Neu Secupay Plugin Plugins für JTL-Shop 4
Neu Plugin zum anzeigen der Gefahrenhinweise (CSS Gefahrenklasse) Plugins für JTL-Shop 0
Neu 💙 Neues Plugin: Audioplayer Plus (stylischer Player mit Playlist für mehrere MP3-Dateien) für JTL-Shop 5 Plugins für JTL-Shop 0
Neu 💙 kostenloses Plugin: Shopauskunft Widget (Bewertungen sammeln und anzeigen) für JTL-Shop 5 Plugins für JTL-Shop 0
Neu 🟢 Neues Plugin: "Google Sign-In" von Backhaus.digital Plugins für JTL-Shop 7
Neu Shop 5 Plugin-Updates Plugins für JTL-Shop 1
Neu JTL Shop 5 Plugin gesucht: Community Plugins für JTL-Shop 5
Neu TopBar von Template um eigene Ausgabe aus Plugin erweitern? Technische Fragen zu Plugins und Templates 0
Neu 💚 DZM OPC Portlets vererben - Plugin Vorankündigung Plugins für JTL-Shop 6
Neu Plugin problem bei Deprecated Hinweis Plugins für JTL-Shop 0
Neu Doofinder-Plugin Plugins für JTL-Shop 0
Neu Suche Video Plugin in/bei Artikel Plugins für JTL-Shop 1
PayPal PlugIn und Shopabgleich Upgrade JTL-Shop4 auf JTL-Shop5 1
Neu Plugin-Suche: Aktuelle Bearbeitungszeit anzeigen Plugins für JTL-Shop 1
Neu CDN Plugin Plugins für JTL-Shop 0
Neu OCI 4.0 Plugin für JTL Shop 5 gesucht Plugins für JTL-Shop 0
Neu Plugin oder Quellcode für Laufschrift im Header JTL Shop 5 Installation / Updates von JTL-Shop 0
Neu Lilfoot Idealo Plugin - Fehler Versandkosten Technische Fragen zu Plugins und Templates 0
Neu Komische Migrationsdateien im Plugin Manager Plugins für JTL-Shop 2
Neu Plugin lassen sich im neuen 5er Shop nicht installieren über meine Käufe Upgrade JTL-Shop4 auf JTL-Shop5 5
Neu Plugin: JTL Google reCaptcha v2 - Wie erstellt man die Schlüssel dafür? Plugins für JTL-Shop 0
Neu Eigene Icons/Schaltflächen im Plugin Technische Fragen zu Plugins und Templates 1
Neu Eigene Einstellungen via Plugin hinterlegen und im Template auswerten Technische Fragen zu Plugins und Templates 3

Ähnliche Themen