Die OXID eShop Kontaktseite anpassen - so geht's

27.06.2017

Die Kontaktseite ist für Online-Shops wichtig, denn sie nimmt die Rolle des Verkäufers oder Beraters ein, wenn der Kunde eine Frage hat. Und da in Online-Shops Produkte immer nur eingeschränkt abgebildet und beschrieben werden können, ist der Beratungsbedarf von Kunden relativ hoch.

OXID eShop bringt eine vorgefertigte Kontaktseite mit, die jedoch recht starr und nicht vom Backend aus anpassbar ist. Sie besteht aus den Kontaktdaten in der immer gleichen Reihenfolge sowie darunter einem fest aufgebauten Kontaktformular. Es gibt keine Möglichkeit, eigene Texte, wie z. B. Hinweise zu Öffnungs- und Telefonzeiten, Fotos von Ansprechpartnern und andere Infos zu hinterlegen, die es Kunden erleichtern würden, Kontakt aufzunehmen.

Doch diese fehlenden Infos können Sie mit wenigen Handgriffen selbst in Ihren Shop integrieren. Ich zeige Ihnen wie. Wie immer Schritt für Schritt - und am Ende dieses Beitrags finden Sie auch die vorgefertigten Beispieldateien zum Herunterladen.

Schritt 1 - die CMS Snippets anlegen

CMS-Snippets können ganz einfach in OXID Templates integriert werden. Das Schöne ist dann ja, dass Sie die Inhalte später jederzeit einfach und sehr bequem über das OXID Backend aktualisieren und ergänzen können. Sie können hier Bilder, wie eine Anfahrtsbeschreibung oder ein Foto von einem Mitarbeiter, integrieren, Infos zu Ihren Öffnungs- und Sprechzeiten, verschiedene Telefonnummern für verschiedene Anfragenthemen und vieles mehr.

CMS Snippets sind schnell und einfach erstellt. Gehen Sie dazu im Shop Admin auf Kundeninformationen → CMS. Das Eingabeformular ist standardmäßig leer.

Wichtig ist die Verwendung einer eindeutigen Identity (Ident.). OXID vergibt hier zwar automatisch einen langen Text aus Buchstaben und Zahlen, besser ist es aber immer, ein Ident zu vergeben, an dem man erstens erkennt, dass es ein eigener ist (und nicht einer, der von OXID oder von irgendeinem Modul kommt) und zweitens vielleicht auch, wo er verwendet wird. Verwenden Sie daher immer einen Präfix (abgeleitet von Ihrem Shopnamen) und einen eindeutigen Namen.

Ich schlage vor, wir legen zwei Snippets an - einen, den wir über dem Kontaktformular anzeigen und einen, den wir darunter anzeigen. Sie können später auch jederzeit die Snippets ausblenden, indem Sie sie deaktivieren, daher schlage ich wirklich vor, gleich beide Snippets zu erstellen. Ob Sie sie verwenden, können Sie dann später immer noch entscheiden. Ich nenne die Snippet-Idents "dwa_kontaktseite_oben" und "dwa_kontaktseite_unten". dwa ist unser Kürzel, das wir in allen unseren Modulen verwenden - setzen Sie dafür Ihren eigenen (beliebigen) Präfix ein.

Da der Titel im Shop selbst nicht ausgegeben wird, können Sie diesen z. B. für einen Hinweis nutzen, wo und wann das Snippet verwendet wird. Setzen Sie außerdem das Häkchen in "Snippet" und geben Sie dann rechts Ihren Text ein. Wenn Sie Fotos verwenden möchten, nutzen Sie einen Editor, der Bildupload und -integration unterstützt, oder unser Mediathek Modul für OXID.

Verwendung von Variablen im Snippet

Wenn Sie sich einmal das Template der Kontaktseite ansehen (/application/views/ihr-theme/tpl/page/info/contact.tpl), werden Sie dort folgende Zeilen (so oder so ähnlich) finden:

