Plugin: Einkaufswelt Element Kategorie-Teaser mit eleganten Mouseover Effekten

Plugin: Einkaufswelt Element Kategorie-Teaser mit eleganten Mouseover Effekten

Alexander Wolf 27. Januar 2016 67

Die Einkaufswelt auf der Starseite ist meistens der erste Berührungspunkt mit dem Shop.

Deswegen sollte der erste Eindruck am besten gleich überzeugen. Besucher lieben es wenn sich auf dem Online Shop etwas bewegt.

Natürlich kann man da auch immer übertreiben, aber wir haben genau das richtige für euch:

Das kostenlose Einkaufswelt Elemente Mouseover Effekte Plugin.

Wir haben einige Effekte von Codrops genommen und in ein Shopware Plugin gepackt.

So könnt ihr eure Einkaufswelt Elemente mit den eleganten Mouseover Effekten ausstatten. Aktuell gibt es nur das Kategorie-Teaser Element. Ihr könnt also eine Kategorie zum Verlinken wählen und entsprechend ein Bild mit einem Effekt ausstatten.

Installation

Das Plugin wird ganz einfach über den Plugin Manager installiert. Der passende Link im Community Store: Einkaufswelt Elemente Mouseover Effekte

In den Warenkorb, für 0 € "kaufen", runterladen, installieren und aktivieren.

Einkaufswelt Elemente Mouseover Effekte installiert

Konfiguration

In den Einkaufswelten seht ihr ein neues Element.

Einkaufswelt Elemente neues Element

Das könnt ihr, wie gewohnt, in die Einkaufswelt rüberziehen und, mit einem Klick auf den Stift, bearbeiten.

Kategorie-Teaser Element bearbeiten

Folgende Einstellungen sind möglich:

  • Typ
  • Image
  • Select category
  • Beschreibung
  • Title Farbe
  • Beschreibung Farbe
  • Umrandung Farbe
  • Hover Effekt

Typ, Image, Select category gehören zu dem normalen Kategorie-Teaser von Shopware.

