Come aggiungere una FAQ in PrestaShop senza plugin

A cosa serve una FAQ nella pagina di un negozio PrestaShop

Realizziamo la FAQ: istruzioni

1. 1. Creiamo nel CMS una pagina chiamata FAQ o domande frequenti. Accanto alla pagina vediamo che numero ID ha. Nel nostro caso è l'ID 11
   2. All'inizio dobbiamo informare Google che la nostra pagina riguarda una FAQ. A questo scopo, dopo il tag html, dobbiamo aggiungere itemscope itemtype="https://schema.org/FAQPage". Qui c'è la parte difficile, perché bisogna sapere quale file del nostro tema genera l'intero layout della pagina. Sul sito del cliente è themes/szablon/templates/layouts/layout-both-columns.tpl Proprio all'inizio di questo file aggiungiamo il codice che indica che, se la pagina con numero ID uguale a 11 viene visualizzata, bisogna aggiungere l'attributo dei microdati. Ora appare così: <html{if isset($cms) && $cms.id==11}itemscope itemtype="https://schema.org/FAQPage"{/if} Ricorda di sostituire il numero 11 con il numero ID della tua pagina contenente la FAQ. Salva. La cosa più difficile è fatta, ora è tutta in discesa.
   3. Dal link di Google qui sopra copiamo l'esempio della prima domanda e risposta: <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> Naturalmente sostituiamo con il nostro contenuto il testo tra i tag  <h2 itemprop="name">Domanda</h2> e <div itemprop="text">Risposta</div>. Possiamo copiare tutto questo schema a piacere e incollare alcune, anche una dozzina di domande e risposte.

      FAQ comprimibile ed espandibile

      Per questo useremo la FAQ di esempio da questo CodePen: FAQ in puro CSS. Copiamo il contenuto CSS nel file css principale del nostro tema. Da noi sarà /public_html/themes/szablon/assets/css/theme.css. Il contenuto del campo HTML purtroppo dobbiamo modificarlo, perché, come avrai notato, non contiene tag strutturali. Esempio di una singola domanda, che potremo poi copiare con i dati strutturati aggiunti: </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">Quanto costa la spedizione?</h2> </div> <div class='faq-arrow'></div> <div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer"> <div itemprop="text"> <p class="faq-text" ><b>Pagamento anticipato con bonifico</b><br /> Paczkomaty (armadietti per pacchi) 2,06 €<br /> Corriere DPD 2,75 €<br /><br /> <b>Contrassegno</b><br /> Corriere 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">Qual è il tempo di evasione dell'ordine?</h2> </div> <div class='faq-arrow'></div> <div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer"> <div itemprop="text"> <p class="faq-text" >Il tempo di spedizione dipende dal numero di ordini in lavorazione in un dato momento; prima di ordinare ti preghiamo di telefonare al numero 720 899 006 per concordare l'attuale data di spedizione. </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">Posso fare un reso e di quanti giorni dispongo?</h2> </div> <div class='faq-arrow'></div> <div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer"> <div itemprop="text"> <p class="faq-text" >Certo che SÌ - puoi restituire l'ordine entro 14 giorni dalla data di ritiro del pacco. Hai il diritto di restituire un prodotto acquistato nel negozio online senza indicarne il motivo. Tuttavia la merce non può presentare segni di utilizzo, non può essere distrutta né danneggiata e deve trovarsi nella confezione originale con tutto il suo contenuto. Se vuoi effettuare un reso, chiedi al servizio clienti del negozio l'indirizzo per la spedizione della merce restituita, e-mail: biuro@cavaricci.pl oppure numero di telefono +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">Come posso pagare il prodotto?</h2> </div> <div class='faq-arrow'></div> <div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer"> <div itemprop="text"> <p class="faq-text" > Normale bonifico sul conto bancario 04 1020 4144 0000 6602 0275 1659<br /> Pagamento in contrassegno (pagamento al corriere il giorno della consegna) <br /> Pagamento elettronico (bonifico online) tramite banca o carta di credito.</p></div></div> </label> </div> Ed ecco il codice CSS .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; }

      Conclusione

      Vale la pena o no? Questo è il dilemma. Certo che vale la pena. Se Google aggiunge speciali marcatori schema contrassegnati come FAQ, sa quale pagina li possiede e quale no. I clienti trovano facilmente la risposta alla domanda che li tormenta riguardo agli acquisti. Abbiamo un telefono più tranquillo e una casella di posta più leggera. Ci sono naturalmente anche gli oppositori delle FAQ. Secondo loro è meglio che il cliente telefoni o ci scriva, perché allora possiamo convincerlo meglio ad acquistare. Quale strada sceglierai dipende solo da te. Posso occuparmi io di tutto il processo per te. L'implementazione di base di un testo già preparato costa solo 23 € netti. Contattami tramite la pagina contatti.