Während ein Block mit cacheable=”false” dazu führen kann, dass die gesamte Seite nicht mehr über den Full Page Cache ausgeliefert wird, bleibt die eigentliche Seite bei Private Content weiterhin cachebar, nur einzelne benutzerspezifische Bereiche werden separat geladen und dynamisch ausgegeben.

Typische Beispiele sind der Warenkorb, der Kundenname oder die Wunschliste.

Das Prinzip dahinter ist einfach zu erklären: Cachebarer Inhalt kommt aus dem Full Page Cache, individueller Inhalt wird unabhängig davon nachgeladen.

cacheable=”false” sollte daher nicht “einfach mal so” verwendet werden, nur weil ein einzelner Bereich dynamisch ist. Private Content ermöglicht in vielen Fällen die sauberere Lösung, ohne die Cache Wirkung der gesamten Seite zu verlieren.

Ein einfaches Beispiel ist eine eigene Customer Section. Die PHP Klasse liefert die individuellen Daten:

namespace Vendor\Module\CustomerData;

use Magento\Customer\CustomerData\SectionSourceInterface;

class Example implements SectionSourceInterface
{
    public function getSectionData(): array
    {
        return [
            'message' => 'Dieser Inhalt ist individuell'
        ];
    }
}

Die Section wird anschließend in der etc/frontend/di.xml registriert:

<type name="Magento\Customer\CustomerData\SectionPoolInterface">
    <arguments>
        <argument name="sectionSourceMap" xsi:type="array">
            <item name="example" xsi:type="string">Vendor\Module\CustomerData\Example</item>
        </argument>
    </arguments>
</type>

Unter Hyvä stehen die Customer Sections über das Ereignis private-content-loaded zur Verfügung:

<div
    x-data="{ message: '' }"
    @private-content-loaded.window="
        message = $event.detail.data.example?.message || ''
    "
>
    <span x-text="message"></span>
</div>

Die Seite selbst bleibt dabei im Full Page Cache. Nur die Daten der Customer Section werden unabhängig davon im Browser bereitgestellt und können individuell für den jeweiligen Besucher ausgegeben werden.

Dafür nutzt Hyvä die native Speculation Rules API des Browsers und setzt standardmäßig auf prefetch. Dabei wird das HTML einer wahrscheinlichen Zielseite im Hintergrund vorgeladen, ohne die Seite bereits vollständig zu rendern. Beim anschließenden Klick kann der Browser dadurch deutlich schneller reagieren, weil ein Teil der Daten bereits vorhanden ist.

Alternativ ist auch prerender möglich, wobei die Zielseite sogar vollständig im Hintergrund aufgebaut wird. Besonders bei Kategorie und Produktnavigation kann sich ein Hyvä Shop dadurch nochmals spürbar direkter bzw. schneller anfühlen.

Das klingt interessant, Sie nutzen aber ein anderes Theme für Ihren Magento 2 Shop? Melden Sie sich gerne bei mir, dann können wir schauen, ob eine Umstellung auf Hyvä für Ihren Shop sinnvoll ist.

Aura of Clarity erweitert die Produktsuche in Magento 2 um semantische Suche, Product Knowledge, Intent Erkennung und Bildsuche. Die Suche versucht also nicht nur, eingegebene Wörter wiederzufinden, sondern die eigentliche Absicht hinter der Anfrage zu erkennen.

Auch Tippfehler, umgangssprachliche Begriffe und shopinternes Wissen können berücksichtigt werden. Zusätzlich können Kunden ein Bild hochladen, wenn sie die genaue Produktbezeichnung nicht kennen.

Wenn Kunden die Suche nutzen, werden dafür lokale Sprachmodelle direkt auf dem Shopserver verwendet. Kundensuchanfragen werden nicht an einen externen KI Dienst übertragen.

Aura of Clarity ist für Magento 2 Shops mit Hyvä entwickelt. Falls aktuell noch kein Hyvä Theme eingesetzt wird, können wir gerne gemeinsam prüfen, ob eine Umstellung auf das Hyvä Theme in Ihrem konkreten Fall sinnvoll wäre.

Technisch umgesetzt von Ihrem Magento Experten, angeboten unter dem Dach meiner Agentur (Vermonta).

Mehr Informationen zu Funktionen und Technik sowie die Möglichkeit zum Erwerb gibt es hier: Aura of Clarity für Magento 2 und Hyvä

Gerade bei bestehenden Child Themes ist es deshalb sinnvoll, die vorhandene Tailwind Konfiguration gezielt in die neue Struktur zu überführen, da es sonst zu Layoutfehlern kommen kann.

1. Upgrade Helper installieren

Damit der Befehl update-to-tailwind-v4.js zur Verfügung steht, müssen die Hyvä Upgrade Helper Tools zuerst per Composer installiert werden.

composer require --dev hyva-themes/upgrade-helper-tools:dev-main

