Blog | BUTLAIX_media

Website-Projekt “vegineo.de | Vegane Ernährung – der neue Weg”

Veröffentlicht am 23. Oktober 2017 | von Stephan Teuscher | Schreibe einen Kommentar

Es ist mir eine besondere Freude, Ihnen heute die vor kurzem gelaunchte Website vegineo.de vorstellen zu können; die ich gemeinsam mit deren Betreiberin Marijana Saravanja erstellt habe.

Bei VEGINEO dreht sich alles um die “neue vegane” Ernährung. Und das in Form von online bestellbaren, frisch zubereiteten Brotaufstrichen sowie veganem Catering (für Stuttgart).

Die Site wurde in WordPress*, auf Basis eines responsiven Bootstrap*-Standard-Themes entwickelt. Was eine flexible Darstellung für alle fest installierten sowie mobilen Endgeräte garantiert.

Für den Shopbereich kam das WordPress-Plugin WooCommerce* zum Einsatz.

Rezeptideen sowie die neuesten Informationen zum Thema gesunde Ernährung werden nicht nur im eigenen Blog sondern auch auf Facebook, Google+, Instagram und Pinterest zu finden sein.

Schauen Sie doch einfach mal bei vegineo.de vorbei und probieren Sie eine der veganen Köstlichkeiten.

*Weblinks: WordPress | Bootstrap | WooCommerce

Website-Projekt “Dagmar Bilke – Praxis für Aromatherapie”

Veröffentlicht am 8. September 2016 | von Stephan Teuscher | Schreibe einen Kommentar

Seit drei Monaten online – da wird es endlich mal Zeit die Webpräsenz von “Dagmar Bilke – Praxis für Aromatherapie” etwas näher vorzustellen 😉

dagmarbilke.de - start — dagmar bilke – Startseite

dagmarbilke.de - seminare — dagmar bilke – Seminare

Das Projekt wurde von mir im Auftrag und in Zusammenarbeit mit Büro Lux durchgeführt.

Die Website basiert auf dem Content-Management-System WordPress – was der Kundin eine autarke Verwaltung ihrer eigenen Inhalte ermöglicht.

Konzeption und das perfekt “entspannende” Corporate Design stammen von Büro Lux.

dagmarbilke.de - mobile — dagmar bilke – Mobile

Beim Layout wurde sehr viel Wert auf eine klare und einfache Strukturierung gelegt. Responsiv optimiert, ist die Seite zudem auf allen mobilen Endgeräten uneingeschränkt erreichbar.

Und hier geht es direkt zur Website → www.dagmarbilke.de

Artikelserie: Großes Magento-Tutorial [Part 10]

Veröffentlicht am 28. Januar 2016 | von Stephan Teuscher | Schreibe einen Kommentar

Der abschließende Teil dieses Tutorials beschreibt den Magento-Umzug vom lokalen auf den Webserver.

Nachdem wir zuletzt einen neuen Artikel in Magento eingepflegt haben, sollte vor dem Umzug noch der Cache aktualisiert werden. Gehen Sie hierfür auf [System] → [Cache-Verwaltung]; aktivieren Sie dort den Eintrag der mit UNGÜLTIG GEMACHT gekennzeichnet ist und klicken Sie dann oben rechts, neben Aktionen: Aktualisieren, auf [Absenden].
Melden Sie sich nun wieder aus dem Backend ab und öffnen Sie anschließend das phpMyAdmin-Tool um eine Kopie der kompletten Datenbank anzulegen. Über [Exportieren] gelangen Sie zu den im nächsten Screenshot abgebildeten Auswahlmöglichkeiten. Sowohl Bezeichnung als auch Speicherort für die hierbei erstellte SQL-Datei sind frei wählbar.
Öffnen Sie die gespeicherte SQL-Datei jetzt mit einem Texteditor und überprüfen Sie den Eintrag /*!40101 SET NAMES utf8 */;. Steht an dieser Stelle der Wert »utf8mb4«, so korrigieren Sie ihn bitte nach »utf8«. Da später auf dem Webserver der Datenbankname vom Provider vorgegeben wird, müssen Sie außerdem noch die Codezeile löschen bzw. auskommentieren ( /* ... */ ), welche ansonsten eine Datenbank mit dem bisher lokal verwendeten Namen erstellt.
Des Weiteren ist es innerhalb dieser Datei auch möglich, gleich die Base URL von http://localhost/[ordnername]/ nach http://www.[domainname].de/ zu ändern.
Speichern und schließen Sie nun die SQL-Datei, und loggen Sie sich in den Adminbereich Ihres Internetproviders ein. Legen Sie dort im MySQL-Menü eine neue leere Datenbank an und importieren Sie dann die SQL-Daten wie in der nachfolgenden Screenansicht dargestellt.
Im nächsten Schritt kopieren Sie mithilfe Ihres FTP-Programms die komplette Dateienstruktur der lokalen Installation auf den Webserver. Ist der Uploadvorgang abgeschlossen, löschen Sie auf dem entfernten Rechner im Verzeichnis var, sämtliche Inhalte aus den darin befindlichen Ordnern (cache, locks, etc.). – Jedoch NICHT die Ordner selbst!
Öffnen Sie anschließend per Rechtsklick → Ansehen/Bearbeiten (FileZilla) die Datei .htaccess und ändern Sie ggf. das Root-Verzeichnis von #RewriteBase / [lokaler Unterordner] / nach RewriteBase /.
Außerdem müssen die in Part 9 eingefügten Codezeilen php_value upload_max_filesize 20M und php_value post_max_size 20M wieder entfernt bzw. auskommentiert werden.
Wenn Sie nach dem Abspeichern der .htaccess-Datei wieder zu FileZilla wechseln, erscheint folgende Meldung – die Sie einfach mit [Ja] bestätigen:
Im letzten Schritt müssen noch die neuen Datenbankzugangsdaten in die Datei app/etc/local.xml eingetragen werden.

