Blog - Hannes Pries - Webdeveloper Blog - Entwicklung mit Shopware, Java, PHP, HTML5 und JavaScript

Shopware 6: Administration Built Error

Wenn man solch einen Fehler erhält

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! administration@1.0.0 build: `mode=production webpack`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the administration@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /var/www/.npm/_logs/2022-11-24T11_18_35_338Z-debug.log

sollte man gucken, ob vorher ein Fehler dieser Art aufgetreten ist

Error: EACCES: permission denied, ...

Reisen: WIFIonICE mit Linux nutzen

Während die Intenetnutzung im ICE mit dem Smartphone ohne Probleme geht, kann es mit Linux schnell zu Problemen kommen. Das liegt am IP-Bereich und Docker. Zwar kann sich das Gerät mit Linux ohne Probleme mit dem eigentlichen Netzwerk verbinden, aber dann kann die Seite zum bestätigen der AGBs nicht geladen werden.

Anleitung:
- Mit dem WLAN verbinden
- prüfen welcher IP-Bereich zu gewiesen wurde
-

ip addr

- gucken welcher Eintrag mit dem Bereich kolliedert
- diesen Eintrag entfernen
-

sudo ip link delete <name>

Bei mir war es der Bereich 172.18.

Shopware 6: Tipp Media::fileName ändern

Meine erste Lösung war es den MD5-Hash als Dateiname zu nehmen. Dann später kam wollte ich doch lieber ein CustomField dafür nutzen (wie ich auch schon in der Shopware 5 Version ein Attribute genutzt hatte). Funktionierte alles super bis ich dann auf ein System kam, das nicht im dev-Mode lief. Am fileName hängt wohl mehr als man denkt und ich habe gelernt, dass man in einem produktiven Shopware 6 nicht den fileName ändern sollte. Kommt mit auf meine Liste der ganz großen Shopware 6 Nein-Nein's.

Ender 3: Creality Spider Fan Duct

Eine wirklich gutes Upgrade für den Creality Ender 3 ist das Spider Hotend des selben Herstellers. Es gibt auch eine V2.0, die von der Größe besser passen sollte, als Ersatz des Stock-Hotends. Aber die 1.0 Version ist auch schon sehr gut und bedeutend günstiger.

Mit dem Hotend ist PETG Druck bei 100-120mm/s bei 245 Grad kein Problem mehr mit dem Ender 3 (Pro). Da das Hotend aber insgesamt höher ist würde der Lüfter nun gegen den Heizblock blasen und nicht mehr aus das frischgedruckte Filament. Es gibt bei Thingiverse Ersatz, der aber bei mir am Ende zu dicht über dem Filament und auch zu dicht an der Nozzle war. Deswegen habe ich dieses Design etwas angepasst. Gedruckt mit Resin (weil der Ender 3 ja gerade im Umbau war). Funktioniert super und auch wenn man etwas Filament vom Bed im ersten Layer abstehen zieht es nicht damit direkt den gesamten Layer wieder ab.

Mein Designs dafür bei Tinkercad

Shopware 6: Bestellstatus ändern ohne Mail zu verschicken

Oft will man einfach nur den Status der Stellung anpassen, weil irgendwas mit der Bestellung nicht stimmt oder man sie auf abgeschlossen setzen will, aber der Rest über das ERP/die WaWi läuft. Man will keine Mail an den Kunden senden. Leider ist die Mail immer direkt aktiviert und man muss immer daran denken diese zu deaktivieren.

Nervig.. also ein tolles kleines (wirklich kleines) Plugin-Projekt:

https://gitlab.com/hpries/HPrSendMailStateChange

normal

jetzt

JavaScript: Detect scroll to bottom

Um einen einfachen kleinen Dialog zum Akzeptieren von AGBs/T&Cs/etc braucht man nur relativ wenig JavaScript Code und auch kein JQuery mehr.

<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<style>
#reader {
max-height: 200px;
border: 1px solid lightgray;
border-radius: 3px;
overflow: auto;
padding: 0.25rem;
}

#page {
display: flex;
justify-content: center;
padding-top: 5rem;
}
</style>
</head>
<body><div id="page">

<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Scroll to Accept</h5>
<p class="card-text">
<div id="reader">
Gott zum Gruße! Das feist Weichteile. Die geflissentlich
Begrüßungsgeld meucheln. Der töricht Lump grämen. Das bräsig Schürzenjäger.
Der grobschlächtig Edelmut. Der Kummerspeck anschwärzen der bierernst Lump.
Fatzke und Panzerkampfwagen flanieren pompös Schindluder. Die pomadig Bagage
foppen. Narr und Affenzahn schlampampen feist Quasselstrippe. Presssack und
Kuppelei picheln altbacken Kummerspeck. Die geflissentlich Luder frickeln.
Das Begrüßungsgeld schlampampen die gebeutelt Flegel. Habe die Ehre!
</div>
</p>
<button id="ok" class="btn btn-primary" disabled type="button">Accept</button>
</div>
</div>
<script>
document.getElementById('reader').addEventListener('scroll',
(e) => {
const element = e.target;
if(element.offsetHeight + element.scrollTop >= element.scrollHeight) {
document.getElementById('ok').removeAttribute('disabled');
}
}
, true)
</script>
</div>
</body>
</html>

Shopware 6: Storefront Plugins

Ein JavaScript Plugin für die Shopware 6 Storefront zu schreiben ist an sich sehr einfach.
Das Plugin an sich ist sehr einfach strukturiert.

example-plugin/index.js

import Plugin from 'src/plugin-system/plugin.class';

export default class ExamplePlugin extends Plugin {
init() {
console.log('plugin is bind to this element', this.el);
}
}

Die Klasse registiert man in der main.js:

import ExamplePlugin from './example-plugin/';

window.PluginManager.register('ExamplePlugin', ExamplePlugin, '[data-example-plugin]');

Nun muss man das nur noch an ein HTML-Element binden, so dass es wenn dieses Element geladen wird auch gestartet wird.

