SEO (Suchmaschinenoptimierung) bedeutet meiner Meinung nach nicht, dass man nur für Suchmaschinen wie Google und Yahoo optimieren sollte. Meines Erachtens gehört auch eine gewisse Portion Usabilty dazu - ganz speziell im Shopbereich. Je einfacher man dem Kunden den Einkauf macht, desto eher wird er unserem xt:Commerce Shop wieder einen Besuch abstatten.

Der Plan

Um diese Form von SEO soll es heute gehen. Unser Ziel ist es eine Box zu erstellen in welcher wir alle Kategorien die wir haben (samt Unterkategorien) in einem DropDown-Feld verfügbar machen. Das Dropdownfeld soll aber nicht mit einem Klick auf einen Submit-Button ausgelöst werden, denn das würde für den etwaigen Kunden wieder einen extra Klick in unserem Shop bedeuten. Die Funktion wird über javascript realisiert, was allerdings zum Nachteil hat, dass einer der Javascript konsequent blockt, diese Funktion wohl nicht haben wird.

Vorüberlegungen

Wo fangen wir an und vor allem wie stellen wir es an? Einer der besten Vorschläge die ich machen kann ist wie immer: Fertigt ein Backup an! Wir ändern zwar nicht viele Dateien, genau genommen 2 Stück - aber im Falle eines Falles ist ein Backup wirklich alles. Es spart sehr viel Frust hinterher, wenn etwas nicht klappen sollte.

Wir benötigen eine neue Box. Wie das geht, werde ich gleich erklären. Zu dieser Box benötigt xt:Commerce auch noch ein entsprechendes HTML-Template. Um das Formular hinterher dynamisch zu machen, benötigen wir noch ein kleines Javascript. Der Vorteil dieser Variante ist, man kann es templatebasiert machen. Wir müssen nichts am Core von xt:Commerce ändern.

Wir erstellen eine neue xt:Commerce Box

Eine gute Anleitung für die ersten Schritte zum erstellen einer xt:Commerce Box findet Ihr unter SEO-Administrator.de . Diese Anleitung beschreibt, wie man problemlos neue Boxen in das Shopsystem von xt:Commerce einbauen kann. Da wir aber keine Anfänger sind, werden wir unsere Boxen nicht kopieren sondern nur Teile entnehmen die wir auch wirklich benötigen. Durch diese Methode sparen wir uns einzelne HTTP-Aufrufe und somit auch etwas Rechenleistung seitens des Servers.

Wir legen uns im Templateordner unterhalb des Unterordners /source/boxes eine PHP-Datei an, die wir categories_dropdown.php nennen. Um Lizenrechtlichen Problemen aus dem Weg zu gehen, können wir auch gern den PHP-Header von anderen Dateien einfügen und modifizieren um spätere Änderungen einfacher zu machen. Der Code für diese Datei sieht folgendermaßen aus:

<?php
$dd_smarty = new smarty;
 $parent_id = xtc_db_prepare_input(0);
    if (!is_array($categories_array)) $categories_array = array();

    $categories_query = "select
                                      c.categories_id,
                                      cd.categories_name
                                      from " . TABLE_CATEGORIES . " c,
                                       " . TABLE_CATEGORIES_DESCRIPTION . " cd
                                       where parent_id = '" . xtc_db_input($parent_id) . "'
                                       and c.categories_id = cd.categories_id
                                       and c.categories_status != 0
                                       and cd.language_id = '" . $_SESSION['languages_id'] . "'
                                       order by sort_order, cd.categories_name";

    $categories_query  = xtDBquery($categories_query);

    while ($categories = xtc_db_fetch_array($categories_query,true)) {
      $categories_array[] = array('id' => $categories['categories_id'],
                                  'text' => $indent . $categories['categories_name']);

    }

$select = "";
$select .= "<select name=\"katdropdown\" onchange=\"katwechsel();this.form.submit();\">";
$select .= "<option value=\"\">--- Kategorie ausw&amp;auml;hlen ---</option>";

foreach($categories_array as $category){
    $select .= "<option value=\"".$category['id']."\">".$category['text']."</option>";
}

$select .= "</select>";

$dd_smarty->assign('BOX_DROPDOWN_CONTENT',$select);
$dd_smarty->assign('language', $_SESSION['language']);

// set cache ID
if (!$cache) {
	$box_dropdown = $dd_smarty->fetch(CURRENT_TEMPLATE.'/boxes/box_categories_dropdown.html');
} else {
	$box_dropdown = $dd_smarty->fetch(CURRENT_TEMPLATE.'/boxes/box_categories_dropdown.html', $cache_id);
}

$smarty->assign('box_DROPDOWN', $box_dropdown);
?>

Fliegen wir mal kurz über den Quellcode. Zunächst müssen wir für unsere Box ein neues Smarty erstellen. Dazu benutzen wir (am besten) eine nicht benutzte Variable. Ich habe mich hier für die Bezeichnung dd_smarty (für Dropdown-Smarty) entschieden. Zunächst prüfen wir ob schon ein Array vorliegt. Da dies nicht der Fall sein wird, legen wir uns als erstes ein Array an. Danach folgt eine Abfrage, welche ich aus der Funktion xtc_get_categories.php entzogen habe, damit auch wirklich alle Kategorien samt Subkategorien vom xt:Commerce Shop ausgelesen werden. Da jetzt alle Daten fertig in einer Variable sind, müssen wir diese nur noch in eine Form bringen, die Smarty hinterher auch ausgeben kann.

