Marketplace Redirect: Storefront

Storefront-Integration von Marketplace Redirect: Darstellung der Buttons, Twig-Hooks und -Funktionen, Übersetzungen, Content Security Policy.

English Version

Zurück zur Übersicht

Marketplace Redirect: Storefront

Diese Dokumentation bezieht sich immer auf die aktuellste veröffentlichte Version.

Der Button

Auf der Produktseite tritt der externe Button an die Stelle des Warenkorb-Blocks. Er ist wie der Marktplatz gestaltet, zu dem er führt:

Marktplatz	Aussehen	Beschriftung (DE)	Beschriftung (EN)
Amazon	Amazon-Gelb mit Warenkorb-Symbol	Bei Amazon kaufen	Buy on Amazon
Shopware Store	Weiß mit Shopware-Blau, das Shopware-Logo ersetzt das Wort	Im Shopware Store holen	Get it in the Shopware Store

Die Farben sind bewusst feste Werte: Die Primärfarbe eines Themes ist die falsche für einen Button, der unübersehbar auf Amazon hinweisen soll. Hover-, Active- und Fokus-Zustände folgen den Bootstrap-Button-Variablen. Der Fokusring ist zweifarbig (dunkle Linie auf weißem Rand), damit er auf hellem wie dunklem Hintergrund erkennbar bleibt.

Der Link öffnet in einem neuen Tab mit rel="noopener noreferrer nofollow". Ein nur für Screenreader sichtbarer Zusatz („öffnet eine externe Website“) kündigt den Wechsel an, das Logo trägt den Alt-Text „Shopware“, damit der Satz vollständig bleibt. Die Beschriftungen kommen aus den Übersetzungen des Plugins (Domain messages) und lassen sich im Host überschreiben:

Schlüssel	Verwendung
`mmd_sylius_marketplace_redirect.shop.buy_on_amazon`	Amazon-Button
`mmd_sylius_marketplace_redirect.shop.buy_in_shopware_store_before` und `..._after`	Text vor und nach dem Logo im Store-Button
`mmd_sylius_marketplace_redirect.shop.opens_external`	Zusatz für Screenreader

Das Template des Buttons liegt unter @MmdSyliusMarketplaceRedirectPlugin/shop/product/show/content/info/summary/marketplace_redirect.html.twig. Der Link trägt die CSS-Klassen mmd-marketplace-button--amazon bzw. mmd-marketplace-button--shopware-store sowie die Attribute data-marketplace-type und data-test-marketplace-redirect.

Marken: Das Shopware-Logo ist eine Marke der Shopware AG und wird gezeigt, weil die Plugins in deren Store verkauft werden. Das Amazon-Logo wird nicht verwendet, nur ein generisches Warenkorb-Symbol (Tabler Icons, MIT) und ein Gelb, das dem Amazon-Button ähnelt. Ob du beides in deinem Shop zeigen darfst, musst du selbst beurteilen.

Das Shopware-Logo ist als Data-URI im Template eingebettet, du brauchst dafür kein assets:install. Fehlt die Logo-Datei, zeigt der Button stattdessen das Wort „Shopware“.

Content Security Policy

Ein Host mit strenger Content Security Policy braucht img-src data: (für das Logo) und style-src 'unsafe-inline' (für das kleine Inline-<style> des Buttons). Fehlt eines davon, gehen das Logo oder die Farben verloren.

Twig-Hooks

Das Bundle trägt seine Hooks selbst in die Konfiguration von sylius_twig_hooks ein, du musst nichts importieren.

Hook	Hookable	Priorität	Zweck
`sylius_shop.product.show.content.info.summary`	`mmd_marketplace_redirect`	100	Der externe Button auf der Produktseite
`sylius_admin.product.create.content.form.sections.general`	`mmd_marketplace_link`	-100	Karte „External purchase“ beim Anlegen eines Produkts
`sylius_admin.product.update.content.form.sections.general`	`mmd_marketplace_link`	-100	Dieselbe Karte beim Bearbeiten
`sylius_admin.marketplace_redirect_settings.index.content.header.title_block`	`title`	100	Titelzeile der Einstellungsliste mit der installierten Plugin-Version

Den Warenkorb-Block selbst schaltet kein Hook ab, sondern ein dekorierter Hook-Renderer, siehe Technik. Dadurch wird kein Sylius-Template kopiert oder überschrieben, und es funktioniert unter Sylius 2.2 und 2.3.

Twig-Funktionen

Funktion	Rückgabe	Beschreibung
`mmd_marketplace_redirect(product)`	`MarketplaceRedirect` oder `null`	Liefert ein Objekt mit `type` (Enum, Wert über `type.value`), `url` und `labelKey`. `null` ohne Produkt, ohne Link oder in einem nicht freigeschalteten Channel
`mmd_marketplace_redirect_plugin_version()`	String	Installierte Plugin-Version aus Composer, bei einem Entwicklungs-Checkout mit kurzem Commit-Hash (zum Beispiel `dev-main@ac25695`), `dev`, wenn Composer das Paket nicht kennt

Mit mmd_marketplace_redirect() baust du in deinem eigenen Template, etwa in einer Produktliste, eine eigene Darstellung:

{% set redirect = mmd_marketplace_redirect(product) %}
{% if redirect is not null %}
    <a href="{{ redirect.url }}" target="_blank" rel="noopener noreferrer nofollow">
        {{ redirect.labelKey|trans }}
    </a>
{% endif %}

Eigenes Theme

Der Warenkorb-Block wird unabhängig vom Theme abgeschaltet: Sobald ein Produkt einen Link hat, rendert der Hookable add_to_cart des Hooks sylius_shop.product.show.content.info.summary nichts mehr. Ein Theme, das diesen Hook nicht verwendet oder das Template des Buttons ersetzt, muss den externen Button selbst darstellen. Dafür nutzt du die Twig-Funktion mmd_marketplace_redirect() (siehe oben).