FAQ in PrestaShop ohne Plugins hinzufügen - so geht es

Wozu eine FAQ auf der Seite eines PrestaShop-Shops

So erstellen wir die FAQ: Anleitung

1. 1. Wir erstellen im CMS eine Seite mit dem Namen FAQ oder häufige Fragen. Neben der Seite sehen wir, welche ID-Nummer unsere Seite hat. In unserem Fall ist es die ID 11
   2. Ganz am Anfang müssen wir Google mitteilen, dass es auf unserer Seite um FAQ geht. Dazu müssen wir nach dem html-Tag Folgendes hinzufügen: itemscope itemtype="https://schema.org/FAQPage". Hier kommt der schwierige Teil, denn man muss wissen, welche Datei in unserem Theme das gesamte Seitenlayout rendert. Auf der Seite des Kunden ist es themes/szablon/templates/layouts/layout-both-columns.tpl Gleich am Anfang dieser Datei fügen wir Code hinzu, der besagt: Wenn die Unterseite mit der ID-Nummer 11 angezeigt wird, soll das Mikrodaten-Attribut hinzugefügt werden. Das sieht jetzt so aus: <html{if isset($cms) && $cms.id==11}itemscope itemtype="https://schema.org/FAQPage"{/if} Denken Sie daran, die Nummer 11 durch die ID-Nummer Ihrer eigenen Seite mit den FAQ zu ersetzen. Speichern. Das Schwerste ist geschafft, jetzt geht es bergab.
   3. Wir kopieren über den obigen Google-Link das Beispiel für die erste Frage und Antwort: <pre class="" dir="ltr" translate="no"> &lt;div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question"&gt; &lt;h2 itemprop="name"&gt;What is the return policy?&lt;/h2&gt; &lt;div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer"&gt; &lt;div itemprop="text"&gt; Most unopened items in new condition and returned within &lt;b&gt;90 days&lt;/b&gt; will receive a refund or exchange. Some items have a modified return policy noted on the receipt or packing slip. Items that are opened or damaged or do not have a receipt may be denied a refund or exchange. Items purchased online or in-store may be returned to any store. &lt;br /&gt;&lt;p&gt;Online purchases may be returned via a major parcel carrier. &lt;a href="http://example.com/returns"&gt; Click here &lt;/a&gt; to initiate a return.&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;</pre> </li> </ol> </li> </ol> Durch unseren eigenen Inhalt ersetzen wir natürlich den Text zwischen den Tags  <h2 itemprop="name">Frage</h2> und <div itemprop="text">Antwort</div>. Dieses ganze Schema können wir beliebig oft kopieren und mehrere, auch ein Dutzend Fragen und Antworten einfügen.

      Ein- und ausklappbare FAQ

      Dafür verwenden wir die Beispiel-FAQ aus diesem CodePen: Reine CSS-FAQ. Den CSS-Inhalt kopieren wir in die Haupt-CSS-Datei unseres Themes. Bei uns ist das /public_html/themes/szablon/assets/css/theme.css. Den Inhalt aus dem HTML-Feld müssen wir leider ändern, da er, wie Sie vielleicht bemerkt haben, keine strukturierten Tags enthält. Beispiel für eine einzelne Frage, die wir später mit den hinzugefügten strukturierten Daten kopieren können: </pre> <div class='faq'> <input id='faq-a' type='checkbox'> <label for='faq-a'> <div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question"> <h2 itemprop="name" class="faq-heading">Wie viel kostet die Lieferung?</h2> </div> <div class='faq-arrow'></div> <div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer"> <div itemprop="text"> <p class="faq-text" ><b>Vorkasse per Überweisung</b><br /> Paczkomaty (Paketautomaten) 2,06 €<br /> Kurier DPD 2,75 €<br /><br /> <b>Nachnahme</b><br /> Kurier DPD 4,58 € </p></div></div> </label> <input id='faq-b' type='checkbox'> <label for='faq-b'> <div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question"> <h2 itemprop="name" class="faq-heading">Wie lange dauert die Auftragsbearbeitung?</h2> </div> <div class='faq-arrow'></div> <div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer"> <div itemprop="text"> <p class="faq-text" >Die Versandzeit hängt von der Anzahl der Bestellungen ab, die zum jeweiligen Zeitpunkt bearbeitet werden; bitte rufen Sie vor der Bestellung unter 720 899 006 an, um den aktuellen Versandtermin zu erfragen. </p></div></div> </label> <input id='faq-c' type='checkbox'> <label for='faq-c'> <div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question"> <h2 itemprop="name" class="faq-heading">Kann ich zurückgeben, und wie viele Tage habe ich dafür?</h2> </div> <div class='faq-arrow'></div> <div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer"> <div itemprop="text"> <p class="faq-text" >Selbstverständlich JA - Sie können Ihre Bestellung innerhalb von 14 Tagen ab Erhalt der Sendung zurückgeben. Sie haben das Recht, ein im Onlineshop gekauftes Produkt ohne Angabe von Gründen zurückzugeben. Die Ware darf jedoch keine Gebrauchsspuren aufweisen, nicht zerstört oder beschädigt sein und muss sich in der Originalverpackung mit dem gesamten Inhalt befinden. Wenn Sie eine Rückgabe vornehmen möchten, fragen Sie den Shop-Service nach der Adresse für die Rücksendung der Ware, E-Mail: biuro@cavaricci.pl oder Telefonnummer +48 720 899 006</p></div></div> </label> <input id='faq-d' type='checkbox'> <label for='faq-d'> <div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question"> <h2 itemprop="name" class="faq-heading">Wie kann ich das Produkt bezahlen?</h2> </div> <div class='faq-arrow'></div> <div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer"> <div itemprop="text"> <p class="faq-text" > Normale Überweisung auf das Bankkonto 04 1020 4144 0000 6602 0275 1659<br /> Nachnahme (Zahlung an den Kurier am Liefertag) <br /> Elektronische Zahlung (Online-Überweisung) über die Bank oder per Kreditkarte.</p></div></div> </label> </div> Und hier der CSS-Code .faq-heading { font-family: inherit; font-weight: 400; font-size: 19px; -webkit-transition: text-indent 0.2s; text-indent: 20px; color: #333; padding: 12px 0; } .faq-heading h2 { font-family: inherit; font-weight: 400; font-size: 19px; -webkit-transition: text-indent 0.2s; text-indent: 20px; color: #333; padding: 12px 0; } .faq-text { font-weight: 400; color: #919191; width:95%; padding-left:20px; margin-bottom:30px; } .faq { width: 1000px; margin: 0 auto; background: white; border-radius: 4px; position: relative; border: 1px solid #E1E1E1; } .faq label { display: block; position: relative; overflow: hidden; cursor: pointer; height: 38px; padding-top:1px; text-align:left; margin-bottom:0; background-color: #FAFAFA; border-bottom: 1px solid #E1E1E1; } .faq input { display: none; } .faq .faq-arrow { width: 5px; height: 5px; transition: -webkit-transform 0.8s; transition: transform 0.8s; transition: transform 0.8s, -webkit-transform 0.8s; -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); border-top: 2px solid rgba(0, 0, 0, 0.33); border-right: 2px solid rgba(0, 0, 0, 0.33); float: right; position: relative; top: -30px; right: 27px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .faq input:checked + label &gt; .faq-arrow { transition: -webkit-transform 0.8s; transition: transform 0.8s; transition: transform 0.8s, -webkit-transform 0.8s; -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-transform: rotate(135deg); transform: rotate(135deg); } .faq input:checked + label { display: block; background: rgba(255,255,255,255) !important; color: #4f7351; height: 225px; transition: height 0.8s; -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); } .faq input:not(:checked) + label { display: block; transition: height 0.8s; height: 50px; -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); } ::-webkit-scrollbar { display: none; }

      Fazit

      Lohnt es sich oder nicht? Das ist hier die Frage. Natürlich lohnt es sich. Wenn Google spezielle Schema-Auszeichnungen für FAQ hinzufügt, weiß es, welche Seite eine hat und welche nicht. Kunden finden leicht eine Antwort auf die Frage, die sie beim Einkauf beschäftigt. Wir haben ein ruhigeres Telefon und ein leereres Postfach. Es gibt natürlich auch Gegner von FAQ. Ihrer Meinung nach ist es besser, wenn der Kunde anruft oder schreibt, denn dann können wir ihn besser vom Kauf überzeugen. Welchen Weg Sie wählen, hängt ganz von Ihnen ab. Ich kann den gesamten Prozess für Sie übernehmen. Die grundlegende Umsetzung eines vorbereiteten Textes kostet nur 23 € netto. Kontaktieren Sie mich über die Seite Kontakt.