Und jetzt kommt der große Moment 😉 – Eventuelle Versionskonflikte oder Übertragungsfehler mal ausgenommen, müsste sich nach Aufruf der Internetadresse nun das gleiche Bild wie auf dem lokalen Rechner ergeben. Was bedeutet: unser Webshop ist online! Die Optimierung von Design und Funktionalität, sowie jede Menge Fleißarbeit beim Einpflegen des Artikelstamms, sind die Aufgaben, welche als Nächstes anstehen. – Ich werde darüber noch im Speziellen bloggen …

Übersicht der bisher in diesem Tutorial behandelten Themen:

Artikelserie: Großes Magento-Tutorial [Part 9]

Veröffentlicht am 11. Dezember 2015 | von Stephan Teuscher | Schreibe einen Kommentar

Wie schon im vorangegangenen Beitrag zum Thema Produktkatalog angekündigt, werde ich in diesem Teil des Tutorials das Einpflegen von Artikeln in die Magento-Datenbank erläutern. Und da es sich bei den Artikeln um downloadbare Fotos handelt, erfahren Sie auch gleich, wie Sie diese auf Ihrem System bereitstellen. ( Achten Sie darauf, innerhalb einer Menüansicht Ihre Einstellungen zu speichern, bevor Sie zur nächsten übergehen! )

