Zum Hauptinhalt springen

Formulare für die Einkaufswelten und andere Stellen (Modalboxen, Off-Canvas, uvm.)

Beschreibung
Die Shopware 5 - App "Formulare für die Einkaufswelten und andere Stellen (Modalboxen, Off-Canvas, uvm.)" fügt unter anderem ein neues Einkaufswelten - Element hinzu, das Sie wie gewohnt per Drag und Drop auf einer Einkaufswelt beliebig oft platzieren und mit dem Sie Shopware Formulare (Menüpunkt "Inhalte" -> "Formulare") bei Einkaufswelten realisieren können.

Des Weiteren kann man die Shopware Formulare auch an anderen Stellen in Ihrem Onlineshop anzeigen lassen, beispielsweise in einem Tab auf der Artikel - Detailseite, in einer Modalbox oder in einem Off-Canvas-Menü oder über den TinyMCE-Editor der Shopseiten und Blogeinträge direkt auf diesen Seiten.

Die Erfolgsmeldung wird dabei an der eigentlichen Position des Formulars innerhalb der Seite ausgegeben, wie es beispielsweise beim Newsletteranmeldungsformular im Footer des eigenen Shops der Fall ist. Die Erfolgsmeldung, aber auch das Formular selbst, wenn es mit Fehleingaben (beispielsweise bei falschem Captcha - Wert) abgesendet wurde, wird dabei an der eigentlichen Position / Stelle des Formulars innerhalb des Shops ausgegeben, wie es beispielsweise beim Kontaktformular der Fall ist. Beim Kontaktformular wäre dies beispielsweise die Seite https://www.shopwaredemo.de/kontaktformular?success=1 .

Innerhalb des Einkaufswelten - Elements (über das entsprechende Eingabefeld) als auch beim action - Tag (über einen Parameter) kann man die Artikelnummer eingeben beziehungsweise übergeben, damit das Anfrage - Textfeld des Anfrageformulars mit dem Artikelnamen und/oder Artikelnummer gefüllt wird. Das zu füllende Feld als auch der übergebene Text kann innerhalb der App - Konfiguration festgelegt werden, es stehen dabei folgende Parameter zur Verfügung: ARTICLENAME und ORDERNUMBER.

Innerhalb des neuen Einkaufswelten - Elements "Formular" können folgende Einstellungen für jedes Formular vorgenommen werden:
  • den kompletten Formularkopf ausblenden
  • die Überschrift im Formularkopf ausblenden
  • die Auswahl des Typs der Überschrift (h1, h2, h3 und h4)
  • den Text des Formularkopfes ausblenden
  • die Überschrift im Formularbereich ausblenden
  • eine individuelle Überschrift im Formularbereich anzeigen
  • die Festlegung eines individuellen Textes der Überschrift im Formularbereich
  • einen individuellen Text unter der Überschrift im Formularbereich anzeigen
  • die Festlegung eines individuellen Textes unter der Überschrift im Formularbereich
  • den Rahmen um das Element deaktivieren
  • den Innenabstand des Elements deaktivieren
  • die Eingabe der Artikelnummer

Des weiteren kann man sich über das action - Tag {action module=widgets controller=Globalembeddedforms action=show sFid=5 embeddedForm=1} überall im Shop an gewünschter Stelle ein selbst festgelegtes Formular anzeigen lassen. Eine Einbindung beispielsweise über den TinyMCE-Editor im Shopware Backend ist nur bei den Shopseiten und Blogeinträgen möglich, bei allen anderen würde der Code nicht ausgeführt sondern nur angezeigt werden. 
 
Alle Einstellungsmöglichkeiten aus dem Einkaufswelten - Element können auch beim action - Tag verwendet werden:
  • ID des Formulars: sFid=5
  • Kompletten Formularkopf ausblenden: hideFormheader=1
  • Überschrift im Formularkopf ausblenden: hideFormheaderheadline=1
  • Typs der Überschrift: formheaderheadlinetype=0
  • Text des Formularkopfes ausblenden: hideFormheadertext=1
  • Überschrift im Formularbereich ausblenden: hideFormcontentheadline=1
  • Individuelle Überschrift im Formularbereich anzeigen: showIndividualformcontentheadline=1
  • Individueller Text der Überschrift im Formularbereich: textIndividualformcontentheadline="Kontakt"
  • Individuellen Text unter der Überschrift im Formularbereich anzeigen: showIndividualformcontenttext=1
  • Individueller Text unter der Überschrift im Formularbereich: textIndividualformcontenttext="Individueller Text des Kontaktformulars"
  • Rahmen um das Element deaktivieren: noBorder=1
  • Innenabstand des Elements deaktivieren: noPadding=1

Eine Beispieleinbindung für das Anfrageformular ohne Rahmen und ohne Innenabstand wäre: {action module=widgets controller=Globalembeddedforms action=show sFid=16 noBorder=1 noPadding=1 embeddedForm=1 ordernumber=$sArticle.ordernumber}. Dieser Smarty-Code könnte beispielsweise in einem Tab hinterlegt werden, um das Formular in einem Tab direkt anzeigen zu lassen oder auch bei einer beliebigen Schaltfläche, sodass sich das Formular in einer Modalbox öffnet.

Die Einbindung eines Formulars in einer Modalbox kann man über folgenden Code erreichen: < div data-modalbox="true" data-mode="local" data-targetSelector="button" data-width="800" data-height="800" data-title='Anfrage stellen' data-content='{action module=widgets controller=Globalembeddedforms action=show sFid=16 noBorder=1 noPadding=0 modalboxForm=1 ordernumber=$sArticle.ordernumber}< script type="text/javascript"> {literal}window.StateManager.addPlugin("div.captcha--placeholder[data-src]", "swCaptcha"); window.StateManager.addPlugin("select:not([data-no-fancy-select=\"true\"])", "swSelectboxReplacement");{/literal} < /script>'> < button type="button" class="btn" data-target="#">Anfrage stellen< /button>< /div>.

Für die Einbindung eines Formulars in ein Off-Canvas-Menü stehen beim action - Tag weitere Einstellungsmöglichkeiten zur Verfügung:
  • Das Formular ist ein Off-Canvas-Formular: offcanvasForm=1
  • Schließen - Schaltfläche des Off-Canvas-Formulars ausblenden: hideOffcanvasFormClose=1
  • Text der Schließen - Schaltfläche des Off-Canvas-Formularrs: textOffcanvasFormClose="Weiter einkaufen"
  • Individuelle CSS-Klasse für das Off-Canvas-Formular nutzen: hasIndividualFormClass=1
  • Individuelle CSS-Klasse für das Off-Canvas-Formular: individualFormClass="kontakt"
  • Kein Abstand nach oben: noMarginTop=1

Die Schaltfläche, die auf das Off-Canvas-Menü verlinkt, sieht dann folgendermaßen aus: < a class="btn is--secondary form-action-btn" href="#" title="Kontakt" data-form-class="kontakt">< span>Kontakt< /span>< /a> . Das action - Tag, das man beispielsweise in der Template - Datei "index.tpl" im Verzeichnis "frontend/index" bei dem Shopware Block frontend_index_footer ergänzen kann, sieht dabei folgendermaßen aus: {action module=widgets controller=Globalembeddedforms action=show sFid=5 noBorder=1 noPadding=0 noMarginTop=1 hideFormheader=1 offcanvasForm=1 hideOffcanvasFormClose=0 hasIndividualFormClass=1 individualFormClass="kontakt"}.