Kategorien
Content Management Systeme Webdesign

Themes basierend auf Bootstrap in Drupal

Wie sie sicher schon bemerkt haben, steckt hinter dem NovaTrend Blog das Content Management System Drupal. Das Theme basiert auf dem HTML, CSS und JavaScript Framework Bootstrap. Die Struktur einer solchen Site lässt sich erstaunlich einfach erstellen und bietet grosse Flexibilität beim Design.

In diesem Artikel möchte ich Ihnen zeigen, wie Sie eine Drupal Website mit Bootstrap aufsetzen können.

Bezüglich der Software Versionen ist eigentlich nie die richtige Zeit einen Artikel darüber zu schreiben, steht doch immer schon die neue Version vor der Tür.
Die Veröffentlichung von Drupal 8 findet seit gefühlten 2 Jahren statt und Bootstrap brachte gerade eine Version 4 Alpha heraus.

Hier im Blog benutzen wir Drupal 7.x und Bootstrap 3.x und vermutlich ist diese Kombination recht gebräuchlich.
Bei drupal.org werden mehr als 70.000 aktive Websites angegeben, die Bootstrap einsetzen (Quelle).

Drupal - Bootstrap - Installationen - 2012 - 2015
Drupal – Bootstrap – Installationen – 2012 – 2015

Aber der Reihe nach.
Zunächst stellt sich die Frage, warum ich das benutzen soll.

Die Nutzung eines Content Management Systems ist ab einer gewissen Komplexität Ihrer Website zwingend. Ob es nun unbedingt Drupal sein muss, sei dahingestellt. Drupal eignet sich für diesen Artikel, weil wir unser Blog damit betreiben. Sie können Bootstrap ebenfalls in Joomla, Typo3, WordPress und vermutlich den meisten anderen CMS nutzen, teilweise ist es bereits enthalten.

Was ist Bootstrap?

Bootstrap ist ein freies und sehr häufig verwendetes CSS-Framework. Es enthält auf HTML und CSS basierende Gestaltungsvorlagen für Typografie, Formulare, Buttons, Tabellen, Grid-Systeme, Navigations- und andere Oberflächengestaltungselemente, sowie zusätzliche, optionale JavaScript-Erweiterungen.

Bootstrap - Komponenten (Auswahl)
Bootstrap – Komponenten (Auswahl)

Sie können mit Hilfe dieser Elemente eine Website entwickeln und später dann bei Bedarf ein CMS „darunterlegen“.

Wenn ich das so schreibe, dann höre ich den Webdesigner protestieren und sehe den Programmierer zusammenzucken. In der harten Realität läuft es aber ziemlich oft genau so ab. Der grosse Vorteil bei dieser Vorgehensweise ist die Flexibilität und die unglaubliche Verbreitung von Bootstrap. Sie müssen sich nicht sofort festlegen, mit welchen Tools die Site letztlich realisiert wird. Es wird „einfach“ möglich Prototypen der Website in unterschiedlichen CMS zu realisieren und Workflows zu optimieren.

Es gibt Dateien mit Konfigurationsanweisungen für Bootstrap, die das komplette Design der Website beschreiben und einfach austausch- und veränderbar sind. Bekanntestes Beispiel dafür ist der Service bootstrap.com. Jedes der angebotenen Themes lässt sich „per Mausklick“ integrieren. Hier der Screenshot eines Beispielthemes im Flatdesign:

Bootswatch - Flatly
Bootswatch – Flatly

Installation

Installieren Sie sich das aktuelle Drupal 7 (Installation der 5 meistverbreiteten Content Management Systeme). Um mit Bootstrap arbeiten zu können, benötigen eine aktuellere jQuery Version als der Standard in Drupal 7. Glücklicherweise gibt es dafür natürlich ein Modul 🙂

Installieren und aktivieren Sie die Module bootstrap und jquery_update

Sie können die Installation per Konsole mit Drush erledigen

drush dl bootstrap jquery_update
drush en bootstrap jquery_update

oder über den Browser in /admin/modules/install

Drupal - Modul installieren
Drupal – Modul installieren

Konfiguration

Das jQuery Modul kann zunächst ohne Konfiguration genutzt werden, bei Bedarf können Sie in /admin/config/development/jquery_update unterschiedliche jQuery Versionen und ein CDN konfigurieren.

Das Bootstrap Theme kommt mit einem Starterkit für ein eigenes Subtheme, Sie können es am Anfang aber auch „einfach so“ nutzen und mit einem Bootswatch Design kombinieren. Nehmen wir das Bootstrap Flatly Beispiel.

