Magento RWD Theme

Responsive Web Design – Magento RWD Theme & Anpassung

Hier stelle ich kurz das RWD (Responsive WebDesign) Theme von Magento Shop 1.9 vor und gebe eine Anleitung, wie das Theme installiert wird. Das RWD Theme baut auf das CSS Framework Compass und die SASS CSS Extension auf, mit denen man coole Sachen in CSS machen kann 😉 Deshalb ist es unumgänglich sich auch mit den neuen Funktionen von SASS und Compass ein wenig zu beschäftigen. Natürlich kann man auch nur die Theme Dateien aus dem RWD Ordner kopieren und die CSS Dateien direkt bearbeiten. Das ist aber eine weniger schicke bzw. strongly not recommended Variante 😉

Dieser Beitrag dient vorrangig als Gedankenstütze und zeigt in nur sehr knappen Schritten, wie man ein eigenes Responsive Webdesign Theme für Magento Shop erstellt. Etwas ausführlichere Anleitungen findet ihr unten bei den Quellenangaben.

Meine Angaben beziehen sich auf die Community Edition von Magento Shop. Unser neues Responsive Theme wird auf Grundlage des ab Magento CE 1.9 mitgelieferten Magento RWD Theme erstellt.

 

Exkurs SASS und Compass – Entwicklungsumgebung für Stylesheets

SASS ist eine CSS Extension die eine ganze Menge Funktionen mitbringt. SASS definiert eine neue Sprache, die CSS sehr ähnelt. Die CSS-Syntax wird vereinfacht und um neue Fähigkeiten erweitert. Anschließend wird diese Metasprache von einem Programm (z. B. Scout), welches man Präprozessor nennt, wieder in normales CSS übersetzt. Dadurch wird es möglich CSS zu verschachteln (nesting), Funktionen zu mixen, Variablen innerhalb CSS zu verwenden und einiges mehr. Außerdem hilft es euren CSS Code ordentlich zu strukturieren und zu entwickeln. Der Compiler sorgt anschließend dafür, dass eine saubere, wohl formatierte CSS Datei (wahlweise auch komprimiert) erzeugt wird. Das Beste an der ganzen Sache: Das Projekt ist open source und steht Entwicklern damit kostenlos zur Verfügung.

Compass ist ebenfalls ein kostenfreies open-source Projekt. Das CSS Framework dient quasi als Standardbibliothek für SASS. Das Framework stellt Funktionen wie diverse Mixins zur Verfügung mit denen sich beispielsweise Reset-Styles, Clearfixes sowie bewährte CSS-Hacks realisieren und dann ebenfalls in euer fertiges CSS kompilieren lassen.

Um SASS und Compass zu nutzen braucht ihr eine Entwicklungsumgebung. Wer auf die Konsole verzichten möchte kann sich eines passenden Programms (z. B. Scout) bedienen, mit der ihr eure Entwicklungsumgbeung recht schnell eingerichtet habt. Eine detaillierte Anleitung zur Einrichtung von Scout gibt´s hier).

 

Magento Template erstellen auf Basis des RWD Theme

Ich gehe davon aus, dass ihr bereits eine Magneto Entwicklungsumgebung eingerichtet habt ( z. B. mit XAMPP).

Zunächst müsst ihr im Magento Verzeichnis 2 Ordner für euer neues Theme erstellen:

[dein Magento Pfad]/app/design/frontend/deinPaketname/deinTheme

[dein Magento Pfad]/skin/frontend/deinPaketname/deinTheme

 

Dann erstellt ihr einen weiteren Ordner namens „etc“:

app/design/frontend/deinPaketname/deinTheme/etc

 

In diesem Ordner erstellt ihr eine Datei namens theme.xml mit folgendem Inhalt:

 <?xml version=“1.0″?>
<theme>
    <parent>rwd/default</parent>
</theme>

Das ist die Fallback Anweisung für Magento.

 

Jetzt werden die Theme Dateien aus dem RWD Theme in euren Ordner kopiert.

skin/frontend/rwd/default/images
und
skin/frontend/rwd/default/scss
nach
skin/frontend/deinPaketname/deinTheme

Der Images Ordner wird benötigt, da die Pfadangaben in der CSS Datei relativ sind.

 

Jetzt muss das eigene Theme im Magento Backend aktiviert werden. Unter

System -> Konfiguration -> Allgemein -> Design

tragt ihr einfach den von euch verwendeten Paketnamen und den Namen des Theme Ordners ein.

Magento Theme aktivieren

Magento Theme aktivieren

Nun solltet ihr das RWD Theme im Frontend sehen. Jetzt könnt ihr mit dem Bearbeiten eures Themes beginnen. Denkt dran das Magento Caching abzuschalten, damit Änderungen nach einem Reload sofort im Frontend sichtbar sind.

