Kundenkonto-Menüpunkt "Meine Punkte" ergänzen

Die Historie-Seite (Kapitel 45) ist jetzt erreichbar, aber von nirgendwo aus verlinkt - ein Kunde müsste die URL erraten. Dieses Kapitel ergänzt einen Navigationslink in der "Mein Konto"-Sidebar, die dank <update handle="customer_account"/> aus Kapitel 51 bereits auf der Historie-Seite sichtbar ist, sowie eine Punktestand-Zusammenfassung auf dem Konto-Dashboard - letztere per Wiederverwendung des PointsBalance-ViewModels aus Kapitel 48, ohne eine einzige neue PHP-Klasse.

Den Navigationslink hinzufügen

Core-Module wie Magento_Sales ("Meine Bestellungen") und Magento_Catalog ("Merkzettel") fügen ihre Links exakt so hinzu: als Magento\Framework\View\Element\Html\Link\Current-Block im Container customer-account-navigation, registriert in default.xml, damit der Link auf jeder "Mein Konto"-Unterseite erscheint, nicht nur auf der Historie-Seite selbst:

app/code/Mironsoft/Loyalty/view/frontend/layout/default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="customer-account-navigation">
            <block class="Magento\Framework\View\Element\Html\Link\Current"
                   name="customer-account-navigation-loyalty-history-link"
                   after="customer-account-navigation-orders-link">
                <arguments>
                    <argument name="path" xsi:type="string">mironsoft_loyalty/history/index</argument>
                    <argument name="label" xsi:type="string" translate="true">My Points</argument>
                </arguments>
            </block>
        </referenceContainer>
    </body>
</page>

Tipp: Der path-Wert nutzt bewusst die technische Route mironsoft_loyalty/history/index aus Kapitel 45, nicht die hübsche URL aus Kapitel 46. "Mein Konto"-Seiten tragen ohnehin standardmäßig ein noindex (siehe die Robots-Meta-Einstellungen unter Content > Design > Configuration) und werden nie extern verlinkt - die SEO-Motivation hinter der hübschen URL aus Kapitel 46 greift hier schlicht nicht. Html\Link\Current setzt zudem automatisch eine class="current", sobald der aktuelle Request genau diesem Pfad entspricht - das wird in Kapitel 54 für aria-current wieder aufgegriffen.

Der name/after-Verweis - und warum er nicht zwingend ist

after="customer-account-navigation-orders-link" ist ein optionaler Positionierungs-Hinweis (Magentos Layout-Sortiersystem, dasselbe Prinzip wie sortOrder bei Plugins, Kapitel 43) - ohne ihn würde der Link einfach irgendwo im Container landen, meist ans Ende. Der exakte Block-Name des Bestellungen-Links kann sich zwischen Magento-Minor-Versionen leicht unterscheiden; im Zweifel hilft bin/magento dev:di:info nicht weiter (das ist ein Layout-, kein DI-Konzept) - stattdessen zeigt view-source: auf der ausgelieferten Seite die tatsächlich gerenderten Block-Namen als HTML-Kommentare, sofern Template-Hints aktiviert sind (Stores > Configuration > Advanced > Developer > Debug).

Punktestand auf dem Dashboard: Wiederverwendung statt Neubau

Das Kunden-Dashboard (Magento_Customer, Layout-Handle customer_account_index) bekommt eine zweite Instanz des PointsBalance-ViewModels aus Kapitel 48 - genau das war der Grund, diesen ViewModel dort bewusst ohne Kopplung an eine bestimmte Seite zu bauen:

app/code/Mironsoft/Loyalty/view/frontend/layout/customer_account_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\Template"
                   name="loyalty.points.balance.dashboard"
                   template="Mironsoft_Loyalty::widget/points-balance.phtml"
                   before="-">
                <arguments>
                    <argument name="view_model" xsi:type="object">Mironsoft\Loyalty\ViewModel\PointsBalance</argument>
                </arguments>
            </block>
        </referenceContainer>
    </body>
</page>

Zwei verschiedene Block-name-Werte (loyalty.points.balance aus Kapitel 51 vs. loyalty.points.balance.dashboard hier), aber dasselbe Template und derselbe ViewModel - Magento verlangt eindeutige Block-Namen pro Seite, nicht pro Modul, und zwei völlig unabhängige Seiten dürfen denselben ViewModel beliebig oft referenzieren.

Achtung: before="-" platziert den Block als ersten Child im content-Container - bei einem stark durch andere Module erweiterten Dashboard (Bestellstatus-Widgets, Newsletter-Box, ...) kann das zu einem unerwarteten Positionierungskonflikt führen, wenn ein anderes Modul denselben Trick anwendet. In der Praxis lohnt sich vor einem produktiven Rollout ein Blick mit aktivierten Template-Hints auf die tatsächliche Reihenfolge, statt sich blind auf before="-" zu verlassen.

Tipp: Kapitel 53 zeigt jetzt endlich die eigentlichen .phtml-Templates hinter all diesen Layout-Dateien - Tailwind-Klassen im Hyvä-Stil dieses Projekts, responsive und mit Alpine.js für die kleinen interaktiven Teile.