Home Wiki Blog
🇩🇪 Impressum 🇬🇧 Legal

Shop-Redesign: Premium-Look mit Tiefe und Schliff

NEU

Der In-Game-Shop hat ein komplettes visuelles Update erhalten. Jedes Element — von Produktkarten über die Warenkorb-Seitenleiste bis hin zu Kanal-Tabs und Checkout-Buttons — wurde mit Tiefe, Schliff und sanften Animationen neu gestaltet.

Was sich geändert hat

Produktkarten

Das Herzstück des Shops bekam das größte Upgrade:

  • Glas-Effekt mit geschichteten Farbverläufen und tiefen Schatten
  • Sanftes Hover — Karten heben sich an, Bilder skalieren auf das 1,08-Fache, ein Glow erscheint
  • Größere Bilder (170px Höhe, zuvor 150px)
  • Lazy Loading — Bilder werden erst geladen, wenn sie in den Sichtbereich scrollen, was Bandbreite spart
  • Trennlinie zwischen Produktinfo und dem Bereich fĂĽr Preis/Button
  • Größere Preise (16px) mit stärkerem Glow fĂĽr CC- und KC-Währungen

Neuer Shop-Header

Eine neue Identitätsleiste erscheint über dem Produkt-Raster und zeigt:

  • Das Typ-Symbol des Shops in einem farbigen, abgerundeten Container
  • Den Shop-Namen in groĂźer, fetter Schrift
  • Ein Typ-Badge (z. B. „Hardware”, „Essen”, „Dienstleistungen”) in der Farbe des Typs
  • Produktanzahl und Währung

So erhält jeder Shop eine klare visuelle Identität, noch bevor Sie überhaupt zu den Produkten scrollen.

Kanal-Tabs

Die Tabs zum Wechseln zwischen den Shops haben ein aufgeräumteres Aussehen erhalten:

  • Pillen-Stil mit abgerundeten Ecken
  • Hover ändert den Hintergrund dezent
  • Aktiver Tab leuchtet mit einem Blau-Cyan-Farbverlauf und innerem Schatten
  • Der komplexe Border-Mask-Effekt wurde fĂĽr bessere Performance entfernt

Filter-Leiste

Such- und Filter-Steuerungen sind nun ansprechender gestaltet:

  • Abgerundete Eingabefelder (10px Border-Radius) mit Fokus-Rahmen
  • Pillen-förmige Selects, die beim Hovern hervorgehoben werden
  • Filter-Anzahl wird als Badge mit Hintergrund angezeigt
  • ZurĂĽcksetzen-Button mit rotem Akzent und Hover-Anhebung

Warenkorb-Seitenleiste

Der Warenkorb und das Bestell-Panel auf der rechten Seite:

  • Sticky-Positionierung — bleibt sichtbar, während Sie durch die Produkte scrollen
  • Custom-Scrollbar — schmale blaue Leiste statt dem Browser-Standard
  • Farbverlauf-HintergrĂĽnde mit dezenten Schatten
  • Größere Buttons mit Hover-Anhebung
  • Checkout-Buttons mit Farbverlauf-FĂĽllung und Glow beim Hovern

Bewertungen

Der Bewertungsbereich am unteren Ende jedes Shops:

  • Bessere visuelle Hierarchie mit einer Trennlinie unter der Zusammenfassung
  • Hover-Effekt auf einzelnen Bewertungskarten (linke Rahmenkante leuchtet auf)
  • Größere Sterne und besserer Abstand
  • Senden-Button mit Farbverlauf und Schatten beim Hovern

Umkreissuche & Shop-Suche

Beide Suchfunktionen haben ein Premium-Kartendesign erhalten:

  • Tiefe durch geschichtete Schatten
  • Slide-Animation beim Hovern (Umkreis-Karten gleiten nach rechts)
  • Lift-Effekt bei Shop-Such-Karten mit violettem Glow
  • Größere Symbole (40px) mit eigenen Schatten

Leere Zustände

Wenn keine Produkte angezeigt werden können, sehen Sie statt einer einfachen Textmeldung nun:

  • Ein groĂźes Symbol (📦)
  • Eine klare Meldung („Keine Produkte entsprechen Ihren Filtern” oder „Noch keine Produkte”)
  • Einen hilfreichen Hinweis („Versuchen Sie, Ihre Suche anzupassen, oder schauen Sie später vorbei”)

Animationen

Produktkarten erscheinen nun mit einem gestaffelten Eintritt — jede Karte blendet sich ein und skaliert leicht hoch, mit einer kleinen Verzögerung zwischen den Karten. Die Animation verwendet eine sanfte cubic-bezier-Easing-Kurve für ein Premium-Gefühl.

Opt-Out fĂĽr Karten-Pin

Dieses Release enthält zudem eine neue Datenschutzfunktion für Shop-Besitzer:

Dienstleister, die ihren physischen Standort nicht preisgeben möchten, können nun „Meinen Shop auf der Weltkarte anzeigen” in ihren Shop-Einstellungen abwählen. Der Shop bleibt voll funktionsfähig — er erscheint lediglich nicht als Pin auf der Karte.

Das ist besonders nützlich für Berater, digitale Dienstleister und alle, deren Unternehmen keine öffentliche Filiale hat.

Performance

Trotz der reichhaltigeren Optik ist der Shop tatsächlich schneller geworden, dank:

  • loading="lazy" auf Produktbildern — der Browser lädt nur Bilder, die sichtbar sind
  • Vereinfachtem CSS (komplexe ::before-Masken bei Kanal-Tabs wurden entfernt)
  • GPU-beschleunigten Transformationen fĂĽr Hover-Animationen

Was als Nächstes kommt

Das Shop-Redesign legt das visuelle Fundament fĂĽr kommende Funktionen:

  • Produkt-Detail-Overlays mit Bildern in voller Größe und Spezifikationen
  • Wunschliste / Favoriten — Produkte fĂĽr später speichern
  • Shop-Kollektionen — kuratierte Produktgruppen
  • Rabattcodes — Aktionspreise
  • Shop-Analytics fĂĽr Besitzer — Aufrufe, Klicks, Konversion

ENLIGHTENMENT ist ein blockchain-basiertes Spiel über persönliches Wachstum, archetypische Erkundung und kollektive Resonanz. Begleiten Sie uns auf getplasma.org.