Dazu legen wir uns einen Hilfsstring an, der für uns die Inhalte des Dropdowns speichern und an das Smarty-Template weiterleiten wird. Wir erstellen zunächst den select-Header und vergeben (ganz wichtig!!) einen Namen und deklarieren was das Element bei onchange machen soll (also dann wenn das Dropdown benutzt wird). Hier sehen wir die javascript-Funktion katwechsel(), welche wir im späteren Verlauf des Postings erstellen werden. Mit this.form.submit(); wird das aktuelle Formular abgeschickt bzw. verarbeitet.

Damit das html-Template etwas mit den Daten anfangen kann müssen diese auch verarbeitet werden. Wir speichern das Formularfeld in die Smarty-Variable BOX_DROPDOWN_CONTENT. Zum Schluss muss die Box nur noch an die Haupt-Smarty-Variable weitergereicht werden, damit wir diese dann im Template als Box verwenden können.

Die Templatedatei für die neue xt:Commerce Box

Da das Shopsystem xt:Commerce auf der unter GPL-lizensierten Smarty-Engine betrieben wird, benötigen wir für die eben angelegte Kategorie-Box auch ein seperates Template. Ob man hier Tabellen oder Divs verwendet - egal - das muss jeder selber wissen. Je nach Templateart muss man hier verschiedene Wege gehen. Ich zeige Euch hier eine Möglichkeit wie es im Standardtemplate von xt:Commerce aussehen könnte.

<table width="100%" border="0" cellpadding="2" cellspacing="0">
    <tr>
    <td class="infoBoxHeading"><table width="100%"  border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td class="infoBoxHeading">Kategorieauswahl </td>
          <td></td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td class="infoBox" align="left">
    <table width="95%"  border="0" cellpadding="2" cellspacing="0">
        <tr>
          <td class="boxText">
              <form action="index.php" name="katauswahl" method="post"><input type="hidden" name="phpMyAdmin" value="fac4b407329t262ea922" />
              {$BOX_DROPDOWN_CONTENT}
              </form>
          </td>
        </tr>

    </table></td>
  </tr>
</table>

Ich denke die HTML-Anweisungen dürften weitgehenst selbsterklärend sein. Wir fügen lediglich im Template ein Formular ein, welches wir mit der Action index.php versehen. Wichtig ist hier, dass wir einen Namen vergeben, damit unser Javascript das Formular auch ansprechen kann. Als Methode wählen wir "POST". In der Form selber rufen wir dann unsere vorgegebene Smarty-Variable {$BOX_DROPDOWN_CONTENT} ein.

Anlegen der Javascript-Anweisungen

Damit das Dropdown-Feld für die Shopkategorien seinen Dienst auch erfüllt, benötigen wir ein Stückchen Javescript. Dieses soll je nach Auswahl die action-Variable vom Formular abändern, damit immer die jeweilige gewählte Kategorie geöffnet wird. Klingt zwar jetzt furchtbar kompliziert - ist es aber bei weiten nicht.

Die Funktion hierfür werden wir im Template hinterlegen. Man findet den Ordner "javascript" in welcher man die Datei general.js.php vorfindet. In dieser Datei werden wir unseren Code-Block einfügen. Der Scriptblock soll demnach in etwa so aussehen:

<script type="text/javascript"><!--

function katwechsel()
	{

	var value2 = document.katauswahl.katdropdown.value;
	var anfang = 'index.php?cPath=';
	var uebergabe = anfang+value2;
	document.katauswahl.action = uebergabe;
	}

//-->
</script>

Wir legen uns zwei Variablen an, welche wir an die action des Formulars weitergeben - mehr ist es wirklich nicht. Mit Javascript müssen wir lediglich die einzelnen Felder bearbeiten.

Die Box verfügbar machen

Damit xt:Commerce die Box im Template auch ausgeben kann, müssen wir das Shopsystem darauf aufmerksam machen, dass es eine neue Box im Template gibt. Dazu benötigen wir die boxes.php aus dem source-Ordner des aktuellen Templates. Hier fügen wir lediglich eine Zeile hinzu. Wo man das genau macht, bleibt einem selbst überlassen - solange man keine If-Schleifen auseinanderzieht

require(DIR_WS_BOXES . 'categories_dropdown.php');

xt:Commerce soll unsere neue Box anzeigen

Natürlich möchte man, dass die Box nun auch angezeigt wird. Dazu müssen wir xt:Commerce lediglich sagen, dass er diese nun auch im aktuellen Template anzeigen soll. Hierzu öffnen wir unsere index.html aus dem Templateordner und fügen an geeingeter Stelle die Smarty-Variable {$box_DROPDOWN} hinzu - tada - xt:Commerce zeigt unsere Box nun an.

Abschließende Gedanken

Ich weiß das diese Modifikation nicht wirklich unter dem Fachbegriff Suchmaschinenoptimierung sondern eher unter dem Begriff Usabilty fällt. Wie aber eingangs erwähnt, muss ein Shop immer mit Augenmerk auf den Besucher - dem Kunden - optimiert werden. Suchmaschinen kaufen bei Euch nichts ein. Man muss hier wirklich ein gesundes Mittelmaß an SEO für Suchmaschinen und für den Kunden finden. Ich hoffe diese kleine Anleitung hilft Euch da ein wenig weiter. Vielleicht hat auch noch einer Idee wie man das noch besser gestalten kann. Ich freu mich auf Eure Kommentare.