Installation in fertige Website oder vorhandenes Theme

Wenn Sie bereits eine fertige Contao-Website haben und darin Merconis installieren möchten, so ist dies problemlos möglich.

Auch wenn Sie eine neue Website erstellen und hierfür ein bereits vorhandenes Theme verwenden (z.B. von einem der bekannten Theme-Anbieter), ist die Installation von Merconis in Ihrem Projekt eine einfache Aufgabe.

In beiden Fällen ist die im folgenden beschriebene Vorgehensweise anzuwenden.

Bitte denken Sie daran, vor der Installation von Merconis eine Sicherung Ihres Projektzustands zu erstellen!

Installation und Grundeinrichtung von Merconis

In das Ihnen vorliegende Projekt installieren Sie Merconis im ersten Schritt ganz normal. Dass Ihr Projekt bereits eine fertige Website ist bzw. dass ein vorhandenes Theme vorliegt, ist dabei zunächst unerheblich. Folgen Sie also nun den Anleitungen Installation und Einrichtung im Bereich Erste Schritte dieses Handbuchs.

Wenn Sie die Installation und Einrichtung entsprechend der Anleitung durchgeführt haben, hat Merconis in Ihrer Seitenstruktur parallel zu Ihren bereits vorhandenen Seiten zwei Seitenbäume angelegt (Haupt- und Fremdsprache). Darüber hinaus befindet sich nun parallel zu Ihrem bereits vorhandenen Theme-Datensatz nun ein zweites Theme in Ihrer Contao-Installation. Der Merconis-Einrichtungsassistent hat außerdem Merconis-Dateien an verschiedene Stellen kopiert.

Bevor Sie die nächsten Anweisungen der Ersten Schritte befolgen, sind nun einige Besonderheiten zu berücksichtigen, um Merconis sauber in Ihr bestehendes Projekt zu integrieren.

Verschieben der Merconis-Templates

Merconis hat bei der Einrichtung in Ihrem Templates-Verzeichnis ein Unterverzeichnis namens "merconisTemplatesTheme8" angelegt. Verschieben Sie alle darin enthaltenen Template-Dateien in das Verzeichnis, in welchem sich die sonstigen Templates Ihres Themes befinden. Wenn Sie sich nicht ganz sicher sind, kopieren Sie die Template-Dateien direkt in das Verzeichnis "/templates". Löschen Sie danach das nun leere Verzeichnis "merconisTemplatesTheme8".

Verschieben der Merconis-Seiten

Merconis hat eine zweisprachige Seitenstruktur angelegt, um diese Anleitung übersichtlich zu halten, gehen wir aber davon aus, dass Ihr vorliegendes Projekt nur einsprachig (deutsch) ist. Haben Sie in Wirklichkeit weitere Sprachen, so wenden Sie die Anweisungen dieser Anleitung entsprechend für alle weiteren Sprachen an.

Verschieben (nicht kopieren!) Sie die Seite "MERCONIS-SYSTEM" mit allen Unterseiten aus dem Seitenbaum "MERCONIS deutsch" in den richtigen Seitenbaum Ihres Projektes. Da "MERCONIS-SYSTEM" selbst keine sichtbare Seite ist, ist die genaue Position in Ihrem Seitenbaum nicht von Bedeutung.

Verschieben Sie nun die von Merconis erstellten Produktseiten in Ihren Seitenbaum. Da es sich hierbei nur um beispielhafte Produktseiten handelt, ist dieser Schritt eigentlich nicht nötig, er ist aber hilfreich, damit Sie mit den Demo-Produkten leicht erkennen können, ob alles richtig funktioniert und richtig aussieht. Erstellen Sie in Ihrem Seitenbaum an geeigneter Stelle einen Menüpunkt "Shop" und verschieben Sie die Seiten "SCHUHE", "ACCESSOIRES", "BEKLEIDUNG", "VARIANTEN & CO", "NEUHEITEN" und "ANGEBOTE" in diesen Menüpunkt.

Verschieben Sie außerdem die Seite "Navi2Container" in Ihre "Shop"-Seite. Enthalten sind darin verschiedene Seiten mit besonderer Bedeutung, wie z.B. eine Registrierungsseite, Versandkosteninformationen usw. Manche der enthaltenen Seiten haben Sie in Ihrer bereits bestehenden Seitenstruktur möglicherweise bereits, sodass Sie diese aus dem Merconis-Bereich löschen könnten.

