Problembeschreibung

Virtuemart bietet in der Produkt-Detail-Seite einen Button mit einem Link zu einem Formular, über welches der Seitennutzer eine Frage zum Produkt stellen kann. Vielen Shopbetreibern ist dieses Formular mit seinen angebotenen Feldern zu dürftig. Es fehlen ggf. wichtige Felder um mit dem Kunden in Kontakt treten zu können. Nur die E-Mail-Adresse ist einfach zu wenig. Deshalb trat ein Kunde mit der Bitte an mich heran, diese Formular um die Felder Straße-und-Hausnummer, PLZ-Ort, Telefon und Betreff zu erweitern. Zunächst hatte ich befürchtet, dass man dazu Core-Scripte modifizieren müsste. Jedoch stellte sich heraus, dass die Lösung zum einen recht einfach ist, und zum anderen keine Core-Scripte betreffen muss. Alles gelingt durch Erzeugen von Template-Override-Scripten im einen Joomla-Template. Diese Beitrag beschreibt den Weg zur Lösung.

 

Lösung in drei Schritten

Natürlich wäre es vom sauberen Stil her notwendig, speziell das Abholen der gesendeten Formularinhalte über das Control-Script components/com_virtuemart/views/askquestion/view.html.php zu realisieren. Dort gehört die Request-Abfrage der Feldinhalte und das Bereitstellen der Inhalte für die Mail-Sende-Aktion eigentlich hin. Nur, das ist eben ein Core-Script und nicht über das Overriding eingebunden. Deshalb sollte man eine Modifikation dort vermeiden. Betroffen sind sind schließlich drei PHP-Template-Scripte und und eine paar CSS-Styles, die man in die custom.css einfügen kann.

Kurz noch ein Hinweis: Diese Anleitung ist geschrieben für die VirtueMart 3 und die Scriptbeispiele beziehen sich exakt auf die Version 3.2.14 von VirtueMart. Ungeprüft würde ich aber behaupten, dass mit dieser Anleitung auch frühere und spätere VM-Versionen anpassbar sind. Ggf. müssen Sie etwas kreativ sein, wenn sich kleine Unterschieden durch andere Versionen ergeben sollten.

Nun die Schritte bzgl. der zu modifizierenden Dateien im einzelnen:



Schritt 1 - Das Erweiternd es Fragen-zum-Produkt-Formulars:

Wir kopieren das Formular-Template Script form.php aus dem Order components/com_virtuemart/views/askquestion/tmpl in unser Template-Override-Verzeichnis templates/DEIN-TEMPLATE/html/com_virtuemart/askquestion/. Achtung, zwar arbeiten hier alle Joomla-Template grundsätzlich mit der gleichen Verzeichnisstruktur für die Overrides, jedoch gibt es einzelne Templates, die hier etwas spezielle Pfade nutzen.

Hier gibt es einen Block <div class="form-field"> und in diesem das Formular mit der Tabelle mit den Formularfeldern. Hier können einfach nach Belieben weitere Felder hinzugefügt werden. Hier mal ein Beispiel für die von mir hinzugefügten Felder phone, strhsnr, plzort und betreff (ca. ab Zeile 73):