[{$oxcmp_shop->oxshops__oxstreet->value}]
[{$oxcmp_shop->oxshops__oxzip->value}] [{$oxcmp_shop->oxshops__oxcity->value}]
[{$oxcmp_shop->oxshops__oxcountry->value}]
[{if $oxcmp_shop->oxshops__oxtelefon->value}]
[{oxmultilang ident="PHONE"}] [{$oxcmp_shop->oxshops__oxtelefon->value}]
[{/if}]
[{if $oxcmp_shop->oxshops__oxtelefax->value}]
[{oxmultilang ident="FAX"}] [{$oxcmp_shop->oxshops__oxtelefax->value}]
[{/if}]
[{if $oxcmp_shop->oxshops__oxinfoemail->value}]
[{oxmultilang ident="EMAIL"}] [{oxmailto address=$oxcmp_shop->oxshops__oxinfoemail->value encode="javascript"}]
[{/if}]

Hier werden Variablen verwendet, deren Werte Sie im Shop Admin einstellen (unter Stammdaten → Grundeinstellungen). Diese Variablen können Sie natürlich auch im Snippet verwenden, z. B. wenn Sie dort Ihre Telefonnummer, E-Mail Adresse oder Anschrift hinterlegen möchten. Diese Daten werden dann automatisch aktualisiert, wenn Sie sie in den Grundeinstellungen ändern, so dass Sie nicht das Snippet anpassen müssen. Ich empfehle diese Vorgehensweise, da man meist, wenn es soweit ist, und sich z. B. die Anschrift ändert, gar keinen Überblick mehr hat, wo die Änderungen überall eingepflegt werden müssen.

Eine Liste mit möglichen Erweiterungen und Codes finden Sie ebenfalls im Download am Ende dieses Beitrags.

Anpassungen in Azure und Mobile

Wir werden nun die fest eingebundenen Kontaktdaten im Template auskommentieren und stattdessen die Snippets über und unter dem Formular einbinden. Ob Sie das genauso machen möchten, entscheiden Sie natürlich selbst. Sie können die Snippets auch einfach nur zusätzlich zu den bereits bestehenden Inhalten einbinden. Die Templates in den Themes Azure und Mobile ähneln sich sehr stark (sie sind beinahe identisch), daher handle ich beide zusammen ab.

In den OXID Templates werden Bestandteile auskommentiert, indem man sie zwischen [{* und *}] setzt. Das machen wir jetzt mit den Kontaktdaten.

Das Template contact.tpl finden Sie im Verzeichnis /application/views/azure/tpl/page/info/.

So sieht es im Mobile Theme vor der Änderung aus (ich kürze den Code für die Übersichtlichkeit hier ein wenig ein):

[{$oxcmp_shop->oxshops__oxstreet->value}]
 [{$oxcmp_shop->oxshops__oxzip->value}] [{$oxcmp_shop->oxshops__oxcity->value}]
 [{$oxcmp_shop->oxshops__oxcountry->value}]
...
 [{if $oxcmp_shop->oxshops__oxinfoemail->value}]
 [{oxmultilang ident="EMAIL"}] [{oxmailto address=$oxcmp_shop->oxshops__oxinfoemail->value encode="javascript"}]
 [{/if}]

Und so danach (die Änderung finden Sie in der ersten und letzten Zeile, ich habe nur Sternchen ergänzt):

[{*$oxcmp_shop->oxshops__oxstreet->value}]
 [{$oxcmp_shop->oxshops__oxzip->value}] [{$oxcmp_shop->oxshops__oxcity->value}]
 [{$oxcmp_shop->oxshops__oxcountry->value}]
...
 [{if $oxcmp_shop->oxshops__oxinfoemail->value}]
 [{oxmultilang ident="EMAIL"}] [{oxmailto address=$oxcmp_shop->oxshops__oxinfoemail->value encode="javascript"}]
 [{/if*}]

So sieht es in Azure vor der Änderung aus:

• [{ $oxcmp_shop->oxshops__oxstreet->value }]
• [{ $oxcmp_shop->oxshops__oxzip->value }] [{ $oxcmp_shop->oxshops__oxcity->value }]
... [{if $oxcmp_shop->oxshops__oxinfoemail->value}]
• [{ oxmultilang ident="EMAIL" suffix="COLON" }] [{oxmailto address=$oxcmp_shop->oxshops__oxinfoemail->value encode="javascript"}]
[{/if}]

Und so danach (wieder Änderung nur in der ersten und letzten Zeile)