Um Downloadartikel wie Fotografien anbieten zu können, müssen diese freilich zunächst auf den Server hochgeladen werden. Das Upload-Volumen für einzelne Dateien ist in der XAMPP-Umgebung jedoch auf maximal 2 MB begrenzt. Damit auch größere Volumen möglich sind, ist ein ergänzender Eintrag in der .htaccess-Datei notwendig. Diese befindet sich in der obersten Ordnerebene Ihrer Magento-Installation und kann mit jedem beliebigen Texteditor (bspw. Notepad++ o.ä.) bearbeitet werden. Tragen Sie also dort am untersten Ende, in zwei neuen Zeilen, den folgenden Code ein:
php_value upload_max_filesize 20M php_value post_max_size 20M
Gehen Sie nach dem Speichern der .htaccess-Datei wieder zum Backend von Magento und weiter zu [Katalog] → [Produkte verwalten] → [Produkt hinzufügen]. Wählen Sie in dem nun geöffneten Formular das zuvor erstellte Attributset Fotos ( Part 8 – Abs. 7 ) sowie den Produkttyp Herunterladbares Produkt.
Nach Bestätigung der Auswahl mit [Fortsetzen] gelangen Sie zur Dialogseite [Allgemein]. Bei Artikelposition verlangt Magento die Eingabe einer eindeutigen Artikelkennung (Die engl. Bezeichnung für dieses Feld lautet korrekterweise SKU – Stock Keeping Unit; zu Deutsch: lagerhaltiger Artikel). Die übrigen Felder sind selbsterklärend.
Mit einem Klick auf den Eintrag [Fotos] in der linken Menüleiste öffnet sich das Formular zur Auswahl bzw. Eingabe der individuellen Attributwerte ( siehe Part 8 – Abs. 3 ). Sowohl für die Beschreibung als auch die Kurzbeschreibung (Short Description) verwende ich wieder vorerst nur einen Fülltext (Lorem ipsum).
Im nächsten Menü [Prices] ist neben der Preisangabe vor allem die Auswahl der korrekten Steuerklasse von Bedeutung. (Wie Sie eine Steuerklasse anlegen, habe ich in Teil 7 des Tutorials beschrieben.)
Unter [Bilder] haben Sie die Möglichkeit, ein oder mehrere Produktbild(er) hochzuladen. Das heißt, hierbei handelt es sich noch nicht – wie man im Zusammenhang mit diesem Tutorial vielleicht annehmen könnte – um das später downloadbare Foto, sondern um die für generell jeden handelbaren Artikel auch sonst übliche Produktansicht. An dieser Stelle ist es also vollkommen ausreichend, ein kleineres Format der eigentlichen Bilddatei auszuwählen. Der Upload-Vorgang an sich ist soweit selbsterklärend. Die Checkbox Ausschließen hat lediglich bei der Verwendung mehrere Bilder eine Bedeutung. Mit ihrer Aktivierung kann die Anzeige auf der Artikeldetailseite unterbunden werden.
Da es sich bei Downloadartikeln um digitale Inhalte in unbegrenzter Menge handelt, sollte auf der Dialogseite [Inventar] (je nach Magento-Version auch [Lagerverwaltung] genannt) das Auswahlfeld Lagerbestand verwalten auf Nein gestellt sein. Dafür ist es notwendig, vorher den Haken aus der darunterliegenden Checkbox zu entfernen.
Als Nächstes wählen Sie in [Kategorien] die Kategorie Lizenzfreie Fotos aus.
In der in diesem Tutorial verwendeten Magento-Version gibt es bei den Einstellungen zu [Herunterladbare Informationen] leider ein Problem: diese lassen sich nur über die englische Sprachvariante vornehmen. Sichern Sie also zunächst Ihre bisher gemachten Eingaben mit [Speichern und Bearbeitung fortsetzen] bevor Sie anschließend im Footer das Interface Locale auf English (United States) / Englisch (Vereinigte Staaten) ändern.
Klicken Sie nun innerhalb des Drop-Down-Menüs [Samples] auf [Add New Row] um ein Musterbild (Ich verwende hierfür eine Kopie in geringerer Auflösung; versehen mit einem großflächigen Wasserzeichen.) auf Ihren Server zu laden. – Mit dem kostenlosen Download bieten Sie Ihren Kunden vor Kauf die Möglichkeit für Layout-Tests. Der Titel Musterbild zu Layout-Zwecken : stammt übrigens aus unserer Eingabe im 4. Teil des Tutorials “Systemkonfiguration Produktkatalog”.
Vergeben Sie jetzt einen Titel und wählen Sie über die Schaltfläche […] rechts neben dem Feld File: die hochzuladende Datei aus. Mit [Upload Files] starten Sie den Vorgang.
Das Eingabefeld Title im Formular Links meint hier die Überschrift für den entsprechenden Bereich in der Shop-Ansicht. Die Vorgabe stammt ebenfalls aus der unter Punkt 10 genannten “Systemkonfiguration Produktkatalog”. Links can be purchased separately betrifft lediglich Downloads, die aus mehreren Teilen bestehen, und kann daher für unseren Zweck vernachlässigt werden. Ansonsten ist die weitere Vorgehensweise ähnlich wie bei der Musterdatei.
- Mit Title wird an dieser Stelle das Auswahlfeld im Frontend, unterhalb des Eintrags Wählbare Versandoptionen benannt. Ich wähle daher den Begriff Download.
- Über Price gibt Magento Ihnen die Möglichkeit, einen zusätzlichen Preis für die herunterladbare Datei zu erheben. Dieser Preis wird zum Originalpreis des Reiters [Prices] (Punkt 4) automatisch hinzuaddiert. Tragen Sie zumindest den Wert 0 ein, da es sich bei Price um ein Pflichtfeld handelt und das System sonst eine Fehlermeldung ausgeben würde.
- Der Wert Use Config bei Shareable ist standardmäßig auf Nein eingestellt. Das heißt die Downloaddatei kann erst nach dem Login des Kunden heruntergeladen werden, und zwar ausschließlich von dem Kunden, der den Artikel auch gekauft hat.

Und so sieht das Ganze dann schlussendlich in der Shop-Ansicht aus:

– Kategorieseite – – Detailseite –

