Pulsante di recesso in Shopware 6.
Tutorial gratuito con codice.

Cosa richiede la legge dal 19 giugno 2026

La Direttiva (UE) 2023/2673, che aggiunge una funzione di recesso alla direttiva sui diritti dei consumatori, richiede a ogni shop B2C nell'UE un pulsante di recesso a due fasi. La fase 1 recita «Recedi dal contratto». La fase 2 recita «Conferma il recesso». In mezzo c'è un modulo con nome e un mezzo di contatto come campi obbligatori, seguito da una conferma di ricezione via e-mail su un supporto durevole.

Nessun login, nessuna barriera di scorrimento. Disponibile per l'intera durata del periodo di recesso. Il rischio di una diffida in caso di violazioni si aggira tipicamente tra i 500 e i 2.000 EUR, oltre a una proroga automatica del periodo di recesso a dodici mesi e quattordici giorni.

Le due strade per Shopware 6

Strada A: un'estensione del template Twig direttamente nel tuo tema. Veloce, ma legata al tuo tema. Devi fare attenzione durante gli aggiornamenti del tema.

Strada B: un tuo plugin storefront che registra uno snippet Twig. Pulita, sicura rispetto agli aggiornamenti e disattivabile dall'admin. È la strada Shopware consigliata.

Strada A: estensione del template Twig nel tema

Shopware 6 usa template Twig basati su blocchi. Puoi sovrascrivere o estendere qualsiasi blocco. Il footer si trova in @Storefront/storefront/layout/footer/footer.html.twig. Ci agganciamo al blocco 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 %}

La chiamata config(...) accede alla configurazione del plugin. Se non vuoi costruire una configurazione, puoi anche scrivere direttamente la chiave del widget nello snippet. Per una soluzione pulita serve però la strada B.

Strada B: un tuo plugin

Un plugin Shopware 6 è essenzialmente un bundle Symfony con un file composer.json, una classe del plugin e un file services.xml per la dependency injection.

La struttura minima è questa:

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

Il file config.xml definisce il campo di input per la chiave del widget nell'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>

Il file services.xml resta vuoto finché non hai bisogno di servizi tuoi. Il template Twig sovrascrive il blocco del footer come nella strada A, ma richiama la configurazione del plugin tramite config('WiderrufButton.config.shopId').

Attivare e testare il plugin

Dalla directory Shopware, esegui i comandi in questo ordine:

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

Il plugin compare poi nell'admin sotto Estensioni. Lì inserisci la chiave del widget dalla tua dashboard WiderrufButton. Salva. Apri lo shop e controlla il footer.

Attenzione alla cache HTTP e alla CSP

Shopware 6 mette in cache in modo aggressivo. Dopo aver compilato il tema, svuota la cache HTTP, altrimenti non vedrai subito lo script. Nella configurazione Shopware è bin/console http:cache:clear.

Se hai una Content Security Policy attiva, widerrufbutton.net deve comparire nelle direttive script-src e connect-src. Il browser carica lo script da lì e invia il recesso alla rotta API sullo stesso dominio.

Perché lo Shadow DOM è importante

I temi Shopware portano con sé il proprio CSS. Senza incapsulamento lo stile del pulsante entrerebbe in conflitto con il tema, i colori verrebbero resi in modo errato, il modale comparirebbe nel posto sbagliato. Per questo il widget gira all'interno dello Shadow DOM. Il suo CSS è completamente isolato, gli stili di Shopware non possono sovrascrivere nulla e il tuo tema resta intatto.

Lo stesso vale nella direzione opposta: il pulsante non può fare nulla al tuo tema. Nessuno stile globale, nessun nome di classe in conflitto, nessun font sovrascritto involontariamente.

Multilingua e sales channel

Shopware consente più sales channel con domini diversi. Per ogni dominio ti serve una voce shop separata nella dashboard WiderrufButton, affinché il controllo CORS venga eseguito sull'origine corretta. Le chiavi del widget differiscono e devi associare la chiave giusta alla configurazione del plugin per ogni sales channel.

Trovi i dettagli sulla pagina prodotto e nel tutorial.

Checklist prima del go-live

• Chiave del widget inserita e salvata nell'admin
• Tema ricompilato, cache HTTP svuotata
• Pulsante visibile nel footer, raggiungibile senza scorrere
• Form inviato con dati di test, l'e-mail arriva in pochi secondi
• La Content Security Policy consente il dominio del widget
• La voce di test compare nella dashboard sotto Recessi