Verwendet ihr für die Arbeit mit SCSS und Compass das Programm Scout, sind die Pfade eurer Entwicklungsumgebung für Scout wie folgt anzugeben:

Input: skin/frontend/deinPaketname/deinTheme/scss
Output: skin/frontend/deinPaketname/deinTheme/css

Scout überwacht die in eurem Entwicklungspfad Input liegenden .scss Dateien und kompiliert sofort eine neue CSS Datei im Output Pfad, wenn ihr eine Änderung speichert.

Ob euer Theme aktiv ist und auch die richtige CSS Datei verwendet wird, seht ihr am besten wenn ihr in den Quelltext eurer Seite den Pfad der CSS Datei prüft. Dieser sollte dann korrekt skin/frontend/deinPaketname/deinTheme/css/styles.css lauten.

 

 

Einige Anpassungen für das RWD Theme

„View all category“ entfernen

Weist man einer Hauptkategorie im Shop eine Unterkategorie, zu wird im Pulldown-Menü des RWD Templates über den Unterkategorien auch der Eintrag „view all category“ / „Gesamte Kategorie anzeigen“ aufgelistet. Um diesen unnötigen Menüpunkt weg zu bekommen muss die Datei „renderer.phtml“ im Template angepasst werden.

Kopiert euch dazu die Datei aus dem Magento Pfad

magento/app/design/frontend/rwd/default/template/page/html/topmenu/renderer.phtml

in eueren Template Ordner

magento/app/design/frontend/meinPaket/meinTemplate/template/page/html/topmenu/

Jetzt müsst ihr die Zeilen 62-71 der Datei anpassen

if (!empty($_hasChildren)) {
$html .= ‚<ul class=“level‘. $childLevel .'“>‘;
$html .= ‚<li class=“level‘. $nextChildLevel .'“>‘;
$html .= ‚<a class=“level‘. $nextChildLevel .'“ href=“‚. $child->getUrl() .'“>‘;
$html .= $this->__(‚View All ‚) . $this->escapeHtml($this->__($child->getName()));
$html .= ‚</a>‘;
$html .= ‚</li>‘;
$html .= $this->render($child, $childrenWrapClass);
$html .= ‚</ul>‘;
}

wird zu

if (!empty($_hasChildren)) {
$html .= ‚<ul class=“level‘. $childLevel .'“>‘;
$html .= $this->render($child, $childrenWrapClass);
$html .= ‚</ul>‘;
}

Die englische, etwas ausführlichere Anleitung gibt es hier.

 

Alternative:

Ab Version 1.9.1.1 sieht der Quelltext in der renderer.phtml etwas anders aus. Er wurde um die Klasse view-all erweitert. Das kann man sich zunutze machen und den Menüeintrag auch per CSS ausblenden lassen. Somit ist keine Änderung an der renderer.phtml notwendig.

CSS Code:

li .view-all {
    display: none;
}

 

h2 Überschrift „weitere Bilder“ in der Produktbeschreibung entfernen

Nervt euch die Überschrift „weitere Bilder“ oder „more views“ in der Produktseite? Kopiert die Datei media.phtml aus dem Ordner

/app/design/frontend/rwd/default/template/catalog/product/view/

in euer Template.

Löscht Zeile 60 (69) wo das h2 Tag „More Views“ gesetzt wird oder kommentiert sie aus.

 

h2 Überschriften innerhalb der Produktbeschreibung anzeigen

Standardmäßig sind alle H2 Tags in der Produktbeschreibung, wie z. B. auch die Überschrift „Produktbeschreibung“ selbst per CSS ausgeblendet / versteckt. Möchte man dennoch innerhalb der Produktbeschreibung ein H2 Tag nutzen, müssen folgende Zeilen zu eurem CSS Stylesheet hinzugefügt werden:

.collateral-tabs dd .std h2 {
    display: block;
}

 

Schlagworte ausschalten

Das lässt sich leicht über das Backend lösen. Navigiert nach System > Konfiguration > Erweitert > Erweitert. Such den Eintrag „Mage_Tag“ und deaktiviert ihn. Jetzt werden die Schlagworte nicht mehr in der Produktbeschreibung gezeigt.

 

Copyright Hinweis im Fuß entfernen

Sucht die Datei /app/design/frontend/rwd/default/template/page/html/footer.phtml und kopiert diese in euer Template Verzeichnis. Löscht den Copyright Hinweis oder kommentiert ihn aus.

 

Newsletter Block im Fuß entfernen

Kopiert die Datei /app/design/frontend/rwd/default/layout/newsletter.xml in euren Theme Ordner. Ich habe den Inhalt gelöscht / auskommentiert um die Anzeige der Newsletter Box im Seitenfuß zu unterbinden.

 

Gutscheincode entfernen

