Freitextfelder im Shopware Frontend ausgeben

Freitextfelder im Shopware Frontend ausgeben

Hendrik Bonke 27. Juli 2018 14

Hier findet ihr den Blogbeitrag als Video


Du willst deinen Online-Shop um neue Daten erweitern, die man im Standard-Theme von Shopware nicht hinterlegen kann? Dann sind Freitextfelder genau das Richtige für dich!

(Lesedauer ~5 Minuten)

Für die folgenden Anpassungen sind Vorkenntnisse mit Smarty hilfreich. Falls dir das nötige "Know-How" fehlt, kannst du es in diesem Blog-Beitrag ganz einfach nachholen.

Also fangen wir nun mit dem Spaß an.

Wir müssen zunächst in das Backend huschen und die Freitextfeld-Verwaltung öffnen. Diese findest du unter den Einstellungen, oben in der Navigation!


Wir möchten nun in diesem Fall die Artikeldetailseite bearbeiten und erweitern. Also wählen wir in der Freitextfeld-Verwaltung die Tabelle Artikel (s_articles_attributes) aus.

Wenn du einmal auf die Selection drückst, siehst du, wo man überall noch Freitextfelder hinzufügen kann - deine Kreativität, wie man diese Freitextfelder einsetzt, kennt also keine Grenzen!


Jep, auf dem ersten Blick ist dieses Tool sehr verwirrend, aber keine Sorge! Wenn man sich kurz reinfuchst ist der Eindruck mit einem Fingerschnipsen wieder weg!

Als nächstes erstellen wir in der Tabelle Artikel ein neues Freitextfeld an - Dazu drücken wir auf dem Button “Hinzufügen”. Du findest diesen in der oberen linken Ecke.

Jetzt erscheinen, auf der anderen Seite der Freitextfeld-Verwaltung des Shopware Backends, einige Einstellungen. Keine Sorge, auch wenn über diese Optionen “Datenbank Einstellungen” steht, du machst keine direkten Änderungen an deiner Datenbank - deine Kundendaten sind also sicher!

In den Spaltenname trägst du nun deinen gewünschten Namen ein. Aber Achtung! Dort sollten keine Umlaute (wie Ä, Ö und ü) verwendet werden, denn dieser Spaltenname wird intern in der Software verwendet und dient der Codierung. Außerdem wäre es empfehlenswert diesen Namen in Englisch zu schreiben.

Damit andere Entwickler (wie z.B. Agenturen) dieses Freitextfeld, auch ohne weitere Forschungen, zuweisen können sollte der Name beschreibend sein.

In diesem Beispiel nehme ich den Spaltennamen “emz_article_size”. Das “emz” ist der Entwicklerkürzel (bei uns steht er für EightMyleZ). Dieses Kürzel steht vor jeder von uns verwendeten Variable und versichert, dass diese durch installierte Plugins oder zukünftigen Änderungen nicht überschrieben wird. (Es kann immer passieren, dass Plugins von Drittanbieter z.B. die Variable “article_size” nutzen)

Weiter geht es mit den Spaltentyp. Dort definieren wir welche Art von Wert wir in unserem Freitextfeld erwarten. Der Typ “Einfacher Text - TEXT” lässt im Backend ein Textfeld erscheinen, der Typ “Checkbox - INT(1)” eine Checkbox (auf Deutsch: Kontrollkästchen) usw.

Außerdem können wir dort angeben, ob das Freitextfeld im Backend angezeigt wird.

Du kannst ja ein bisschen rumspielen und die einzelne Spaltentypen ausprobieren um herauszufinden, welcher dir am meisten zusagt.

Jetzt kommen wir zu den “Anzeige Einstellungen”. Wie der Name uns schon verrät, kommen wir nun zu dem Teil, welchen wir im Backend sehen. Der Label ist einfach der Text, welcher uns im Backend beschreibt um welches Freitextfeld es sich handelt.

Keine Sorge, weil diese Einstellung nicht weiter für interne Organisation oder Codierung verwendet wird, kann dieser ruhig mit Umlaute versehen werden. Außerdem benötigt er auch kein Kürzel o.ä.

Der Support Text ist ein kleiner kursiver Text welcher sich unter dem Freitextfeld versteckt und kurz auf einem Blick beschreibt, was in diesem Freitextfeld einzufügen ist.

Da wir die Maße des Artikels angeben möchten und es wichtig ist, dass die Höhe, Breite und Länge in der richtigen Reihenfolge beschrieben wird, geben wir hier an, dass es sich um diese Formatierung handelt:

