Terminologie

Aus ShopleiterWiki

Inhaltsverzeichnis

1 3.1.1 Terminologien des Shop-Designs

3.1.1 Terminologien des Shop-Designs

Zum besseren Verständnis der Thematik ist es wichtig, dass Sie die einzelnen Begriffe kennenlernen. Eine einheitlich genutzte Terminologie ist besonders hilfreich, wenn Sie im deutsch- oder englischsprachigen Forum entweder selber Fragen stellen oder nach Problemlösungen suchen. Im folgenden Abschnitt lernen Sie diese Begrifflichkeiten kennen und unterscheiden:

Website, Store und Store View
Interfaces auf Website- oder Store View Ebene
Standard-/Non-default-Thema: Layout, Locale, Template und Skin
Strukturelle Blöcke (Structural Blocks) und Content Blöcke (Content Blocks)

Website, Store und Store View

Der Begriff Website definiert sich beim Umgang mit Magento etwas anders, als Sie es bisher gewohnt sind. Im Allgemeinen ist es eher üblich, dass der Inhalt aller Einzelseiten auf einer Domain als Website betrachtet wird. Das Shop-System versteht den Begriff hingegen etwas weitläufiger. Eine Website ist hier eine Sammlung mehrerer Stores, die sich die gleichen Kunden und Bestellinformationen teilen. Ein Store wiederum ist eine Sammlung einzelner Store Views. Nähere Details zum Multistore-Konzept finden Sie in Kapitel 1.2.

Mit Store Views lassen sich nicht nur verschiedene Sprachen realisieren, sondern auch unterschiedliche Designs anbieten, bspw. für Frauen, Männer und Kinder. Zudem eignen sie sich ebenso, um verschiedene Kundensegmente zu bedienen, wie Endkunden und registrierte Reseller. Allerdings benötigen Sie dazu zwei getrennte Websites, denn innerhalb einer Website ist der Preis eines Produkts in allen Store Views identisch. Natürlich müssen Sie die Produkte gleichzeitig mehreren Websites zuordnen. Nur dann lohnt sich der Wechsel des Katalogpreis-Gültigkeitsbereichs (Catalog Price Scope) von „Global“ auf „Website“. Die Änderung nehmen Sie vor unter „System › Konfiguration › Katalog › Preis“ (System › Konfiguration › Catalog › Prices). Rufen Sie danach einen beliebigen Artikel in der Produktverwaltung auf. Nachdem Sie bei Produktinformationen die Preise öffnen, wählen Sie links oben im DropDown-Menü eine Store View aus. Entfernen Sie jetzt den Haken vor „Verwende Standardwert“ (Use Default Value). Nun ist es möglich, in der Store View einen anderen Preis festzulegen.

Abb. 3.1: Website Preis ändern auf Store View Ebene

Interfaces auf Website- oder Store View Ebene

Ein einzelnes Interface ist eine Sammlung von Themen. Die unterschiedlichen Themen bestimmen das optische Aussehen und die Frontend-Funktionalitäten Ihrer Stores. Die Zuweisung eines Interfaces erfolgt entweder auf Website Ebene und/oder auf Store View Ebene. Diese Art der Gestaltung unterscheidet sich folgendermaßen:

Website Ebene: Alle Stores erben das Interface der übergeordneten Website.
Diese Einstellung ist die richtige Wahl, wenn Sie ein einheitliches Layout (Corporate Design) für Ihren kompletten Shop wünschen.
Store View Ebene: Jeder Store View erhält ein eigenes Interface.
Bei dieser Variante haben Sie die Möglichkeit, jedem einzelnen Store ein individuelles Aussehen zuzuordnen.

Haben Sie einem Store bereits ein Design zugeteilt, so wird logischerweise diese Optik gegenüber der übergeordneten Website bevorzugt. Anhand zweier optischer Beispiele möchten wir Ihnen die Arbeitsweise besser verdeutlichen. Wenn Sie die Abbildung 3.2 genauer betrachten, sehen Sie am besten, wo die Unterschiede bei der Zuordnung des Interfaces auf Website- und Store View Ebene liegen.

Abb. 3.2: Design Zuweisung auf Website- und Store View Ebene

Sobald Sie ein eigenes Design umsetzten möchten, erstellen Sie als erstes ein eigenes Interface (z. B. myInterface) und ein eigenes Thema (z. B. myTheme). Kopieren Sie aber unbedingt auch das default-Theme in den neu angelegten Interface-Ordner, sonst entstehen durchaus ungewöhnliche Fehler. Extrem wichtig ist es die Umbenennung oder Umstrukturierung nicht nur im /app, sondern ebenso im /skin Ordner vorzunehmen.

