Schlagwort: Entwickler

Entwickler-Info 8/2018

Unter dieser Kategorie Entwickler informieren wir zu Neuerungen und Änderungen am „Werkzeugkasten“ mit denen ein Shop im WebSite eingebaut wird. Diese Neuerungen können, müssen aber nicht in Eure betreuten Websites einfließen. Gelegentlich erwähnen wir auch Fixes für „prominente“ Bugs.

Schnellstart

Das Script zum Einbinden der Shop-Funktionalität trägt den System-Namen im Aufruf. Dadurch ist es, zumindest ohne serverseitige Programiersprache, etwas umständlich, mal eben zwischen verschiedenen Systemen zu wechseln (z.B. dem Live und dem lokalen Entiwcklungssystem), es müssen immer alle Webseiten angefasst werden. Im Github ist jetzt ein Beispiel zu finden, das nur noch eine Änderung an einer Datei benötigt (shop.js).

to proxy or not to proxy

Neue Techniken machen es möglich, auch ohne eine Proxy-Installation der Scripte davonzukommen. Generell gibt es einige Dinge abzuwägen:

  • Sollen externe Scripte sichtbar sein ?  Das ist eine Geschmacksfrage, aber auch DSGVO Erwägungen können eine Rolle spielen.
  • Ist der eigene Server (der proxy) schnell? Insbesondere bei shared-Hosting Angeboten wird es gerade zu allgemeinen Hochlastzeiten knapp.
  • Unterstützt der Proxy HTTP/2 (oder QUIC)? Durch das Zusammenfassen viele Anfragen können am Ende mehr parallele Abfrage auch am Shopserver erfolgen.

Selber Aktualisieren

Bisher musstet ihr zum Aktualisieren eines Staging-Systems immer bei uns nachfragen. Seit einiger Zeit kann das auch direkt im Admin-Bereich ausgelöst werden – sowohl im Quellsystem als auch aus dem Staging-System heraus. Die Einrichtung eines Staging-System muss weiterhin durch uns erfolgen,  meist ist da etwas Einrichtungsarbeit (u.a. Domain-Einrichtungen) notwendig.

Scripte automatisch einbinden

Dieses Feature gab es für den Amperhof-Shop schon immer – u.a. zur Einbindung von Tracking-Funktionen. Bisher gingen wir davon aus, das dies der neue Shop nicht braucht – schliesslich haben die Entwickler ja selber Zugriff auf die  Seiten.

Gerade beim andauernden Hantieren mit Tracking-Pixeln aller Colèur zeigt sich aber das diese Funktion recht praktisch ist – so ist ohne Zutun der Webentwickler mal schnell eine ID geändert oder ein Tracking-Code eingebunden. Die Funktion ähnelt damit etwas dem Google Tagmanager.

Natürlich müssen das nicht nur Tracking Scripte sein; auch andere kleinere Korrektuen sind per Javascript schnell eingespielt – auf allen Webseiten wo auch das Shopsystem eingebunden ist. Zu finden ist die Eingabemaske unter Einstellungen->Tracking im Admin-Bereich.

Legacy Shops und Einbindung per Frame

Die Ablösung des bisherigen Standard-Shops rückt näher. Wir sind dabei die Anleitungen zu schreiben – u.a. die Hinweise, wie man den Shop am Besten in die Webseiten einbaut. Hier kommt -für den Standard-Shop- ein alter Bekannter zu neuen Ehren: der HTML (I-)Frame. Im Github gibt es ein Beispiel, was eine responsive Einbindung mit dieser Technik erklärt., auch auf Seiten die ggf. selber nicht responsive sind oder sonst einen größeren Umbau erfordern würden. (Hinweis: diese Technik wird aktuell nicht mehr empfohlen! –Bob, Februar 2019)

Hier gehts zum letzten Artikel dieser Rubrik.

Entwickler-Info 6/2018: Anmeldeoptionen

Unter dieser Kategorie Entwickler informieren wir zu Neuerungen und Änderungen am „Werkzeugkasten“ mit denen ein Shop im WebSite eingebaut wird. Diese Neuerungen können, müssen aber nicht in Eure betreuten Websites einfließen. Gelegentlich erwähnen wir auch Fixes für „prominente“ Bugs.

Neue Komponenten-Einstellungen

Schnell-Auswahl für Shop und Ticker: Diese Komponenten können nun so konfiguriert werden, das ein Artikel (oder Abobox) ohne weitere Auswahl mit einem Klick in dern Warenkorb zu befördert werden kann. Dazu kann die Menge oder auch die Aboperiode vorkonfiguriert werden.

Profil-Komponente: Die Auswahl des ersten Liefertermins und der Tour kann nun auch mit einer Select-Box erfolgen.  Neu ist auch der Anmeldemodus: Wie bei manchen modernen Websites gibt man zunächst die Email an, je nachdem diese im System existiert oder nicht, wird daraufhin auf die Anmeldeseite oder zur Passworteingabe weitergeleitet. Auch das komplette überspringen der Tourwahl (für Betriebe die bundesweit liefern) kann eingestellt werden.

Neue Möglichkeiten im Warenkorb erlauben die Konfiguration eines „klassischen“ Online-Shops, also eines Systems, welches Einmal-Bestellungen aufnimmt und die Bestellungen nicht zur wieder-Bearbeitung (bis zum Bestellschluss) anbietet. Neu ist auch eine optionale Zusammenfassung im Warenkorb. Ein weiterer Schalter erlaubt es, auch mehrere Bestellungen für einen Liefertag neu im Shop einzugeben.

Der Inhalts-Komponente kann nun angebeben werden, in welchem Format der Inhalt vorliegt – so kann entweder HTML direkt ausgegeben werden, oder vorliegender WIKI-Text zu HTML gewandelt werden.

Einfacheres Entwickeln

Weitere System-Status sind als CSS-Klasse zur HTML- oder BODY-Element hinzugekommen und erleichtern so den Bau von zielgenauen Selektoren.

Alle Komponenten-Schalter können ad-hoc direct ins Suchfeld eingegeben werden – so kann man die Wirkung der Schalter ohne viel Aufwand im lokalen Browser ausprobieren.  Auch gibt es jetzt eine immer mit eingespielte (versteckte) Seite, falls mal keine Such-Komponente in den regulären Seiten sein sollte. Zu Erinnerung: es gibt auch weitere Design-Hilfen die über diesen Weg zugänglich sind.

Update 8/18: Mittlerweile kann man die Schalter auch im Admin-Bereich (Entwickler) setzen. Damit schaltet man alle Besucher-Browser um, diese EInstellung bleibt auch erhalten. EIn „clear“ löscht wieder.

Bilder-Proxy

Komponenten, die Bilder anzeigen, verwenden den internen Bild-Proxy des Systems. Die Bild-Bearbeitung ist aber meist ausgeschaltet (auch dies kann an der Komponente konfiguriert werden). Wir sehen aber immer wieder, das bei Produktbildern auch sehr große Bilder hinterlegt werden, möglicherweise aus Versehen. Um den Schaden zu begrenzen, sollte man die Bildbearbeitung immer aktivieren, z.B. durch Angabe eine Maximalen Bildgröße von 1000×1000 Pixel. Das ist zwar immer noch groß, zwingt aber den Proxy zur Bearbeitung des Bildes und damit meist auch zur Reduktion der Bildgröße.

Die Links führen meist in die Design-Anleitung; dort findet sich gleich oben jeweils ein Link zur Referenz mit den detaillierten Infos zu den Konfigurationsoptionen.

zum letzten Beitrag in dieser Rubrik

Entwickler-Info 3/2018: Navigationsoptionen

Unter dieser Kategorie Entwickler informieren wir zu Neuerungen und Änderungen am „Werkzeugkasten“ mit denen ein Shop im WebSite eingebaut wird. Diese Neuerungen können, müssen aber nicht in Eure betreuten Websites einfließen. Gelegentlich erwähnen wir auch Fixes für „prominente“ Bugs.

Navigation für mehrere Shops

Mittlerweile gibt es verschiedenen Techniken, um mehrere Shops an einer PCG-Installation zu betreiben. Mittels der neuen Optionen oo-navi-group und  oo-navi-subgroup kann man die Navigationsoptionen auf eine bestimmte „Gruppe“ beschränken – aktuell gibt es davon zwei: „Normale“ Haupt-Navigationspunkte, und die im PCG als „Test“ markierte.

Damit gebaute Shops nutzen trotzdem alle darunter liegenden Artikel gemeinsam (Suche, Filter). Damit eignet sich diese Methode, um z.B. Shops und WebSites mit Fokus auf bestimmte Produktgruppen zu bauen.

Zuletzt angesehen

Diese Komponenten nutzt nun, wie auch Filter oder Suche ein Overlay zur Darstellung des Inhaltes.

Anmeldung

Mit oo-logon-skip-locate kann die Standortabfrage komplett unterdrückt werden – sinnvoll z.B. wenn Neukunden auf festen Touren landen sollen.

oo-logon-mode=“email1st“ stellt eine Abfrage nach der EMail voran. In Folge kann dann zur Anmeldemaske (bzw. Passwortabfrage) oder der Neuanmeldung verzweigt werden. Das zugrundeliegenden HTML Template hat sich um diese Abfrage erweitert, ist aber ansonsten unverändert geblieben.

Umbau der Abosteuerung

In Folge von Diskussionen beim Anwendertreffen im Februar haben wir die Möglichkeiten zur Abosteuerung   komplett aus dem Warenkorb entfernt. Mehr Info ist im entsprechenden Trello-Board zu finden (für eine Einladung bitte an Bob wenden) . D.h. die ggf. angepassten CSS Stile sind dazu nicht mehr notwendig. In Anlehnung an vorhanden Stile sind einige wenige Optionen im Profilbereich hinzugekommen.

Shop-Komponente

Ein neuer Schalter oo-shop-startnav=“<navigationlevel>“ ermöglicht die Angabe einer Navigationsebene, sollte noch keine gegeben sein (also meist im Startzustand der Webseite). Ansonsten wir an dies Stelle im die im Admin-Bereich festgelegte Menüebene verwendet.

Ticker mit Abo-Option

Auch die im Ticker angezeigten Artikel können nun periodisch bestellt werden. Die Option muss mit einem Schalter eingeschaltet werden. Zudem kann die Zielseite je nach Anmeldezustand des Besuchers unterschiedlich angegeben werden. Das hilft insbesondere beim Bewerben von Artikeln mit umfangreichen Beschreibungen oder Angaben zur Lieferung/Konfiguration oder Verpackung.

Entwickler-Info 1/2018: jQ3, Mapping

Unter dieser Kategorie Entwickler informieren wir zu Änderungen am Systems. Normalerweise werden wir alle Interfaces (CSS-Klassennamen, API-Aufrufe, Abhängigkeiten von Bibliotheken) rückwärts-kompatibel halten. Deshalb gibt es hier insbesondere Neuerungen zu finden, die in Eure betreuten Websites einfliessen können, aber i.d.R. nicht müssen. Gelegentlich erwähnen wir auch Fixes für „prominente“ Bugs.

Januar 2018
  • Script-Aufruf .../client1.js verwendet nun Jquery3. Unser Interface war auch bisher JQ3 Kompatibel, nur musste man diese Abhängigkeit selber in einem eigenen Startup-Script pflegen.
  • Neue Produkt-Datenblätter in der Artikel-Detailansicht. Durch die Einbindung von DataNatuRe werden nun auch neue Produkt-Datenblätter an dieser Stelle erscheinen. Leider konnten wir hier nicht die gleichen CSS-Klassenbenennungen wie im Ecoinform-Falle beibehalten. Ggf. fällt also hier neue Design-Arbeit an!
  • Fix, nur zur Info: Mobile-Touch ist zur Navigations-Komponente hinzugekommen. Es fehlt leider immer noch in der SubNavi-Kompnente.
Dezember 2017
  • Eine neue Mapping-Option erlaubt es, je nach angezeigter Navigationsebene eigene Webseiten anzusteuern. So kann z.B. eine bestimmte Warengruppe/Preisliste in einem andern Design/Layout dargestellt werden. Dies wird im (optionalen) Start-Script hinterlegt, z.B. so:
oo.configureShopPageMap({ // mappings 
 'Group:66': "shop1.html", 
 'Group:68': "shop2.html" 
});

Dieses Mapping greift bei Klicks auf alle Links die die Navigationsebene ändern, gleich von welcher Komponente.

  • Die Shopkomponenten hat in der Detailansicht einen Link zurück zur übergeordneten Ebene bekommen. So lassen sich noch kompaktere Screens bauen. Dieser Link (.oo-shop-sl-parentlink) ist in der Vorgabe ausgeschaltet, damit kein Design zerstört wird.
  • Die Ladeanzeige fügt nun eine CSS-Klasse an den Body-Tag, wenn die Seite (aus Sicht des OO-Frameworks) erstmalig komplett geladen wurde. Damit können Einblendungen etc. rein per CSS erfolgen. ohne auf eigene Javascript-Funktionen im Start-Scriptt zurückgreifen zu müssen.

zum letzten Beitrag in dieser Kategorie.

Entwickler-Info 11/2017: Chat, Newsletter, SEO

Unter dieser Kategorie Entwickler informieren wir zu Änderungen am Systems. Normalerweise werden wir alle Interfaces (CSS-Klassennamen, API-Aufrufe, Abhängigkeiten von Bibliotheken) rückwärts-kompatibel halten. Deshalb gibt es hier insbesondere Neuerungen zu finden, die in Eure betreuten Websites einfliessen können, aber i.d.R. nicht müssen. Gelegentlich erwähnen wir auch Fixes für „prominente“ Bugs.

November 2017
  • Eine Änderung in den HTTP-Headern verhindert nun, das das Caching in Entwicklungsumgebungen greift, wenn es nicht soll. Dies war der Fall, wenn man gleichzeitig Dateien mit Aufrufen zu einem Staging und zum Live-System (oder generell von verschiedenen Servern)  bearbeitete.
  • Verbesserungen im SEO-Bereich: Alle Perma-Links wurden vereinheitlicht um wirklich immer auf eine Ressource zu zeigen. Generell haben Navigations-Einträge nun alle ein href-Attribut (.oo-shop-item-permalink). Auch die generierte Sitemap wurde an den neuen Shop angepasst.
Oktober 2017
  • Neue Komponente: Chat. Nach langem Evaluieren von Alternativen haben wir uns für einen eigene Implementation entschieden. Einzubauen und Anzupassen ist diese Komponente wie alle anderen; es gibt eine Design-Anleitung und auch eine Referenz. Als WebDesigner habt Ihr das Recht, die „Gegenstelle“ im Admin-Bereich zu verwenden, so könnt Ihr das ausprobieren und gestalten. Eine allgemeinere Bescheibung folgt in einem späteren Blogbeitrag.
  • Neuer Schalter an der Such-Komponente: data-oo-search-onenter=“true“ erlaubt das ein „Enter“ direkt die Suche auslöst. Ohne diese Option kommt wird wie gehabt zunächst die Ergebnis-Vorschau eingeblendet.
  • Neue Komponente: Subscribe. Diese verwenden wir auch selber hier in unserem Blog. Damit kann die Anmeldung zu einem Newsletter sehr einfach eingebaut werden, inklusive Double-Opt-in. Die Adressen landen -nach erfolgreicher Bestätigung- in einer PCG-Aktionsgruppe. Die Abmeldung kann übrigens mit Links aus den Serienmails erfolgen und wird auch von dieser Komponente abgewickelt. Beim Design also den ganzen Prozess ausprobieren!