...
<div data-example-plugin="true"></div>
...

Im Plugin sucht man sich dann alle benötigten Elemente und registriert dort alle benötigten Listener.

Ausführlich steht alles hier: https://developer.shopware.com/docs/guides/plugins/plugins/storefront/add-custom-javascript

Wobei ich eher diese Seite https://mrtnschndlr.medium.com/die-neue-shopware-6-storefront-und-was-du-alles-dar%C3%BCber-wissen-solltest-e1e5621b6397 empfehlen würde.

die Art und Weise erinnert mich etwas wie ich damals bei meinen cJSv2-Framework die Controller an Elemente gebunden und initialisiert habe.. der default-Name der Init-Methode war da auch init.

Der DomAccess-Helper ist super und sollte man so verwenden. Über den kann man auch den QuerySelector nutzen und dass schützt hoffentlich davor, dass ein Haufen klassischer Webdesigner versuchen JQuery wieder da rein zu bringen. Der HttpClient ist auch nett aber man kann genau so gut direkt mit fetch() arbeiten, wenn man nicht unbedingt irgendwelche Steinzeit Browser supporten möchte. Aber besonder mag ich von den Helpern DeviceDetection.isTouchDevice() weil man damit einfach unterschieden kann ob man gerade ein Touch oder ein MouseEnter
Event nutzen muss.

Shopware 6: Lesbares Javascript

Wenn man in der Storefront an einem eignem JavaScript-Plugin arbeitet ist es beim Debuggen, oft nervig, dass der JavaScript Code nicht direkt lesbar ist. Oft weiß man beim eigenen Code direkt was los ist, aber gerade wenn 3rd Party Plugins auch mit rein spielen, kommt man nicht drum herum sich Exceptions mit lesbaren Stacktrace anzeigen zu lassen.

Das ist zum Glück extrem einfach:

* Port 9998 aus dem Docker-Container durchleiten
* Dem SalesChannel in dem man entwickelt die Domain "localhost" zu ordnen
* das Script bin/watch-storefront.sh starten

Nun kann man localhost:9998 im Browser aufrufen. Der JavaScript Code ist lesbar und Änderungen werden sofort übernommen ohne dass man die Storefront neu bauen muss.

Shopware 6: Produkt-Analyse per SQL

Einmal schnell gucken, wie viele und welche Art von Produkten über welchen SalesChannel und URL zu kaufen sind.

SELECT x.url, 'single' type, count(x.id)
FROM (
select d.url, p.id, p.parent_id, count(p2.id) children from sales_channel_domain d
join sales_channel sc on d.sales_channel_id = sc.id
join product_visibility pv on pv.sales_channel_id = sc.id
join product p on p.id = pv.product_id
left outer join product p2 on p.id = p2.parent_id
where sc.active = 1
group by d.url, p.id, p.parent_id
)x
WHERE x.parent_id is null and x.children < 1
group by x.url

union all

SELECT x.url, 'main' type, count(x.id)
FROM (
select d.url, p.id, p.parent_id, count(p2.id) children from sales_channel_domain d
join sales_channel sc on d.sales_channel_id = sc.id
join product_visibility pv on pv.sales_channel_id = sc.id
join product p on p.id = pv.product_id
left outer join product p2 on p.id = p2.parent_id
where sc.active = 1
group by d.url, p.id, p.parent_id
)x
WHERE x.parent_id is null and x.children > 0
group by x.url

union all

SELECT x.url, 'variant' type, count(x.id)
FROM (
select d.url, p2.id, p2.parent_id, 0 children from sales_channel_domain d
join sales_channel sc on d.sales_channel_id = sc.id
join product_visibility pv on pv.sales_channel_id = sc.id
join product p on p.id = pv.product_id
left outer join product p2 on p.id = p2.parent_id
where sc.active = 1
)x
group by x.url

Linux: Ubuntu will den Snap-Store nicht updaten

Das hat bei mir geholfen. Danach initialisiert er sich einmal wieder sauber neu und due ausstehenden Updates funktionieren ohne Probleme:

killall snap-store
snap refresh

Shopware 6: Id und die DBAL-Connection

Gerade in Migrations kommt man manchmal in darum herum mit den UUIDs arbeiten zu müssen. Da es binary-Daten sind muss man etwas mit den anstellen, um die aus Shopware 6 bekannte Darstellung zu erreichen und auch um diese wieder die in Datenbank zu bekommen.

Lesen der Id:
Um die aus Shopware 6 gewohnte Darstellung zu bekommen muss man in MySQL die HEX-Function verwenden. Zusätzlich muss der String noch in Kleinbuchstaben umgewandelt werden.

Schreiben der Id:
Zuerst wieder alles in Großbuchstaben umwandelnt. Dann muss mit der MySQL-Function UNHEX der Hex-String wieder in binary Data umgewandelt werden.

Es bleibt zwar etwas umständlich, aber ist damit durch aus handhabbar. Da es in dem Sinne kein Autoincrement gibt für die UUIDs hilft dann dort Uuid::randomHex().

Linux: AppImages mit 22.04

Unter 22.04 kann es sein das AppImages wie die JetBrains ToolBox nicht mehr starten will. Die Lösung ist sehr einfach:

sudo apt install libfuse2

danach sollte es wieder laufen.

Shopware 6: Was schon alles damit entwickelt wurde

Ich arbeite nun doch schon einige Zeit mit Shopware 6. Während ich am Anfang vielen Konzepten etwas kritisch gegenüberstand, bin ich nun doch sehr von fast allen Dingen überzeugt. Ich habe viele verschiedene Dinge schon mit Shopware 6 realisiert und einiges wäre in Shopware 5 nicht so einfach gewesen.
Gerade Vue.js in der Administration ohne irgendwelche zusätzlichen Lizenzen nutzen zu können ist super. Ich mochte immer Vue + Bootstrap und Symfony. Also am Ende fühle ich mich so was von extrem in meinen Vorlieben bestätigt... wenn auch Shopware diese Kombinationen nutzt muss ich ja schon immer richtig gelegen haben :-)