2. Neue Tailwind Struktur ins Theme übernehmen

Nach der Installation steht das Script nun zur Verfügung. Damit wird der bisherige Tailwind Ordner gesichert und die neue Struktur ins Theme kopiert.

./vendor/bin/update-to-tailwind-v4.js app/design/frontend/Vendor/theme

Falls der Wrapper unter vendor/bin nicht vorhanden ist, kann das Script auch direkt aus dem Paket aufgerufen werden:

./vendor/hyva-themes/upgrade-helper-tools/bin/update-to-tailwind-v4.js app/design/frontend/Vendor/theme

Danach liegt im Theme ein neuer web/tailwind-Ordner vor. Der bisherige Stand wird zusätzlich als Backup abgelegt.

3. hyva.config.json prüfen

In der hyva.config.json wird unter anderem festgelegt, welche Quellen für Tailwind berücksichtigt werden. Bei einem Child Theme sollte dort auch das Parent Theme eingebunden sein.

{
  "tailwind": {
    "include": [
      {
        "src": "vendor/hyva-themes/magento2-default-theme"
      }
    ],
    "exclude": []
  }
}

Wenn dort noch ein Beispielwert wie example_src steht, muss dieser durch src ersetzt werden.

4. tailwind-source.css als zentrale Datei verwenden

Die eigentliche Build Datei ist jetzt tailwind-source.css. Dort werden die Tailwind Basis, die Theme Quellen und die generierten Dateien eingebunden.

@import "@hyva-themes/hyva-modules/css";
@import "tailwindcss" source(none);

@source "../../**/*.phtml";
@source "../../**/*.xml";

@import "./generated/hyva-source.css";
@import "./generated/hyva-tokens.css";

Zusätzliche Theme Werte wie Fonts, Container oder eigene Utilities können ebenfalls dort ergänzt werden.

5. Eigene Werte aus dem bisherigen Theme übernehmen

Bestehende Child Themes enthalten oft eigene Farben, Fonts, Container Abstände oder Hilfsklassen. Diese Werte müssen nach dem Update an die neue Struktur angepasst werden.

Je nach Inhalt landen sie entweder in der hyva.config.json oder direkt in der tailwind-source.css.

Ein einfaches Beispiel für eigene Ergänzungen in der CSS Datei:

@theme {
    --font-sans: "Segoe UI", "Helvetica Neue", "Arial", "sans-serif";
}

@utility container {
    margin-inline: auto;
    padding-inline: 1.5rem;
}

6. Pakete im Tailwind Ordner aktualisieren

Im Theme Ordner unter web/tailwind sollten die aktuellen Pakete für Hyvä und Tailwind 4 installiert sein.

cd app/design/frontend/Vendor/theme/web/tailwind
npm install
npm install @hyva-themes/hyva-modules@latest tailwindcss@latest @tailwindcss/cli@latest

7. Build ausführen

Danach kann der Build wie gewohnt über den Tailwind Ordner des Themes laufen.

npm --prefix app/design/frontend/Vendor/theme/web/tailwind run build

Je nach Setup kann es zusätzlich sinnvoll sein, die Hyvä Dateien einmal neu zu generieren:

bin/magento hyva:config:generate
cd app/design/frontend/Vendor/theme/web/tailwind
npx hyva-sources
npx hyva-tokens
npm run build

Fazit

Für das Update eines Hyvä Themes von einer Version < 1.4 sind vor allem diese Punkte wichtig:

• die neue Tailwind Struktur ins Child Theme übernehmen
• hyva.config.json korrekt setzen
• tailwind-source.css als zentrale Build Datei nutzen
• bestehende Theme Werte sauber in die neue Struktur übertragen

Wer bereits ein eigenes Child Theme mit angepasster Tailwind Konfiguration im Einsatz hat, sollte diese Umstellung bewusst durchführen und nicht nur die neuen Dateien kopieren. Dann lässt sich das Theme sauber unter Hyvä 1.4.x weiterführen.

Die Ursache liegt darin, dass in neuen Versionen von Hyvä der buil-prod Befehl ersetzt wurde. Hyvä 1.1.x nutzt noch build-prod, spätere Hyvä Versionen nutzen nur noch build. Der npm build Befehl könnte also so aussehen:

npm --prefix app/design/frontend/Vendor/hyva_child/web/tailwind run build

Der folgende Code kann direkt in z.B. eine CMS Seite oder einen Block eingefügt werden:

<div class="relative max-w-screen-lg mx-auto">
  <!-- Slider Container -->
  <div id="videoSlider" class="snap-x snap-mandatory flex overflow-x-auto space-x-6 py-6 scroll-smooth">
    
    <div class="snap-start flex-shrink-0 w-full grid grid-cols-1 gap-6 lg:grid-cols-3">
      <!-- Video 1 -->
		<div>
			<div class="aspect-video mb-2">
			<iframe src="https://www.youtube-nocookie.com/embed/12345678" allowfullscreen class="w-full h-full"></iframe>
        </div>
        <h3 class="text-lg font-semibold text-white">Video 1 Titel</h3>
        <p class="text-sm text-white">Kurze Beschreibung zu Video 1</p>
      </div>
		<!-- Wiederholen Sie diesen Bereich so oft wie gewuenscht -->
    </div>
	
	<!-- Slide 2 -->
    <div class="snap-start flex-shrink-0 w-full grid grid-cols-1 gap-6 lg:grid-cols-3">...</div>
	
	<!-- Slide 3 -->
    <div class="snap-start flex-shrink-0 w-full grid grid-cols-1 gap-6 lg:grid-cols-3">...</div>
	
	<!-- Slide 4 -->
    <div class="snap-start flex-shrink-0 w-full grid grid-cols-1 gap-6 lg:grid-cols-3">...</div>
  </div>

  <!-- Navigations Buttons -->
  <div class="flex justify-between mt-4">
    <button onclick="moveSlide(-1)" class="bg-orange text-white px-4 py-2 rounded">Zurück</button>
    <button onclick="moveSlide(1)" class="bg-orange text-white px-4 py-2 rounded">Weiter</button>
  </div>
</div>

<!-- JS -->
<script>
  const slider = document.getElementById('videoSlider');
  const slides = slider.children;
  let currentSlide = 0;

  function moveSlide(direction) {
    const totalSlides = slides.length;
    currentSlide += direction;

    if (currentSlide < 0) currentSlide = 0;
    if (currentSlide >= totalSlides) currentSlide = totalSlides - 1;

    const target = slides[currentSlide];
    target.scrollIntoView({ behavior: 'smooth', inline: 'start' });
  }
</script>

Das Problem können Sie folgendermaßen lösen:

Gehen Sie in den Tailwind Ordner Ihres Hyvä Child Themes (z.B. app/design/frontend/Vendor/Your_Child_Theme/web/tailwind/) und führen Sie dort den folgenden Befehl aus:

npm install

Nun sollte Ihr npm build Befehl wieder problemlos funktionieren.

Das kann dann z.B. so aussehen: https://Ihredomain.com/product.html#159=227&146=174

Das Problem tritt bei allen Hyvä Versionen < 1.3.10 auf. Die Lösung ist relativ einfach, vewenden Sie den folgenden Patch, oder aktualisieren Sie Ihre Hyvä Version auf mindestens 1.3.10.

diff --git a/Magento_ConfigurableProduct/templates/product/view/type/options/js/configurable-options.phtml b/Magento_ConfigurableProduct/templates/product/view/type/options/js/configurable-options.phtml
index 99550c30d3b7c1f22cf2e2c28dcc9990010d6abf..bc8c349260f2366d80b30cdfdcf642560b5d0137 100644
--- a/Magento_ConfigurableProduct/templates/product/view/type/options/js/configurable-options.phtml
+++ b/Magento_ConfigurableProduct/templates/product/view/type/options/js/configurable-options.phtml
@@ -47,6 +47,8 @@ $currentProduct = $viewModels->require(CurrentProduct::class);
                             this.changeOption(attributeId, value + '');
                         }
                     }
+                    this.preselectQuerystringItems();
+                    this.preselectLocationHashItems();
                 });
             },
             findSimpleIndex() {
@@ -316,8 +318,6 @@ $currentProduct = $viewModels->require(CurrentProduct::class);
                 <?php if ($currentProduct->exists()): /* Only preconfigure the main product on product detail pages */ ?>
                 if (this.productId === '<?= (int) $currentProduct->get()->getEntityId() ?>') {
                     this.preselectCartItems(data);
-                    this.preselectQuerystringItems();
-                    this.preselectLocationHashItems();
                 }
                 <?php endif; ?>
             },

Wenn Sie Ihre Inhalte nun erneut deployen und Ihr konfigurierbares Produkt erneut aufrufen, sind die Optionen nun vorbelegt.

Um das Problem zum lösen, überschreiben Sie vendor/hyva-themes/magento2-default-theme/Magento_Paypal/templates/express/shortcut_button.phtml in Ihrem Hyvä Child Theme und entfernen den folgenden Code aus diesem Template:

'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',

Der Code kann mehrfach im Template vorkommen. Nach dem Entfernen und erneutem Deployment sollte der PayPal Express Button nun ordnungsgemäß funktionieren.

Hinweis: Zum aktuellen Datum (21.02.2025) ist der Bug dem Hyvä Team bereits bekannt und der Fix ist für ein zukünftiges Hyvä Theme Release bereits eingeplant. Wenn Sie nicht warten möchten, können Sie mit der obigen Anpassung das Problem bereits vorab lösen.

composer require hyva-themes/magento2-firegento-magesetup
php bin/magento setup:upgrade

Nun funktioniert Magesetup_Firegento ohne weiteres Zutun mit dem Hyvä Theme.