Verschieben der Frontend-Module von Merconis

Das von Merconis bei der Einrichtung angelegte Theme "MERCONIS Theme Barcelona" enthält Frontend-Module, die Sie in Ihr eigenes Theme verschieben müssen. Einige der Module sind für Sie sicherlich nicht relevant, es ist aber empfehlenswert, dass Sie zunächst alle Module übertragen und später diejenigen löschen, die Sie nicht benötigen.

Wichtig: Bitte verschieben Sie die Module und kopieren Sie sie nicht. Nur das Verschieben erhält Verweise auf diese Module, die an anderen Stellen von großer Bedeutung sind!

Einrichtung der benötigten Layouts

Für die Seitendarstellung hat das bereits vorhandene Theme Ihrer Websites Layouts. Diese Layouts berücksichtigen Merconis natürlich noch nicht und müssen entsprechend angepasst werden.

Verschieben Sie zunächst aus dem Theme "MERCONIS Theme Barcelona" das Layout "MERCONIS layout for ajax calls" in Ihr eigenes Theme. Dieses Layout können Sie unverändert weiterverwenden.

Entscheiden Sie nun, in welchem Layout bzw. welchen Layouts Ihres Themes Sie Merconis berücksichtigen wollen. Layouts, die Sie nur für Seiten verwenden, auf denen Merconis keine Rolle spielt, können Sie unverändert lassen. Layouts, die Sie auf Seiten mit Produktdarstellungen oder Warenkorbausgaben verwenden, müssen Sie anpassen.

In dieser Anleitung gehen wir nun davon aus, dass Sie ein bestehendes Layout duplizieren und es für die Merconis-Ausgabe anpassen.

Auswahl der benötigen Merconis-Stylesheets

Wählen Sie die CSS-Dateien "files/merconisfiles/themes/theme8/css/ls_framework.css" und "files/merconisfiles/themes/theme8/css/style_theme.css" als externe Stylesheets aus. Diese Stylesheets werden benötigt, um die von Merconis erzeugten Ausgaben (z.B. Produktdarstellungen, Warenkorb usw.) zu formatieren.

Eingebundene Module

Zusätzlich zu den Modulen, die Ihr Layout für die sonstige Seitendarstellung benötigt, sollten Sie mindestens die Frontend-Module "Product overview", "Product singleview" und "shopping cart mini" einbinden, damit auf den Seiten, die dieses Layout verwenden, die Produktausgabe und die Anzeige des Warenkorbs möglich ist.

Binden Sie "Product overview" und "Product singleview" am besten in der Hauptspalte ein. Wählen Sie für "shopping cart mini" einen möglichst übergeordneten Container, da der Mini-Warenkorb vom Merconis-Stylesheet fix positioniert wird und im geöffneten Zustand den Rest der Seite überlagert.

Merconis bietet noch viele weitere Module, die Sie bei Bedarf einbinden können (z.B. Filterformular etc.), die der besseren Verständlichkeit wegen in dieser Anleitung aber nicht explizit berücksichtigt werden. Wenn Sie weitere Module verwenden möchten, schauen Sie am besten bei einer Demo-Installation mit dem Theme Barcelona ab, wie diese Module eingebunden und angewendet werden.

Javascript-Einstellungen

Im Layout aktivieren Sie bitte Mootools, indem Sie das Häkchen "MooTools laden" setzen. Da es beim Laden der JS-Libraries jQuery und Mootools vom CDN hin und wieder zu Problemen kommt, empfehlen wir als Quelle für beides "Lokale Datei" zu wählen. Fehler beim Laden der Libraries können dazu führen, dass wichtige JS-Funktionen fehlschlagen. Laden Sie lediglich das Mootools-Template "moo_mediabox".

Aktivieren Sie das mit Merconis mitgelieferte JS-Framework "LSJS", indem Sie das Häkchen bei " LSJS Javascript-Hauptkomponente laden" setzen.

Wählen Sie die zu ladende App "files/merconisfiles/themes/theme8/lsjs/app" und die zu ladende Core-Anpassung "files/merconisfiles/themes/theme8/lsjsModsCoreApps".

Durch Setzen der entsprechenden Häkchen aktivieren Sie bitte den LSJS-Debug-Modus, umgehen Sie den Cache und nutzen Sie nicht den Minifier. Diese Einstellungen sollten für den Live-Betrieb wieder zurückgesetzt werden, sind für die Entwicklung aber hilfreich.