Als nächstes kommt die Einstellung für den Hilfe Text. Dieser ist, wie der Support Text, rein optional.

Ist das Feld ausgefüllt, erscheint rechts neben unserem Freitextfeld im Backend ein kleines Fragezeichen. Über dieses können wir mit der Maus hovern, um uns den hinterlegten Text anzeigen zu lassen. 

Nun kommt der etwas technische Teil beim Anlegen eines Freitextfeldes - Die Option “Im Backend anzeigen”. Diese Option klingt auf den ersten Blick etwas verwirrend, aber keine Sorge, dies ist kein Bug, denn die Option dient dazu, dieses Freitextfeld als Eigenschaft für einen Artikel nutzen zu können. Die Besonderheit liegt aber darin, dass diese Eigenschaft sich nur über Plugins ändern lässt. Für Plugin Entwickler ein echter Segen.

Die Checkbox “übersetzbar” dient dazu, falls man einen Subshop bzw. Sprachshop auch installiert hat, dass man für das Freitextfeld für jeden einzelnen Shop einen anderen Wert zuweisen kann (z. B. der Subshop “EN” sollte anstatt “10cm x 20cm x 30cm” einen anderen Wert besitzen, da die englische Fassung des Artikels eine andere Größe besitzt).

Zu guter Letzt kommen wir zu der Position. Diese Einstellung setzt einen Wert für jedes einzelne Feld.
Je niedriger der Wert ist, desto höher ist dieses Feld im Backend (unter dem Reiter “Freitextfelder”) platziert.

Jetzt haben wir unser Freitextfeld konfiguriert...

... heißt also wir speichern diese Einstellungen und lassen uns das Freitextfeld generieren.

Nun können wir für jeden einzelnen Artikel das Freitextfeld befüllen. Änderungen an Freitextfeldern werden im Frontend erst nach Leeren des Caches angezeigt.

Nun zu der Ausgabe...

Wie am Anfang des Blogs angeteast wurde, benötigen wir Kenntnisse in Smarty (wie arbeite ich mit Smarty) damit wir die Variable im Frontend ausgeben können.

Zur Info: Wir werden ab jetzt nur noch Änderungen in der Datei buy_container.tpl machen. Du findest diese unter dem Pfad DEINTHEME/frontend/detail/content/buy_container.tpl

Als aller erstes gehe ich sicher, ob das Freitextfeld ohne Probleme funktioniert und lasse mir durch die Smarty Syntax {debug} alle verfügbaren Variablen ausgeben.

{extends file='parent:frontend/detail/content/buy_container.tpl'}

{debug}

Wenn wir nun den Cache leeren und dann in die Detailseite eines Artikels huschen, sehen wir, dass sich nun ein Fenster öffnet, welches uns verrät, welche Variable verfügbar ist. Wir sehen außerdem den Inhalt der Variable.

Nachdem wir unsere Variable entdeckt haben, können wir wieder das {debug} entfernen und uns auf die Ausgabe des Freitextfeldes konzentrieren.

Wenn wir ganz fuchsig sind, dann haben wir uns den Spaltennamen gemerkt, denn dieser wird, wie im Hinweis schon angedeutet ist, im Code verwendet.

{extends file='parent:frontend/detail/content/buy_container.tpl'}

{* Product - Base information *}
{block name='frontend_detail_index_buy_container_base_info'}
	{$smarty.block.parent}
    
	{* Product attribute 2 *}
	{block name='frontend_detail_data_attributes_masse'}
		{if $sArticle.emz_article_size}
            {s name="DetailAttributeField3Label" namespace="frontend/detail/index"}Maße{/s}:
            {$sArticle.emz_article_size|escape}
		{/if}
	{/block}
{/block}

In diesem Fall kopiere ich mir etwas aus dem Shopware Code heraus und ergänze den Namen $sArticle.attr2 mit $sArticle.emz_article_size.
Wie wir sehen, wird zunächst die Variable $sArticle angesprochen.

Das ist die Variable, welche alle Informationen zum Artikel beinhaltet, d. h. hier wird z. B. der Preis, Varianten, Artikelbilder u.v.m. gespeichert.

Nun fügen wir den Codeblock in der Datei hinzu, und lassen Shopware den Cache einmal leeren.

Wenn wir nun die Detailseite erneut laden lassen, sehen wir, dass die von uns angegebene Maße ausgegeben wird.


Im Grunde ist das Anlegen und die Ausgabe eines Freitextfeldes (Attribut) ein Kinderspiel welches aber Erfahrung im Bereich Codierung und Shopware benötigt.

