Dynamische „Request a Quote“-Funktion in Shopware 6 – Ein Leitfaden Ihrer Shopware Agentur

Einführung in individuelle Angebotsfunktionen in Shopware 6

Im modernen E-Commerce – besonders im B2B-Bereich – sind flexible Einkaufsmöglichkeiten ein entscheidender Wettbewerbsvorteil. Viele Grosshändler und Hersteller benötigen individuelle Preise, kundenspezifische Angebote und dynamische Anfrageprozesse.

Als erfahrene Shopware Agentur und Shopware 6 Agentur haben wir eine massgeschneiderte „Request a Quote“-Funktion in Shopware 6 entwickelt, die es Kunden erlaubt, ein persönliches Preisangebot anzufordern, anstatt ein Produkt direkt zu kaufen.

Dieser Beitrag zeigt, wie wir diese Funktion technisch umgesetzt haben – von der Planung über die Template-Erweiterung bis hin zur Frontend-Logik – und wie professionelle Entwickler Shopware-Shops mit spezifischen B2B-Features erweitern können.

Technologiestack der Umsetzung

Shopware 6 Community Edition – erweiterbar, DACH-konform, keine Transaktionsgebühren
MySQL – strukturierte Verwaltung von über 4’000 Artikeldaten
JavaScript – individuelle Frontend-Interaktionen und Plugin-Logiken
Individuelle Shopware Plugins – speziell für Preisangebote, dynamische Buttons und Anfrage-Handling

Dieser Stack bot volle Kontrolle, hohe Performance und ein stabiles Setup für komplexe B2B-Use-Cases.

Shopware – eCommerce

JavaScript – Scripting

MySql – Database

Ziel: Einen dynamischen „Request a Quote“-Button integrieren

Das Hauptziel bestand darin, einen Button „Angebot anfordern“ für bestimmte Produkte anzuzeigen. Anforderungen:

Anforderungen an die Lösung

Button nur bei Produkten mit spezifischem Tag (z. B. „Quote“) anzeigen
Preis dynamisch ausblenden, sobald das Tag gesetzt ist
Kunden auf eine dedizierte Angebotsseite weiterleiten
Produktauswahl bis zur erfolgreichen Formularübermittlung erhalten

Da der Standard-Formularbuilder von Shopware keine dynamische Logik bietet, war eine individuelle Entwicklung erforderlich.

Schritt 1: Planung und Konfiguration

1. Anforderungsanalyse

Der Shop nutzte bereits den normalen „In den Warenkorb“-Button.

Ziel: diesen Button nur bei bestimmten Produkten durch „Angebot anfordern“ ersetzen.

2. Nutzung der Tag-Verwaltung

Im Shopware-Admin wurde ein neues Tag „Quote“ erstellt. Produkte, die dieses Tag erhalten, zeigen später die Angebotsfunktion.

3. Erstellung des Anfrageformulars über Erlebniswelten

To capture quote submissions:

Go to Shopping Experiences → Create Layout.
Choose Shop Page → Full Width Layout.
Add a Form Block → Request Form Block.
Save and assign the layout to your „Quote“ Request page.

Um Angebotsanfragen zu erfassen

Loggen Sie sich ins Backend ein und fahren Sie mit der Maus über „Inhalte“ und klicken Sie auf „Einkaufserlebnis“.

2. Klicken Sie anschließend auf „Neues Layout erstellen“.

3. Wählen Sie Shop-Seite aus.

4. Klicken Sie auf das „Volle Breite“-Layout.

5. Geben Sie den Namen für das Layout ein (z. B. „Angebot anfordern“) und klicken Sie auf „Layout erstellen“.

6. Nachdem Sie auf „Layout erstellen“ geklickt haben, werden Sie zur Layout-Erstellungsseite weitergeleitet. Klicken Sie anschließend auf „Blöcke per Drag & Drop hinzufügen“, um die vertikale Seitenleiste zu öffnen.

7. Wählen Sie anschließend im Dropdown „Blockkategorie“ die Option „Formular“ aus und ziehen Sie das angezeigte Formular in Ihr Layout.

8. Sobald das Formular per Drag & Drop hinzugefügt wurde, erscheint das Layout im Editor wie im folgenden Screenshot dargestellt.

9. Um das Layout Ihrer „Angebotsanfrage“-Seite zuzuweisen, fahren Sie mit der Maus über Kataloge und klicken Sie auf Kategorien.</p