<table class="askform">
	<tr>
		<td><label for="name"><?php echo vmText::_('COM_VIRTUEMART_USER_FORM_NAME')  ?> : </label></td>
		<td><input type="text" class="validate[required,minSize[3],maxSize[64]]" value="<?php echo $this->user->name ? $this->user->name : $sessData['name'] ?>" name="name" id="name" size="30"  validation="required name"/></td>
	</tr>
	<tr>
		<td><label for="email"><?php echo vmText::_('COM_VIRTUEMART_USER_FORM_EMAIL')  ?> : </label></td>
		<td><input type="text" class="validate[required,custom[email]]" value="<?php echo $this->user->email ? $this->user->email : $sessData['email'] ?>" name="email" id="email" size="30"  validation="required email"/></td>
	</tr>
	<tr>
		<td><label for="phone"><?php echo vmText::_('COM_VIRTUEMART_SHOPPER_FORM_PHONE')  ?> : </label></td>
		<td><input type="text" class="validate[required,minSize[8],maxSize[15]]" value="<?php echo $this->user->phone ? $this->user->phone :  $askQuestionData['phone'] # $sessData['phone'] ?>" name="phone" id="phone" size="30"  validation="required phone"/></td>
	</tr>
	<tr>
		<td><label for="strhsnr">Str. / HausNr. : </label></td>
		<td><input type="text" class="validate[required,minSize[3],maxSize[64]]" value="<?php echo $this->user->strhsnr ? $this->user->strhsnr :  $askQuestionData['strhsnr'] # $sessData['strhsnr'] ?>" name="strhsnr" id="strhsnr" size="30"  validation="required strhsnr"/></td>
	</tr>
	<tr>
		<td><label for="plzort">PLZ / Ort : </label></td>
		<td><input type="text" class="validate[required,minSize[3],maxSize[64]]" value="<?php echo $this->user->plzort ? $this->user->plzort :  $askQuestionData['plzort'] # $sessData['plzort'] ?>" name="plzort" id="plzort" size="30"  validation="required plzort"/></td>
	</tr>
	<tr>
		<td><label for="betreff">Betreff : </label></td>
		<td><input type="text" class="" value="<?php echo $this->user->betreff ? $this->user->betreff :  $askQuestionData['betreff'] # $sessData['betreff'] ?>" name="betreff" id="betreff" size="30"  validation="required betreff"/></td>
	</tr>
	<tr>
		<td colspan="2"><label for="comment"><?php echo vmText::sprintf('COM_VIRTUEMART_ASK_COMMENT', $min, $max); ?></label></td>
	</tr>
	<tr>
		<td colspan="2"><textarea title="<?php echo vmText::sprintf('COM_VIRTUEMART_ASK_COMMENT', $min, $max) ?>" class="validate[required,minSize[<?php echo $min ?>],maxSize[<?php echo $max ?>]] field" id="comment" name="comment" rows="8"><?php echo $sessData['comment'] ?></textarea></td>
	</tr>
</table>

Nach dem erkennbaren Prinzip können nach Belieben weitere Wunschfelder hinzugefügt werden. Weiter gehts mit dem nächsten Schritt.

Schritt 2: Das HTML-Mail-Script

Nun passen wir das Script an, welches für den die HTML-Version der E-Mail an den Shop-Betreiber verwendet wird. Das kopieren wir wieder aus dem Verzeichnis components/com_virtuemart/views/askquestion/tmpl diesmal die Datei mail_html_question.php in unser Template-Override-Verzeichnis: templates/rt_photon/html/com_virtuemart/askquestion.

Ganz oben in dieses Override-Script binden wir Scriptzeilen ein, die die gesendeten zusätzlichen Formularfelder aus dem Request holen und in Variablen ablegen:

 

<?php
$this->user->phone = vRequest::getString('phone');
$this->user->strhsnr = vRequest::getString('strhsnr');
$this->user->plzort = vRequest::getString('plzort');
$this->user->betreff = vRequest::getString('betreff');
# weitere Mods. unten in der Tabellen-HTML-Struktur
?>

Damit stehen diese uns im weiteren Scriptverlauf zur Verfügung.

In der dann folgenden HTML-Struktur wird eine Tabelle mit dem Fomularinhalten erzeugt. Auch diese Einfügungen sind wieder ganz einfach. Z.B. unter die Tabellenzeile, wo die E-Mail-Adresse des fragenden Nutzers ausgegeben wird, fügen wir die Ausgabe unserer neuen Feldinhalte zusätzlich ein und verwenden dabei in Variablen aus o.g. Zuweisungen:

 

<tr style="border-bottom : 1px solid #dad8d8;">
	<td align="center" colspan="2">
		<span style="font-size: 14px; font-weight: bold"><?php echo vmText::sprintf('COM_VIRTUEMART_QUESTION_MAIL_FROM', $this->user->name, $this->user->email); ?></span>
		<br /><br />
	</td>
</tr><tr>
	<td align="right" >Telefon:&nbsp;&nbsp;</td><td><?php echo $this->user->phone; ?></td>
</tr><tr>
	<td align="right">Str./HsNr.:&nbsp;&nbsp;</td><td><?php echo $this->user->strhsnr; ?></td>
