Installation in fertige Website oder vorhandenes Theme

Wenn Sie bereits eine fertige Contao-Website haben und darin Merconis installieren möchten, so ist dies in den meisten Fällen 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 in der Regel eine überschaubare Aufgabe.

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

Verschieben der Merconis-Templates

Merconis hat bei der Einrichtung in Ihrem Templates-Verzeichnis ein Unterverzeichnis namens „merconisTemplatesTheme10“ 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 „merconisTemplatesTheme10“.

Wichtig

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 parallel zu Ihrem bereits vorhandenen Theme-Datensatz jetzt 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 aus dem Kapitel Erste Schritte befolgen, sind noch einige Besonderheiten zu berücksichtigen, um Merconis sauber in Ihr bestehendes Projekt zu integrieren.

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 „Container 1“ 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.

Hinweis

Bitte denken Sie daran, wenn Sie bereits eigene Seiten, wie Versandkosteninformationen, Registrierung, usw. haben, diese in den Grundeinstellungen im Bereich: Seiten-Einstellungen zuzuordnen.

Verschieben der Frontend-Module von Merconis

Das von Merconis bei der Einrichtung angelegte Theme „MERCONIS Theme Kopenhagen“ 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 stellt das bereits vorhandene Theme Ihrer Website Layouts zur Verfügung. Diese Layouts berücksichtigen Merconis natürlich noch nicht und müssen entsprechend angepasst werden.

Verschieben Sie zunächst aus dem Theme „MERCONIS Theme Kopenhagen“ das Layout „MERCONIS: Layout für Ajax-Aufrufe“ 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 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/theme10/lscss/lscss-project.scss“ im Bereich: „MERCONIS: LSCSS“ als „Zu ladende SCSS-Datei“ aus. Diese SCSS-Datei ist modular aufgebaut, sodass Sie die nicht gewünschten Stylings auskommentieren können.

Für die Grundformatierung von Merconis erzeugten Ausgaben (z. B. Produktdarstellungen, Warenkorb usw.) sollten allerdings folgende SCSS-Dateien importiert bzw. geladen werden:

  • @import „../../../../../assets/lscss/lscss.scss“;
    (Unser LSCSS-Framework auf Basis von Bootstrap)
  • @import „../../../../../assets/lsjs/core/styles_core.scss“;
    (Styling für das LSJS-Framework)
  • @import „../../../../../vendor/leadingsystems/contao-merconis/src/Resources/contao/lscss/_merconis.scss“;
    (Grundstyling für die Merconis erzeugten Ausgaben)

Eingebundene Module

Zusätzlich zu den Modulen, die Ihr Layout für die sonstige Seitendarstellung benötigt, sollten Sie mindestens die Frontend-Module „Produkt-Übersicht“, „Produkt-Einzelansicht“ und „Warenkorb“ mit dem Template „template_cart_mini“ einbinden. So wird auf den Seiten, die dieses Layout verwenden, die Produktausgabe und die Anzeige des Warenkorbs möglich.

Binden Sie „Produkt-Übersicht“ (Modul: MERCONIS Kopenhagen: Produkt-Übersicht) und „Produkt-Einzelansicht“ (Modul: MERCONIS Kopenhagen: Produkt-Detailansicht) am besten in der Hauptspalte ein. Das Modul Mini-Warenkorb (Modul: MERCONIS Kopenhagen: Header – Mini-Warenkorb) können Sie nutzen, um einen Link zum Warenkorb zu erstellen, der Ihnen die Anzahl der vorhandenen Produkte im Warenkorb anzeigt, z. B.:

<a href="/warenkorb">
    {{insert_module::'id vom Modul Mini-Warenkorb'}}
    <label>Warenkorb</label>
</a>

Möchten Sie hingegen mit einem Preview-Warenkorb arbeiten, so wie in unserem Theme Kopenhagen, benötigen Sie ein weiteres Warenkorb-Modul mit dem Template „template_cart_preview“.
Binden Sie hierzu zusätzlich folgende Module in Ihr Seitenlayout ein:

  • MERCONIS Kopenhagen: Off Canvas – Warenkorb-Vorschau
  • MERCONIS Kopenhagen: Off Canvas – Warenkorb-Vorschau-Container

Das Modul „MERCONIS Kopenhagen: Off Canvas – Warenkorb-Vorschau“ ist dafür verantwortlich, den Inhalt des Warenkorbs auszugeben.

Das Modul „MERCONIS Kopenhagen: Off Canvas – Warenkorb-Vorschau-Container“ ist im Prinzip nur der umschließende Container, der die entsprechende CSS-ID und CSS-Klassen hat, damit unsere Javascript-App die Klassen für das ein- und ausblenden setzen kann.

Damit Sie den oben genannten Link zum Warenkorb als Toggler für den Preview-Warenkorb nutzen können, müssen Sie einfach nur die CSS-Klasse „off-canvas-cart-preview-toggler“ hinzufügen:

<a href="/warenkorb" class="off-canvas-cart-preview-toggler">
    {{insert_module::'id vom Modul Mini-Warenkorb'}}
    <label>Warenkorb</label>
</a>

Um weitere Funktionalitäten wie Merkliste, Produktsuche, etc. in Ihr Seitenlayout einzubinden, orientieren Sie sich einfach an dem Modul „MERCONIS Kopenhagen: Header – Spezielle Shop-Navigation (de/en)“ und passen dieses Modul Ihren Bedürfnissen an.

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 Kopenhagen 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 bei „Zu ladende App“ folgendes Verzeichnis aus „files/merconisfiles/themes/theme10/lsjs/app“.

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

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 den 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 jetzt alle Schritte zur Einbindung von Merconis in Ihre bestehende Website bzw. Ihr vorhandenes Theme erledigt. Bitte prüfen Sie, 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.

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

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

Hinweis

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.

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 Template-Veränderungen jeglicher Art offen.
Eine Übersicht der Merconis-Templates finden Sie hier.