Zunächst etwas Prosa vorweg.
Es geht darum den Kundenbereich im Frontend anzupassen. Also den Bereich, in dem der eingeloggte Kunde seine persönlichen Daten und Einstellungen ändern kann.
Dieser ist bei Magento per Default mit einer Sidebar auf der linken Seite ausgestattet in der alle hierfür wichtigen Links verzeichnet sind. Nun kann es natürlich sein, dass auf Grund von Anpassungen am Shop selbst hier nichts mehr zusammenpasst. Weder von der Positionierung der Elemente, noch von der Größe.
Der Grund dahinter ist ganz simpel. Magento nutzt eine Art globales Template dafür – templates/page/2columns-left.phtml. Nun kann man natürlich hergehen und die rechte Sidebar nutzen dafür. Aber, bevor man alle Blöcke so umbauen muss, es gibt eine simplere Lösung. Ein neues Template, extra für diesem Bereich.
Um dieses neue Template zu erstellen dupliziert man die Datei templates/page/2columns-left.phtml und nennt diese templates/page/2columns-left-customer.phtml
Darin kann man nun den Elementen eigene Klassennamen verpassen und diese via CSS in aller Ruhe formatieren.
Mit dem Erstellen des neuen Templates ist es noch nicht ganz getan. Man muss es Magento noch “vorstellen”. Dazu editiert man die Datei layout/customer.xml. In dieser Datei sind die Konfigurationen für die Kundensektionen enthalten. Eingreifen muss man nun an zwei Stellen.
Vorher:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!-- Customer account pages, rendered for all tabs in dashboard --> <customer_account translate="label"> <label>Customer My Account (All Pages)</label> <!-- Mage_Customer --> <reference name="root"> <action method="setTemplate"><template>page/2columns-left.phtml</template></action> <!-- Customer account home dashboard layout --> <customer_account_index translate="label"> <label>Customer My Account Dashboard</label> <update handle="customer_account"/> <!-- Mage_Customer --> <reference name="root"> <action method="setTemplate"><template>page/2columns-left.phtml</template></action> |
Nachher:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!-- Customer account pages, rendered for all tabs in dashboard --> <customer_account translate="label"> <label>Customer My Account (All Pages)</label> <!-- Mage_Customer --> <reference name="root"> <action method="setTemplate"><template>page/2columns-left-customer.phtml</template></action> <!-- Customer account home dashboard layout --> <customer_account_index translate="label"> <label>Customer My Account Dashboard</label> <update handle="customer_account"/> <!-- Mage_Customer --> <reference name="root"> <action method="setTemplate"><template>page/2columns-left-customer.phtml</template></action> |
[info]Alle Dateipfade die hier genannt sind, sind relative Pfade. Sie beziehen sich auf das jeweils verwendete Theme[/info]