</tr><tr>
	<td align="right">PLZ Ort:&nbsp;&nbsp;</td><td><?php echo $this->user->plzort; ?></td>
</tr><tr>
	<td align="right">Betreff:&nbsp;&nbsp;</td><td><?php echo $this->user->betreff; ?></td>
</tr><tr>
	<td colspan="2"><hr><?php echo $this->comment; ?><hr></td></tr>

Das war's schon zur Anpassung in der HTML-E-Mail-Version.

 

Schritt 3: Anpassung der Text-E-Mail-Version

Der nun folgende Schritt ist evtl. bei dem einen oder anderen gar nicht mehr notwendig sondern nur eine Frage des sauberen Stils. Jede HTML-Mail sollte auch eine Raw-Text-Version des Inhaltes enthalten, für den Fall, dass der Empfänger keine HTML-Mail angezeigt bekommen möchte oder kann. Da dies aber in diesem Fall der Shop-Betreiber ist, treffen Sie diese Entscheidung ganz für sich allein.

Also alle neuen Felder müssten auch in der Raw-Text-Version des E-Mail-Template eingefügt werden. Deshalb dublizieren wir aus dem gleichen o.g. Verzeichnis nun das Script mail_raw_question.php in das genannte Template-Override-Verzeichnis. Dieses Script ist ja ansich sehr überschaubar. Deshalb kopiere ich nicht nur einzelne Zeilen hier in die Beschreibung, sondern gleich das ganze Script, welches dann mit unseren neuen Feldern so aussehen sollte:

 

<?php
defined('_JEXEC') or die('');

# Begin mod. mD.SK 2018-04-27
# Diese Dinge sollten eigentlich im Controllscript erfolgen, dafür ist aber kein Override mgl. deshalb hier im Template-Override
$this->user->phone = vRequest::getString('phone');
$this->user->strhsnr = vRequest::getString('strhsnr');
$this->user->plzort = vRequest::getString('plzort');
$this->user->betreff = vRequest::getString('betreff');


echo vmText::sprintf('COM_VIRTUEMART_WELCOME_VENDOR', $this->vendor->vendor_store_name) . "\n" . "\n";
echo vmText::_('COM_VIRTUEMART_QUESTION_ABOUT') . ' '. $this->product->product_name;
if ($this->product->product_sku) echo vmText::_('COM_VIRTUEMART_PRODUCT_SKU').' '.$this->product->product_sku .')' ;
echo "\n" . "\n";
echo vmText::sprintf('COM_VIRTUEMART_QUESTION_MAIL_FROM', $this->user->name, $this->user->email) . "\n";

echo $this->user->phone. "\n";
echo $this->user->strhsnr. "\n";
echo $this->user->plzort. "\n";
echo $this->user->betreff. "\n";
echo $this->comment. "\n";

 

 

Optionaler Schritt 4: Style-Anpassung für die neuen Formularfelder

Die wichtigen funktionellen Dinge sind damit schon erledigt. Wenn Sie nun das Formular testen, werden Sie allerdings feststellen, dass manche Dinge einfach nicht schickt formatiert sind - sowohl im Formular als auch in der HTML-Mail. Deshalb wären zusätzlich noch eine paar CSS-Formatierungen zu empfehlen. Leider hat Virtuemart in seinem Formular die Formatierung der Felder auf ganz konkrete Felder anhand ihrer IDs vorgenommen und damit unsere neuen ausgeschlossen. Deshalb habe ich für meine neuen Felder eine entsprechende Ergänzung im meiner custom.css vorgenommen:

 

 

.ask-a-question-view {
  h1 { font-size: 2rem; }
  .product-summary h2 { font-size: 1.5rem; }

  input.counter, input#name, input#email,
  input#phone, input#plzort, input#strhsnr, input#betreff
  {
    background: #e8e8e8 url(/components/com_virtuemart/assets/images/vmgeneral/backgrounds.png) top repeat-x;
    border: solid #ccc 1px;
    border-radius: 4px;
    color: #777;
    display: inline-block;
    margin: 0 0 0 10px;
    padding: 5px 5px 4px;
    width: 75%;
  }
}

Das sollte es dann schon gewesen sein.