Marketplace Redirect: Storefront

Storefront integration of Marketplace Redirect: how the buttons look, Twig hooks and functions, translations, Content Security Policy.

Deutsche Version

Back to overview

Marketplace Redirect: Storefront

This documentation always describes the latest published version.

The button

On the product page the external button takes the place of the cart block. It is styled like the marketplace it leads to:

Marketplace	Look	Label (EN)	Label (DE)
Amazon	Amazon yellow with a cart icon	Buy on Amazon	Bei Amazon kaufen
Shopware Store	White with Shopware blue, the Shopware logo replaces the word	Get it in the Shopware Store	Im Shopware Store holen

The colours are fixed values on purpose: a theme's primary colour is the wrong one for a button that is meant to point unmistakably to Amazon. Hover, active and focus states follow the Bootstrap button variables. The focus ring is two-tone (a dark line on a white band) so it stays visible on light and dark backgrounds.

The link opens in a new tab with rel="noopener noreferrer nofollow". A visually hidden addition ("opens an external website") announces the change to screen readers, and the logo carries the alt text "Shopware" so the sentence stays whole. The labels come from the plugin's translations (domain messages) and can be overridden in the host:

Key	Used for
`mmd_sylius_marketplace_redirect.shop.buy_on_amazon`	Amazon button
`mmd_sylius_marketplace_redirect.shop.buy_in_shopware_store_before` and `..._after`	Text before and after the logo in the Store button
`mmd_sylius_marketplace_redirect.shop.opens_external`	Addition for screen readers

The button template is @MmdSyliusMarketplaceRedirectPlugin/shop/product/show/content/info/summary/marketplace_redirect.html.twig. The link carries the CSS classes mmd-marketplace-button--amazon or mmd-marketplace-button--shopware-store and the attributes data-marketplace-type and data-test-marketplace-redirect.

Trademarks: The Shopware logo is a trademark of Shopware AG and is shown because the plugins are sold in their Store. Amazon's logo is not used, only a generic cart icon (Tabler Icons, MIT) and a yellow that resembles Amazon's button. Whether you may show either in your shop is for you to judge.

The Shopware logo is embedded in the template as a data URI, so you need no assets:install for it. If the logo file is missing, the button shows the word "Shopware" instead.

Content Security Policy

A host with a strict Content Security Policy needs img-src data: (for the logo) and style-src 'unsafe-inline' (for the button's small inline <style>). If either is missing, the logo or the colours are lost.

Twig hooks

The bundle adds its hooks to the sylius_twig_hooks configuration itself, you do not have to import anything.

Hook	Hookable	Priority	Purpose
`sylius_shop.product.show.content.info.summary`	`mmd_marketplace_redirect`	100	The external button on the product page
`sylius_admin.product.create.content.form.sections.general`	`mmd_marketplace_link`	-100	The "External purchase" card when creating a product
`sylius_admin.product.update.content.form.sections.general`	`mmd_marketplace_link`	-100	The same card when editing
`sylius_admin.marketplace_redirect_settings.index.content.header.title_block`	`title`	100	Title row of the settings list, showing the installed plugin version

No hook switches off the cart block itself, a decorated hook renderer does, see Technical. That way no Sylius template is copied or overridden, and it works on Sylius 2.2 and 2.3.

Twig functions

Function	Returns	Description
`mmd_marketplace_redirect(product)`	`MarketplaceRedirect` or `null`	Returns an object with `type` (enum, value via `type.value`), `url` and `labelKey`. `null` without a product, without a link or in a channel that is not switched on
`mmd_marketplace_redirect_plugin_version()`	string	Installed plugin version from Composer, with the short commit hash for a development checkout (for example `dev-main@ac25695`), `dev` if Composer does not know the package

With mmd_marketplace_redirect() you build your own presentation in your own template, for example in a product list:

{% 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 %}

Your own theme

The cart block is switched off independently of the theme: as soon as a product has a link, the add_to_cart hookable of the hook sylius_shop.product.show.content.info.summary renders nothing. A theme that does not use this hook or replaces the button template has to display the external button itself. Use the Twig function mmd_marketplace_redirect() for that (see above).