Varianten sind immer noch viel zu kompliziert. Daten in das Model für Emails rein zubekommen ist wirklich viel zu umständlich. N:M Relation in DAL ist umständlich bzw wie früher mit puren SQL. Entweder alles vorher löschen oder sich merken was genutzt wird und alles was nicht dazugehört löschen. Aber am Ende kommt man ja gut damit klar... ist eben wie mit JDBC oder PDO direkt zu arbeiten und dass habe ich lange genug gemacht.

So.. aber was kann man alles mit Shopware 6 so alles bauen? Ich habe bis jetzt nur für Kunden direkt entwickelt und falls jemand etwas hier von gerne hätte, geht das leider nur über Anfrage und dann wird ein Angebot erstellt.

1. Adressänderungen verhindern
Wie schon bei Shopware 5 war es nötig, weil SAP sonst überfordert ist.

2. Register-Form erweitern
Das zu Erweitern war am Ende sehr viel einfacher als gedacht und ich nutzt einfach das Data-Mapping Event für den Customer. Der richtige Weg? Für mich funktioniert er gut.

3. Blog Einträge
Das kostenlose Blog-Plugin ist schon echt super. Es fehlt nur ein Flag um Posts von er Suche auszuschließen, Typen, Rechte über Rules und Datei-Anhänge. Ja.. ich weiß.. ich könnte mich da beteiligen und alles einbauen.. sollte ich wirklich machen. Aber bis jetzt war nur Zeit das Plugin zu erweitern um Rezepte aus einem Panipro-System zu importieren.

Typen sind natürlich dynamisch und es werden nur Typen auf der linken Seite angezeigt, die auch gefunden wurden.

4. Bonuspunkte und passende Produkte
Produkte die man nur oder auch gegen Bonuspunkte kaufen kann. Das war etwas komplexer und man musste über Collector und Processor des Carts eingreifen. Heute würde ich wohl einiges ein wenig anders machen, aber nicht viel und auch nur minimale Änderungen.

5. Konfigurator Style #1
So kann man sich z.B. Geschenkkörbe oder PCs/Notebooks konfigurieren. In der Administration kann man sich ein Config-Preset anlegen und es verschiedenen Products zuordnen.

6. Konfigurator Style #2
Ein Produkt das z.B. Hackfleisch beinhaltet so konfigurieren in welchen Formen man das Hack gerne geliefert bekommen würde. Wurde als Teil von Punkt 7 entwickelt.

7. Paket verkauf
Erst alle Pakete verkaufen und dann erst das Tier schlachten. Spart Lagerkosten und andere Aufwände. Hier habe ich gelernt warum Varianten noch immer umständlich sind und CustomFields zu syncen zwischen Varianten schlechter ist als eine eigene Entity dafür zu erstellen. Aber die Anforderungen waren zuerst so das CustomFields die einfacher Lösung waren.

In Aktion:
https://www.mein-elbtaler-shop.de/Bio-Rind-Demeter/ME-1130.1

Wem also etwas hier von gefallen hat, kann sich gerne melden. Wir freuen uns immer über Anfragen.

Shopware 6: Hauptvariante ändern

Etwas was bei Shopware 6 so komplett fehlt und wo ich schon mehrmals gehört habe, dass es Kunden/Benutzern Probleme macht, ist die Hauptvariante bei Shopware 6. Die Hauptvariante ist immer die Variante, die im Dialog beim Erzeugen der Varianten zuerst gewählt wurde. Es gibt danach keine Möglichkeit mehr es zu ändern.

An sich ist die Hauptvariante aber auch nur ein FK am Product. Man kann dort einfach eine andere Variante eintragen und schon hat man seine neue Hauptvariante. Also alles auf DB-Ebene sehr einfach.

Auch das in die Administration einbauen war dann relativ einfach. Man brauchte nur zusätzlich ein Repository und eine Criteria für Varianten (WHERE parent_id = ... ). Die Id kann man direkt per v-model setzen am Product.

https://gitlab.com/hpries/HPrMainVariant

Dort habe ich meine Implementierung einmal hinterlegt. Darf gerne verwendet werden, wenn jemand oder ein Kunde auch dieses Problem hat.

Shopware 6: Non-Stackable Cart-Items

Gerade wenn man ein Produkt konfigurieren kann, ist es wichtig, dass CartItems nicht einfach aufaddiert werden, sondern jede Konfiguration als eigenes CartItem im Warenkorb abgelegt wird. Das CartItem von Shopware 6 hat auch ein stackable-Flag. Nun könnte man glauben, wenn man dieses auf false setzt, dass nicht das vorhandene CartItem geändert sondern ein neues angelegt wird, wenn erkannt wird, dass das vorhandene nicht stackable ist. Falsch! Man bekommt eine Exception.

Die Lösung ist zum Glück sehr einfach. Man muss selbst die Id des CartItems ändern um ein neues anzulegen. Also wenn man setStackable(false) setzt auch gleich die Id neu setzen. Oder man baut sich ein allgemeines Plugin, dass es macht.

BeforeLineItemAddedEvent:

if (!$event->getLineItem()->isStackable()) {
$event->getLineItem()->setId(Uuid::randomHex());
}

Systemd und Tomcat 9: ProcessBuilder Exceptions

Manchmal möchte man aus einem Tomcat heraus Processe und Programme aufrufen. Wie bei SQL-Injections muss man das natürlich stark absichern, aber das Konvertieren von Bildern und Video geschieht meistens auf diese Art und Weise.

Was aber wenn der Tomcat per ProcessBuilder nichts mehr aufrufen kann außerhalb seines Verzeichnisses, obwohl er alle Recht haben sollte? Wenn es ein System mit systemd ist (z.B. ein Ubuntu) ist, kann es einfach eine Security-Einstellung sein, die den Aufruf verhindert.

Hier muss man die Start-Config für den Service anpassen. "ProtectSystem=false" ist zum Prüfen der Lösung ganz gut, sollte aber später durch eine genauere Anpassung der ReadWritePaths geöst werden.

https://stackoverflow.com/questions/64038094/disable-sandbox-tomcat-9-ubuntu-20-04

Shopware 6: Placeholder Icon ersetzen

Bei Shopware 6 ist es etwas anders das Platzhalter-Bild für Produkte ohne Bilder zu ersetzen. An sich ist es ganz einfach, wenn man weiß wie es geht. Auch Anleitungen aus dem Internet von 2019 sind nicht mehr aktuell, denn es geht nun noch einfacher!

DAs Bild ist ein SVG-Icon mit dem Namen 'placeholder'. Man kann mit der Suche schnell herausfinden, wo es überall verwendet wird. Nun muss man nur ein eigenes Icon in per Plugin einbringen. Das ist auch an sich sehr einfach. Man legt einen Pfad in seinem Plugin an "src/Resources/app/storefront/dist/assets/icon/myiconpack/" und kopiert dort seine SVG-Datei rein. Die SVG kann auch gerne als placeholder.svg bennant sein. Nun muss man den Twig-Tag "sw_icon" noch um zwei Werte ergänzen. "pack" ist der oben im Pfad genutzte Icon-Pack Name und der "namesapce" ist einfach der Name des Plugins in dem man sich gerade befindet.

{% sw_icon 'placeholder' style {
'size': 'fluid',
'pack': 'myiconpack',
'namespace': 'MyPlugin'
} %}

Nun einmal die Storefront neu bauen und schon sollte das eigene Icon genutzt werden, da wo man die Shopware-Templates entsprechend extended hat.

Shopware 5: Detail Meta-Description ändern

Einfach mal die Meta-Description mit einem Prefix versehen, um kleinere SEO-Probleme zu beheben. Klingt einfach und führt schnell zur Verzweiflung. frontend/detail/header.tpl angepasst und es funktioniert nicht. Keywords ändern ist kein Problem nur die Meta-Description des Artikels will sich nicht ändern.

Lösung
Wie man schnell vermutet wird die eigene Änderung überschrieben. Der Schuldige ist das SEO-Plugin und da muss man die index.tpl anpassen. Die Änderung kann z.B. so aussehen:

{block name='frontend_index_header_meta_description'}
{if $Controller=='detail'}
EAN:{$sArticle.ean} - {$SeoMetaDescription|truncate:150:"...":true}
{elseif $SeoMetaDescription}
{$SeoMetaDescription|truncate:150:"...":true}
{else}
{$smarty.block.parent}
{/if}
{/block}

Und plötzlich ist es Kunst...

Manchmal will man nur ein paar Bilder für einen Webshop sortieren und ganz unerwartet hat man ein Kunstwerk geschaffen ... naja vielleicht keine echte Kunst.. aber sowas was eine leichte Mischung aus Warhol und Frank Miller sein könnte. Mit viel Fantasie.

Shopware 5: Text in Bannern

Wenn man Landingpages oder Kategorien als Banner in einem Bannerslider verlinkt würde man meistens gerne auch einen Text darin unterbringen. Nur ein Bild trifft oft nicht genau den Begriff den man darstellen möchte, da in einem Shop alles ja doch sehr nahe am gleichen Thema ist.

Text in Bannern bringt aber einige Probleme mit sich:
1) Der Text skaliert nicht mit und wird schnell unschön abgeschnitten
2) Der Text läßt sich nicht einfach und schnell ändern
3) Das Styling des Textes ist nicht mehr änderbar
4) Man braucht oft einen Grafiker der den Text in das Bild einbaut

Genau diese Problem hat gerade Vape-Buddys und brauchte eine einfache, schnelle und kosten günstige Lösung. Diese Lösung besteht darin den Title des Banners als Text-Overlay über das Bilds zu legen. Hier wird auch alles über % positioniert
und passt sich dem Viewport an. Sollte der Text zu groß sein greift CSS ellipsis und schneidet den Text schön ab.

widgets/emotion/components/component_banner_slider.tpl

{extends file="parent:widgets/emotion/components/component_banner_slider.tpl"}

{block name="frontend_widgets_banner_slider_link"}
<div class="banner--slider-title">
{$banner.title|escape}
</div>
{$smarty.block.parent}
{/block}

Das CSS dazu

