Semantische Symbole in PrestaShop-Modulen

Nutzen Sie semantische Symbolnamen, damit Ihr Modul die Darstellung an das aktive Theme anpassen kann. Halten Sie sichtbare Beschriftungen und zugängliche Namen von Bedienelementen vom dekorativen Symbol-Markup getrennt.

So würden wir vorgehen

Wir würden Ihr bestehendes Theme, mitgelieferte Schriften, Modul-Templates und Integrationen prüfen, bevor wir Bedienelemente ändern. Berücksichtigen Sie Katalogdaten für dynamische Beschriftungen, die Sprachen Ihrer Märkte und die von Ihrem Team gepflegten Formulierungen.

Arbeiten Sie auf einer Staging-Kopie mit denselben Modulen und Theme-Assets. Erproben Sie die folgenden Prüfungen und planen Sie das Veröffentlichungszeitfenster sowie das Verfahren zum Rückgängigmachen.

Wenn Sie diese Bedienelemente in einem individuell entwickelten Modul benötigen, kann der PrestaShop Custom Module Development Service sie in die vereinbarte Spezifikation aufnehmen.

Einen semantischen Namen wählen

myprestarocks/prestashop-icons ordnet Namen wie cart, account, success, edit und delete unterstützten Renderern zu. Bevorzugen Sie diese Namen gegenüber fest codierten Klassen für Symbolschriften.

use MyPrestaRocks\Icons\MPRIcons;

$cartIcon = MPRIcons::get('cart');
$editIcon = MPRIcons::get('edit', 'action-icon');
$available = MPRIcons::exists('cart');

get() gibt HTML zurück. getClass() liefert einen rendererabhängigen Wert: Font-Awesome-Klassen, eine Material-Ligatur oder den semantischen Namen im SVG-Modus. Behandeln Sie nicht jeden Rückgabewert als CSS-Klasse.

Ihre Situation	Nächster Schritt	Abnahmeprüfung
Ein bestehendes Template akzeptiert nur eine CSS-Klasse.	Passen Sie das Template an, damit es generiertes Symbol-Markup akzeptiert.	Es funktioniert mit SVG ebenso wie mit dem Schrift-Renderer des Themes.
Ein Bedienelement erscheint nach einer Warenkorbaktualisierung.	Prüfen Sie die Verfügbarkeit des Helpers, bevor der dynamische Rendering-Code läuft.	Ursprüngliche und aktualisierte Bedienelemente zeigen das vorgesehene Symbol und die Beschriftung.
Ein Symbol fehlt, während andere funktionieren.	Prüfen Sie den Namen mit `exists()` und untersuchen Sie die Renderer-Ausgabe.	Ein unterstützter Name wird korrekt dargestellt, ohne eine weitere globale Symbolschrift hinzuzufügen.

Assets registrieren und die Ersatzdarstellung verstehen

Der Helper verwendet im Backoffice Material Icons. Im Frontoffice liest er den gewählten Symbolsatz und prüft, ob das aktive Theme eine kompatible Schrift unterstützt. Er rendert Inline-SVG, wenn seine Theme-CSS-Prüfungen keine kompatible Symbolschrift finden. Ein blockierter oder fehlgeschlagener Schrift-Download im Browser löst für sich genommen keine SVG-Ersatzdarstellung aus. Das Paket lädt keine eigene Font-Awesome- oder Material-Symbolschrift.

Rufen Sie MPRIcons::init() im Installationsablauf Ihres Moduls auf und behandeln Sie Fehler. Registrieren Sie Front-Assets mit MPRIcons::registerAssets($module) in einem geeigneten Medien-Hook. Theme-Erkennung und Speicherung der Präferenz sind vom Zeichnen eines Symbols getrennt.

Testen Sie nach Theme-Wechseln oder Änderungen mitgelieferter Theme-Assets. Die Erkennung untersucht Theme-CSS; sie kann eine fehlende Schrift nicht verfügbar machen. Nutzen Sie saveIconSet() nur mit einer unterstützten Auswahl und prüfen Sie die resultierende Frontoffice-Darstellung.

In PHP hängt das Verhalten bei unbekannten Namen vom Renderer ab. Ein Name, der dem Muster zum Durchreichen an Material entspricht, wird als Ligatur gerendert. Das garantiert jedoch nicht, dass die Schrift die Glyphe enthält. Font Awesome kann eine leere Ausgabe zurückgeben; der SVG-Modus nutzt seine Ersatzgrafik. Der JavaScript-Helper verwendet bei einem unbekannten Namen stattdessen SVG als Ersatz, sofern das Durchreichen an Material nicht greift. Prüfen Sie semantische Namen während der Entwicklung.

Ein nach einem Theme-Wechsel verschwundenes Symbol untersuchen

Funktioniert ein Warenkorbsymbol im Backoffice, erscheint im Frontoffice aber als Quadrat, untersuchen Sie sein Markup, die berechnete Schrift und fehlgeschlagene Asset-Anfragen. Prüfen Sie, ob altes Modul-CSS die falsche Schrift erzwingt. Korrigieren Sie widersprüchliche Regeln und vergleichen Sie die Ausgabe auf Staging bei nicht verfügbarer Schrift, bevor Sie den gespeicherten Symbolsatz ändern.

Daten an der richtigen Grenze maskieren

Der PHP-Renderer maskiert zusätzliche Klassen und erzeugte Attribute. Sein Material-Durchreichen akzeptiert ein eingeschränktes Namensmuster. Auch der JavaScript-Helper maskiert erzeugte Attributzeichenfolgen. Diese Schutzmaßnahmen gelten für die eigene Ausgabe des Helpers.