Die Zuweisung eines Interfaces nehmen Sie im Administrationsbereich vor bei „System › Konfiguration › Gestaltung“ (System › Configuration › Design). Dort öffnen Sie „Paket“ (Package) und ändern den Interface-Namen im Textfeld „Aktueller Paketname“ (Current package name). Der standardmäßig voreingestellte Interface-Name lautet, genauso wie das erste Thema, default. Zu Beginn steht der „Aktuelle Konfigurations-Bereich“ (Current Configuration Scope) auf Standardkonfiguration (Default Config), demzufolge auf Website-Ebene.

Ändern Sie den aktuellen Konfigurationsbereich auf eine Store View!
Tragen Sie den Interface-Namen ein, in dem Ihr Thema liegt!
Notieren Sie den Namen Ihres Themas im Standard-Textfeld!

Links oben finden Sie den vorkonfigurierten aktuellen Konfigurationsbereich. Am schnellsten geht es, wenn Sie dort die Website auswählen und bei Bedarf gleichzeitig für alle darin liegenden Store Views den Interface-Namen abändern. Unter Paket tragen Sie den neuen Namen des Interfaces ein, in dem Sie alle Themen hinterlegt haben, die Sie für diese Website benötigen. Diese Änderung ist nur möglich, wenn Sie einen beliebigen Store View auswählen und den Haken entfernen vor „Website verwenden“ (Use website). Erscheint die Fehlermeldung „package with this name does not exist and cannot be set“, dann sollten Sie prüfen, ob im Verzeichnis /app/design/frontend/ der Interface-Name überhaupt existiert oder vielleicht falsch geschrieben ist.

Im nächsten Schritt ordnen Sie dem jeweiligen Store View eines der Themen aus Ihrem Interface zu. Suchen Sie also jetzt beim Konfigurationsbereich nach der gewünschten Store View, die ein neues Design bekommen soll. Bleibt das Feld „Standard“ (Default) leer, kommt automatisch das Thema namens „default“ zum Einsatz. Sobald Sie den Namen eines anderen Themas eintragen, erhält dieses in der Hierarchie einen höheren Rang, und die Layout-Anpassungen darin werden bevorzugt. Daher brauchen Sie nicht alle Daten zu duplizieren, wenn Sie ein eigenes Thema erstellen. Es reicht vollkommen aus, nur geänderte Dateien im eigenen Thema abzulegen. Fehlt ein bestimmter Dateityp, egal ob CSS, JavaScript, Datei oder Bild, verwendet das Shop-System automatisch den Inhalt des „default“-Themas. Der Shop bekommt das neue Design, sobald Sie die geänderte Konfiguration abspeichern und das Shop-Frontend neu laden.

Standard Thema vs. Non-default Thema

Ein Thema (Theme) ist eine Kombination aus Layout-, Template-, Locale- und/oder Skin-Dateien, die das visuelle Aussehen Ihres Shops beeinflussen. Ein komplettes Thema besteht meist aus Dateien der beiden Ordner /app (Layout, locale und template) und /skin (css, images und js). Natürlich bekommt ein Thema einen einheitlichen Ordnernamen im zugehörigen Interface zugeteilt. Magento bietet Ihnen die Möglichkeit, gleichzeitig verschiedene Themes zu laden, wobei das Shop-System zwei Typen unterscheidet:

Standard Thema (Default theme): Jedes Interface bindet standardmäßig ein Thema namens „default“ ein, welches das HauptThema (Main Theme) ist.
Non-default Thema: Dies ist ein nicht standardmäßig eingebundenes Theme, welches nur so viele Theme-Dateien wie nötig beinhaltet. Sie brauchen keine komplette Kopie des Default Themes, es ist völlig ausreichend, nur die Dateien in einem solchen Thema abzuspeichern, die Sie tatsächlich ändern möchten.

Das Standard Thema beinhaltet bereits alle erforderlichen Dateien, um einen Shop-Store fehlerfrei zu betreiben. Es besitzt in der Thema Hierarchie allerdings die niedrigste Stufe. Ein Non-default Thema bekommt eine höhere Stufe zugeteilt. Es ist möglich, aber weniger empfehlenswert, direkt die Dateien im Standard Thema zu bearbeiten. Die bessere Alternative ist, zusätzlich einige ausgewählte Dateien im Non-default Thema abzulegen und diese zu bearbeiten. Gemäß der höheren Hierarchie überschreibt eine identisch benannte Datei die andere Datei im Standard Thema.

