CMS Bludit & ECWID Shop

Bludit

Für einen Freund habe ich nach einer Möglichkeit gesucht, seine Webseite mit einem ressourcenschonenden Content-Management-System (CMS) neu einzurichten. Ein CMS vereinfacht das Erstellen und Verwalten einer Webseite erheblich, da es dessen Inhalt und Layout strikt voneinander trennt. Ich habe mich für das CMS Bludit entschieden, das einfach in der Installation und sehr übersichtlich in der Handhabung ist. Zudem verbraucht es nur ein paar MB Speicherplatz. Mindesvorrausetzung ist PHP 5.6.

Da das Webhosting Paket schon recht alt und auf 100 MB begrenzt ist, ist Bludit somit auch die passende Wahl. Nun soll aber auch der (alte) Shop neu eingerichtet werden und nach einiger Recherche bin ich auf den Online-Shop ECWID gestoßen. Es ist quasi ein "ausgelagerter" Shop, wobei man sich auf dessen Seite registriert und einloggt. Dort wird der Shop erstellt und eingerichtet. Sodann läßt sich einfach über einen generierten Code der ECWID-Shop in die eigene Webseite per eingefügter Codezeile einbinden. Das Shop-System ECWID ist kostenlos für bis zu 10 Produkte, was für diesen Shop vollkommen ausreicht.

An diesem Beispiel möchte ich aufzeigen, mit welchen begrenzten Mitteln es möglich ist, eine leicht zu administrierende, schmalbrüstige CMS-Webseite ohne Datenbank auf die Beine zu stellen. Inklusive eines in die Webseite integrierten Shops, mit dessen Administration auch Anfänger klarkommen dürften. Voraussetzung ist lediglich eine eigene Domain. Selbst wenn man keine eigene besitzt, bietet ECWID die Möglichkeit über ihren Server eine Webseite für den Shopbetreiber einzurichten. Die folgende ausführliche Anleitung soll dem Interessierten eine willkommende Hilfe sein.

Bludit

Schritt-für-Schritt Anleitung

A. Installieren und Einrichten des CMS Bludit
  1. Bludit herunterladen, entpacken und auf die gewünschte Webseite per FTP hochladen. Am besten den Inhalt direkt ins Wurzelverzeichnis. Download: https://www.bludit.com/de

  2. Die eigene Website aufrufen und den Bludit Installer starten. Beim Einrichten werden die Login-Daten werden abgefragt: Benutzername ist immer: admin Paßwort vergeben.

  3. Der Wechsel ins Backend als Admin erfolgt immer über den Aufruf der Website: https://DOMAIN/admin, wobei DOMAIN die eigene Website darstellt. Nach dem Login gelangt man in die Bludit CMS Verwaltung.

  4. Im Backend sollten nun die benötigten Einstellungen vorgenommen werden:

    • Neue Inhalten bzw. Seiten als 'Statisch' erstellen.
    • Die Haupt- bzw. Eingangsseite als 'Fixiert'.
    • Unter 'Einstellungen' alle benötigten Anpassungen vornehmen.
  5. Theme einrichten. Themes für Bludit stehen unter folgendem Link zur Auswahl: https://themes.bludit.com/de Das Theme 'Bluma' eignet sich unsere Zwecke sehr gut. Theme herunterladen, entpacken und anschließend das gesamte Verzeichnis per FTP in das vorhandene Verzeichnis 'bl-themes' hochladen. In der CMS-Verwaltung unter 'Einstellungen' -> 'Themes' das gewünschte Theme aktivieren. Die übrigen Themes können per FTP aus dem 'bl-themes'-Verzeichnis gelöscht werden.

  6. Plugins Plugins für Bludit stehen unter folgendem Link zur Auswahl: https://plugins.bludit.com/de Benötigte Plugins downloaden, installieren bzw. ins 'bl-plugin' Verzeichnis kopieren und unter 'Einstellungen' -> 'Plugins' aktivieren:

    • Contact3
    • Bludit Auto Update
    • Tail Writer Bludit oder
    • EasyMDE

    Dann sofort die noch aktivierten Editoren (z.B. TinyMCE) de-aktivieren ! Nicht benötigte Plugins können per FTP einfach aus dem 'bl-plugins' Verzeichnis gelöscht werden.

  7. Das Plugin 'lightbox' Lightbox scheint für einige Themes wohl leider nicht richtig zu funktionieren. So sollten eingebundene Bilder bzw. Gallerien auf Mausklick herangezoomt werden. Deshalb werden wir 'Lightbox' manuell einrichten:

    Das von Lokesh Dhakar entwickelte Script namens 'Lightbox' wird auf folgender Seite veröffentlicht: https://lokeshdhakar.com/projects/lightbox2 Dort gibt es eine Schritt für Schritt Anleitung, wie Lightbox in die eigene Webseite eingebunden werden kann.

    Auf GitHub unter https://github.com/lokesh/lightbox2/releases läßt sich das aktuelle Script als zip-Datei herunterladen und entpacken. Wir benötigen hier nur die in 'dist' liegenden beiden Verzeichnisse 'css' und 'js', die wir einfach in das Wurzelverzeichnis unserer Webseite hochladen.

    Lightbox ist bereit, wenn folgender Code ganz am Anfang der Webseite steht:

    Ganz am Ende der Webseite muss stehen:

    Die Codezeile für ein bestimmtes Bild an der gewünschten Stelle der Webseite würde dann so aussehen:

    <a href="images/kennedy.png" data-lightbox="politik" data-title="Kennedy in Germany">
    <img src="images/kennedy.png" width="150" height="133"></a>

    Hier liegt das betreffende Bild im Ordner "images", welches wiederum im Hauptverzeichnis der Homepage liegt. Dabei bedeuten:

    • data-lightbox="politik" Alle Bilder gehören zum Set "Politik". So kann man Bilder in Gruppen gliedern, was gerade bei einer großen Bildersammlung oder einer Gallerie sinnvoll sein kann.

    • data-title="Kennedy in Germany" Bilduntertitel bzw. Bildbeschreibung