Es ist vollbracht! 😀 Die Basis-Entwicklung des Webshops steht und bevor es nun ans Feintuning geht, zeige ich Ihnen noch im nächsten und abschließenden Teil, wie Sie mit Ihrer lokalen Installation auf den Webserver umziehen.

Hier gehts zum nächsten Teil → Artikelserie: Großes Magento-Tutorial [Part 10]

Übersicht der bisher in diesem Tutorial behandelten Themen:

Artikelserie: Großes Magento-Tutorial [Part 8]

Veröffentlicht am 11. November 2015 | von Stephan Teuscher | Schreibe einen Kommentar

Dieser Abschnitt des Tutorials beschäftigt sich in zwei Teilbeiträgen mit der Administration des Produktkatalogs. Im vorliegenden Beitrag beschreibe ich Ihnen, wie Sie für das Hinzufügen neuer Produkte die vorab erforderlichen Kategorien, produktspezifischen Attribute (Eigenschaften) sowie Attributsets anlegen können. – Ehe ich dann im zweiten Artikel (Teil 9 des Tutorials) das Anlegen neuer Produkte (hier: Fotos) besprechen werde. ( Achten Sie darauf, innerhalb einer Menüansicht Ihre Einstellungen zu speichern, bevor Sie zur nächsten übergehen! )

