Blog: Latest Entries (15):



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.

bbcode-image


bbcode-image


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?

bbcode-image


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.

bbcode-image


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....


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.

bbcode-image


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.


<div class=""flex-container">
<div class="flex-child">
<header>LONG TEXT</header>
</div>
</div>



.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.

Older posts:

Möchtest Du AdSense-Werbung erlauben und mir damit helfen die laufenden Kosten des Blogs tragen zu können?