Verwendet ihr keine Gutscheine solltet ihr diesen Block entfernen, da sonst jeder nach Gutscheinen für euren Shop bei Google sucht und dann ggf. auf ein besseres Angebot stößt. Haltet also die Absprungrate und die Ablenkung gering und entfernt die nicht benötigte Gutschein-Eingabe. Dazu einfach die Datei /app/design/frontend/rwd/default/template/checkout/cart/coupon.phtml ins gewünschte Theme kopieren und den Quelltext löschen / auskommentieren.

 

Magento Whishlist & Compare entfernen

/app/design/frontend/rwd/default/template/catalog/product/list.phtml in euer Template übernehmen und wie folgt bearbeiten: Ab ca. Zeile 97-103 Whishlist und Compare ausgeklammert. In Zeile 170 das <ul class=“add-to-links“> ausklammern.

Mit /app/design/frontend/rwd/default/template/catalog/product/view.phtml verfahrt ihr wie oben und kommentiert die Zeile 103 (echo $this->getChildHtml(‚addto‘)) aus.

In der Datei customer.xml in Zeile 246 product_compare_sidebar ausklammern.

Die Datei catalog.xml anpassen und in Zeile 56 „Product Compare“ ausklammern.

 

Kurzbeschreibung / Short Description im Grid anzeigen

Mein altes Theme hat im Produktkatalog / Grid eine Kurzbeschreibung zu jedem Artikel gezeigt. Das ist bei dem RWD Theme aus Magento 1.9.0.1 nicht mehr der Fall. Um diese Funktion zu bekommen muss die Datei /app/design/frontend/rwd/default/template/catalog/product/list.phtml in euer Template kopiert und angepasst werden. Ich habe ca. in Zeile 152 (nach dem endif und vor dem actions block) folgende Codezeile eingefügt:

<div class=“desc std“>
<?php echo $_helper->productAttribute($_product, $_product->getShortDescription(), ’short_description‘) ?>
</div>

 

Teilen auf Facebook, Twitter und Co.

In der Produktbeschreibung werden Buttons für Facebook und Twitter zum Teilen eingeblendet. Um den User besser darauf aufmerksam zu machen habe ich eine Kurzbeschreibung vor den Buttons eingefügt. Dazu die Datei /app/design/frontend/rwd/default/template/catalog/product/view.phtml in euer Template übernehmen und nach Zeile 98

<span class=“link-posten“>Link teilen:</span>

einfügen.

Die Formatierung wird dann über CSS erledigt. Ggf. muss die Beschriftung für das Mobile Layout, falls gewünscht. noch an einer anderen Stelle hinzugefügt werden.

 

Weitere kleine Anpassungen / Übersetzungen

/app/design/frontend/rwd/default/template/checkout/cart.phtml in Zeile 115 das „or“ durch „oder“ ersetzt.

/app/design/frontend/rwd/default/template/catalog/product/view/sharing.phtml Zeile 42 „Share on Facebook“ geändert

customer.xml in Zeile 246 product_compare_sidebar ausgeklammert

In page.xml Zeile 143 Quicklinks und Mein Konto auskommentiert.

Eigenen Block eingefügt. Dazu einen static Block extras im Backend erstellt. Dann die Datei catalog.xml in Zeile 56 angepasst um den custom Block auszugeben. Code:

<block type=“cms/block“ name=“extras“>
              <action method=“setBlockId“><block_id>extras</block_id></action>
 </block>

 

Anpassungen für Magento Shop Selbst

Wer Rechnungslegung, AGB, E-Mail-Versand und weitere Funktionen bearbeiten möchte, findet vielleicht hier noch ein paar nützliche Infos zur Anpassung von Magento Shop 1.9.

 

 

Magento Update von 1.9.0.1 auf 1.9.1.1

  • Magento Backup Anlegen (Anleitung mit Video hier)
  • Compiler ausschalten
  • Caching deaktivieren
  • Magento Connect aufrufen
  • Modul „Mage_All_Latest“ updaten (In der Entwicklungsumgebung Haken rein bei Wartungsmodus nicht setzen da oft die Flag Datei nicht gelöscht wird und „clear cache after installation“ auswählen)
  • HTACCESS anpassen / Kopie einspielen
  • Sollte das JavaScript / JQuery danach nicht funktionieren so löscht den leeren /JS/ Ordner in eurem Template
  • Die Datei /app/design/frontend/rwd/default/layout/page.xml muss ebenfalls erneut in eurer Template kopiert werden, da die JQuery Pfade bzw. Fallbacks vom Magento Base Template auf das RWD Template geändert wurden.

 

Quellen:

Magento RWD Theme Vorstellung in Deutsch

Mangento RWD Theme Dokumentation / Developer Guide (englisch)

SASS englischsprachige Webseite

SASS Basics – Das kann man mit dem CSS Preprocessor anstellen

SASS Deutscher Wikipedia Eintrag

Scout als Entwicklungsplattform für SASS und Compass

Entwicklung mit SASS und Compass (deutsche Einführung in das Thema)

Schreibe einen Kommentar