[{*

• [{ $oxcmp_shop->oxshops__oxstreet->value }]
• [{ $oxcmp_shop->oxshops__oxzip->value }] [{ $oxcmp_shop->oxshops__oxcity->value }]
... [{if $oxcmp_shop->oxshops__oxinfoemail->value}]
• [{ oxmultilang ident="EMAIL" suffix="COLON" }] [{oxmailto address=$oxcmp_shop->oxshops__oxinfoemail->value encode="javascript"}]
[{/if}]

*}]

Wir können nun direkt unter diesen von uns angepassten Code das Snippet einbauen, das über dem Kontaktformular erscheinen soll:

[{oxifcontent ident="dwa_kontaktseite_oben" object=oCont}]
 [{$oCont->oxcontents__oxcontent->value}]
[{/oxifcontent}]

Verwenden Sie bei ident den von Ihnen vergebenen Ident für das Snippet. Wird das Snippet in dieser Form eingebunden, wird es automatisch immer nur dann angezeigt, wenn es aktiviert ist.

Und nun noch das Snippet unter dem Kontaktformular direkt unter der Zeile [{include file="form/contact.tpl"}]:

[{include file="form/contact.tpl"}]
 [{oxifcontent ident="dwa_kontaktseite_unten" object=oCont}]
   [{$oCont->oxcontents__oxcontent->value}]
 [{/oxifcontent}]

Fertig.

Anpassungen im Flow

Das Kontakt-Template für Flow ist etwas komplexer aufgebaut, weil hier z. B. eine Google Map bereits standardmäßig eingebunden werden kann und weil Rich Snippets für Suchmaschinen verwendet werden.

Im Flow ergänzen Sie den Abschnitt mit den Kontaktdaten vorn und am Ende durch einen öffnenden und schließenden Kommentar:

wird zu

[{*

*}]

Auch hier können Sie direkt darunter das obere Snippet einbinden:

[{oxifcontent ident="dwa_kontaktseite_oben" object=oCont}]
 [{$oCont->oxcontents__oxcontent->value}]
 [{/oxifcontent}]

Verwenden Sie wieder den von Ihnen vergebenen Ident.

Im Flow-Template ist das Kontaktformular in ein div integriert - ergänzen Sie das untere Snippet unter diesem div, so:

...
 [{include file="form/contact.tpl"}]
 
 [{oxifcontent ident="dwa_kontaktseite_unten" object=oCont}]
 [{$oCont->oxcontents__oxcontent->value}]
 [{/oxifcontent}]

Templates und Variablen-Liste herunterladen

Hier finden Sie die angepassten Kontaktseiten-Templates für Azure, Flow und Mobile sowie den ausführbaren SQL-Code zum Erstellen der Snippets.

Das SQL kopieren Sie unter Service → Tools in das Eingabefeld, um es auszuführen.

Service und Kontaktmöglichkeit verbessern mit Livechat

Vor einigen Tagen haben wir auf unserer Website, im Blog und im Shop den Livechat erneuert. Zum Einsatz kommt jetzt die neueste Version von LiveZilla. Wir und auch unsere Kunden sind davon begeistert.

Ich glaube, dass viele Shops davon profitieren würden, eine so schnelle und persönliche Möglichkeit der Kontaktaufnahme auf jeder Seite anzubieten. LiveZilla ist zwar schnell installiert und eingerichtet, wenn man es jedoch nicht täglich macht, kommen dabei sicher auch einige Fragen auf. Daher haben wir uns überlegt, speziell für OXID Shops ein entsprechendes Service-Angebot zu schnüren (als Modul geht das leider nicht). Mit diesem Angebot kümmern wir uns um die Installation, die Einrichtung des Benutzers und des Chat-Widgets, die wichtigsten Einstellungen sowie die Integration in den OXID Shop.

Hier finden Sie alle Details zu unserem Angebot und können es auch direkt buchen (oder per Livechat Fragen stellen, falls wir online sind ;)).

Sharing is caring - teile den Beitrag

Ähnliche Beiträge

• Maximale Bestellmenge in OXID Shops - Mindestmenge-Modul erweitert
• Neues vom Flexiblen CSV Export Modul für OXID eShop
• DHL Retoure (neues OXID eShop Modul)
• OXID eShop Modul "Premium Gutscheine"
• OXID eShop - wenn der Kunde bei Rabatten nicht sieht, dass er spart

Beitrag kommentieren