W naszym krótkim poradniku dodamy FAQ na podstronie CMS w Prestashop 1.7 wg wytycznych Google zawartych na tej stronie oznaczanie najczęstszych pytań uporządkowanymi danymi.
Po co FAQ na stronie sklepu Prestashop
Faq czyli inaczej najczęstsze pytania zadawane przez klientów to nic innego jak zbiór pytań i odpowiedzi. W teorii ma to ułatwić potencjalnemu klientowi zakup produktu, a nas odciążyć od dodatkowych pytań. Oczywiście dla niektórych klientów to działa super, a dla innych mając nawet pod okiem informację wolą zadzwonić/napisać upewnić się czy dostawa za 8.99 to całkowity koszt.
Druga sprawa to zaczyna krążyć legenda, że FAQ na sklepie „podnosi SEO”. Coś w tym może być, bo Google ma specjalnie przygotowane mikro dane na podstronę z faq i dziś właśnie zrobimy w Prestashop ręcznie, od początku do końca wykorzystując tylko podstronę CMS.
Robimy FAQ Instrukcja
-
- Tworzymy podstronę w CMS o nazwie FAQ lub najczęstsze pytania. Obok strony mamy informację jaki numer ID ma nasza podstrona. W naszym przypadku jest to ID 11
- Na samym początku musimy poinformować Google, że nasza podstrona dotyczy FAQ. W tym celu po znaczniku html musimy dodać itemscope itemtype=”https://schema.org/FAQPage”. Tu już jest górka, bo trzeba wiedzieć w jaki plik w naszym szablonie renderuje cały układ strony www. Na stronie klienta jest to themes/szablon/templates/layouts/layout-both-columns.tpl
Właśnie w tym pliku na samym początku dodajemy kod informujący, że jeśli podstrona o numerze ID jest równa 11 dodaj znacznik mikro danych. Wygląda to teraz tak:[html]
<html{if isset($cms) && $cms.id==11}itemscope itemtype="https://schema.org/FAQPage"{/if}
[/html]Pamiętaj aby numer 11 zamienić z swoim numerem ID podstrony zawierającej FAQ. Zapisz. Najcięższa rzecz zrobiona, teraz z górki
- Skopiujemy od Google z linku wyżej przykładowe pierwsze pytanie i odpowiedź:
[html]
<pre class="" dir="ltr" translate="no"> <div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
<h2 itemprop="name">What is the return policy?</h2>
<div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<div itemprop="text">
Most unopened items in new condition and returned within <b>90 days</b> 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.
<br /><p>Online purchases may be returned via a major parcel carrier. <a href="http://example.com/returns"> Click here </a> to initiate a return.</p>
</div>
</div>
</div></pre>
</li>
</ol>
</li>
</ol>
[/html]
Na własną treść zamieniamy oczywiście tekst pomiędzy znacznikami <h2 itemprop=”name”>Pytanie</h2> i <div itemprop=”text”>Odpowiedź</div>. Taki cały schemat możemy skopiować dowolnie i wkleić kilka, kilkanaście pytań i odpowiedzi.Zwijane i rozwijane FAQ
Do tego wykorzystamy przykładowe FAQ z tego codepena Czysty CSS FAQ.
Zawartość CSS kopiujemy do głównego pliku css w naszym szablonie. U nas będzie to /public_html/themes/szablon/assets/css/theme.css. Zawartosć z pola HTML niestety musimy zmienić, ponieważ jak może zauważyliście nie ma znaczników strukturalnych.
Przykład jednego pytania, które możemy później kopiować z dodanymi danymi strukturalnymi:[html]</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">Ile kosztuje Dostawa?</h2>
</div>
<div class=’faq-arrow’></div>
<div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<div itemprop="text">
<p class="faq-text" ><b>Przedpłata na konto</b><br />
Paczkomaty 8.99zł<br />
Kurier DPD 12zł<br /><br />
<b>Pobranie</b><br />
Kurier DPD 20zł
</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">Jaki jest czas realizacji zamówienia?</h2>
</div>
<div class=’faq-arrow’></div>
<div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<div itemprop="text">
<p class="faq-text" >Czas wysyłki uzależniony jest ilości zamówień jakie w danym momencie są realizowane, przed zamówieniem prosimy o kontakt pod nr tel 720 899 006 w celu ustalenia aktualnego terminu wysyłki. </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">Czy mogę i Ile mam dni na zwrot?</h2>
</div>
<div class=’faq-arrow’></div>
<div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<div itemprop="text">
<p class="faq-text" >Oczywiście, że TAK – Możesz zwrócić zamówienie w ciągu 14 dni od daty odebrania przesyłki. Masz prawo zwrócić zakupiony w sklepie internetowym produkt bez podania przyczyny. Taki towar nie może jednak nosić śladów używania, nie może być zniszczony czy uszkodzony, musi znajdować się w oryginalnym opakowaniu z jego całą zawartością. Jeśli chcesz dokonać zwrotu zapytaj obsługę sklepu o adres do wysyłki zwracanego towaru e-mail: biuro@cavaricci.pl lub nr telefonu +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">Jak mogę zapłacić za produkt?</h2>
</div>
<div class=’faq-arrow’></div>
<div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<div itemprop="text">
<p class="faq-text" >Zwykły przelew na konto bankowe 04 1020 4144 0000 6602 0275 1659<br />
Płatność za pobraniem (płatność kurierowi w dniu dostawy) <br />
Płatność elektroniczna (przelew on-line) poprzez bank lub kartę kredytową.</p></div></div>
</label>
</div> [/html]A tu kod CSS
[css collapse=”true”]
.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[type="checkbox"] {
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[type="checkbox"]:checked + label > .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[type="checkbox"]: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[type=’checkbox’]: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;
}
[/css]Podsumowanie
Warto czy nie warto? O to jest pytanie. Oczywiście że warto. Jeśli Google dodaje specjalne znaczniki schema oznaczone jako faq to wie, która strona posiada, a która nie posiada. Klienci łatwo znajdują odpowiedź na nurtujące pytanie odnośnie zakupów. Mamy spokojniejszy telefon i lżejszą skrzynkę mailową. Są oczywiście przeciwnicy FAQ. Wg nich lepiej jak klient zadzwoni czy napisze do nas, bo wtedy możęmy go lepiej przekonać do zakupu. Jaką drogę Ty wybierzesz to już zależy od Ciebie.
Mogę wykonać za Ciebie cały ten proces. Podstawowe wdrożenie przygotowanego tekstu to tylko 100zł/netto. Skontaktuj się ze mną przez podstronę kontakt.
- Tworzymy podstronę w CMS o nazwie FAQ lub najczęstsze pytania. Obok strony mamy informację jaki numer ID ma nasza podstrona. W naszym przypadku jest to ID 11