Markieren Sie nur das generierte HTML des Symbol-Helpers als vertrauenswürdig, wenn Ihr Template es rendern muss. Maskieren Sie nutzerseitige Beschriftungen, URLs und umgebende Attribute weiterhin getrennt. Machen Sie nicht einen ganzen Button oder eine nicht vertrauenswürdige Template-Variable zu rohem HTML, nur weil sie ein Symbol enthält.

Ist der registrierte JavaScript-Helper verfügbar, gibt MPRIcons.get('cart') Markup und MPRIcons.create('cart') ein DOM-Element zurück. Bevorzugen Sie das Erstellen eines Elements, wenn Sie ein Symbol dynamisch anhängen. Verketten Sie Kundentext nicht mit einer HTML-Zeichenfolge.

Das Bedienelement beschriften, nicht die Dekoration

Generiertes Symbol-Markup ist mit aria-hidden="true" gekennzeichnet; die SVG-Ersatzdarstellung ist ebenfalls nicht fokussierbar. Geben Sie dem umgebenden Bedienelement eine sichtbare Beschriftung oder einen zugänglichen Namen.

echo '<button type="button" aria-label="Remove item">'
    . MPRIcons::get('delete')
    . '</button>';

Übersetzen Sie den Namen des Bedienelements. Verwenden Sie für Aktionen native Buttons und für Navigation Links. Vermitteln Sie Fehler- oder Erfolgszustände nicht ausschließlich durch Farbe oder Form eines Symbols. Prüfen Sie Fokussichtbarkeit, Kontrast und Tastaturbedienung im tatsächlichen Theme.

Zahlungs- und Social-Sprites gezielt nutzen

Das Paket enthält außerdem SVG-Sprite-Bögen für Zahlungs- und Social-Media-Marken. Zahlungsbögen bieten Symbol-, Quadrat-, Rechteck- und reine Textformen. Social-Bögen bieten Symbol-, vollständige Logo- und reine Textformen. Jeder hat helle, dunkle und Akzentvarianten.

Ein Sprite-Dateiname beschreibt einen Bogen, nicht die Anzahl enthaltener Marken. Wählen Sie den Bogen und die Symbol-ID, die Ihr Modul tatsächlich mitliefert. Beispielsweise bezeichnet square_visa_lm das Visa-Symbol im quadratischen Zahlungsbogen für den hellen Modus.

Binden Sie das gewählte vertrauenswürdige Sprite über den normalen Asset-Ablauf Ihres Moduls ein oder veröffentlichen Sie es darüber. Verbergen Sie dekorative Logos vor assistiven Technologien, wenn benachbarter Text die Methode bereits nennt. Ergänzen Sie eine klare Textbeschriftung, wenn ein Markenlogo der einzige sichtbare Inhalt eines Bedienelements ist.

Die Änderung erproben und übergeben

Dokumentieren Sie die aktuellen Bedienelemente, die Symbolpräferenz und die Dateien und installieren Sie die Änderung dann auf Staging. Bestätigen Sie, dass Installationsfehler behandelt und Assets auf den betroffenen Seiten registriert werden.
Prüfen Sie semantische Symbole im Backoffice und in jedem unterstützten Theme, einschließlich der nach einer Warenkorbaktualisierung eingefügten Bedienelemente.
Testen Sie das Frontoffice bei nicht verfügbarer Symbolschrift. Untersuchen Sie unbekannte Namen und dynamische Symbole, statt eine Ersatzgrafik als Nachweis für die beabsichtigte Bedeutung zu akzeptieren.
Prüfen Sie, dass CSS-Overrides keine Fokusindikatoren oder Beschriftungen verbergen. Bedienen Sie die Elemente per Tastatur, untersuchen Sie ihre übersetzten zugänglichen Namen und prüfen Sie, wohin der Fokus wandert, wenn eine Aktion ein Bedienelement entfernt.
Bestätigen Sie anhand der tatsächlich im Release enthaltenen Dateien, dass Sprite-Symbole geladen werden und auf hellen und dunklen Flächen gut erkennbar bleiben.
Veröffentlichen Sie das getestete Modul und die Assets gemeinsam, wiederholen Sie die betroffenen Abläufe und stellen Sie bei fehlerhaften Bedienelementen die vorherigen Dateien und die Präferenz wieder her.

Fragen Sie Ihren Entwickler, welche Namen und Sprite-Symbole mitgeliefert werden, welche PHP- und JavaScript-Pfade die einzelnen Bedienelemente zeichnen, welches Theme die Schrift liefert und welche Dateien gemeinsam wiederherzustellen sind. Bewahren Sie diese Antworten für spätere Updates zusammen mit den Testergebnissen auf.

Häufige Fragen von Shopbetreibern

Bedeuten fehlende Symbole, dass wir ein neues Theme brauchen?

Prüfen Sie zuerst das betroffene Bedienelement und die Asset-Anfragen. Klären Sie vor einem Theme-Austausch, ob die Registrierung oder widersprüchliches CSS den Fehler erklärt.

Aktiviert ein Zahlungslogo die entsprechende Zahlungsart?

Nein. Zeigen Sie nur Marken an, die zu den tatsächlich in Ihrem Checkout angebotenen Zahlungsarten passen. Ein Sprite dient der Darstellung und ist keine Zahlungsintegration.

Können alte und aktualisierte Modul-Bedienelemente nebeneinander bestehen?

Testen Sie benachbarte Bedienelemente und begrenzen Sie Ihr CSS auf das Modul, damit die Korrektur die Schriften anderer Module nicht verändert. Ist der Renderer nicht Material, kann der registrierte JavaScript-Helper außerdem ältere Material-Symbolelemente auf der gesamten Seite ersetzen, einschließlich neu eingefügter Elemente. Prüfen Sie bei betroffenen Bedienelementen Klickverhalten, zugängliche Namen und Fokus.