Ich hoffe ich konnte euch mit diesem Tutorial zeigen wie wir mit wenigen Schritten Freitextfelder im Frontend ausgeben könnt!

14 Kommentare

  • Hallo liebes 8mylez Team,

    ich würde gerne das Artikelfeld Gewicht (in kg) aus dem Artikel genauso wie Ihr das mit Maße habt in den Artikel als Versandgewicht implementieren.

    Wie müsste ich denn da vorgehen, hab mal debug auch auf der Detailseite angemacht aber bei mir öffnet sich kein Fenster (cache ist auch geleert).

    Vielleich könnt Ihr mir da weiterhelfen.

    Grüße
    Christian
  • Hey Christian,

    vielen Dank für dein Interesse.

    In welcher Datei hast du die Anpassungen gemacht? Wurden diese im Bare Theme, oder in einem eigenen Theme gemacht?

    Falls du ein eigenes verwendest, kannst du sicher stellen, dass andere Anpassungen geladen werden?

    Möglicherweise gibt es Probleme mit dem Dateinamen oder den verwendeten Block ("{extends file='parent:frontend[...]'}" am Dateianfang nicht vergessen!).

    Beste Grüße
    Hendrik
  • Hallo @8mylez,

    ich suche nach einer Lösung wie man auf einer Shopseite einen Textbaustein einfügen kann.
    Textbaustein:
    Namespace: frontend/shopseiten
    Name: shop-name

    Wie kann ich nun diese Snippet "shop-name" auf einer Shopseite anzeigen lassen?
    Könntet Ihr dies ggf. einmal erklären? ich würde mich sehr freuen.
    Danke im Voraus.

    PS
    Euer Blog ist wirklich spitze! Sehr nützliche Inhalte.

  • Hey Martin,

    Textbausteine sind in Smarty ein sehr einfaches Vorhaben. Damit du auf Textbausteine zugreifen kannst, musst du den Tag {s}{/s} verwenden.

    Damit dieser Tag mit den passenden Daten gefüttert wird, musst du diesen natürlich etwas konfigurieren.
    In deinem Fall lautet es:
    {s namespace="frontend/shopseiten" name="shop-name"}{/s}

    Wie dir sicher schon aufgefallen ist, kannst du auch per Smarty den Inhalt anpassen – damit kannst du also auch Standardwerte setzten. Wir sagen jetzt, dass der Standardwert nun "Demo-Shop" lauten soll. So muss es aussehen:
    {s namespace="frontend/shopseiten" name="shop-name"}Demo-Shop{/s}

    Du kannst dann die Werte deiner Textbausteine im Backend unter "Einstellungen > Textbausteine" anpassen.

    Beste Grüße
    Hendrik
  • Hi, ein super hilfreicher Artikel, aber eine Frage hätte ich noch:
    Wie komme ich auf der Artikeldetailseite an Freitextfelder des Herstellers?
    Ich habe es hiermit versucht, aber das greift nur auf der Herstellerseite selbst:
    {assign attr $manufacturer->getAttributes()}
    {$attr.core->get("freitextfeld-name")}
    Danke schon im Voraus!
    Herzliche Grüße,
    Karina
  • Hey Karina,

    wie es scheint steht deine gewünschte Variable nicht auf der Detailseite zur Verfügung.
    Du musst also in diesem Fall etwas PHP Code anwenden damit du mit einem Event deine gewünschte Variable an der Detailansicht übergeben kannst.

    Damit hast du dann die Möglichkeit mit Smarty auf diese Variable zuzugreifen.
    (Ein kleiner Tipp: Um den Smartycode etwas abzuspecken, lohnt es sich direkt die Datenverarbeitung im PHP Code zu machen)

    Du findest ein kleines Tutorial direkt in der Shopware-Dokumentation: https://developers.shopware.com/developers-guide/plugin-quick-start/#subscriber-classes

    Beste Grüße
    Hendrik
  • Hallo,
    kann man die Freitextfelder auch auf der Index unter einer EKW ausgeben?
  • Hey Gerhard,

    prinzipiell kannst du überall im Frontend deine Freitextfelder ausgeben lassen. Leider limitiert es sich, wenn man nur mit einem Theme arbeitet – Wenn du also beinahe "unbegrenzte" Möglichkeiten haben möchtest, müsstest du zu einem (selbstgeschriebenen) Plugin wechseln. Das benötigt leider erweiterte Programmierkenntnisse, vor allem im Shopware System.

    Warum? Shopware liefert nicht auf jeder Seite alle Variablen, dementsprechend musst du mit einem Plugin an dieser Stelle nachhelfen.
    Du kannst dich dazu in die Shopware Dokumentation einlesen (Diese ist auf Englisch): https://developers.shopware.com/developers-guide/event-guide/

    Kurz gesagt: Du musst das passende Event finden und deine gewünschten Variablen dem Theme übergeben.

    Eventuell gibt es zu diesem Thema noch ein Blogpost, also sei gespannt!

    Beste Grüße
    Hendrik
  • Hallo Alexander,

    besten Dank für die Antwort.
    Ich bin bei dem Thema noch unbeleckt. An welcher Stelle in der Doku müsste ich nachschauen, um zu verstehen, wo ich die Variable mit GET hole (also in welche Datei ich das reinschreibe - es gehört ja nicht ins Template, oder?). Ich google offenbar nicht die richtigen Begriffe, um ans Ziel zu kommen. :)

    Danke im Voraus für die Hilfe!
  • Hey Martin,

    Der Codeschnipsel den Alexander schickte, kann tatsächlich im Theme integriert werden.
    Wichtig ist aber auch, dass die angesprochene Variable auch im Theme zur Verfügung steht, also bei "$sArticle.attributes.core->get('name_des_attributs')" ist es die "$sArticle"-Variable.
    Wenn diese aber nicht im Theme zur Verfügung steht (das kannst du mit {debug} prüfen), musst du diese mit einem (selbstgeschriebenen) Plugin selbst dem Theme übergeben.
    Das erfordert erweiterte Programmierkenntnisse und Shopware bietet dazu leider keine genauen Informationen in der Dokumentation.
    Du kannst dir aber folgenden Eintrag in der Dokumentation anschauen: https://developers.shopware.com/developers-guide/event-guide/

    Dort wird beschrieben, wie man besondere Events zugreift um dann fehlende Variablen Daten zu übergeben, zu bearbeiten oder zu manipulieren.

    Eventuell gibt es dazu noch ein Blogbeitrag!

    Beste Grüße
    Hendrik
  • Toller Beitrag, jetzt habe ich aber leider noch eine Frage dazu, ich möchte gern das Attribut 2 der Kategorie Freitextfelder als Checkbox verwenden um eine weitere CSS Klasse dem Eintrag ind er Navigation hinzuzufügen, damit der Link in der Navigation andersfarbig hervorgehoben wird und bekomme es leider nicht hin, wie müsste ich hierfür vorgehen?

    Im Internet bin ich schon einmal hierauf gestoßen aber das funktioniert leider nicht

    $sCategoryContent.attribute.attribute2
  • Hey Christoph,

    vielen Dank!

    Probier es mal mit $sCategoryContent.attributes.core->get('attribute2')

    Gruß
    Alexander
  • Ihr habt mir schon öfter geholfen.
    Spitzenmäßigerweise werden die Variablen für die Freitextfelder des Artikels per sé im template bereitgestellt, um sie abzufragen.
    Das ist z.B. beim Freitextfeld im Kunden (s_user_attributes) leider nicht der Fall.

    Wie kriege ich denn ein Freitextfeld, was nicht grundsätzlich im frontend bereitsgestellt wird, trotzdem ins Frontend? Ich finde dazu einfach keine Doku.

  • Hey Martin,

    das freut mich :)

    An die Attribute kommst du auch. Du musst diese aber ueber $sArticle.attributes.core->get('name_des_attributs') holen.

    $sArticle ist hier als Platzhalter zu sehen. Je nachdem wie deine Variable heisst musst du diese verwenden. Mit {debug} im Theme bekommst du ein kleines Fenster mit allen verfuegbaren Variablen. Nicht vergessen das wieder rauszunehmen wenn du im Production Shop arbeitest!

    Gruß
    Alexander

Was denkst du?

SEO für Shopware!

shopware tutorial ebook mockup
Ausführliche Schritt für Schritt Anleitungen für gute Rankings in den Suchmaschinen.
Zum Store

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Die größten Fehler bei der Entwicklung eines Shopware 5 Themes
Freitextfelder im Shopware Frontend ausgeben
Plugin Themes überschreiben und anpassen
Shopware Theme: Eigenes Listing Layout erstellen
Wie du schnell und einfach Google Shopping für Shopware einrichtest
Vorsicht Shopware Update! Was du beim Updaten beachten musst
Theme Entwicklung: Hugo Boss Header zum Selbermachen
Staging Umgebung – Was ist das und warum brauchst du eine?
Logo Größe mit Less für Shopware 5 anpassen
© 2017 by 8mylez. Powered by Goltfisch GmbH.