Zunächst müssen Sie das neu installierte Bootstrap Theme aktivieren und als Standard festlegen (/admin/appearance).

Drupal - Theme aktivieren
Drupal – Theme aktivieren

Ihre Website hat dann das responsive Bootstrap Design.
Wenn Sie die Grösse des Browserfensters verkleinern, sehen Sie, was ich meine.

Drupal - Startseite
Drupal – Startseite

Um nun das Boostrap Flatly Design zu erhalten, müssen Sie in den Theme-Einstellungen Flatly auswählen (/admin/appearance/settings/bootstrap). Sie können sich alle Boostrap Themes hier in einer Vorschau ansehen.

Bootstrap - Flatly wählen
Bootstrap – Flatly wählen

Wenn Sie im Tab Components die Navigationsleiste (NAVBAR) nun noch auf „Static Top“ setzen …

Bootstrap - Navigation
Bootstrap – Navigation

sieht Ihre Drupalsite so aus:

Drupal - Bootstrap - Flatly
Drupal – Bootstrap – Flatly

Flatdesign … ganz einfach!
Wenn die Farben für Ihr Projekt passen, ist Ihre Arbeit hier beendet.

Ein eigenes Sub-Theme

Wenn Sie einen Kunden haben, soll die Site natürlich in den Farben, Schriften und Einstellungen der Corporate Identity sein. Um das zu realisieren, müssen Sie sich ein Sub-Theme erstellen. Das ist nicht schwer und wird hier (Bootstrap sub-theming „how to“) detailliert beschrieben. Grundsätzlich erstellen Sie sich einen eigenen Theme-Ordner, kopieren die Bootstrap Quelldateien dort hinein und ändern die theme.info Datei ab. Ausserdem benötigen Sie einen LESS Compiler. Ich nutze dafür die node.js Umgebung unter Mac OS und kann dort einfach einen LESS Compiler installieren (npm install -g less).
Hier ist eine detailierte Beschreibung (How to Use Bootswatch Themes in Drupal 7).

Je nachdem, ob Sie unter Windows, Linux oder Mac OS arbeiten sind die Schritte ein wenig anders, daher möchte ich es beim Link auf die Erklärungen belassen.

