Freitextfelder im Shopware Frontend ausgeben

Freitextfelder im Shopware Frontend ausgeben

Hendrik Bonke 27. Juli 2018 0

Gehen wir davon aus, du hast deinen Online-Shop frisch installiert und bemerkst ziemlich schnell, dass dein Shop aufgrund dem vorinstalliertem Standard-Theme, sich von den anderen Shopware-Shops kaum abhebt.
Wir können das sehr einfach ändern! Du brauchst aber Grundkenntnisse in Smarty!
Du findest hier ein “How-To” wie du mit Smarty arbeitest!

(Lesedauer ~5 Minuten)

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 dein 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 jede von uns verwendete 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 um welchen Wert es sich in diesem Fall handelt. Außerdem können wir dort angeben, auf welcher Art und Weise das Freitextfeld im Backend angezeigt wird.
Der Typ “Einfacher Text - TEXT” lässt im Backend ein Textfeld erscheinen, der Typ “Checkbox - INT(1)” eine Checkbox (auf Deutsch: Kontrollkästchen) usw.

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.
Wenn das Feld ausgefüllt ist, dann erscheint der Text in einer Sprechblase auf der rechten Seite des (Text-)Feldes. Dieser sollte eine detaillierte Beschreibung, wie das Feld auszufüllen ist, beinhalten.

Nun kommt der etwas technische Teil beim Anlegen eines Freitextfeldes - Die Option “Im Backend anzeigen”. Diese Option klingt auf dem ersten Blick etwas verwirrend, aber keine Sorge, dies ist kein Bug, denn die Option dient dazu, dieses Freitextfeld als Eigenschaft für ein 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 ein Subshop bzw. Sprachshop auch installiert hat, dass man für das Freitextfeld für jeden einzelnen Shop ein 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. Die Änderungen an den Freitextfeldern wird aber nach dem leeren des Caches gespeichert.

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 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 der 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 Artikel 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 Grund 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!

Hol dir unseren kostenlosen Shopware E-Mail-Kurs:

Lerne wie du deinen eigenen Shopware 5 
Shop erstellst und verwaltest

Noch keine Kommentare vorhanden.

Was denkst du?

Shopware SEO
Guide 2018

shopware seo guide
So optimierst Du Deinen Shopware Shop richtig!
mehr erfahren

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
Die größten Fehler bei der Entwicklung eines Shopware 5 Themes
Logo Größe anpassen mit Less für Shopware 5
Theme: Eigenes Listing Layout erstellen
Plugin Theme anpassen
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?
Wie du jedes Icon in Shopware 5 anpassen kannst
Shopware Logo aus dem Footer entfernen
© 2017 by 8mylez. Powered by Goltfisch GmbH.