Ein eigenes Thema mit dem Namen „mytheme“ besteht aus den nachfolgenden Inhalten. Die einzelnen Dateien finden Sie im Ordner /app/Design/frontend/:

Layout: /myinterface/mytheme/Layout/
Darin finden Sie die grundlegenden XML-Dateien. Diese beinhalten die Block-Struktur einiger Seiten, sie beeinflussen Meta-Daten und Seiten-Kodierung.
Locale: /myinterface/mytheme/locale/
Dort befindet sich pro Sprache eine simple Text-Datei (translate.csv), die Übersetzungen als Store Kopie beinhalten.
Template: /myinterface/mytheme/template/
Hier liegen die *.phtml Dateien mit den Text-Auszeichnungen und anderen wichtigen PHP-Codezeilen, die die Logik für das optische Aussehen erzeugen.

Im Skin-Ordner /skin/frontend/myinterface/mytheme/ liegen noch ein paar Blockspezifische JavaScript-, CSS- und Bild-Dateien, die der Shop für das Thema benötigt.

Abb. 3.3: app- und skin-Ordner des default-Theme

Wozu strukturelle Blöcke und Content Blöcke?

Blöcke kennzeichnen eine der wesentlichen Möglichkeiten, verschiedene Funktionen eines Magento-Shops darzustellen. Dadurch erhalten Sie die Gelegenheit, modulartig die gewünschten Informationen zusammen zu stellen. Die Blöcke dienen dabei gleichzeitig als visuelles und funktionelles Hilfsmittel. Das Shop-System unterscheidet zwei Arten von Blöcken, die Ihnen beide gleichermaßen helfen, die visuelle Ausgabe zu erstellen:

Strukturelle Blöcke (Structural Blocks): Dienen lediglich zur visuellen Strukturierung eines Stores, also das Layout wie: Header, Main Content, Footer, linke oder rechte Spalte.
Content Blöcke (Content Blocks): Erzeugen den tatsächlichen Inhalt innerhalb eines strukturellen Blocks. Die einzelnen Template-Dateien erstellen den (X)HTML-Quellcode, der im übergeordneten strukturellen Block eingefügt wird. Eigene Content Blöcke sind bspw.: Kategorie-Liste, Produkt-Tags oder Produkt-Listing.

Abb. 3.4: Strukturelle Blöcke im Vergleich zu Content Blöcke

Das Default Layout finden Sie im /app/design/frontend/-Verzeichnis der Datei /layout/page.xml, damit laden Sie bereits die häufigsten Seiteninhalte. Wie in vielen Dateien sind auch hier die Inhalte in Form von XML-Daten strukturiert. Im Ordner /template/page/ liegen einige strukturelle Block-Elemente. Der Quellcode-Auszug aus der Datei 2columns-right.phtml demonstriert Ihnen in Listing 3.1 die Struktur einer zweispaltigen Seite, ähnlich wie in Abbildung 3.4. Darin sehen Sie deutlich, wie und wo die Layout-Elemente angeordnet werden. Strukturelle Blöcke bestehen aus (X)HTML und PHP, daher erhalten diese die Dateiendung *.phtml.

<!-- start header -->
<div class="header">
  <?php echo $this->getChildHtml('header') ?>
</div>
<!-- end header -->
<!-- start middle -->
<div class="middle-container">
  <div class="middle col-2-right-layout">
    <?php echo $this->getChildHtml('breadcrumbs') ?>
    <!-- start center -->
    <div id="main" class="col-main">
      <?php echo $this->getChildHtml('global_messages') ?>
      <?php echo $this->getChildHtml('content') ?>
    </div>
    <!-- end center -->
    <!-- start right -->
    <div class="col-right side-col">
      <?php echo $this->getChildHtml('right') ?>
    </div>
    <!-- end right -->
  </div>
</div>
<!-- end middle -->
<!-- start footer -->
<div class="footer-container">
  <div class="footer">
    <?php echo $this->getChildHtml('footer') ?>
  </div>
</div>
<!-- end footer -->

Listing 3.1: Strukturelle Blöcke von 2columns-right.phtml

Andere Web-Applikationen binden ein Template nach dem Anderen ein, um so die (X)HTML-Ausgabe zusammenzubauen. Magento bündelt stattdessen sämtliche Seiteninhalte und vereinfacht die Anordnung mittels Blöcke. [footer-container">

   <?php echo $this->getChildHtml('footer') ?>