Für das Anlegen eines neuen Artikels (Produkt) ist es erforderlich, zunächst die Kategorien festzulegen, in welche dieser eingeordnet werden soll. Dafür gehen Sie in das Menü [Katalog] → [Kategorien verwalten]. In der nun geöffneten Kategorieansicht sehen Sie auf der linken Seite den Ordner Default Category (0). Dieser wird standardmäßig bei jeder Magento-Installation angelegt und sollte weder verändert noch gelöscht werden, da er als eine Hauptkategorie die Basis für die komplette Kategorienavigation bildet! Klicken Sie jetzt auf den Ordner Default Category (0) um diesen auszuwählen. In der Bildschirmausgabe ergibt sich daraufhin folgendes Bild:
Mit Betätigung des Buttons [Unterkategorie hinzufügen] öffnet sich das Formular Neue Unterkategorie. Im vorausgewählten Reiter haben Sie jetzt die Möglichkeit, wie der Name schon sagt, die allgemeinen Informationen für Ihre Kategorie einzutragen. Dazu gehört freilich der Name – hier: »Lizenzfreie Fotos«; Is Active mit der Einstellung »Ja« – was bedeutet, die Kategorie ist in der Shop-Ansicht auswählbar; ein URL Schlüssel – Magento erstellt zwar automatisch eine URL-Adresse aus dem Kategorienamen, Umlaute werden dabei jedoch nicht korrekt dargestellt; ein Thumbnail Image (kleines Vorschaubild) – habe ich noch keins ausgewählt; und für die Beschreibung verwende ich vorerst einen reinen Fülltext (Lorem ipsum). Auf die Verwendung des WYSIWYG Editor sowie die weiteren Eingabemöglichkeiten auf dieser Seite, komme ich noch in einem späteren Teil des Tutorials zu sprechen. – Somit ergibt sich nach dem abschließenden Klick auf [Kategorie speichern], vorerst folgende Screenansicht:
Als Nächstes geht es um die Definition spezifischer Produkteigenschaften, sprich Attribute. »Spezifisch« deswegen, weil Basisattribute, wie bspw. die Artikelnummer oder der Preis, bereits in den Vorlage-Attributsets (s.w.u.) enthalten sind. Öffnen Sie also hierfür das Menü [Katalog] → [Attribute] → [Attribute verwalten] und klicken Sie dort auf den Button Neues Attribut hinzufügen.
- Die Bedeutung des ersten Feldes Attributcode finden Sie an gleicher Stelle beschrieben.
- Von der im darunterliegenden Auswahlfeld missglückten Übersetzung ins Deutsche dürfen Sie sich nicht irritieren lassen 😉 Korrekt müsste es heißen Geltungsbereich statt Umfang und weiter: »Geben Sie den Geltungsbereich für den Attributwert an«. Genauso irreführend ist die Benennung der dort von mir gewählten Option Weltweit – womit selbstverständlich Global gemeint ist. Diese Einstellung sorgt dafür, dass der eingetragene Attributcode sowohl auf allen Magento-Webseiten als auch in sämtlichen darin enthaltenen Store-Ansichten zur Verfügung steht.
- Das Feld Katalog Eingabetyp für den Shopbesitzer gibt an, in welchem Format (hier: DropDown) der Shop-Besitzer im Administrationsbereich ein Attribut zu einem Artikel eingeben kann. Bitte beachten Sie: Wurde das Attribut einmal angelegt, kann diese Eigenschaft nicht mehr geändert werden!
- Jetzt noch die Pflichtangabe auf Ja gesetzt und ansonsten können die übrigen Felder im Formularabschnitt Attributeigenschaften in ihren Voreinstellungen belassen werden.
Für den Bereich Frontend-Eigenschaften gehe ich hier nur auf die in ihrer Bedeutung möglicherweise unklaren Felder ein. Im Übrigen können Sie auch hier wieder meine Einstellungen dem nachfolgenden Screenshot zu entnehmen.
- Vergleichbar am Frontend: Im Frontend hat der Kunde die Möglichkeit aus mehreren Artikeln eine Vergleichsliste zu erstellen. Mit dieser Einstellung bestimmen Sie, ob der Attributwert in dieser Liste mit angezeigt wird oder nicht.
- Filternavigation auf Suchergebnisseiten verwenden: Die hier von mir gewählte Option Filterbar (keine Ergebnisse) hat zur Folge, dass in den Suchergebnissen auch dann das Attribut mit aufgelistet wird, wenn die Anfrage dazu keinen Wert (0) liefern konnte.
- Navigation in Suchergebnissen nutzen: Haben Sie Ja ausgewählt, wird auf der Ergebnisseite einer Suchanfrage, mit Angabe der Häufigkeit seines Vorkommens, der jeweilige Attributwert als Link dargestellt.
- HTML-Tags am Frontend zulassen: Soll beim Anlegen eines neuen Artikels der Attributwert in einem Textfeld bzw. Textbereich (auswählbar unter Katalog Eingabetyp für den Shopbesitzer) unter Verwendung von HTML-Code definiert werden, so muss für dessen Ausführung im Frontend, diese Option aktiviert sein.
- Im Produkt-Listing verwendet und Für Sortierung im Produkt-Listing verwendet: Mit »Produkt-Listing« ist die Ansicht innerhalb einer Kategorie gemeint.
Unter [Bezeichnungen/Optionen verwalten] im linken Auswahlmenü, können Sie im nächsten Schritt dem Attribut nun eine Bezeichnung für das Frontend sowie die entsprechenden Werte zuweisen. (siehe Screenshot)
Abschließend gelangen Sie mit einem Klick auf [Eigenschaft speichern] wieder zur tabellarischen Übersicht. Wie Sie sehen, hat Magento hier in der Kopfzeile eine Notiz eingefügt, mit dem Hinwies, dass ein oder mehrerer Indexe nicht mehr aktuell sind. Folgen Sie – nach dem Anlegen aller benötigten Attribute – dem Link, um dies zu beheben. Die Vorgehensweise ist selbsterklärend.
Sind alle produktspezifischen Eigenschaften eingerichtet, müssen diese mit den Standard-Attributen in einem eigenen Set zusammengefügt werden. Gehen Sie hierfür auf [Katalog] → [Attribute] → [Attributsets verwalten] und klicken Sie dort auf [Neuen Satz hinzufügen].
Vergeben Sie in der neu geöffneten Maske einen Namen und bestätigen Sie mit [Merkmale speichern]. Daraufhin werden Sie zur Standardansicht eines neuen Attributsets weitergeleitet.
In der rechten Spalte der Set-Ansicht befinden sich u.a. die speziell für den Artikel Foto angelegten Attribute. Doch bevor ich diese einer Gruppe zufüge, werde ich erst einmal in der mittleren Spalte, per Drag & Drop, eine kleine Umstrukturierung innerhalb des Ordners General vornehmen. – Damit erreiche ich, dass die Reihenfolge der meiner vorgefertigten Artikelliste entspricht.
Anschließend generiere ich durch einen Klick auf den Button [Neu hinzufügen] eine neue Gruppe und benenne diese mit Fotos. Hierhinein verschiebe ich die Foto-Attribute aus der rechten Spalte sowie die Attribute description und short_description aus der Gruppe General. Mit [Merkmale speichern] gelangen Sie wieder zur Übersichtsseite Attributsets verwalten, auf der nun ein neuer Listeneintrag für das eben erstellte Attributset zu sehen ist.

Nachdem wir jetzt das Set-up für den Produktkatalog eingerichtet haben, zeige ich Ihnen im folgenden 9. Teil des Tutorials, wie Sie Ihre Artikel dort einpflegen können.

Hier gehts zum nächsten Teil → Artikelserie: Großes Magento-Tutorial [Part 9]

Übersicht der bisher in diesem Tutorial behandelten Themen: