Entwickler News #1/22

CORS

Die Browser haben wieder mal die Sicherheitsschrauben angezogen. Dieses Kürzel steht für einen Mechanismus, der u.a. eine bestimmte Art des Daten-Diebstahls bei den Besuchern der Webseite unterbindet – also eine gute Sache. Leider erschwert diese Logik aber auch das Entwickeln mit unserer Third-Party Einbindung des Online-Shops. Wir haben deshalb einige Tricks eingebaut, damit man trotzdem leicht mit Hilfe eines Staging-Systems (was ja i.d.R. eine andere Domain hat) arbeiten kann. Zudem lässt sich Domain der aufrufenden Webseite „pinnen“, was die Sicherheit zusätzlich erhöht.

API Logistik, Hooks

Wir haben weitere Logistik-Dienstleister angeschlossen. Das bedeutet zum einen die Datenübertragung in externe Dienste (Logistik-Software), aber auch das Einsammeln von Daten bzgl. einer Zustellung oder dem Pfandrücklauf.

Öfters sind auch Fahrrad-Dienstleister dabei, hier werden nun Zustell-Gewichte und -Größen wichtig. Auch haben wir nun eine Schnittstelle, die eine externe Vorpack-Optimierung ermöglicht, so das ein Umladen am Liefer-Hub reibungsloser läuft.

Ein Datenexport kann nun auch automatisch zum Ende des Packprozesses ausgelöst werden.

Die Anbindung an Sesam-System wurde vervollständigt und unterstützt jetzt auch Zustell-Boxen im Eigenbetrieb.

Die API-Funktionen für Fahrer-Apps erhielten Plausibilitätschecks, um mit unterbrochenen Netzwerk-Verbindungen (gibts in D!) besser zurechtzukommen.

App und API: Die API wurde erweitert, u.a. um mehr interne Signale für Apps bereitzustellen. Mit Hilfe der Hooks lassen sich leichter Push-Nachrichten realisieren oder automatisch externe Prozesse anstossen.

Shop

  • Neue Optionen bei den ShopKomponenten erlauben, z.B. den Bau einfacherer Pick-and-Buy Logiken in den Webseiten
  • Suche im Warenkorb: dies ist besonders bei grossen Warenkörben praktisch und ergänzt die Sortiermöglichkeiten im Warenkorb. Beides sollte vom WebDesigner eingebaut und ggf. angepasst werden.
  • der CSS-Testmode ist zurück! Bei den neuen Shopmodellen war es zwar nicht mehr so wichtig, trotzdem ist es leichter im laufenden Betrieb ein alternatives CSS zu bauen und zu testen – und man spart ein Staging System, wenn es „nur“ ums Design geht.

Entwickler-News #12/20

Ein Reihe kleinerer Änderungen der API betrifft die Kommunikation und Anbindung an Logistiker, z.B. für Vorab-Navigation oder Fahrerinteraktion oder zu Größen- und Gewichts-Information.

Auch einige Javascript-Komponenten wurden um Funktionalität erweitert, so die Mail– und Subscribe-Komponente.

Um besser informiert zu bleiben können Entwickler nun ihre Email-Adresse hinterlegen, um Veränderungen im gemeinsam gepflegten Trello Board mitzubekommen – Änderungen, insbesondere die, die auf das Design Auswirkung haben, kündigen sich dort meist länger im voraus an.

Dort haben sich auch wieder einige Dinge angesammelt, die durchaus Design-Relevanz haben können, so die eingebaute Hilfe, eine Reihe Labels die am Artikel oder im Warenkorb erscheinen können. Der eingebaute Test-Artikel wurde vervollständigt um alle diese Dinge in der Detail- und auch in der Listenansicht darzustellen.

Die API bietet nun eine Debugging Option – zwar ist die noch nicht zur Selbstbedienung freigegeben, aber auf Anfrage können so auch längere Sitzungen komplett protokolliert werden.

Entwickler-News #1/20

Mit den Alternativsystemen gibt es ja bereits einen Weg, verschiedene Shops an das gleiche Warenwirtschafts-Backend anzuschliessen. Mit Hilfe von alternativen Menüs der Navi-Komponemnte gibt es nun eine weitere Variante für die Gestaltung eines Shop-Angebotes für verschiedene Zielgruppen. Natürlich kann dies auch mit einem Alternativ-System kombiniert werden.

Wie immer gab es auch wieder Erweiterungen der Programmierschnittstelle (API), u.a. neue Versionen der Endpunkte für Artikelinformation oder neue Methoden für Logistik-Anbindungen, inkl. der neuen Depot-Logik im System.

Mit der API können externe Systeme auf das Shopsystem zugreifen. Um auch aus dem Shopsystem externe Prozesse anzustossen, können nun „Hooks“ auf über 50 Systemereignisse hinterlegt werden. Dabei wird eine hinterlegte Web-Adresse aufgerufen oder eine Email mit den entsprechenden Eigenschaften des Ereignisses versendet.

Es gibt einen Proxy auf OpenStreetmap-Tiles. Damit können Karten DSGVO-konform ohne weitere Erlaubnisabfrage von Besuchern eingebaut werden (sofern ein DSGVO-AV mit uns vorliegt, was i.d.R. der Fall ist).

Eine kleine, aber von Vielen gewünschte Änderung: die Staging-Systeme können nun automatisch (1x am Tag) aktualisiert werden!

Um Scripte für kleinere Änderungen nicht mehr unter „Tracking“ hineinmogeln zu müssen, gibt es nun ein eigenes Eingabefeld für Scripts, die nach der Initialisierung des Systems gestartet werden sollen.

Entwickler-News #3/19

Websites nur mit Boardmitteln bauen

Mit Hilfe der Content/Contentmenu Komponenten ist es leicht dem Kunden einen einfachen Satz an Seiten vorzubereiten um eigene Inhalte zu pflegen. Natürlich fokussiert so ein Site ein wenig auf den Online-Shop 😉 , aber weitere Werkzeuge wie ein CMS System kann man sparen.

Inhalte werden im Inhaltsbereich abgelegt – allein der Kurzname des Beitrags muss einem bestimmten Muster folgen um in der Navigation aufzutauchen. Beitragsseiten können wie bisher schon auch in der Navigation (im PCG einzustellen) verwendet werden.

Im Standard-Template, der schnellsten Art mit einem Shop live zu gehen, sind die entsprechenden Komponenten bereits im oberen Bereich vorgesehen und erscheinen automatisch wenn Beiträge vorhanden sind.

Beiträge können mit dem eingebauten HTML-Editor oder auch in Wiki-Syntax verfasst werden. Mit letzterem behält der WebDesigner etwas mehr Hoheit über den Stil der vom Kunden verfassten Beiträge.

Im Übrigen können Textbausteine (==Beträge) auch selber in anderen Beiträgen in Form von Variablen verwendet werden.

Bilder-Proxy

Bilder im Shop werden i.d.R. über den eingebautenProxy ausgeliefert. Damit werden hauptsächlich zu grosse Bilder und falsche Daten- und Bild-Formate der hinterlegten Bilder abgefangen.

Nun kann man -über die Konfiguraton der Komponenten – auch einzelne Dimensionen skalieren, und so z.B. breite schmale Banner im Headerbereich der Artikel verwenden.

Mehr Darstellungsoptionen

An einigen Stellen wurden weitere Datenfragmente vorgesehen, so z.B. die Grundpreise in der Listenansicht, Informationen zu gesperrten Bestellungen oder Hinweise für Bildfehler oder die Artikelnotizen. Üblicherweise werden diese Dinge so non-intrusive wie möglich eingebaut, um keine Designs zu beeinträchtigen. Im Standard-Template sind immer alle Neuerungen zuerst drin.

Bei individuellen Designs muss deshalb mitunter von Hand nachgebessert werden. Deshalb immer wieder mal ins Trello schauen.

Mitarbeiter gesucht!

Programmierer/Webentwickler, w/m/RGB/vegan/flexi

Das solltest Du können:

  • Javascript (95%), HTML (100%), CSS (30%), Java (30%)
  • Erste Erfahrung mit Softwareentwicklung im Team (Versionsverwaltung, Build-Prozesse, Tests, Clean Code, Issue Tracking )
  • Your german seems to be good, your english is better than average

Promotion:

  • Du wirst bei bei Ökobox-Online im PCG-Team arbeiten. Wir bauen seit >15 Jahren Softwareprodukte für Online-Lebensmittelhändler, meist im Bio-Bereich und betreiben zugehörige Web-Dienste
  • Vollzeit, Festanstellung
  • Bei uns kannst Du sehr viele moderne Sachen lernen
  • 70% neuer Code, 30% Refactoring
  • Wir sind flexibel bzgl. Zeit- und Arbeits- und Lebensmodellen
  • Wir haben > 200 sehr nette Kunden, meist in D, CH, A und FR
  • Dresden ist ein super Wohnort (besonders übern‘ Sommer). Und nicht zu klein für viele Tech-Meetups. Berlin, Leipzig und Prag sind auch leicht zu erreichen
  • Der Umsatz unserer Kunden hängt an unserer Software – aber keine Menschenleben. Es gibt also schon mal Hektik, aber keinen Stress. Aus Fehlern lernen wir

Sei Dir bewusst:

  • Die ersten 6 Monate wirst Du in unserem Büro arbeiten. Danach nach Absprache.
  • Wir sind ein recht kleines Team und werden nur langsam weiter wachsen. Trotzdem bieten sich spannende Perspektiven. Und Du wirst Verantwortung übernehmen müssen
  • Wir arbeiten nachhaltig und fair (oder versuchen das wenigstens) – das geht auch bei der Software-Entwicklung!
  • Wir arbeiten tgl. im in Europa verteiltem PCG Team zusammen
  • Wir erwarten dauerndes Lernen. Dich erwarten mitunter knifflige Probleme

Wir freuen uns auf Deine Bewerbung an jobs@pcgteam.eu

Entwickler News #2 / 19

Viel Arbeit ist in den letzten Wochen in „unsichtbare“ Dinge wie Ladegeschwindigkeit oder Hochverfügbarkeit geflossen. Aber auch Funktionalität ist hinzugekommen!

(Übrigens: schon unsere Stellenanzeige gelesen?)

Erweiterung der Suche

Wo war gleich nochmal die Eingabe der Lieferpausen?
Abgehakt auf der Wunschliste für die Such-Komponente ist nun endlich auch die Suche nach Shop-Funktionen, diese erscheinen bei einem Treffer noch über den Artikeln. Ggf. müssen dazu einige Komponenten-Schalter angepasst werden oder auch das Design – näheres im Trello. Ausprobiert werden kann es auf alle Fälle im Standard-Template-Shop: dort sind alle Funktionen verfügbar. (Der Standard- Template-Shop ist immer im Admin-Bereich unter Entwickler zu erreichen).

Kalender

Schon vor einiger Zeit ist im Shop2016 die Kalenderansicht der Liefertermine hinzugekommen. Neben der Terminauswahl können da auch weitere Bestellungen für den gleichen Tag sehen oder alternative (noch nicht zugewiesene) Touren ausgewählt werden. Die Ansicht kann mit einem Schalter eingeschaltet werden (wie üblich auch testweise per Eingabe im Suchfeld). Einige Designs benötigen etwas finetuning, im Standard-Template-Design ist diese Ansicht voreingestellt.

Schöner Scrollen

Gerade beim Einbau des Shops in Designs mit einem höherem Header tritt das Problem auf, dass man bei Blättern in der Artikelliste (besonders bei kleinen Bildschirmen) oft wieder etwas herunter scrollen muss. Eine neue Funktion in der Shop-Komponente merkt sich nun die „beste“ Position und scrollt dann automatisch – die Browser optimieren das weiterhin, dadurch wird die Bewegung durch das Angebot im Shop viel ruhiger. In Verbindung mit einer unten „angebundenen“ Fußzeile stört nun selbst ein großer Header nicht mehr bei der Darstellung auf einem Handy.

Entwickler-Info #01 / 19

Wir haben weiter an der einfachen Integration unseres Shop-Scriptes in beliebige Webseiten und CMS’se gearbeitet. Es wurden eine Vielzahl von Problemen mit Apples skurrilen Praktiken beim Cookie Management, mit CORS oder auch Konflikte beim Nebeneinander verschiedener Script-Versionen gelöst. Die neue Version client1.js baut auf ein gekapseltes jQuery3 und kann CSS in den verrücktesten Homepage-Baukasten injizieren.

Standard-Template aufrufen oder einbauen

Passend dazu haben wir auch die Code-Editoren im Backend verbessert. Ein Einbau des Standard-Shops inkl. der Stil-Anpassungen kann oft in wenigen Stunden nur mit Bordmitteln erfolgen. Wenn man keine groben Fehler macht ist das Ergebnis trotzdem responsive und stimmig. Der Einbau des Standard Templates ist jetzt mit wenigen Schritten erledigt:

  • Script einbetten
  • Ein <div>-Element als Platzhalter vorsehen
  • Mit dem Stil-Editor Farben und Stile anpassen
  • Den erzeugten CSS Code im Backend hinterlegen
  • ggf. weiteres Finetuning am CSS in Bezug auf die einbettende Webseite
  • Einige wenige Einstellungen am PCG System vornehmen

Wenn dies geschafft ist, kann man die Webseite mit vielen weiteren Ideen ausbauen.

Bilder via Backend

Um Abstimmungsaufwand zu verringern, können Bilder – insbesondere für Navigationsebenen- jetzt auch direkt vom Backend des Shops engespielt werden. Dabei hilft auch ein FTP-Browser im Entwicklerbereich.

Neue Komponenten-Schalter

Wie immer sind neue Optionen an den Komponenten hinzugekommen; u.a. mehr Möglichkeiten zur Bilder-Beeinflussung. Bei neuen Projekten bitte immer die Übersichtsseite der Komponenten „scannen“, dort sind alle Optionen auch aufgelistet.

Entwickler-Info 12/18

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.

Standard-Template

Zur Ablösung der Amperhof-Shops kann seit einiger Zeit das neue Standard-Template (Shop2016) verwendet werden. Es hat eine vorgegebenes erprobtes Layout (ähnlich dem Amperhof-Modell), ist super-responsive und macht trotzdem von allen neuen Funktionen Gebrauch.
Die Einbindung erfolgt per Script auf nahezu beliebigen Webseiten, notfalls auch dort wo kein Zugriff auf das Template möglich ist . Die Anpassung kann dann per CSS erfolgen. Mit einem interaktiven Stil-Editor können auch schnell Farben und verschiedene Stil-Elemente (Rahmen und Abstände) angepasst werden.

Page & Conversion Tracking

Ein Hinweis dazu hier an dieser Stelle, da diese Aufgaben auch oft bei Euch liegen.

Zunächst empfehlen wir natürlich unser internesdatensparsames und DSGVO-freundlichesGoogle Analytics Modul zu verwenden. Aber bei umfangreichen Installationen, eigener Tracker-Software oder vielen Werbepartnern mag es auch Gründe für den direkten Einbau der Scripte in die Seiten geben.
Hier gibt es das Problem, das nicht jedes Script der verschiedenen Anbieter die in-page Wechsel oder auch die „Conversion“ mitbekommt.
Schon immer kann Script-Code auch im Admin-Bereich des Shops hinterlegt werden. Diese Scripte werden auf allen Seiten ausgeführt, in denen der Shop eingebunden ist. Natürlich kann das Script auch direkt in der Seite geändert werden, trotzdem ist dies eine elegante Möglichkeit, Änderungen schnell auf allen betroffenen Seiten zu platzieren oder eben mal auch schnell eine Id zu ändern. Ganz ähnlich wie beim Google Tag Manager .

Neu sind nun Eingabefelder im Admin-Bereich, die es erlaubten entsprechenden  Code zum Tracking eines Seitenwechsels und einer „Conversion“ zu hinterlegen. Variablen helfen bei der Übergabe der notwendigen Parameter. Details  sind in der Dokumentation zu finden.

Bilder Optimieren

Hin und wieder ist bei den Artikel-Informationen mal ein großes Bild (groß in Bytes) von irgendeiner Quelle dabei (nur bei DATAnatuRe fangen wir das Gröbste ab).  In den individuellen Shops ist die Bildbearbeitung per Shop-Proxy abgeschaltet (durch die Angabe 0,0).

oo-item-image-pi-size=600,600

Wir empfehlen diese Option oo-item -image zu nutzen: so kann sicher gestellt werden, dass die Bildgröße 600×600 Pixel nicht übersteigt. Selbst eine Angabe 1000×1000 reicht aus, um unbedarft hinterlegte Handy-Fotos ohne sichtbare Darstellungsverluste auf ein erträgliches Maß zu stutzen.
Wie üblich lässt sich die Konfiguration an verschiedenen Stellen hinterlegen: Durch Eingabe direkt im Suchfeld (zum Test), im HTML-Code, in der zentralen Javascript-Konfiguration oder im Admin-Bereich.

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