Virtuemart: Sprachabhängige Verfügbarkeitsanzeige, fallabhängiges Stylen und weitere Verfügbarkeitsanzeigen
- Details
Zielstellung / Aufgabe
Lt. einer Aufgabenstellung eines Kunden sollten für Virtuemart in Bezug auf die Verfügbarkeitsanzeige von Produkte drei Aufgabenstellungen erreicht werden:
- Die Anzeige der Verfügbarkeiten in VM erfolgt standardmäßig per vordefinierte Grafiken. Diese liegen alle in einem Verzeichnis und daraus wird im Backend-Produkt-Editor eine Pulldown-Auswahlliste erzeugt. Nun kann man eine dieser Grafiken auswählen und diese wird mit ihrem Dateinamen in das Verfügbarkeitsfeld eingetragen und gespeichert. Alternativ kann man auch in das Verfügbarkeitsfeld einen beliebigen Text schreiben. Nachteil, egal ob Text oder Grafik, es findet keine Übersetzung in die jeweilige Sprache statt. Die Grafiken sind von VM alle in engl. erstellt. 1. Aufgabenstellung war, dass die Anzeige sprachkonform erfolgt.
- Neben den vorhandenen Verfügbarkeitsangaben sollten weitere mgl. sein, so z.B. eine, die die Aussage zulässt, dass ein Produkt vom Hersteller nicht mehr länger angeboten/produziert wird.
- Abhängig vom Inhalt der Verfügbarkeitsangabe soll ein mehr oder weniger auffälliger Style zur Anzeige genutzt werden. Um z.B. sicher zu verhindern, dass ein Kunde ein Produkt bestellt, welches aktuell oder gar nicht mehr verfügbar ist, soll die Nicht-Verfügbarkeit mit weißem Text auf einem roten Block angezeigt werden während andere Verfügbarkeiten anders z.B. grün ausgezeichnet werden.
Weiterlesen: Virtuemart: Sprachabhängige Verfügbarkeitsanzeige, fallabhängiges Stylen und weitere...
Fonts in Gantry 5 einbinden, die nicht vom google-Server geladen werden
- Details
Zielstellung:
Über den Template-Manager von Gantry 5 ist es sehr einfach Fonts in das Template einzubinden, ganz besonders dann, wenn man einfach nur einen Font vom Google-Font-Server einbinden möchte. Hierfür wird von Gantry 5 im Template-Manager ein Font-Selector-Tool angeboten Base-Outline > Register Styles > Gruppe Font Families. Das wäre ein Methode.
Eine weitere Methode, aber ein klein wenig komplizierter, wäre es, wenn man z.B. für Kundenprojekte eine CI-Schrift einbinden soll, die nicht aus dem Google-Fundus kommt. Zunächst sind hier natürlich die Urheber- und Lizenzrechte für die Schrift zu beachten! Nicht jede Schrift darf einfach über eine Webseite eingebunden werden. Das wäre eine unzulässig Verbreitung, denn jede so eingebundene Schrift ist dann für jedermann downloadbar. Es gibt aber neben den Google-Fonts weitere Seiten die auch kostenlose Schriften anbieten - z.B. fontfabric.com oder fontsquirrel.com. Hier allerdings werden diese nicht als Dienst bereitgestellt, sondern man muss diese als ZIP-Archiv herunterladen und selbst hosten und entsprechend als Font-Family einbinden. Diese Methode soll nun beschrieben werden.
Weiterlesen: Fonts in Gantry 5 einbinden, die nicht vom google-Server geladen werden
Eigene Gantry 5 Style-Formulare anlegen
- Details
In Gantry 5 Templates kann man unter dem Menü-Button Styles grundsätzliche Einstellungen und Parameter für seine Templates vornehmen. Dort werden z.B. die CI-Farben hinterlegt, die Hauptschriften, Sectionsfarben oder Hintergrundbilder etc.
Dieser Artikel beschreibt, wie Sie das Set an Konfigurationsparametern in Ihrem Gantry-5-Template projektabhängig verändern oder erweitern können am zwei Beispielen:
- Sie wollen weitere CI-Farben hinzufügen
- Sie wollen für eine selbst erstellte Section Hauptfarben und Hintergrundbilder definieren.
Beispiel A: Hinzufügen und bereitstellen weiterer CI-Farben
Entscheidend für alle Erweiterungen und Änderungen im Set der Styles-Konfigurationsformulare ist das Verzeichnis templates/g5_helium/blueprints/styles. Hier gilt die Regel, jede dort abgelegt YAML-Datei erzeugt eine neue Formulargruppe. Die accent.yaml ist z.B. für die Konfigurationsparameter der Akzent-Farben veranwortlich. Diese hat typischerweise folgenden Aufbau:
Verwendung von CLi in GRAV-Projekten
- Details
Vorbereitungen
Zunächst muss das Grav-Download-Paket in einen Webspace-Pfad kopiert und entpackt werden.
In Folge dessen entsteht die Verzeichnisstruktur von Gravity und dort unter anderem das Verzeichnis /bin/ in welchem sich die 4 Dateien gpm, grav, plugin und composer.phar befinden. In das Verzeichnis wechseln und diesen Dateien Ausführungsrechte (750) vergeben. Dann wieder zurück in das Webspace-Root der Gravity-Installation. (Sollte diese Rechte nicht gesetzt werden kann man diese CLi-Befehle auch ausführen, in dem man diese über php startet ($ php befehl optionen).
Zu berücksichtigen ist noch wem die Grav-Installtion gehört, also z.B. dem ftp-User oder wp-User. Mit diesem sollte man eingeloggt sein.
Nun kann's los gehen.
Gantry 5 Layouts anpassen
- Details
Wie passt man für Gantry 5 das Layout nach eigenen Bedürfnissen an - Erstellung eigener Outlines
Eigene Outline anlegen.
Outlines sind die Vorlagen für Gantry-Layouts. Von diesen können Layouts abgeleitet werden in dem ein Layout erstellt wird und dann über den load-Button dieses Outline auf das neue Layout angewendet wird. Das Layout erhält dann die vollst. Struktur wie im Outline angelegt, allerdings kann man für späteteres Überschreiben eines Layouts mit einem Outline festlegen, wie konsequent das Überschreiben erfolgen soll. So können z.B. bereits vorgenommene Modifikationen im Layout erhalten bleiben und trotzdem neue oder geänderte Strukturen aus dem Outline geladen werden.
Um nun ein eigenes Outline anzulegen, geht man in den Ordner templates/g5_helium/layouts. Die hier vorhandenen YAML-Scripte beschreiben die vorhandenen Outlines. Entweder kopiert man sich eine als Ausgangsbasis geeignete Vorlage mit eigenem Namen oder man erstellt von grundauf per Editor seine eigenen Vorlage.
Häufig findet man als Vorlagen die default.yaml, welche die Standardvorlage (Base-Outline) ist, welche meist auf alle Projektseiten angewendet wurde. Dann gibt es häufig eine home_-_particle.yaml, welche beispielhaft eine Layout mit Particeln für die HomePage liefert. Das trifft so meist bei fertigen RocketTheme-Templates für Joomla, Wordpress oder Grav zu. Weitere Outlines sind für die Error- und Offline-Page bestimmt.
Erstellung eines Kontaktformulars im CMS GRAV (gravity)
- Details
Voraussetzungen für das Erstellen einen Kontaktformulars in GRAV
Informationen zum Erstellen findet man auch im GRAV-Tutorial.
Das Form-Plugin von gravity muss installiert und aktiviert sein.
Das Mail-Plugin von gravity muss installiert und konfiguriert sein. Hier müssen die E-Mail-Adressen eingetragen werden, an die das Formular seine Daten schickt und wer als Absender übergeben werden soll. Bisher war es ausreichend den PHP-Mailer zu verwenden.
Das Formular wurde als Inhalt auf der Home-Page platziert. Dazu muss zuerst für die Site der Template-Type Form ausgewählt werden. Infolge dessen wird die default.md im Verzeichnis user/pages/01.home ersetzt durch eine Datei form.md.
Register Options:
- Folder Numeric Prefix: enabled (das setzt eine Nummer vor den Ordner und ermöglicht zum einen die Sortierung zum anderen wird diese Seite dann sofort auch als Menüeintrag im Hauptmenü erscheinen.)
- Folder Name: kontaktformular
- Parent: -Root-
- Display Template: Form
Danach muss im Feld Frontmatter im Expert-Modus für die Page nachfolgender Inhalt eingesetzt (s.u.). Über das Template-Layout wird der Page Content eingeblendet im Mainbar.
Weiterlesen: Erstellung eines Kontaktformulars im CMS GRAV (gravity)
Update von MySQL z.B. unter XAMPP und auftretende Probleme und Fehlerquellen
- Details
MySQL Updaten z.B. in XAMPP/LAMP/WAMP Installationen
Von Zeit zu Zeit kommen Sie nicht umhin auch z.B. Ihre lokale Entwicklungsumgebung zu aktualisieren. Viele Websever nutzen PHP und hier findet laufend eine Ablösung von Versionen statt. Auf Webservern ist das meist durch den Hoster erledigt und dann kann ein Update mit wenigen Klicks aktiviert werden. Unter XAMPP / LAMP / WAMP etc. gestaltet sich das komplizierter, nicht nur weil man sich dort selbst drum kümmern muss, sondern weil es diese Updates meist nur als "Gesamtpaket" gibt, bei dem nicht nur PHP sondern auch MySQL aktualisiert wird. Das von Vorteil, weil auch bei MySQL hat sich sehr viel getan - allein schon der Umstieg auf MariaDB ist lohnenswert.
Nun, dass ist aber nicht der eigentliche Inhalt dieses Beitrags, sondern auf ein Problem einzugehen, welches beim Update von MySQL auftritt. MySQL zeigt sich hier sehr störrisch. Man möchte behaupten, dass eine Updatefähigkeit für MySQL nie vorgesehen war, so umständlich und widerspenstig verhält es sich.
Dieser Beitrag richtet sich an Lösungssuchende, die genau daran scheitern, eine bestehende langjährig gewachsene Entwicklungsumgebung erfolgreich und verlustfrei updaten zu wollen oder zu müssen. Ich selbst stand unter dem Zwang nach dem ich 4 Jahre nach Erstinstallation meiner XAMPP-Entwicklungsumgebung das neue CMS GRAVity ausprobieren wollte und feststellen musste, dass dieses nur unter PHP 5.6 läuft, was in meiner Umgebung nicht gegeben war.
Weiterlesen: Update von MySQL z.B. unter XAMPP und auftretende Probleme und Fehlerquellen
Wo speichert Gantry 5 seine Daten
- Details
Das Gantry5 YAML-Dateisystem - Datenspeicherung
Wer mit Gantry 5 arbeitet wird früher oder später auf die Frage stoßen, wo das Gantry5-Template seine Konfiguraitonsdaten speichert. Hierbei geht es zum einen um die Daten die beim Konfigurieren des Layouts, der Style und auch der Particle-Inhalte abgelegt werden. In der Datenbank speichert Gantry5 so gut wie gar nichts, maximal die Einstellungen die Joomla als Schnittstelle benötigt, um das Template ins Framework einzubinden. Für alle sonstigen Einstellungen und Daten arbeitet Gantry5 konsequent mit seinem YAML-Dateisystem.
Ein Totalcrash nach SVG-Logo-Speicherung - Grund für notwendige manuelle Dateimanipulation
Ich selbst musste mich mit der Analyse beschäftigen, als ich im Logo-Template des "Base Outline"-Layouts (=Default) mal eine relatives großes SVG als Logo abgelegt hatte (ca. 23KB). Infolge dessen war das komplette Projekt vollst. unerreichbar - sowohl im Backend als auch im Frontend. Es gab keine Möglichkeit mehr das Projekt wieder zum Laufen zu bringen, außer mir die Datei zu suchen, die für die Speicherung dieser Logo-Daten verantwortlich ist und diese manuell zu korrigieren.
Gantry-Klassen richtig verwenden - kleine Tipps
- Details
Inhaltsbreiten volle Breite oder mit Seitenrändern zentriert
Mitunter möchte man in einer Gantry-Section das Layout welches ansich durch das Template vorgegeben sein könnte in Ausnahmen für einen bestimmten Inhalt ändern. I.d.R. werden die Inhalte in der Browsermitte mit Rändern links und rechts dargestellt. Wenn man aber z.B. eine Slideshow auf volle Breite ausdehnen möchte oder aber eine Hintergrundbild unter einem Inhalt, wobei der Inhalt dann wieder mit Seitenrändern angezeigt werden soll, dann hilft dafür ganz schnell die Anwendung folgender Gantry-Style-Klassen:
- g-flushed
Damit eine Section über die volle Browserbreite angezeigt wird, muss der Section die Klasse g-flushed zugewiesen werden. Z.B. angewendet bei den Produktbildern in der Slideshow-Section. - section-paddings
Damit die Inhalte dann wieder mit Rand links und rechts angezeigt werden, muss der umschließende Container die Klasse section-paddings erhalten.
Überschriften Tags in Joomla 3 (H1, H2, H3 ...)
- Details
Überschriften-Tags - wie richtig konfigurieren
Für die Suchmaschinenoptimierung ist es erforderlich Überschriften im Inhalt der Website keywordrelevant korrekt zuweisen. D.h. dass auch der Grad der Überschrift sinnvoll über die HTML-Tags H1, H2, H3 usw. zu setzen ist. Hier gibt es SEO-technisch diverse Erwartungen und Regeln die man einhalten sollte.
- jede Seite sollte wenigstens ein H1-Überschrift enthalten. Diese schließt nicht nur die wichtigesten Keywords ein sonder ist auch der zutreffende Titel und Inhaltsgegenstand der Website.
- Unterüberschriften werden mit mit H2, H3, etc. je nach Inhaltsstruktur ausgezeichnet.
Joomla biete einige Möglichkeiten diese Überschriftentags anzuwenden und dieses Zusammenspiel zwischen Menü, Beiträge, Kategorien, Module dazu muss verstanden werden, damit man zum gewünschten Ziel kommt.
E-Mail Cloaking in Gantry-5 Template Particles
- Details
Probleme des Gantry 5 mit den Joomla-Content-Tools
Obwohl das Gantry 5 ein ganz hervorragendes Template-Framework ist, hat es doch (noch) einige kleine Nachteile, die einen z.T. konzeptionelle Schwachstelle offenbaren - nämlich, dass es eine Template mit eigener Engine ist, die viele Dinge an Joomla vorbei erledigt. Eines der größten Probleme bereitet, dass Inhalte nicht mehr in der Datenbank abgelegt werden und auch nicht mehr durch die Joomla-Strukturen verwaltet werden, sondern leider vom Template in Dateien abgelegt werden. Zwei große Nachteil die sich hierbei für mich bereits offenbarten:
- Die Joomla-Suchfunktionen/Search-Plugins greifen für diese Inhalte nicht. Wer also viele Inhalt darüber verwaltet, sollte sich dessen bewußt sein.
- Fast alle bereitgestellten Particle unterstützen nicht die Joomla-Content-Plugins. Das macht sich z.B. bemerkbar wenn Sie Inhalte mit E-Mail-Adressen über Particles veröffentlichen. Diese E-Mail-Adressen werden nicht durch das E-Mail-Cloaking von Joomla erfasst, also nicht vor Spammer-Spidern geschützt. Leider macht dies nicht einmal das bekannte Contact-Particle - was wirklich eine unhaltbarer Zustand ist.
- Auch gibt es Problem mit der Übersetzung von Particle-Inhalten z.B. über die Erweiterung FaLang. FaLang ist nicht darauf ausgelegt sich die zu übersetzenden Inhalte aus den Particle-Dateien zu holen.
Den o.g. Sachverhalten sollte man sich bewusst sein, wenn man Gantry-5-Templates einsetzt. Zumindest zu dem Problem mit dem fehlenden E-Mail-Cloaking im speziellen und der Anwendung von Content-Plugins auf Particle-Inhalte im allgemeinen, möchte ich hier eine praktikable Lösung anbieten, die micht viel Schweiß bis zur erfolgreichen Erkenntnis gegkostet hat.
PHP-Server-Monitor (Website-Verfügbarkeitsüberwachung)
- Details
Problembeschreibung
Wenn der Webspace nicht erreichbar ist, bekommt man das als Betreiber meist selbst gar nicht mit. Häufig wird man erst durch Seitenbesucher darauf aufmerksam gemacht. Hierzu sollte es eine Tool geben, welches die Verfügbarkeit des Webspaces permanente überwacht und bei Unerreichbarkeit sofort per e-Mail und SMS informiert. Außerdem wäre bei diesen Testabrufen auch eine Protokollierung der Ausliefergeschwindigkeiten für eine statistische Anzeige sinnvoll. Die Prüfung muss dabei von einem entfernten Server aus erfolgen.
Lösung mittels PHP-Server-Monitor (PSM)
Dieses OpenSource-Tool erfüllt alle o.g. Anforderungen. Es ist in deutsch verfügbar, kostenlos, basiert auf PHP und TWIG.
Um zu erreichen, dass der Webserver von Marks von entfernt geprüft wird, erfolgte die Installation auf dem Server von mediaDESIGN St. Kraft. Umgekehrt wird die gleiche Installation auf dem Marks-Server unter einem eigenen Webspace mit Subdomain monitor.marks-dev.de vorgenommen. Damit diese notwendige "Überkreuzung" für den Benutzer nicht störend und verwirrend wirkt (denn man muss monitor.media-web.de aufrufen um die Konfig./Protokollierung/Statustests für den Marks-Server nutzen zu können und umgekehrt monitor.marks-dev.de um die für mediaDESIGN-Webspaces anzuzeigen), wurde in die webspace/index.html eine iFrame-HTML-Seite abgelegt, welche dann dort in das iFrame das PSM aus einem Unterverzeichnis (/marks/ auf mediaDESIGN-Server und /mdsk/ auf dem Marks-Server) einbettet.
Weiterlesen: PHP-Server-Monitor (Website-Verfügbarkeitsüberwachung)
Logo im Seitenkopfbereich verkleinern beim Scrollen nach unten
- Details
Situation und Zielstellung Für die Logo-Skalierung beim Scrollen
Den Website-Effekt hat sicher jeder schon mal beobachtet: Sie haben auf einer Internetseite ganz oben das Logo eines Unternehmens. Es wird mit Seitenaufruf relativ groß und somit auffällig angezeigt. Wenn man dann jedoch den Seiteninhalt nach oben scollt, sich also auf dem Seiteninhalt nach unten bewegt, dann wird das Logo soft animiert verkleinert, so dass mehr Platz für den Inhalt zur Verfügung steht.
Wie man diesen Effekt auf der Website erreichen kann, soll das nachfolgende kleine Tutorial zeigen.
Umsetzung mit JavaScript, Style-Klassen und CSS-Transition-Effekt
In unserem Beispiel müssen wir dazu zwei Style-Eigenschaften für das Logo verändern, zum einen die Skalierung (wechselnd zwischen 50% und 100% Dimensionierung) und zum anderen die Positionen, die wir beim Skalieren zusätzlich noch etwas nach oben verschieben wollen. Natürlich muss das Logo selbst, welches als Background-Eigenschaft eines DIV-Containers eingebunden ist, über Style-Eigenschaften auf der Seite formatiert sein. Speziell sollte es per position:absolute; platziert worden sein. Alles andere setzte ich als Grundlagenwissen voraus.
Weiterlesen: Logo im Seitenkopfbereich verkleinern beim Scrollen nach unten
- Gantry Template - Grid-Blöcke in der Höhe synchronisieren (equal height)
- c54e4e5635912ef26f54b51cd9a13fa6-gdprlock keine Seite erreichbar - Login und Shop-Bezahlung nicht möglich
- FTP-Protokoll oder wget nutzen für Datentransfer von Webserver zu Webserver
- ProjectFork Änderung der Benachrichtigungsmails bei Dokumentenuplaod
- Modifikation der Eigenschaften eines Gantry 5 Particles per Overriding
- Eigene Verfügbarkeitsgrafiken in VirtueMart 3 als Overrides sicher gegen Updates ablegen
- VirtueMart 3.x Versandkosten-Ausgabe in den Produktdetailseiten unterdrücken
- VirtueMart 3 - Währungsumrechnung Hintergrundinfos
- Ein Joomla-Template für immer
- Österreichisches Sprachpaket (de-AT) für Joomla 3.x erstellen
- Seitenbewertung, Pagerank
- Fixed Tabellenkopf
- Projekt migrieren oder besser ein neues aufsetzen
- MySQL: Vergleich von Datensätzen die es in eine Resultat gibt aber nicht im anderen
- Limit Standard und Schrittweite für VM 1.1.x ändern
- Zielseite nach Joomla-Login ändern (redirect)
- Migration von Joomla 2.5.x zu 3.x
- Prüfung der USt-IdNr. (EU-VAT-ID) in Joomla/VirtueMart per VIES-Server (SOAP)
- Kleine Sammlung von nützlichen MySQL-Befehlen
- VirtueMart-Menü oder VirtueMart-Menüelement im Joomla-Backendmenü nicht vorhanden
Seite 3 von 14