10. Klicken Sie auf das Drei-Punkte-Symbol neben dem Menü, in dem Sie das Formular anzeigen möchten, und wählen Sie dann im Popup-Menü „Neue Kategorie danach“ aus.

11. Geben Sie einen Menünamen ein (zum Beispiel „Angebot“) und klicken Sie dann auf den „Layout“-Tab. Klicken Sie anschließend auf „Layout ändern“, um das gewünschte Layout auszuwählen.

12. Wählen Sie das gewünschte Layout aus und klicken Sie auf „Speichern“.

Sehen Sie sich das untenstehende Video an, um eine vollständige Demonstration der Schritte zu erhalten.

Schritt 2: Benutzeroberfläche und Button-Design

1. Button-Styling

Der Button „Angebot anfordern“ wurde im Shopware-Storefront mit Bootstrap-Styles umgesetzt, um sich nahtlos in das bestehende Theme einzufügen.

📄

button

<button class="btn btn-outline-primary send-request-toggle" data-product-name="product-name" data-listener-attached="true">
    Request a quote
</button>

Das folgende ist ein Screenshot des Storefronts, der den „Button-Stil“ nach Anwendung des obenstehenden Codes zeigt.

2. Funktionales Verhalten

Beim Klick speichert der Button:

Produktname
Produktbild
Menge

Dies erfolgt clientseitig via Local Storage, bevor der Kunde auf die Angebotsübersicht weitergeleitet wird.

Schritt 3: Technische Umsetzung im Shopware-Template

Dynamische Anzeige mit Twig

Twig-Logik prüft, ob ein Produkt das Tag „Quote“ enthält.
Falls ja → Button anzeigen
Falls nein → Standard-Buy-Widget anzeigen

(Code bleibt unverändert, nur deutsche Beschreibung.)

📄

filepath

<Plugin>/src/Resources/views/storefront/component/buy-widget/buy-widget-form.html.twig

🌐

buy-widget-form.html.twig

{% set showQuoteButton = false %}
{% for tag in page.product.tags %}
    {% if tag.name == 'Quote' %}
        {% set showQuoteButton = true %}
    {% endif %}
{% endfor %}

{% if showQuoteButton %}
    <button class="btn btn-primary request-quote-btn">
        {{ "Angebot anfordern" | trans }}
    </button>
{% else %}
    {{ parent() }}
{% endif %}

Tipp: Im Twig-System von Shopware sorgt die Verwendung von {{ parent() }} dafür, dass die Funktionalität des Basistemplates erhalten bleibt. Dies gilt als Best Practice in der Shopware-Plugin-Entwicklung.

Backend

Storefront

Schritt 4: Frontend-Logik mit Local Storage

Um die Produktauswahl über Seitenaufrufe hinweg zu erhalten, haben wir einen clientseitigen Speichermechanismus mit localStorage implementiert.

🌐

buy-widget-form.html.twig

<button class="btn btn-primary request-quote-btn"
        data-product-name="{{ product.translated.name }}"
        data-product-image="{{ product.cover.media.url }}">
    Request a quote
</button>

📄

script.js

document.querySelectorAll('.request-quote-btn').forEach(button => {
  button.addEventListener('click', event => {
      const name = event.currentTarget.dataset.productName;
      const image = event.currentTarget.dataset.productImage;
      const existingQuotes = JSON.parse(localStorage.getItem('quoteItems')) || [];
      existingQuotes.push({ name, image, quantity: 1 });
      localStorage.setItem('quoteItems', JSON.stringify(existingQuotes));
      console.log(`${name} added to quote list`);
  });
});

Warum dieser Ansatz funktioniert

Keine Backend-Belastung: Es ist keine sofortige Serverkommunikation erforderlich.
Persistenter Speicher: Produktdaten bleiben auch nach Reloads oder Navigation erhalten.
Schnell & skalierbar: Funktioniert dynamisch über Produktlisten hinweg.
Ideal für B2B-Anwendungsfälle: Ermöglicht die Angebotssammlung vor der finalen Anfrage.

Schritt 5: Angebotsseite, Mengen-Synchronisation und Validierung

Auf der Angebotsseite können Kunden:

Alle Produkte anzeigen, die zur Angebotsanfrage hinzugefügt wurden.

Mengen in Echtzeit anpassen.

Artikel einfach entfernen.

Ihre Daten über ein Formular übermitteln.

Sehen Sie sich das Video unten für eine vollständige Demonstration der Schritte an.

