I have added a FAQ on my site which uses PageBuilder.
When you use schema.org it will be good for SEO.
Below here is an example how I did this. Happy to share this with you.
After you have installed PageBuilder and set it up right just add a faq.php file in the folder: /assets/plugins/pagebuilder/config/
.
<?php
return [
'title' => 'FAQ',
// 'show_in_templates' => [ 4 ],
'show_in_docs' => [ 8 ],
// 'order' => 1,
// 'container' => 'default',
// 'image' => 'assets/plugins/pagebuilder/images/icon-faq.png',
'templates' => [
'owner' => '@CHUNK pb_faq',
'items' => '@CHUNK pb_faq-row',
'anchors' => [
'owner' => '@CHUNK pb_faq-seo',
'items' => '@CHUNK pb_faq-seo-row',
],
],
'fields' => [
'items' => [
'caption' => 'FAQ',
'type' => 'group',
'fields' => [
'q' => [
'caption' => 'Question,
'type' => 'text',
],
'a' => [
'caption' => 'Answer',
'type' => 'richtext',
'theme' => 'mini',
'options' => [
'height' => '80px',
],
],
],
],
],
];
You need to have 4 chunks:
pb_faq
<section class="cb_faq">
<div class="container">
<div class="row">
<div class="items">
[+items+]
</div>
</div>
</div>
</section>
pb_faq-row
<div class="item">
<div class="faq-q">[+q+]</div>
<div class="faq-a"><span>[+a+]</span></div>
</div>
pb_faq-seo
<script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[ [+items+] ]}</script>
pb_faq-seo-row
[[if? &is=`[+items_iteration+]:is:1` &then=`` &else=`,`]]{"@type":"Question","name":"[+q+]","acceptedAnswer":{"@type":"Answer","text":"[+a+]"}}
At the bottom of your template:
[!PageBuilder? &templates=`anchors`!]
I use this script for toggle the answer: (can be placed in chunk pb_faq on the bottom)
<script>
/* FAQ */
var acc = document.getElementsByClassName("faq-q");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
</script>
I use this basic CSS:
<style>
/* FAQ */
.cb_faq .item{margin-bottom:15px; border:0 solid #ccc;}
.faq-q{cursor:pointer; padding:15px 40px 15px 20px; background-color:#f7f7f7; width:100%; border:none; text-align:left; outline:none; transition:.3s; color:#000; font-weight:500; font-size:110%;}
.faq-q.active, .faq-q:hover{color:#000;}
.faq-q:after{content:'\002B'; color:#000; float:right; margin-right:-20px; font-weight:100;}
.faq-q.active:after{content:"\2212";}
.faq-a{padding:0 20px; max-height:0; overflow:hidden; transition:max-height 0.2s ease-out; background:#fff;}
.faq-a span{padding:15px 0; display:block;}
</style>
Testing can be done here:
https://search.google.com/structured-data/testing-tool?hl=en
Because we use anchors and when they are not used in other PageBuilder .php items we need to add a blank chunk:
https://github.com/mnoskov/pagebuilder/issues/88
'templates' => [
'owner' => '@CHUNK pb-something',
'anchors' => [
'owner' => '@CHUNK pb-nothing',
],
],
You need to watch out with : and " in your questions / answers.
If there are links (<a href>) in you answers then you can use a Snippet to fix that:
Add a Snippet called: addslash with: (thanks to @mplavala)
<?php
$input = (isset($input)) ? $input : "";
echo addslashes($input);
The use it like this in you chunk: pb_faq-seo-row:
[[addslash? &input=`[+a+]`]]