Bouton de rétractation dans Shopware 6.
Tutoriel gratuit avec code.

Ce que la loi exige à partir du 19 juin 2026

La directive (UE) 2023/2673, qui ajoute une fonction de rétractation à la directive sur les droits des consommateurs, impose à toute boutique B2C de l'UE un bouton de rétractation en deux étapes. L'étape 1 indique « Se rétracter du contrat ». L'étape 2 indique « Confirmer la rétractation ». Entre les deux figure un formulaire avec le nom et un moyen de contact comme champs obligatoires, suivi d'un accusé de réception par e-mail sur un support durable.

Pas de connexion, pas de barrière de défilement. Disponible pendant toute la durée du délai de rétractation. Le risque de mise en demeure en cas de manquement se situe généralement entre 500 et 2 000 EUR, auquel s'ajoute une prolongation automatique du délai de rétractation à douze mois et quatorze jours.

Les deux voies pour Shopware 6

Voie A : une extension de template Twig directement dans votre thème. Rapide, mais liée à votre thème. Vous devez faire attention lors des mises à jour du thème.

Voie B : votre propre plugin storefront qui enregistre un snippet Twig. Propre, résistant aux mises à jour, et désactivable depuis l'admin. C'est la voie Shopware recommandée.

Voie A : extension de template Twig dans le thème

Shopware 6 utilise des templates Twig basés sur des blocs. Vous pouvez surcharger ou étendre n'importe quel bloc. Le pied de page se trouve dans @Storefront/storefront/layout/footer/footer.html.twig. Nous nous greffons sur le bloc base_footer_inner_container.

{# Resources/views/storefront/layout/footer/footer.html.twig #}
{% sw_extends '@Storefront/storefront/layout/footer/footer.html.twig' %}

{% block base_footer_inner_container %}
    {{ parent() }}

    <script
        src="https://widerrufbutton.net/widget/v1/wh.js"
        data-shop-id="{{ config('WiderrufButton.config.shopId') }}"
        data-position="footer"
        data-lang="de"
        async
        defer
    ></script>
{% endblock %}

L'appel config(...) accède à la configuration du plugin. Si vous ne voulez pas construire de configuration, vous pouvez aussi écrire directement la clé du widget dans le snippet. Pour une solution propre, il faut toutefois la voie B.

Voie B : votre propre plugin

Un plugin Shopware 6 est essentiellement un bundle Symfony avec un fichier composer.json, une classe de plugin et un fichier services.xml pour l'injection de dépendances.

La structure minimale ressemble à ceci :

custom/plugins/WiderrufButton/
├── composer.json
├── src/
│   ├── WiderrufButton.php
│   ├── Resources/
│   │   ├── config/
│   │   │   ├── config.xml
│   │   │   └── services.xml
│   │   └── views/
│   │       └── storefront/
│   │           └── layout/
│   │               └── footer/
│   │                   └── footer.html.twig

Le fichier config.xml définit le champ de saisie de la clé du widget dans l'admin Shopware :

<?xml version="1.0" encoding="UTF-8"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="https://raw.githubusercontent.com/shopware/platform/trunk/src/Core/System/SystemConfig/Schema/config.xsd">
    <card>
        <title>WiderrufButton</title>
        <input-field>
            <name>shopId</name>
            <label>Widget-Key</label>
            <helpText>Aus dem WiderrufButton-Dashboard</helpText>
        </input-field>
    </card>
</config>

Le fichier services.xml reste vide tant que vous n'avez pas besoin de vos propres services. Le template Twig surcharge le bloc du pied de page comme dans la voie A, mais appelle la configuration du plugin via config('WiderrufButton.config.shopId').

Activer et tester le plugin

Depuis le répertoire Shopware, exécutez les commandes dans cet ordre :

bin/console plugin:refresh
bin/console plugin:install --activate WiderrufButton
bin/console theme:compile
bin/console cache:clear

Le plugin apparaît ensuite dans l'admin sous Extensions. Saisissez-y la clé du widget issue de votre tableau de bord WiderrufButton. Enregistrez. Ouvrez la boutique et vérifiez le pied de page.

Attention au cache HTTP et à la CSP

Shopware 6 met en cache de manière agressive. Après avoir compilé le thème, videz le cache HTTP, sinon vous ne verrez pas le script tout de suite. Dans la configuration Shopware, c'est bin/console http:cache:clear.

Si vous avez une Content Security Policy active, widerrufbutton.net doit figurer dans les directives script-src et connect-src. Le navigateur charge le script depuis cette adresse et envoie la rétractation à la route API sur le même domaine.

Pourquoi le Shadow DOM est important

Les thèmes Shopware embarquent leur propre CSS. Sans encapsulation, le style du bouton entrerait en conflit avec le thème, les couleurs s'afficheraient mal, la fenêtre modale apparaîtrait au mauvais endroit. C'est pourquoi le widget s'exécute dans le Shadow DOM. Son CSS est totalement isolé, les styles de Shopware ne peuvent rien surcharger, et votre thème reste intact.

L'inverse est vrai aussi : le bouton ne peut rien faire à votre thème. Pas de styles globaux, pas de noms de classe qui entrent en conflit, pas de polices surchargées involontairement.

Multilingue et sales channels

Shopware permet plusieurs sales channels avec des domaines différents. Pour chaque domaine, il vous faut une entrée de boutique distincte dans le tableau de bord WiderrufButton, afin que la vérification CORS porte sur la bonne origine. Les clés de widget diffèrent, et vous devez lier la bonne clé à la configuration du plugin pour chaque sales channel.

Vous trouverez les détails sur la page produit et dans le tutoriel.

Checklist avant la mise en ligne

• Clé du widget saisie et enregistrée dans l'admin
• Thème recompilé, cache HTTP vidé
• Bouton visible dans le pied de page, accessible sans défiler
• Formulaire envoyé avec des données de test, l'e-mail arrive en quelques secondes
• La Content Security Policy autorise le domaine du widget
• L'entrée de test apparaît dans le tableau de bord sous Rétractations