Mit Title Farbe, Beschreibung Farbe und Umrandung Farbe könnt ihr die Farben einstellen. Es wird ein Hex Code erwartet. Als Standard ist weiß (#FFFFFF) eingestellt.

Es gibt unzählige Tools um den entsprechenden Hex Code für die jeweilige Farbe zu bekommen. z.B.: HTML Color Picker

Zum Schluss noch den passenden Hover Effekt auswählen.

Hover Effekte

Speichern und freuen!

Zukünftige Updates

Es kommen weitere Effekte dazu. Außerdem werden mehr Elemente von Shopware angepasst, sodass ihr auch Banner und andere Elemente in Zukunft mit den Hover Effekten ausstatten könnt.

Wenn euch das kostenlose Plugin gefällt, dann lasst eine Bewertung da!

Auch bei Problemen einfach melden 🙂

Roadmap

Eine kleine Zusammenfassung für die kommenden Updates (wünsche aus den Kommentaren):

  • Hersteller Teaser (mit und ohne Effekten)
  • Schriftgröße anpassen
  • Kacheleffekt rausnehmen (Update erfolgt in Version 1.0.3)
  • Blog Kategorie verlinken (Update erfolgt in Version 1.0.3)

67 Kommentare

  • Hallo,
    ansich finde ich das Plugin klasse. Die Kategorie Teaser sind nun leicht einzusetzen. Schade ist das man die Schriftart (Titel) nicht ändern kann.
    Könnt ihr mir sagen, welche Artikel-Bild-Größe ich verwenden muss, damit es passt? Ich habe diverse Größen versucht, aber dennoch ist das Artikelbild zu groß und es wird nicht auf die Teasergröße verkleinert.
    Grüße Claudia
  • Hallo Alexander

    Das Plugin funktioniert gut mit der Desktop Version. Jedoch wird bei der Mobilen Version kein Bild dargestellt und als Platzhalter einfach eine blaue Fläche. Das ist unvorteilhaft, da wir auf dem Bild mit Texten arbeiten und natürlich das Bild auch wichtig ist. Ist das Plugin nur für die Desktop Version gedacht? Oder wie kann ich dieses Problem beheben?

    Gruss,
    Stefanie
  • Wirklich schönes Plugin, vielen Dank!
    Ich habe allerdings ein Problem: es zeigt bei Kategorien, die aus zwei oder mehr Worten bestehen. keine Leerzeichen an. Gibt es vielleicht irgendeinen Trick, den ich nicht beherrsche?
  • Hey Renate,

    hast du ein Beispiel?

    Gruß
    Alexander
  • Hallo,
    erst einmal vielen Dank für das Super Plugin. Mir sind ein paar Kleinigkeiten und Fragen aufgefallen. Vielleicht hilft es ja bei der Verbesserung des Plugins.

    1. man muss einen Effekt auswählen. Wenn man ausnahmsweise mal keinen Effekt haben möchte, kann man einen eigestellten nicht wieder löschen. Ein Feld mit "kein Effekt" wäre schön.

    2. ist es möglich für die Ansicht im Backend Einkaugswelten Designer eine Vorschau des Kategoriebildes anzuzeigen? Diese wird bei mir nicht angezeigt. Im "normalen" Bannerteaser geht es. Bei Eurem Plugin leider nicht.

    3. kann man die bootstrap.php neu laden, ohne das alle Daten weg sind?
    hab es bisher mit neu installieren gemacht, aber dann sind alle angelegten Elemente weg.
    Shopware 5.2.6 Plugin 1.2.0
  • Hey Abbo,

    danke für Deine Verbesserungsvorschläge. Wir werden diesen Monat eine neue Version (5.3 kompatibel) in den Store stellen und versuchen Deine Anregungen mit einfließen zu lassen :-)

    Herzliche Grüße
    Marc
  • Moin Marc,

    wisst Ihr schon wann die neue Version des Plugins für 5.3 Kompatibilität in etwa erscheinen wird? Kommt auf den Tag genau nicht an aber zumindest eine Richtung?
  • Hey Abbo,

    spätestens im November :-)

    Liebe Grüße
    Marc
  • Hallo,

    Mit Shopware 5.3.0 leider funktioniert es bei mir nicht mer. Beim homepage wird die Einkaufswelt einfach nicht mehr geladen. Ich habe es mit das eingebautes Kategorie-Teaser element versucht und es funktioniert, also dieses Mousover effekt element hat etwas mit 5.3.0.

    Gruß,

    Balazs
  • Hey Balazs,

    wir arbeiten bereits an einem Update! Aktuell funktioniert das Plugin nicht mit Shopware 5.3. Es reicht aber aus, wenn das Einkaufsweltelement aus der Einkaufswelt rausgenommen wird.

    Gruß
    Alexander
  • Hallo,
    leider wird das ausgewählte Bild nicht im Frontend angezeigt. Es ist nur ein Farbiger kasten mit den Effekt jedoch ohne Bild.

    Cache leeren, Themes kompilieren und backend neustarten haben ich auch schon versucht leider ohne Erfolg.

    Gruß
    Wowa
  • Hey Wowa,

    wie es aussieht, werden die Bilder jetzt angezeigt. Meistens liegt es an den Thumbnails. Diese muessen in entsprechenden Groessen vorhanden sein.

    Gruß
    Alexander
  • Ich möchten das Plugin gerne auf unserer neuen noch nicht gestarteten Website ausprobieren, habe es installiert kann aber keine Einstellungen vornehmen da der . Klick auf den Stift nicht funktioniert. Weder bei Firefox noch Chrome...
  • Hey Jürgen,

    nachdem das Plugin installiert wurde, muss der Cache geleert, das Theme kompiliert und das Backend neugeladen werden.

    Danach sollte das Ganze funktionieren.

    Gruß
    Alexander
  • Hallo,
    habe Shopware (Version 5.2.6) lokal auf meinem Rechner installiert (xampp).
    Wenn ich Erweiterungen hinzufügen möchte, kommt immer die Fehlermeldung "OrdersException-7". Laut Shopware-hotline ist es nicht möglich, Erweiterungen in einem lokalen Umfeld zu installieren. Ist das so richtig, oder gibt es irgendwelche wordarounds?

    Frank
  • Hallo Frank,

    Plugins aus dem Store können lokal nicht installiert werden. Allerdings kannst du dir unser Plugin herunterladen und es in den Plugin Ordner deiner lokalen Installation legen (engine/Shopware/Plugins/Local/Backend/).

    Falls es nicht klappt, kannst du dich gerne nochmal melden und wir schauen uns das an.

    Gruß
    Alexander
  • Klasse! Ich hab die ganze Zeit nach sowas gesucht. Schnell eine kurze Info auf die Bilder legen. Die Animation setz dann noch das Krönchen auf.
    Ich freu mich schon auf die neuen Elemente.....
    Cool wäre jetzt noch, wenn man auch beim Silber was auf die einzelnen Bildern legen könnte (mit oder ohne Effekt - ganz egal)
    Ganz toll, weiter so!
  • Hallo Fritz,

    vielen Dank für das positive Feedback!

    Deine Wünsche kommen auf unsere Liste und wird bei zukünftigen Updates berücksichtigt, evtl. wird auch ein neues Plugin dafür geschrieben.

    Gruß
    Alexander
  • Beim Herunterladen erscheint folgende Fehlermeldung:
    Error

    Ihre Shopware-Version ist nicht kompatibel mit der angeforderten Lizenz.

    Error code: OrdersException-7
  • Hallo Claudio,

    hast du unter account.shopware.com die richtige Shopware Version von deinem Shop hinterlegt?

    Am besten danach das Plugin deinstallieren, löschen und nochmal runterladen.

    Gruß
    Alexander
  • Hallo zusammen,

    das Update 1.2.0 ist freigegeben. Es wurde ein kleiner Install Bug behoben und um zwei neue Felder erweitert: Link Text und Link Adresse.

    Link Text: Wenn das Feld gesetzt wird, überschreibt es den Namen der Kategorie.
    Link Adresse: Wenn das Feld gesetzt wird, überschreibt es die Verlinkung zum entsprechenden Link. z.B.: https://8mylez.com linkt auf die 8mylez.com Website.

    Das Plugin ist jetzt nicht mehr an Kategorien gebunden und kann daher einfach ein Bild mit beliebigem Text und beliebigem Link darstellen.

    Gruß
    Alexander
  • Hallo Alexander,
    kann es sein, dass es in der frischen Version 1.2 einen Bug gibt?
    Zumindest bei mir passiert beim Klick auf den Editier-Stift im Einkaufswelten-Editor nichts.
    Grüße,
    Björn
  • Hallo Björn,

    es könnte sein, dass der Cache geleert, das Theme kompiliert und die Seite neugeladen werden muss.

    Habe das schon öfter gehört. Aber nach einem Refresh der Seite ging es wieder.

    Ich hoffe das löst dein Problem!

    Gruß
    Alexander
  • Guten Morgen,
    ich habe da mal eine hoffendlich nicht zu dumme Frage....wie aktuallisiere ich meine ältere Version des Plugin? Einmal deinstallieren und die neuere Version installieren?
  • Hallo Josef,

    es gibt keine dummen Fragen :)

    Am besten automatisch durch den Community Store. Ansonsten einfach die neueste Version hochladen / installieren. Dann wird das Plugin erweitert.

    Wenn du es vorher deinstallierst, verlierst du alle erstellten Einkaufsweltelemente.

    Gruß
    Alexander
  • Hi Alexander,
    grandioses Plugin - vielen lieben Dank !!!
    Hab mir schon nen Wolf gesucht ;) kann aber die css/less-Datei nicht finden, damit ich den Title "fett" darstellen kann. Habe leider überwiegend Bilder bei denen die dünne Schrift nicht so gut zu lesen ist - ansonsten wirklich ganz große Klasse.
    Kannst Du mir bitte einmal auf die Sprünge helfen?
    LG Matten
  • Hallo Matten,

    vielen Dank für die netten Worte :)

    Die LESS Datei findest du im Ordner Views/frontend/_public/src/less und heißt hovereffect.less.

    Du musst in dem Plugins Ordner von Shopware schauen.
    (engine/ Shopware/ Plugins/ Community/ Backend/ 8mzEmotionComponentCategoryTeaserHover).

    Gruß
    Alexander
  • Hi!

    Leider funktioniert bei mir gar nix. Es wird nur soviel Bild angezeigt wie Text da ist, kein Rand, keine Animation :(

    Wenn ich es größer ziehe, wird das Hintergrundbild wiederholt :(

    lg
    Michael
  • Ich habe gerade das gleiche Problem. Gibt es eine Lösung?
  • Tausend Dank! sehr schön gemacht...
  • Hallo 77webdesign,

    Danke für die netten Worte!

    Gruß
    Alexander
  • Hallo zusammen,
    das Update 1.1.0 ist raus.

    Es gibt jetzt eine Checkbox Blog Kategorie, damit ihr auch den Blog verknüpfen könnt.

    Gruß
    Alexander
  • Hallo zusammen,

    das Update 1.0.3 ist gerade im Review Prozess. Es wurde der Bug mit dem Kacheleffekt des Hintergrundbildes rausgenommen.

    Jetzt sollte jetzt wie der originale Kategorie-Teaser funktionieren.

    Gruß
    Alexander
  • Hallo,

    tolles Plugin und super Support. Bin echt begeistert. Was nun noch sehr nützlich wäre, wäre die Auswahl der Thumbnailgröße bzw eine Auswahl des Bildausschnittes der angezeigt werden soll.
  • Hallo Tammo,

    vielen Dank!

    Wir passen das Plugin an, sodass es sich wie das Einkaufswelt Element "Kategorie-Teaser" von Shopware verhält.

    Gruß
    Alexander
  • Hallo Alex,
    prima Sache, habe ich gleich mal im Testshop testen wollen. Install war ok. Nur ich kann hier den Teaser nicht bearbeiten. Gibt es eine Voraussetzung für den Betrieb des Plugin?

    Gruß
    Josef
  • "mit einem Klick auf den Stift, bearbeiten."

    genau das geht bei mir nicht :-(
    Wenn ich auf den Stift klicke passiert nichts.
  • Hallo Josef,

    eine Voraussetzung gibt es da nicht. Müsste eigentlich alles funktionieren.

    Gruß
    Alexander
  • Hi,
    ist wirklich ein tolles PlugIn. :-)

    Bin gerade dabei den Shop www.artikelfuchs.de zu gestallten.
    Kannst Du mir sagen wie ich die Skalierungen verändern kann, so daß ich das Plugin auch für meine Bannergrößen verwenden kann?

    LG
    Tom
  • Hallo Tom,

    vielen Dank!

    In deinem Shop musst du die doppelte Höhe für die Effekte mit Rahmen nehmen. Bei Freizeit und Spass musst du die Höhe einfach länger ziehen bei der Einkaufswelt. Dann sollte das passen.

    Gruß
    Alexander
  • An sich ein tolles Plugin mit schönen Effekten. Was mir aufgefallen ist und was dringend implementiert werden sollte, ist das der Beschreibungstext übersetzbar ist. Ich zb. habe einen mehrsprachigen Shop und nur wegen dem Teaser-Plugin alles doppelt anzulegen macht wenig Sinn.
    Die Banner müssen auch recht groß sein, selbst bei einer Zeilenhöhe von 150px werden einige Effekte (Rahmen) nicht richtig dargestellt, oder der Beschreibungstext ist außerhalb.
    Die Darstellungsart des Hintergrundbildes ist nicht optimal gelöst, ein Kacheleffekt für ein Bild geht nicht, hier sollte es so sein wie beim SW Kategorie-Teaser, das der Hintergrund nie gekachelt wird.
  • Hallo Andy,

    vielen Dank für die netten Worte und dein ehrliches Feedback!

    Welche Elemente benutzt du in deinen Einkaufswelten? Müssen diese nicht pro Sprache extra angelegt und mit dem jeweiligen Inhalt gefüllt werden oder gibt es da auch die Möglichkeit, diese zu übersetzen wie bei den Artikeln? (Wie ist dein Shop, dann sehe ich den auch mal in Action :))

    Bei der Größe muss man bei einigen Effekten aufpassen. Am besten passt die Größe 575x380 bzw. das passende Verhältnis der Seiten zueinander.

    Ein Kacheleffekt ist in der Tat nicht schön. Kommt auf die Liste und wird beim nächsten Update behoben!

    Gruß
    Alexander
  • Hi,
    das Plugin ist großartig und macht genau was es soll!
    Sogar besser als erwartet... da ich keinen Titel Text wollte einfach als Farbe satt HEX "rgba(255, 255, 255, 0)" eingegeben und siehe da funktioniert auch, perfekt! :-)
    Einziger "Luxus Wunsch" vielleicht noch die Schriftgröße und Position einstellen können... (aber das kann man ja auch locker selber regeln, würde es nur noch einfacher machen)

    Bleibt nur noch erstmal ein großes DANKE los zu werden!

    Gruß
    Nico
  • Hallo Nico,

    vielen Dank für deine netten Worte!

    Genau, theoretisch kann auch black als Farbe genutzt werden, eben alle Werte die zulässig sind für color.

    Die Schriftgröße sollte kein Problem sein, kommt auf die Liste. Die Position wird eher schwierig, da es ja abhängig von dem Effekt immer anders ist. Vielleicht fällt mir eine elegante Lösung ein. Ansonsten bin ich offen für Ideen :)

    Gruß
    Alexander
  • Hört sich sehr interessant an und wird gleich getestet.
  • Hallo Atilla,

    vielen Dank! Ich hoffe es gefällt dir :)

    Gruß
    Alexander
  • Hallo!
    Das ist ein schönes Plugin. Echt eine gute Idee.
    Der Link zum Showware Store ist aber wohl fehlerhaft. Man kommt nicht direkt zum Plugin.
    Was aber wirklich mal eine Innovation wäre: Nicht ein Kategorien Teaser für die Markenwelt, sondern ein Hersteller Teaser. Oftmals binde ich nämlich die Hersteller in Shops bei Einkaufswelten ein und gehe dann über den Banner und verlinke es aufwändig. Für Banner wäre der Mouseover übrigens auch lecker!
    Gruß
    Ralf
  • Hallo Ralf,

    vielen Dank für dein Feedback!

    Der Link sollte jetzt funktionieren.

    Der Hersteller Teaser kommt auf die Liste! (Mit und ohne Effekten)

    Gruß
    Alexander

Was denkst du?

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Social Media Icon mit Link im Footer
Shopware Theme: Eigenes Listing Layout erstellen
Logo Größe mit Less für Shopware 5 anpassen
Die größten Fehler bei der Entwicklung eines Shopware 5 Themes

Sicher Dir die besten Shopware 6
Tipps & Tricks

Trag Dich ein und Du erhältst unser Shopware 6 Whitepaper kostenlos!
Trag dich für unseren Newsletter an, im Anschluss erhältst Du das Whitepaper. 

Mit dem Abschicken Deiner Daten akzeptierst Du unsere Datenschutzerklärung.

Entdecke unsere ebooks

Unsere Standorte

Zentrale 

Technologiepark 23
33100 Paderborn


Leipzig
Bernhardstraße 34
04315 Leipzig

Kontakt

Über 8mylez

✓ 38 Mitarbeiter

✓ Shopware Gold Partner

✓ 40.000+ Plugin Downloads

✓ 160+ betreute Shops

✓ Full-Service Shopware Agentur

✓ 70 Shopware Videos auf Youtube

✓ Alle Shopware Zertifizierungen

Social


Unsere Partner
© 2023 by 8mylez GmbH //  Impressum + Datenschutz