Separates Layout für Warenkorb-Fallback

Der standardmäßige Warenkorb und Checkout ist in Merconis 4 als "One Page Checkout" realisiert, der durch eine per Javascript gesteuerte Überlagerung auf jeder anderen Seite stattfinden kann und keine eigene Seite benötigt. Bei deaktiviertem Javascript oder z.B. dem Rücksprung von Paypal beim Bezahlvorgang ist aber weiterhin eine eigenständige Warenkorbseite nötig. Damit auf dieser Warenkorbseite nicht zusätzlich der Mini-Warenkorb dargestellt wird, ist für die Warenkorbseite ein eigenes Layout nötig. Dieses Layout kann eine exakte Kopie des soeben erstellten Layouts sein, bei welcher lediglich das Modul "shopping cart mini" entfernt wird. Erstellen Sie nun dieses Layout.

Zuordnung der Layouts zu Seiten

Die durch die Merconis-Installation neu hinzugekommenen Seiten, die in einem vorherigen Schritt in die vorhandene Seitenstruktur übertragen wurden, müssen nun so eingestellt werden, dass sie die richtigen Layouts verwenden.

Die Produktseiten, die sich unterhalb der zuvor neu angelegten Seite "Shop" befinden, haben feste Layout-Zuweisungen, die sich aber noch auf ein Layout des falschen Themes beziehen. Um dies zu ändern, entfernen Sie bei diesen Seiten das Häkchen bei "Ein Layout zuweisen", damit die Seiten das Layout einer übergeordneten Seite erben. Weisen Sie dann der übergeordneten Seite "Shop" fest das zuvor erstellte Layout zu.

Nutzen Sie dann den "Mehrere bearbeiten"-Modus um die Layout-Zuordnungen aller Merconis-Systemseiten anzupassen. Hinterlegen Sie der übergeordneten Seite "MERCONIS-SYSTEM" das Merconis-Layout auch direkt, damit es durch Vererbung auf alle Systemseiten ohne explizite Layout-Zuordnung angewandt wird.

Seiten-Einstellungen in Merconis-Grundeinstellungen

In den Grundeinstellungen gibt es einen Bereich "Seiten-Einstellungen", in welchem Seiten mit spezieller Funktion ausgewählt werden. Da Merconis standardmäßig zweisprachig installiert wird, sind dort auch Zuordnungen zu den fremdsprachigen Seiten enthalten. Diese benötigen Sie nicht, sofern Sie - wie in dieser Anleitung angenommen - eine einsprachige Website betreiben. Entfernen Sie hier nun diese überflüssigen Zuordnungen.

Bitte stellen Sie sicher, dass für alle Spezialseiten, die hier gefragt sind, eine Zuordnung existiert.

Test und Löschen unnötiger Elemente

Sie haben nun alle Schritte zur Einbindung von Merconis in Ihre bestehende Website bzw. Ihr vorhandenes Theme erledigt. Bitte prüfen Sie nun, ob sich Merconis in Ihrem Projekt wie gewünscht verhält.

Wenn alles funktioniert, können Sie nun überflüssige bzw. verwaiste Elemente löschen.

Es bietet sich an, vorher ein Backup Ihrer Datenbank zu erstellen, damit Sie die Löschung rückgängig machen können, falls Sie in einem der Schritte zuvor einen Fehler gemacht haben.

Die von Merconis bei der Einrichtung erstellten Seitenbäume, aus denen Sie alle relevanten Inhalte verschoben haben, können Sie nun löschen.

Auch das von Merconis bei der Einrichtung erstellte Theme wird nicht mehr benötigt und kann gelöscht werden.

Fertig!

Nachdem Sie diese Anleitung befolgt haben, ist Merconis in Ihrem Projekt einsatzfähig und fügt sich zumindest aus technischer Sicht nahtlos in Ihre Website und Ihr vorhandenes Theme ein.

Optisch allerdings müssen Sie Merconis nun noch ein wenig anpassen, damit alles wie aus einem Guss aussieht. In den meisten Fällen genügen hierfür einfache Anpassungen per CSS, für die kein besonderes Hintergrundwissen nötig ist.

Falls Sie mehr anpassen möchten, stehen Ihnen natürlich auch Templateveränderungen jeglicher Art offen.