.banner--slider-title {
position: relative;
font-size: 4rem;
color: white;
width: 100%;
height: 80%;
padding-top: 6%;
padding-left: 8%;
z-index: 100;
text-align: left;
text-shadow: 0 0 3px #000000;

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

Nuxeo mit Keycloak-Integration

An sich ist es garnicht sooo schwer Nuxeo mit einem Keycloak zu verbinden und dann die Benutzerverwaltung allein über das Keycloak abzuwinkeln. Leider ist die Dokumentation dazu sehr dürftig und zu großen Teilen einfach veraltet und lückenhaft. Hier wird einmal in kurzer Form erklärt wie man das mit einer aktuellen Version von Nuxeo 10.10 bewerkstelligen kann. Man sollte das 10.10 Repository von Github einmal per Maven komplett selbst gebaut haben. Wir hatten die HF53-Version und ein Grundsetup als Docker-Image ist unter annonyme/nuxeo:HF53 zu finden. Besser ist aber wenn man sich das vollständig selbst baut. Das Docker-Repository hilft beim Bauen.

Die Erweiterung für Nuxeo

Das Repository für die Nuxeo Platform Login Keycloak Erweiterung ist Teil des Nuxeo Mono-Repository und kann direkt mitgebaut werden. Die Anleitung dazu ist vollkommen veraltet, aber ich nehme sie hier als Basis. Man braucht um dieses benutzen zu können:

* Den Keycloak Tomcat-8 Adapter in der Version 4.6.0
* Den Nuxeo UserMapper Service (selbe VErsion wie bei Nuxeo und der Nuxeo-Keycloak Erweiterung nutzen! z.B. HF53)

Die Dateien aus der Zip der Adapter-Dist, die JAR vom Nuxeo Platform Login Keycloak sowie die JAR des UserMapper Services müssen alle in das selbe plugin/ Verzeichnis kopiert werden wie in der Anleitung erklärt wird. Das config/ Verzeichnis wie im Repository einfach auch rüber kopieren. Der Inhalt der JSON-Datei kann direkt aus dem Nuxeo kopiert werden und
ist die Config-Datei für den Keycloak Tomcat-Adapter und hat also an sich nichts mit Nuxeo zu tun. Dem entsprechend ist die Dokumentation zu der Datei auch um Welten besser als bei den Nuxeo Komponenten.
In der Anleitung wird alles in ein Template-Verzeichnis kopiert. Ein Template ist ein Profile für verschiedene Nuxeo-Konfigurationen und es können mehrere davon gleichzeitig verwendet werden. Den Docker-Container muss man dann also mit NUXEO_TEMPLATES: docker,keycloak starten.

Das war es dan nauch. Beim Login in Nuxeo einfach einen Account aus dem Keycloak verwenden und der Benutzer sie wie die im Keycloak zugeordneten Rollen/Gruppen werden ins Nuxeo übernommen.

Wenn man nochmal mit dem Administrator-Konto ins Nuxeo will und dieser noch nicht im Keycloak angelegt ist, muss man nur direkt /nuxeo/login.jsp aufrufen und bekommt die Nuxeo-Anmeldung ohne auf die Realm-Anmeldeseite des Keycloak weiter geleitet zu werden.

Es sind keine weiteren Konfigurationen an Nuxeo nötig. Wenn man sich ein Docker-Image baut muss also nur die keycloak.json aus dem config-Verzeichnis des Templates ersetzt werden können.

--

Mit viel Unterstützung von Interspark.

PHP: mpdf vs dompdf

CSS war ja ansich schon immer ganz gut um auch damit Druckdokumente zu erstellen. Vor vielen Jahren mit FlyingSaucer und Java und heute auch mit PHP. Nun kam die Frage auf ob mpdf oder doch eher dompdf dafür geeignet wäre. Kurz.. an sich gibt es da kaum einen wirklichen Unterschied. Beide sollen ältere Bootstrap-Versionen unterstürzen. Bootstrap 3.3.x hat um 2015 auch schon für alles mögliche gereicht und man konnte damit genau so gut ansehnliche Ergebnisse erzielen wie mit 4.0 oder 5.0. Wenn man mit JavaScript unter React oder Vue unterwegs ist, gibt es natürlich viele Vorteile mit den neuen Versionen und intern hat sich viel getan, aber für rein statische Inhalte ist es für den Benutzer von Bootstrap an sich egal, ob er eine alte oder neue Version verwendet. Das Konzept ist gleich geblieben über die Jahre.

Zwischen mpdf und dompdf habe ich nur einen wirklich Unterschied ausmachen können der relavant sein könnte. dompdf kann mit <thead> und <tbody> bei Seitenumbrüchen innerhalb von Tables auf der neuen Seite den <thead> wiederholen. Gerade bei sehr großen Reports in Tabellenform ist das sehr wichtig und schon zu FlyingSaucer Zeiten eine der wichtigsten Funktionen, die alle brauchten.

Shopware 6: Zusatzinformation im Warenkorb

Es gibt grob zwei Varianten wie man eigene Informationen im Warenkorb an den LineItems halten kann. Einmal gibt es die Extensions wo man eigene Structs hinterlegenk ann und es gibt den Payload wo man einfach Werte wie einen String oder ein Boolean hinterlegen kann.

Der Hauptunterschied ist, dass das Payload mit vom Cart LineItem in das Order LineItem übernommen wird ohne dass man etwas tun muss. Damit spart man sich auch CustomFields am Order LineItem. Die sind dann wirklich für Order-Angelegenheiten da, oder man kann nach dem Speichern der Order diese mit Hilfe des Payload füllen.

Extensions sind gut für Runtime-Data. Hier muss man drauf achten, dass Before und After add-Events, die Collcetor und Processors noch mit eingreifen und zusätzliche Logik triggern. Wenn man selbst den Cart bearbeitet (z.B. über eine eigene Controller-Action) muss man den CartService mit seiner Recalc-Method bemühen. Aber insgesamt ist der Cart zusammen mit dem CartService einfach zu beherrschen und auch zu manipulieren.

Ich habe mich am Ende entschieden beides gleichzeitig zu verwenden, wobei in den Extensions alle möglichen für die Darstellung wichtigen Daten stehen und im Payload nur das Aggregat dieser Daten als Boolean. Mehr brauche ich für den Export der Order auch nicht. Warum diese also speichern?

PS: 0 Euro Produkte im Warenkorb und Bestellungen sind in Shopware 6 kein Problem mehr.

Shopware 5: Neuer Shop online

Ein neuer Shop mit einer erweiterten Version des EDC-Plugins von mir ist heute online gegangen. Es ist noch ein Shopware 5 Shop, aber Entwicklungen in Richtung Shopware 6 gehen auch voran.

https://www.toys4fun.shop

10% Coupon für den 1. Monat FUN4YOU (ab 20EUR, 1.9.-30.9., 1x pro Kunde anwendbar)

Ich habe dabei gelernt, dass schon ein wenig Farbe im Hintergrund sehr viel ausmachen kann. Ein Farbverlauf ist hübsch aber manchmal auch schwierig zu beherrschen, dass es am Ende nicht einfach zu viel ist.

Für den nächsten Shop werde ich mal mit Video-Hintergründen herum experimentieren. Mit einem CSS Blur-Effekt von 6px kann man ohne Probleme ein ein stärker komprimiertes 720p MP4 Video nutzen, ohne dass die schlechte Qualität auffallen würde.

Aber erstmal zurück an die Arbeit und die Frage warum der MS SSMS (SQL Server Manager) nur unter Windows funktioniert und nicht mit Linux oder Wine....

SSH-Keys für BitBucket und Gitlab

Einfach den Inhalt der id_rsa.pub zu nehmen und dort einzutragen funktioniert leider nicht, da das Format nicht übereinstimmt. Eine Datei mit mit dem entsprechenden Key kann man sich aber sehr schnell erzeugen.

ssh-keygen -i -f ~/.ssh/id_rsa.pub > openssh.pub

Shopware 6: Entity-Select ohne name-Field

Während ja jede Entity eine id hat, hat nicht jede ein name-Field. Ich musste doch etwas suchen bis ich erstmal die Dokumentation zu der Component gefunden habe und dann mir klar war wie ich ein andere Feld angeben kann. Am Ende natürlich genau so wie man es sich dachte nur der Prop-Name ist irgendwie seltsam, weil Label ja auch anders dort verwendet wird als Begriff.

https://component-library.shopware.com/components/sw-entity-single-select

Shopware 6: Docker-File

Hier meine aktuelle Docker-Umgebung für Shopware 6 und mit PHP 7.4

FROM php:7.4-apache

RUN apt-get update &&\
apt-get install --no-install-recommends --assume-yes --quiet ca-certificates \
curl \
git \
libxml2-dev \
libxslt-dev \
libfreetype6-dev \
libjpeg62-turbo-dev \
libpng-dev \
libcurl4-gnutls-dev \
zlib1g-dev \
libzip-dev \
&& docker-php-ext-install -j$(nproc) iconv \
&& docker-php-ext-configure gd --with-freetype=/usr/include/ --with-jpeg=/usr/include/ \
&& docker-php-ext-install -j$(nproc) gd

RUN apt-get install -y libc-client-dev libkrb5-dev \
&& docker-php-ext-configure imap --with-kerberos --with-imap-ssl \
&& docker-php-ext-install imap

RUN docker-php-ext-install pdo_mysql \
&& docker-php-ext-install json \
&& docker-php-ext-install dom \
&& docker-php-ext-install curl \
&& docker-php-ext-install zip \
&& docker-php-ext-install intl \
&& docker-php-ext-install xml \
&& docker-php-ext-install xsl \
&& docker-php-ext-install fileinfo
RUN rm -rf /var/lib/apt/lists/*

RUN echo 'memory_limit = 512M' >> /usr/local/etc/php/php.ini

RUN a2enmod rewrite

# copy conf-file to /etc/apache2/sites-enabled/000-default.conf
RUN mkdir /files;
COPY ./setup.sh /files/setup.sh
ENTRYPOINT ["sh", "/files/setup.sh"]

Config und setup.sh kann nach eigenen Bedarf ersteltl werden. ich nutze localhost:

conf

<VirtualHost *:80>
ServerName localhost
ServerAlias www.localhost

DocumentRoot "/var/www/html/public"

RewriteEngine On
RewriteMap lc int:tolower

<Directory "/var/www/html/public">
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
DirectoryIndex index.php
</Directory>
</VirtualHost>

setup.sh

/usr/sbin/apache2ctl -D FOREGROUND

Hier könnten aber auch noch composer install und so eingebaut werden.

RSA-Keys und Zugriffsrechte

Nachdem ich wieder einmal Keys von Windows auf ein Linux-System umgezogen haben und wieder erstmal herausfinden musste wie die Rechte gesetzt sein müssen.. hier einmal ein kurzes Script dazu:

cd ~/.ssh
sudo chmod -R 0700 .
sudo chmod 0644 id_rsa.pub
sudo chmod 0600 id_rsa

CSS: Ränder die kürzer als die Box sind

Design-technisch sieht sowas ja immer echt hübsch aus. Das aber umzusetzen ist erstmal nicht ganz so einfach, da es keine fertige Lösung gibt. Hier muss mal wieder ein eigenes Element mit :before und einer absoluten Position helfen.

Absolute Postionen sind nicht wirklich toll, weil damit das Element aus dem Fluss der Elemente entfernt wird. Wenn man z.B. zwei Divs übereinander legen möchte ist es auch besser da CSS-Grid zu verwenden und beide mit der selben Startposition im Grid abzulegen.

Aber zurück zu den Rändern. Hier erstmal mit "absolute":

Links (80% Länge):

div.left:before {
content : "";
position: absolute;
left : 0;
top : 0;
height : 80%;
width : 50%;
border-left:5px solid #726E97;
}

Links (80% Länge und unten + oben Abstand):

div.left:before {
content : "";
position: absolute;
left : 0;
top : 10%;
height : 80%;
width : 50%;
border-left:5px solid #726E97;
}

CSS: Flexbox + Ellipsis

Manchmal sind ganz einfache Dinge sehr komplex. CSS-Ellipsis ist an sich einfach. Aber mit Flexbox kann es plötzlich dazu kommen, dass es einfach nicht funktioniert. Alles funktioniert nur die "..." sind nicht zusehen, weil es einfach alles zur Seite rausragt und die Breite hält.

.flex-child header{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

Die Lösung hier ist [url=]https://css-tricks.com/flexbox-truncated-text/min-width: 0;[/url].

Also:

.flex-child {
min-width: 0;
}

.flex-child header{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

Super schnelle Lösung.. aber wie sollte man da alleine drauf kommen, wenn man nur mal schnell Ellipsis einbauen will?

HP Omen G15 Gaming-Notebook... 0.38GHz

Es sieht gut aus. Bang und Olufsen Design. Keyboard leuchtet schön und es ist für ein Gaming Notebook schön leicht und handlich. Ok man muss erstmal etwas Software runterwerfen, aber dann steht einem und dem Spaß an Spielen nichts mehr im Weg. Genshin Impact installieren starten und die Power geht los.. mit 0,38GHz .. und nicht mehr. Alles ist langsam. Daten laden langsam und alles ruckelt vor sich hin. Ein Ryzen 4800h sollte an sich mehr liefern.
Zum Glück kennt Google 0.38Ghz direkt als Suchbegriff und kann einen direkt in viele Foren leiten, wo genau das Problem besprochen wird.

Also erstmal ein BIOS-Update. Wenn man ein neues Notebook kauft sollte ja klar sein, dass ein BIOS-Update zu den ersten Dingen gehört, die man damit tun würde. Gerade der normale Kunde... normale Noobs lieben BIOS-Updates.

Am Ende läuft wieder alles, die Katze hat sich beruhigt und fühlt sich nicht mehr durch die lauten Lüfter provoziert. Alles läuft nun mit .... 0.38Ghz.

Wichtig! Netzteil abmachen. Dann tacktet die CPU plötzlich auf 1.9GHz hoch.. dann auf 2.9Ghz im Spiel. Netzteil wieder anschließen und es geht auf über 4GHz hoch. Warum? Keine Ahnung liegt wohl irgendwie mit dem Ladevorgang zusammen.

Nun läuft es... aber viel zu viel Spannung für einen ruhigen Abend auf der Couch.. wobei.. was macht so einen Abend gemütlicher als ein BIOS-Update?

(Auch wenn BIOS-Updates heute echt einfach und sicher sind.. der alte Nervenkitzel auf alten Pentium und K6 Zeiten bleibt irgendwie)

Code Reviews

Code Reviews kosten Zeit. Nicht nur ein bisschen sondern wirklich viel Zeit. Ich guck mir alles an und versuche erstmal zu verstehen, was es tut. Wenn ich glaube es verstanden zu haben, am Besten noch mal kurz nachfragen oder in den Task gucken. Code-Style sollten automatisch geregelt sein, wenn dort was nicht stimmt hat ein Tool nicht richtig gearbeitet. Bei der Code Quality muss man sehr genau gucken und zwischen persönlichen Vorlieben und wirklich Sinnhaftigkeit unterscheiden.
Wenn die Verbesserungen reinkommen, gucke ich mir diese Änderungen wieder unter den selben Blickpunkten an. Fällt mir etwas in einem Code-Teil auf der nicht geändert wurde, kann nett fragen, ob der Entwickler das noch mal verbessern könnte. Was ganz sicher machen wird. Kommen die Änderungen wieder und mir fällt wieder etwas auf in einem Teil der von keiner der beiden Änderungen betroffen war, dann... dann ist das mein Problem und ich hab was falsch gemacht oder es ist so unbedeutend, dass es nicht geändert werden muss, ich mir aber für den nächsten Review vornehme darauf zu achten.

Natürlich gibt sehr komplexe Logiken, wo Probleme erst beim 10x rauf gucken auffallen, aber in so einem Fall ist es dann einfach Glück und der genutzten Logik geschuldet... 99% solcher Probleme fallen sonst erst in der Prod-Umgebung auf.

Docker mit der PowerShell

Das meiste findet man immer nur für die Bash. Aber wenn man Docker für Windows verwendet braucht man vieles für die PS. Ich habe hier mal ein paar kleine Dinge zusammen getragen.

Alle Container stoppen:

docker ps -aq | foreach {docker stop $_}

Alle (gestoppten) Container entfernen:

docker ps -aq | foreach {docker rm $_}

Alle (ungenutzen) Images entfernen:

docker images -qa | foreach {docker rmi -f $_}

Alle (ungenutzen) Volumes entfernen:

docker volume ls -qf dangling="true" | foreach {docker volume rm $_}

Alle (custom) Netzwerke entfernen:

docker network ls -q --filter type=custom | foreach {docker network rm $_}

Shopware 6: Docker Dev-Environment

Mein momentanes Dev-Setup für Web-Installer Installation von Shopware 6.

Verzeichnisse und Dateien:

containerData/
apache/
Dockerfile
my_vhost.conf
setup.sh
db_vol/
sw/
...
docker-compose.yml

Web-Installer Dateien kommen in das sw-Verzeichnis.

Dockerfile

FROM php:7.2-apache

RUN apt-get update &&\
apt-get install --no-install-recommends --assume-yes --quiet ca-certificates \
curl \
git \
libxml2-dev \
libxslt-dev \
libfreetype6-dev \
libjpeg62-turbo-dev \
libpng-dev \
libcurl4-gnutls-dev \
zlib1g-dev \
&& docker-php-ext-install -j$(nproc) iconv \
&& docker-php-ext-configure gd --with-freetype-dir=/usr/include/ --with-jpeg-dir=/usr/include/ \
&& docker-php-ext-install -j$(nproc) gd

RUN apt-get install -y libc-client-dev libkrb5-dev \
&& docker-php-ext-configure imap --with-kerberos --with-imap-ssl \
&& docker-php-ext-install imap

RUN docker-php-ext-install pdo_mysql \
&& docker-php-ext-install json \
&& docker-php-ext-install dom \
&& docker-php-ext-install curl \
&& docker-php-ext-install zip \
&& docker-php-ext-install intl \
&& docker-php-ext-install xml \
&& docker-php-ext-install xsl
RUN rm -rf /var/lib/apt/lists/*

#RUN pecl install xdebug-2.8.0 && docker-php-ext-enable xdebug
#RUN echo 'zend_extension="/usr/local/lib/php/extensions/no-debug-non-zts-20151012/xdebug.so"' >> /usr/local/etc/php/php.ini
#RUN echo 'xdebug.remote_port=9000' >> /usr/local/etc/php/php.ini
#RUN echo 'xdebug.remote_enable=1' >> /usr/local/etc/php/php.ini
#RUN echo 'xdebug.remote_host=host.docker.internal' >> /usr/local/etc/php/php.ini

RUN echo 'memory_limit = 512M' >> /usr/local/etc/php/php.ini

RUN a2enmod rewrite

# copy conf-file to /etc/apache2/sites-enabled/000-default.conf
RUN mkdir /files;
COPY ./setup.sh /files/setup.sh
ENTRYPOINT ["sh", "/files/setup.sh"]

my_vhost.conf

<VirtualHost *:80>
ServerName localhost
ServerAlias www.localhost

DocumentRoot "/var/www/html/public"

RewriteEngine On
RewriteMap lc int:tolower

<Directory "/var/www/html/public">
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
DirectoryIndex index.php
</Directory>
</VirtualHost>

setup.sh

/usr/sbin/apache2ctl -D FOREGROUND

docker-compose.yml

version: '3.3'

services:
sw_mysql:
image: bitnami/mysql:5.7
environment:
MYSQL_ROOT_PASSWORD: root
MYSQL_DATABASE: sw
MYSQL_USER: sw
MYSQL_PASSWORD: sw
volumes:
- ./db_vol/:/bitnami/mysql/data

sw_http:
build: ./containerData/apache
volumes:
- ./containerData/apache/my_vhost.conf:/etc/apache2/sites-enabled/000-default.conf:rw
- ./sw:/var/www/html:rw,delegated
ports:
- 80:80
- 443:443

mail:
image: mailhog/mailhog
ports:
- 8025:8025

adminer:
image: adminer
ports:
- 8082:8080
depends_on:
- sw_mysql

Ich musste mir eine sw2-Datenbank anlegen über root/root, aber an sich sollte es wie in meinem SW5-Environment auf mit der sw-Datenbank und sw/sw gehen.

Docker: PHP IMAP installieren

Wenn man Probleme hat die PHP IMAP-Erweiterung unter Docker zu installieren, kann dieses helfen:

RUN apt-get install -y libc-client-dev libkrb5-dev \
&& docker-php-ext-configure imap --with-kerberos --with-imap-ssl \
&& docker-php-ext-install imap

Bei mir und meiner Shopware 6 Dev-Umgebung hat es jedenfalls gut geholfen.

Es gab beim Bauen des Images vorher diesen Fehler:

utf8_mime2text() has new signature, but U8T_CANONICAL is missing. This should not happen. Check config.log for additional information.

JavaScript: Prettier Formatierung in PHPStorm

Es gibt viele Code-Styling Presets die man einfach in PHPStorm einstellen kann, wie PSR-2 für PHP. Für JavaScript gibt es da wenige und z.B. Prettier wird auch erstmal via NPM installiert.

Dann kann das Problem kommen, dass man Node nicht unter Windows laufen lässt sondern in WSL. Aber da hat PHPStorm zum Glück eine eine fertige Framework-Integration für.

Damit kann Prettier auch für die normale Reformatierung von PHPStorm mit JS-Dateien ausgewählt werden.

JavaScript Syntax für PHP-Devs

array_merge:

let a = [23, 42, 69];
let b = [112, 256 ...a];

isset() oder ??:

let data = {a: 2, b: 3};
let result = a?.c ?? 0;

Object-Felder als Arguments verwenden:

let data = [
{
id: 0,
name: 'test'
}
];

data.forEach(
({id, name}, idx) => {
console.log(id + ' is named as ' + name + ' and has the index ' + idx);
}
);

GitKraken und Hooks unter Windows

Wo findet man die für Hooks benötigte sh.exe aus der normalen Git-Installation?

C:\Users\__your_user__\AppData\Local\Programs\Git\bin\sh.exe

Die Datei in den Preferences auswählen und dann läuft es.

Webcams.. teuer, oft schlecht

Ich hatte lange Zeit eine Microsoft Lifecam HD-3000 als einzige Webcam. Dann kam Corona, Homeoffice und Kontakteinschränkungen. Die Webcam der ThinkPads sind aber wirklich schlecht und der Winkel nie ideal, wenn man mit einem externen Monitor arbeitet. Wo sonst Audio bei Discord reichte, wollte man gerne auch die Personen mal wieder sehen und alle möglichen Leute fragen auch wegen Webcams.
Die Microsoft Webcam ist schon wirklich viele Jahre alt und war teilweise für 20 Euro zu haben. Plötzlich lagen die Preise bei 40-60 Euro. Viel zu viel für die Qualität, die die Webcam liefert, war meine Einschätzung. Logitech Webcams waren noch viel stärker im Preis gestiegen. Es gab noch Webcams für 20-30 Euro, die auch HD liefern sollten. Mit Rabatt dachte ich, könne man da nicht viel falsch machen. Doch die Webcams hatten am Ende doch einige Probleme:

- Defekte Zeilen im Sensor
- Schlechte Farbdarstellung
- Mittelmässige Schärfe
- Zwar kippbar aber nicht drehbar (also schnell eine eigene Halterung dafür gedruckt)
- Zu wenig Weitwinkel beim Objektiv

Was ich noch liegen hatte, war eine ganz brauchbare IP Kamera. Aber da die nur per Ethernet angeschlossen werden können, ja keine alternative zu einer Webcam.. oder?

Doch! Windows kann auch ONVIF IP Kameras nun einbinden und diese als normale Kamera nutzen. In der Kamera-App, in Skype und allgemein.

Man muss unter den Geräten einfach ein neues hinzufügen und kann dort nach IP Kameras suchen lassen. Wie hier beschrieben.

Gut geeignet für Meetingräume oder auch wenn man größere fest installierte Dinge präsentieren möchte. Durch S- oder C-Mount sind Objektive auch austauschbar.

Am Ende kommt nun aber eine teurere Microsoft Webcam zum Einsatz. Wenn das Bild der alten und der neuen Webcam nebeneinander sieht, ist der 60 Euro Unterschied wirklich deutlich zu sehen und man hat auch wieder mehr Weitwinkel.

User	annonyme	Date	2022-11-19 12:50
Tags	deutschebahn, docker, hannes pries, ice, linux, reisen, tipp, ubuntu, wifionice, wlan

User	annonyme	Date	2022-11-11 18:52
Tags	hannes pries, md5, media filename, no no, shopware, sw6, tipp

User	annonyme	Date	2022-11-05 18:30
Tags	3d druck, creality, ender 3, fan duct, hannes pries, spider hotend

User	annonyme	Date	2022-08-03 21:42
Tags	ecommerce, hannes pries, shopware, sql, sw6, variants

Hannes Pries - Web/Shopware/Java-Developer BlogWeil es immer eine simple Lösung gibt!

Hannes Pries - Web/Shopware/Java-Developer Blog
Weil es immer eine simple Lösung gibt!