B. Einrichten eines ECWID Shopsystems mit CMS Bludit

Jetzt kann das ECWID Shopsystem in die bestehende, mit dem CMS Bludit erstellte Webseite eingebunden werden. Für bis zu 10 eingestellte Produkte ist der Online-Shop kostenfrei und wird über ein umfangreiches Dashboard verwaltet.

Ausführlicher Artikel zu ECWID: https://www.geld-online-blog.de/online-geld-verdienen/online-shops/shop-loesung-von-ecwid-einfach-integrierender-online-shop-fuer-blogger-und-website-betreiber/

Dazu ruft man ECWID Webseite auf: https://www.ecwid.com/de

Über den Button 'Kostenloser Einstieg' wird man zur schrittweisen Einrichtung des eigenen Shops geführt. Dabei gibt es verschiedene Möglichkeiten, den Shop zu verwenden. Hier wählen wir das Einbinden des ECWID Online Shops in die eigene Webseite per generiertem Code.

Ist der Shop aktiviert bzw. eingerichtet, so erfolgt der Login in das ECWID-Konto stets mit Angabe der EMail-Adresse und des Paßwortes über folgenden Link:

https://my.ecwid.com

Nach dem Login gelangt man in das Dashboard bzw. Control-Panel, von wo aus alle Einstellungen des Online-Shops getätigt und die Produkte eingestellt werden können.

Unter 'Shop-Verwaltung' -> 'Hauptmenü' hilft uns das angebotene Tutorial mit seinen 'Pre-Launch-Tipps' hilft, den Shop erst einmal einzurichten und zum Laufen zu bringen. Unter Punkt 'Fügen Sie Ihren Store zu einer Website hinzu' wählen wir als nächstes 'Individuell erstellte Website'. Dort können wir nun den für unseren Shop individuell generierten ECWID-Integrations-Code in die Zwischenablage kopieren.

Anschließend melden wir uns in den Bludit Administrationsbereich unserer Webseite an und wählen die passende Seite, auf der unser Shop erscheinen soll und fügen diesen Code dort ein.

Der Grundstein für einen funktionierenden ECWID-Online-Shop ist nun gelegt. Folgen wir dem ECWID Tutorial, so dürfte dem nichts mehr entgegenstehen!