Plugin: Einkaufswelt Element Kategorie-Teaser mit eleganten Mouseover Effekten

Plugin: Einkaufswelt Element Kategorie-Teaser mit eleganten Mouseover Effekten

Alexander Wolf 27. Januar 2016 57

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!

Demo

Eine kleine Demo mit allen aktuell verfügbaren Effekten: Demoshop

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)

Hol dir unseren kostenlosen E-Mail-Kurs:

Lerne wie du deinen eigenen Shopware 5 
Shop erstellst und verwaltest

57 Kommentare

  • 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/). Den Code findest du auf https://github.com/8mylezOrganization/shopware-8mzEmotionComponentCategoryTeaserHover . Rechts auf den grünen Button Clone or download und Download ZIP.

    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.: http://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?

Das Shopware eBook für Einsteiger!

shopware tutorial ebook mockup
Ausführliche Schritt für Schritt Anleitungen, Tipps & Tricks für alle, die gerne am eigenen Shopware Shop basteln.
Jetzt kaufen

Hol dir 

wertvolle Tipps 
für deinen
Shopware Shop

Wir zeigen dir, wie du deinen
Shopware 5 Shop optimieren
kannst.


Trage einfach deine
E-Mail Adresse ein:

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Shopware 5.3 - Wichtige Neuerungen auf einen Blick
Plugin Theme Struktur überschreiben und Plugins individuell anpassen
Logo Größe anpassen mit Less für Shopware 5
Theme: Eigenes Listing Layout erstellen
Wie du jedes Icon in Shopware 5 anpassen kannst
Wie Cronjobs bei Shopware funktionieren und wie du sie richtig einstellst
Shopware 5 - Wie du deine Shop Geschwindigkeit optimierst
4 Gründe warum du Shopware 5 lokal mit MAMP installieren solltest und wie du das anstellst
Vorsicht Shopware Update! Was du beim Updaten beachten musst
© 2017 by 8mylez. Powered by Goltfisch GmbH.