Mengenabgleich mit dem lokalen Speicher

📄

script.js

quantityInput.addEventListener('input', () => {
  const updatedQty = parseInt(quantityInput.value) || 1;
  const quotes = JSON.parse(localStorage.getItem('quoteItems')) || [];
  const item = quotes.find(item => item.id === productId);
  if (item) item.quantity = updatedQty;
  localStorage.setItem('quoteItems', JSON.stringify(quotes));
});

Dies hält die vom Benutzer eingegebenen Mengen mit den gespeicherten Produktdaten synchron und sorgt für Konsistenz bei der endgültigen Übermittlung.

Herausforderungen und Lösungen

1. Button erscheint überall

Problem: Die Schaltfläche erschien anfangs für jedes Produkt.
Lösung: Bedingtes Rendering basierend auf Tags in den Twig-Vorlagen hinzugefügt.

2. Template-Änderungen werden nicht angezeigt

Problem: Änderungen an der Vorlage waren aufgrund des Cachings nicht sichtbar.
Lösung: Cache geleert und Assets mit folgendem Befehl neu aufgebaut:

💻

command.sh

bin/console cache:clear
bin/console theme:compile
bin/build-storefront.sh

Ergebnisse

Nach erfolgreicher Implementierung zeigt der Shop:

- Angebot-Button nur bei relevanten Produkten
- sauber strukturierte Angebotsübersicht
- persistente Datenspeicherung
- übersichtliche Angebotsübermittlung im Backend

Die B2B-Features wurden dadurch deutlich verbessert.

Conclusion

The Request Quote feature showcases the flexibility and power of Shopware 6 development.
By combining Twig templates, tag-based logic, and frontend persistence, our Shopware developers built a seamless quoting experience — ideal for B2B stores and businesses offering custom pricing.

If you’re looking to implement advanced features like this, professional Shopware development services can help you customize your store for better conversions, scalability, and user experience.

Fazit – Erweiterte Shopware 6 Entwicklung für B2B-Shops

Die Request a Quote-Funktion zeigt, wie flexibel und leistungsfähig Shopware 6 ist. Durch die Kombination aus Twig-Erweiterungen, Tag-Logik und Frontend-Persistence entsteht ein reibungsloser Angebotsprozess für B2B-Shops und Unternehmen mit individuellen Preisen.

Als professionelle Shopware Agentur und erfahrene Shopware 6 Agentur unterstützen wir Unternehmen bei komplexen Entwicklungen, Shopware Migration Projekten und massgeschneiderten B2B-Funktionen, um Conversion-Rate, Skalierbarkeit und Benutzerfreundlichkeit nachhaltig zu verbessern.

Warum Soft Solutions4U?

Bei Soft Solutions4U unterstützen wir Schweizer und deutsche KMUs dabei, ihren E-Commerce mit maßgeschneiderten Entwicklungsservices zu modernisieren und auszubauen. Egal, ob es sich um einen brandneuen Shop oder fortgeschrittene Backend-Automatisierungen handelt – wir liefern präzise Ergebnisse.

Als Shopware-B2B-Entwicklungsunternehmen bieten wir:

Shopware-Plugin-Entwicklung (Angebote, Importe, Logik-Automatisierung)
Setup der Shopware Community Edition & Hosting-Optimierung
Individuelle Preis- und Steuer-Workflows für B2B-Kunden
End-to-End-Support für E-Commerce im DACH-Markt
Mehrsprachige Teams für bessere Schweizer-deutsche Zusammenarbeit

Wenn Sie nach einer Shopware-Entwicklungsagentur in Frankfurt oder irgendwo in der DACH-Region suchen, sind wir Ihr zuverlässiges Offshore-Team mit lokalem Verständnis.

Sind Sie bereit für Ihren Online-Erfolg?

Sie sind nur einen Schritt davon entfernt, Ihr Geschäft auf die nächste Stufe zu heben. Vereinbaren Sie jetzt einen ersten Beratungstermin, damit wir Ihre Ziele besprechen können.

Ich war äusserst zufrieden damit, wie SoftSolutions4U eine perfekte Automatisierungslösung für meine täglichen manuellen Aufgaben – wie die Aktualisierung von Produktpreisen und die Konsolidierung von Kundenanfragen – bereitgestellt und unsere Abläufe in einen wesentlich effizienteren und optimierten Prozess umgewandelt hat.

PETER WILHELM

INHABER TAMEQ SCHWEIZ GMBH