Wenn Sie sich Ihre Entwicklungsumgebung eingerichtet haben, müssen Sie für einfache Anpassungen nur die Datei variable.less bearbeiten und danach mit lessc kompilieren. In der variable.less stehen alle Parameter eines Bootswatch Themes und Sie können diese Datei downloaden (http://bootswatch.com/flatly/).

Bootstrap - Flatly - variable.less
Bootstrap – Flatly – variable.less

Nach kurzer Zeit sieht Ihr Drupal dann so aus:

Drupal - NovaTrend Design
Drupal – NovaTrend Design

In diesem Fall musste noch eine Drupal Template Datei überschrieben werden, aber die wesentlichen Änderungen waren tatsächlich nur in der Datei variable.less vorzunehmen!

Fazit

Mit dem Bootsstrap Framework können Sie Standardsites in sehr kurzer Zeit erstellen. Für individualisierte Sites benötigen Sie etwas mehr Aufwand und Know-How, sind allerdings extrem flexibel im Design. In Kombination mit den Template-Systemen der CMS können Sie wirklich jeden Bootstrap basierten Entwurf „in endlicher“ Zeit realisieren 🙂

Links


tl;dr: Die Nutzung des Bootstrap Framework wird immer beliebter – hier ein Beispiel in Kombination mit Drupal.

Kategorien
Content Management Systeme seafolly.ch

Webverzeichnisse mit Joomla & SobiPro

Als Webverzeichnis oder -Katalog versteht man eine Sammlung von Inhalten im Internet. Dabei geht es grundsätzlich um das sammeln, sichten und kategorisieren von Informationen. Der Verzeichnisdienst kann kostenlos oder kostenpflichtig sein.

Hier ein paar Beispiele für Verzeichnisse:

  • alle Antiquitätengeschäfte im Languedoc Roussillon
  • die schönsten Strände weltweit
  • Drei Sterne Restaurants
  • Kunstgalerien in der Schweiz
  • Events einer Region
  • Gebrauchtwagen
  • Superyachten 🙂

Auch Dienste wie Ebay oder Airbnb sind letztlich Verzeichnisdienste. In diesen Fällen geht es um Auktionen oder Übernachtungsmöglichkeiten. Verzeichnisse können automatisch oder manuell erstellt werden. Sie können von einer Redaktion oder den Besuchern selbst erstellt werden.

Durch die massenhafte und automatische Erfassung von Daten durch Unternehmen wie Google sind kleinere, lokale Verzeichnisse etwas ins Abseits gedrängt worden. Nichtsdestotrotz besteht aber immer ein Bedarf nach gut gepflegten Verzeichnissen (Wo ist das nächste Restaurant, der nächste Geldautomat, eine preisgünstige Tankstelle, die schönsten Gärten, usw.?).

Im Rahmen des seafolly.ch Projekts haben wir über Verzeichnisse nachgedacht und sind dabei über die schon fast legendäre Erweiterung SobiPro für Joomla „gestolpert“. Seit 2006 besteht dieses Projekt und hat sich mittlerweile zu einem leistungsfähigen System mit Content Construction Eigenschaften, zusätzlichen besonderen Feldern, Zugriffsrechten, erweiterten Suchmöglichkeiten, Geschwindigkeitesoptimierungen und natürlich responsiven Templates gemausert. Mit der integrierten PayPal Funktion können Sie die Einträge in ihrem Verzeichnis oder bestimmten Feldern eines Verzeichnisses sogar verkaufen und damit einem Marktplatz erstellen!

Die Software steht unter GPLv3 Lizenz und kann einfach in Joomla installiert werden. In diesem Artikel möchte ich Ihnen ein Beispiel zeigen.

Wir erstellen ein Verzeichnis des Kunstmarkts in der Schweiz.

Installation

Erweiterung SobiPro installieren
Erweiterung SobiPro installieren
SobiPro - Control Panel
SobiPro – Control Panel
SobiPro - Im Menü verlinken
SobiPro – Im Menü verlinken
SobiPro - Beispielverzeichnis auf der Website
SobiPro – Beispielverzeichnis auf der Website
SobiPro - Sprachdatei installieren
SobiPro – Sprachdatei installieren

Die Kategorienamen können einfach editiert werden. Ich habe im Beispiel nur die Kategorien der ersten Hierarchiestufe genutzt und umbenannt. Kategorien können beliebig geschachtelt werden.

SobiPro - Kategorien
SobiPro – Kategorien
Auf der Website sieht das dann so aus:
SobiPro - Kunstmarkt
SobiPro – Kunstmarkt
Die Icons sind konfigurierbar, ich habe Standard Icons ausgewählt.

Eintrag hinzufügen

Ein Klick auf Eintrag hinzufügen zeigt das Formular aus dem Business Directory, wie es ein Besucher der Site sieht.
Je nach Konfiguration ist es möglich als Besucher der Site oder als registrierter Benutzer neue Einträge vorzunehmen. Im Beispielfall ist das System so konfiguriert, dass manche Felder kostenpflichtig sind, hier beispielsweise das Logo.
Eine Zahlungsweise via PayPal ist im Standard enthalten.

Kunstmarkt - Neuer Eintrag
Kunstmarkt – Neuer Eintrag

Felder hinzufügen und bearbeiten

Die Felder und deren Bezeichnungen können Sie im Administrationsbereich im Felder-Manager konfigurieren. Dort können Sie auch festlegen, ob und wenn ja, wieviel die Nutzung von bestimmten Feldern kosten soll.

Kunstmarkt - Felder
Kunstmarkt – Felder

Repositories

Ausser den Standardfeldern gibt es auch zusätzliche Funktionen im SobiPro Repository zum Download, beispielweise ein GeoMaps Feld um die Adressdaten auf einer Google Map anzeigen zu können und nach Einträgen in der Nähe zu suchen. Dort finden Sie auch die Sprachdateien und andere Templates.

Templates

Templates sind ein interessantes Thema, denn es gibt fix und fertige Templates beispielsweise für Immobilienmärkte, Veranstaltungen, Gebrauchtwagen und Restaurants. Die Templates sind veränderbar und responsiv (Bootstrap).

SobiPro - Restaurant Template mit Maps, Galerie und Bewertungen
SobiPro – Restaurant Template mit Maps, Galerie und Bewertungen

Kosten

Das Geschäftsmodell von SobiPro ist, wie so oft, in Joomla ein Subskriptionsmodell. Die Basis-Erweiterungen sind kostenlos. Manche zusätzliche Erweiterung und die Nutzung des Supports setzen eine Subskription voraus. Um ein Gefühl für die Kosten zu bekommen: Für etwa 60 Euro (Silber Subskription) erhält man drei Monate Zugriff auf alle zur Verfügung stehenden Erweiterungen, auf die komplette Dokumentation und einen Ticket Support.

Im Joomla Extension Directory gibt es eine eigene Kategorie zu SobiPro in der mehr als 50 Erweiterungen für SobiPro gelistet sind.

Beispielseiten

Ein paar Beispielseiten von produktiven SobiPro Verzeichnissen

Fazit

SobiPro ist ein interessanter Einstieg in das Thema Verzeichnisse. Es ist eine Mischung aus vordefinierten Elementen und einem Content Construction Kit. Man kommt schnell zu ersten Erfolgserlebnissen und kann bei Bedarf sehr individuelle Einstellungen und Konfigurationen vornehmen.

Links:

Kategorien
Content Management Systeme seafolly.ch

Yellow ist für Menschen die Websites machen

Den Text der Überschrift habe ich getweetet, nachdem ich das Yellow Demo ausprobiert hatte.

Mit Yellow können Sie kleine, merhsprachige Websites, Blogs und Wikis erstellen. Der Inhalt kann online bearbeitet werden. Yellow ist ein Flat-File-CMS und benötigt nur einen Webserver mit PHP (keine Datenbank). Die Firma Datenstrom, die das CMS entwickelt, stellt es frei zur Verfügung. Der Artikel 20 Flat-File-Systeme im Test vom 21. Oktober 2014 empfahl Yellow folgendermassen:

Wenn du ein bisschen experimentieren willst und Inspiration suchst, dann versuch es mal mit Yellow.

Nach dem Demo war auch ich neugierig und habe es ausprobiert. Schliesslich braucht unser Kunstprojekt seafolly.ch noch eine Website und da liegt es ja nahe, mit einem inspirirenden CMS mehrsprachig, aber klein anzufangen 🙂

Installation

So grundsätzlich können Sie Yellow einfach herunterladen und entpacken.
Dann ist es fertig installiert und Sie können loslegen.

Virtueller Server

Legen Sie die Konfigurationsdatei und die benötigten Dateiverzeichnisse an. Ich mache das hier mit dem Editor Nano unter Ubuntu 14.04 mit dem Apache Webserver:

sudo nano /etc/apache2/sites-available/seafolly.ch.conf

und kopieren Sie die folgenden Anweisungen hinein

<VirtualHost *:80>
  ServerAdmin webmaster@seafolly.ch
  ServerName seafolly.ch
  ServerAlias www.seafolly.ch
  DocumentRoot /var/www/seafolly.ch/public_html/    
  ErrorLog /var/www/seafolly.ch/logs/error.log
  CustomLog /var/www/seafolly.ch/logs/access.log combined
  <Directory "/var/www/seafolly.ch/public_html">
     Options FollowSymLinks
     AllowOverride All
     Order allow,deny
     Allow from all
  </Directory>
</VirtualHost>

Speichern Sie die Datei ab.

Erstellen Sie ein Verzeichnis für die Website und darin ein Verzeichnis für die Logdateien:

sudo mkdir /var/www/seafolly.ch
sudo mkdir /var/www/seafolly.ch/logs

Wechseln Sie in das Unterverzeichnis der Website:

sudo cd /var/www/seafolly.ch/

Laden Sie den Quellcode aus Github (oder per Download und Entpacken des Zip Pakets):

sudo git clone https://github.com/datenstrom/yellow.git

Bennennen Sie das Verzeichnis yellow in public_html um:

sudo mv yellow public_html

Geben Sie dem Webserver User die Eigentumsrechte:

sudo chown -R www-data:www-data /var/www/seafolly.ch/public_html/

Danach können Sie die Apache Konfigurationsdatei aktivieren und den Apache Service neu laden.

sudo a2ensite seafolly.ch.conf
sudo service apache2 reload

Sie können nun im Browser die entsprechende URL aufrufen, in meinem Fall http://seafolly.ch

Erster Aufruf von Yellow
Erster Aufruf von Yellow

Benutzeraccount anlegen

Da es keine Datenbank gibt, muss irgendwo ein Benutzername und ein Passwort erzeugt und hinterlegt werden. Das kann man entweder online auf der datenstrom.se Site machen oder auf der Konsole.
Ich entscheide mich für die Konsole.

Wechseln Sie in das Verzeichnis, in dem sich die yellow.php Datei befindet (in meinem Fall /var/www/seafolly.ch/public_html)

Erzeugen Sie ein Benutzerkonto mit dem Befehl:

sudo php yellow.php user email@example.com horsebattery

Ihr Benutzername ist email@example.com und das Passwort horsebattery.
Die E-Mail Adresse und der Passworthash werden in der Datei system/config/user.ini eingetragen.

Loggen Sie sich ein!

Anmeldung
Anmeldung

Inhalt erstellen ändern und löschen

Nun sieht Yellow etwas anders aus. Sie können jetzt Seiten editieren, hinzufügen und löschen.
Probieren Sie es aus!
Text schreiben Sie in der Auszeichnungssprache Markdown, beispielsweise

Normal *Kursiv* **Fettschrift** `Code`
* Punkt eins
* Punkt zwei
* Punkt drei

Mit dem + und dem – Zeichen können Seiten erzeugt und gelöscht werden.

Ansicht nach dem Anmelden
Ansicht nach dem Anmelden

Sie können die Inhalte über den Browser und über das Dateisystem bearbeiten.

Das Prinzip von Seiten und Navigationseinträgen spiegelt sich im Dateisystem.
Im Verzeichnis content haben Sie zwei weitere Unterverzeichnisse:

01-Home
02-About

In jedem Verzeichnis finden Sie eine page.txt Datei. In dieser page.txt Datei befindet sich Ihr Markdown Text. Wenn Sie mit dem + Zeichen eine neue Seite angelegt haben, so befindet sie sich in dem Verzeichnis, dessen page.txt sie gerade aufgerufen hatten. Eine deutschsprachige detailierte Beschreibung finden Sie unter https://github.com/datenstrom/yellow/wiki/Adding-content-de.

Bilder und Dateien

Das Verzeichnis media/downloads enthält Dateien, das Verzeichnis media/images Bilder

![image](icon.png)

zeigt ein Bild aus dem Verzeichnis media/images an. Probieren Sie es aus

Ein Seite mit Bild
Ein Seite mit Bild

Es gibt auch ein Image Plugin um Bildgrössen zu ändern!

Einstellungen, Mehrsprachigkeit, Plugin und Themes

Alle Einstellungen befinden sich im system Verzeichnis.

In der config.ini habe ich die folgenden Einstellungen vorgenommen:

sitename = seafolly.ch
author = Hagen Graf
language = de
theme = flatsite

multiLanguageMode = 1

Als ich die Seite wieder aufrief, bekam ich folgende Fehlermeldung

Something went wrong. Language ‚de‘ does not exist!

Die Standardsprache ist Englisch und damit auch alle Seiten.

Extensions laden

Es gibt zusätzliche Sprachen, Plugins und Themes.
Die einfachste Variante ist, diese zunächst zu laden und bei Bedarf ins entsprechende Systemverzeichnis zu kopieren (https://github.com/datenstrom/yellow-extensions).

Damit ich eine mehrsprachige Seite erhalte, muss ich die Ordnerstruktur für die Inhalte anpassen

einsprachig Englisch

content/1-home
content/2-about

Mehrsprachig Deutsch/Englisch/Französisch

content/1-en/1-home
content/1-en/2-about
content/2-de/1-startseite
content/2-de/2-ueber
content/3-fr/1-accueil
content/3-fr/2-apropos

Den Seiten (page.txt) sollten Sie eine Language Variable hinzufügen

---
Title: Startseite
Language: de
---
Willkommen bei bei Seafolly

Die jeweiligen Sprachdateien müssen ins system/config Verzeichnis geladen werden.
Bei mir sieht der Inhalt des Verzeichnisses so aus:

config.ini      
language-en.ini 
language-de.ini 
language-fr.ini 
page-error-401.txt 
page-error-404.txt 
page-error-424.txt 
page-error-500.txt 
page-new-default.txt 
user.ini
robots.txt

Zwischen den Sprachen wechseln Sie im Browser

  • English – seafolly.ch
  • Deutsch – seafolly.ch/de
  • Französisch – seafolly.ch/fr

Individuelle Navigation

Irgendwo müssen Sie die Links zu den anderen Sprachen anzeigen.

Die einfachste Variante sind vermutlich zusätzliche Links in der Navigation, also los.

Die Navigation liegt in system/themes/snippets/navigation.php

Erweitern Sie sie einfach um die Sprachlinks

<?php $pages = $yellow->pages->top() ?>
<?php $yellow->page->setLastModified($pages->getModified()) ?>
<div class="navigation">
<ul>
<?php foreach($pages as $page): ?>
<li><a<?php echo $page->isActive() ? " class=\"active\"" : "" ?> href="<?php echo $page->getLocation() ?>"><?php echo $page->getHtml("titleNavigation") ?></a></li>
<?php endforeach ?>
<li><a href="/">EN</a></li>
<li><a href="/de">DE</a></li>
<li><a href="/fr">FR</a></li>
</ul>
</div>

<div class="navigation-banner"></div>

Das Ergebnis sieht dann so aus:

Yellow mit individualisierter Navigation
Yellow mit individualisierter Navigation

Plugins und Themes

Wie Sie bereits beim Download der Extensions gesehen haben, gibt es u.a. Plugins mit den Namen blog, disqus, fontawesome, image, search, toc, wiki, breadcrumbs, googlemaps, imagegallery, piwik, sitemap, soundcloud, userpermission, youtube, contact, feed und viele andere mehr.

Wenn Sie bis hierher mitgemacht haben, beginnt Ihnen die Sache vermutlich Spass zu machen, daher höre ich jetzt auf mit der Vorstellung und wünsche Ihnen viel Erfolg beim Ausprobieren 🙂

Für seafolly.ch werde ich erstmal bei Yellow bleiben.

Links


tl;dr: Yellow ist ein inspirierendes, dateibasiertes CMS für Menschen die Websites erstellen.

Kategorien
Content Management Systeme E-Commerce

Ein Online Shop mit Joomla & J2Store

Es ist keine Frage, der Onlinehandel boomt und wird jährlich grösser. Auch immer mehr kleinere Unternehmen würden gern Ihre Waren in einem Shop anbieten, sind sich aber oft unsicher über die Auswahl der Shop-Software.

Da viele kleine Unternehmen eine Joomla Websites betreiben, möchte ich heute eine einfache, aber effektive Erweiterung vorstellen, J2store.

J2store kann:

  • aus jedem Joomla Inhaltsartikel ein verkaufbares Produkt machen. Das kann ein versendbares, physisches Produkt sein oder ein downloadbares wie ein eBook, ein Musikstück, ein Softwarepaket oder ein Foto.
  • Die Produkte können Optionen wie Farben, Grössen, Dateitypen oder auch individuelle Texte (wichtig beim Gravieren oder Bedrucken) enthalten.
  • Die Bezahlung kann online erfolgen oder bei Abholung im Geschäft.
  • J2store kann auch als reiner Katalog ohne Preise betrieben werden.
  • Es gibt zahlreiche Erweiterungen für Gutscheine, Rabattaktionen und kundenspezifische Preise
  • Mehrwertsteuer kann im Preis enthalten sein oder auf Basis des Preises berechnet werden.
  • Ein einfache Lagerhaltung ist integriert, so dass Sie einen Überblick über Be- und Rückstände haben
  • Versandpreise können auf Basis von Gewicht und Menge errechnet oder ab einem Mindestbestellwert verandkostenfrei sein
  • J2store läuft im Standard Template von Joomla responsiv, kann also auch gut auf mobilen Endgeräten benutzt werden.
  • Wenn Joomla mehrsprachig eingerichtet ist, ist die J2store Komponente ebenfalls mehrsprachig verfügbar.

Das hört sich ja wunderbar an, wo ist der Haken?

Es gibt keinen Haken bei den Funktionen, alles was ich oben beschrieben habe, funktioniert tatsächlich und ist kostenlos.

Aber!

Wie bei Joomla Erweiterungen üblich, sind manche Plugins kostenpflichtig, so beispielsweise das Plugin für die Zahlungsmethode PayPal. Es kostet allerdings nur 10 US$ und stellt somit keine grössere Investion dar.
Das Versand-Plugin für UPS ist übrigens kostenlos, für DHL kostet es 20 US$.

J2store nutzt die eigene Erweiterung im Extension directory und so können Sie sich einen guten Eindruck über die Bedienbarkeit, das Look & Feel der Erweiterung und auch deren Erweiterungsmöglichkeiten machen.

Beispiel

Online Shops sind immer individuell, sie wollen sich ja von der Konkurrenz abheben.
Um das Beispiel hier im einfach zu halten, nehme ich etwas aus meinem Leben. Ich baue hin und wieder Gartenstühle. Das Holz dafür bekomme ich aus einem Wald in Norddeutschland. Alle paar Jahre hole ich Holz, säge es zurecht und bei Bedarf baue ich dann Stühle, Tische oder Bänke. Nehmen wir an, Sie haben ein ähnliches Projekt oder Geschäft.
Sie könnten online die Produkte, oder vielleicht auch einen Bauplan-Download verkaufen.

Installation

Zunächst müssen Sich sich die aktuelle Version von Joomla installieren (siehe Artikel Installation der 5 verbreiteten Content Management Systeme).

Deutsche Sprachdateien

Wenn Sie die original Joomla Version von der joomla.org Website nehmen, müssen Sie noch die deutschen Sprachdateien installieren. Gehen Sie dazu in den Administrationsbereich (Extensions -> Extension Manager -> Install Languages), wählen German aus und installieren das Paket.

Sprachdateien in Joomla installieren
Sprachdateien in Joomla installieren
Danach müssen Sie Joomla noch mittteilen, welches die Standardsprache sein soll. Gehen Sie dazu auf Extensions -> Language Manager und wählen German als im Tab Installed-Site (die eigentliche Website) UND im Tab Installed-Administrator als Standardsprache aus. Wenn Sie sich dann aus- und wieder einloggen, ist Ihre Joomla Version komplett mit deutschen Texten versehen.
Joomla - Standardsprache festlegen
Joomla – Standardsprache festlegen

J2store installieren

Zusätzliche Erweiterungen installieren Sie in Joomla unter (jetzt auf Deutsch) Erweiterungen -> Erweiterungen. Suchen Sie einfach nach j2store und klicken den Install Button.

J2Store installieren
J2Store installieren

Im Menu des Joomla Administrationsbereich finden Sie jetzt einen neuen Menüpunkt. Die Texte sind allerdings noch auf Englisch.

J2store Menu - Englisch
J2store Menu – Englisch

Um auch hier eine deutschsprachige Umgebung zu erhalten, müssen Sie die entsprechende Sprachdatei installieren. Eine Übersicht über die verfügbaren Sprachen finden Sie unter http://j2store.org/translations/j2store3.html. Laden Sie sich das deutsche Sprachpaket herunter (de-DE.com_j2store.zip) und installieren Sie es unter Erweiterungen -> Erweiterungen -> Paketdatei hochladen. Nun erscheinen alle Texte von J2store ebenfalls auf Deutsch.

Konfiguration und erste Schritte

Um das Beispiel mit dem Gartenmöbeln wieder aufzunehmen, benötigen wir jetzt mindesten ein Produkt und die Grundkonfiguration im Shop (Adresse, MwSt-Behandlung, Zahlungsbedingungen, Versandbedingungen).

Alle Einstellungen für die J2store Erweiterung finden Sie unter J2Store -> Einstellungen. Die Felder sind weitgehend selbsterklärend. Eine ausführliche Erklärung finden Sie im englischen Benutzerhandbuch (http://j2store.org/support/user-guide.html)

J2Store - Einstellungen
J2Store – Einstellungen

Produkt erstellen

Die kluge Idee von J2Store ist, jeden redaktionellen Joomla Artikel zu einem Produkt machen zu können.
Um ein Produkt zu erstellen, müssen Sie also entweder einen Artikel neu in Joomla erstellen (Inhalt -> Beiträge -> Neuer Beitrag) oder sie gehen über den Shop (J2Store -> Katalog -> Produkte -> Neu). In beiden Fällen landen Sie in der Standard Artikelbearbeitungsmaske, die um ein Tab J2Store erweitert wurde.
In diesem Tab müssen Sie festlegen, ob, und wenn ja, um welche Art Produkt es sich handelt. Sie haben die Wahl zwischen

  • Einfach: Der Gartenstuhl
  • Variable: Der Gartenstuhl in unterschiedlichen Grössen oder Farben
  • Einstellungen: Der Gartenstuhl mit individueller Beschriftung
  • Downloadbar: Der Bauplan für einen Gartenstuhl

Ich erstelle ein einfaches Produkt

J2Store - Artikel als Produkt markieren
J2Store – Artikel als Produkt markieren
Nach dem Speichern erscheint im J2Store unterhalb der Produktinformation ein Bereich in dem Sie Preis, Grösse, Versandbedingungen, Fotos und alle relevaten Dinge eingeben können.

An der Stelle an der der „Kaufen“ Button im Artikeltext erscheinen soll, müssen Sie das folgende Makro einfügen

{j2store}2|cart{/j2store}

Hört sich kompliziert an, ist aber praktisch, denn ausser einem Warenkorb können Sie auch noch andere Parameter einbinden.

J2Store - Makros
J2Store – Makros
Unter J2Store -> Katalog -> Produkte finden sie das Produkt wieder.

Auf der Website erscheint es je nach Art der Einbindung in das Menü als Produkt mit dem „Kaufen“ Button. Das Joomla, das ich hier benutze ist ohne Beispieldaten und mit dem Standard Template.

J2Store - Produkt auf der Website
J2Store – Produkt auf der Website
Das war es!
Sie können den Stuhl jetzt kaufen 🙂
J2Store - Warenkorb
J2Store – Warenkorb

Je nach Konfiguration müssen Sie sich registrieren oder können als Gast einkaufen

J2Store - Bestellprozess
J2Store – Bestellprozess
Sie werden nach Rechnungs- und Lieferadresse, Zahlungs- und Versandbedingungen gefragt und können dann den Kauf abschliessen.

Käufer und Shopbetreiber erhalten eine E-Mail und im Administrationsbereich des J2Store erscheint der Einkauf.

J2Store - Administrationsbereich - Bestellungen
J2Store – Administrationsbereich – Bestellungen
Von hier aus können Sie den Kunden den Auftrag bestätigen.


tl:dr; J2Store ist ein einfach einzurichtender Online-Shop, der sich elegant in Joomla einfügt

Kategorien
Backup Content Management Systeme

Ein Backup in Drupal

Das Thema BACKUP und RESTORE ist wichtig, aber doch eher langweilig.
Nach dem Artikel Backups und Updates in Joomla war ich überrascht über positives Feedback. Gestern stand das Thema wieder zur Debatte, diesmal allerdings in Drupal.

In Drupal gibt es das Modul Backup and Migrate (Sichern und Migrieren) für diese Zwecke

Es sichert Datenbank und Dateien auf zahlreichen Medien wie FTP, Verzeichnis auf dem lokalen Server, Amazon S3 und mit Erweiterungsmodulen auch in Dropbox und weiteren Services.
Mit nodesquirrel.com existiert ein bis zu 5 GB kostenloser, verschlüsselter Backup Service, der von den Entwicklern von Backp and Migrate betrieben wird.

Installation

Installieren Sie das Backup and Migrate Modul über drush oder admin/modules/install.

Backup and Migrate Modul im Modulverzeichnis
Backup and Migrate Modul im Modulverzeichnis

Konfiguration

Unter /admin/config/system/backup_migrate können Sie Ihre Backups konfigurieren.

Backup and Migrate - Administration
Backup and Migrate – Administration
Zunächst erhalte ich einen Hinweis, dass ich noch kein privates Dateiverzeichnis angelegt habe. In Drupal gibt es ein öffentliches Verzeichnis, das sich normalerweise in /sites/default/files befindet und optional ein privates Dateiverzeichnis, das ausserhalb des Dokumentenverzeichnisses des Webservers angelegt werden sollte.

Klicken Sie auf den Link in der Meldung oder rufen Sie /admin/config/media/file-system auf um das private Dateiverzeichnis festzulegen.

Private und öffentliche Dateiverzeichnisse in Drupal
Private und öffentliche Dateiverzeichnisse in Drupal
Wechseln Sie zurück in die Backup and Migrate EInstellungen auf das Tab Einstellungen und dort in die Standardeinstellungen (/admin/config/system/backup_migrate/settings/profile/edit/default). Sie können hier alle Parameter festlegen, wie beispielsweise eine optionale Verschlüsselung durch das AES Modul und die Einstellungen, welche Dateiverzeichnisse und welche Tabellen Sie sichern wollen. In den erweiterten Optionen können Sie eine Checkbox ankreuzen, die Ihnen eine E-Mail sendet.
E-Mail Einstellungen
E-Mail Einstellungen
Das Modul geht davon aus, dass Sie die Datenbank, die Ihr Drupal verwendet, sichern wollen (Quellen – /admin/config/system/backup_migrate/settings/source).

Zu sichernde DB
Zu sichernde DB
Die Ziele sind bereits für den NodeSquirrel.com Service und für das private Serververzeichnis vordefiniert, weitere Ziele können hinzugefügt werden (/admin/config/system/backup_migrate/settings/destination/add).
Backup Ziele
Backup Ziele

Zeitgesteuertes Backup

Unter Zeitpläne können Sie einen neuen Zeitplan erstellen, beispielsweise täglich, abhängig vom eingebauten Drupal Cronjob in das private Verzeichnis (/admin/config/system/backup_migrate/schedule/add)

Zeitgesteuertes Backup
Zeitgesteuertes Backup
Um die Einstellungen zu testen, können Sie nun ein manuelles Backup erstellen (/admin/config/system/backup_migrate). Sie müssten auch eine E-Mail erhalten!
Manuelles Backup
Manuelles Backup
Im Tab gespeicherte Sicherungen (/admin/config/system/backup_migrate/backups) sehen Sie nun ein erstes Backup Paket, dass Sie auch downloaden und in ein anderes Drupal einspielen können. Das ist die Migrate Funktion!

Es erscheint auch der Hinweis, das ich bisher keine offsite Backups habe, d.h. kein Backup ausserhalb meines Servers.

Gespeicherte Sicherungen
Gespeicherte Sicherungen
Je nach Ihren Möglichkeiten können Sie nun FTP, Amazon S3 oder den NodeQuirrel Service einrichten.


tl;dr: Backup and Migrate ist eine sehr komfortable Möglichkeit automatisiert Backups von Ihrer Drupal Site zu erstellen, eine Site zu migrieren und aus einem Backup wiederherzustellen.