Site Builder

Editing: modules-faq1.php

writable 0666

<?php
/**************************************************************************
 *  FAQ DISPLAY MODULE  – gold‑card accordion           © BestDealOn 2025
 *  ----------------------------------------------------------------------
 *  • Expects helpers.php to be included first (`get_faq()` available)
 *  • Simply `require 'faq-display.php';` inside any page template.
 **************************************************************************/

if (!function_exists('get_faq')) {
    // defensive fallback – nothing rendered if helper missing
    return;
}

$cats = array_filter(get_faq(), fn($c) => !empty($c['faqs']));
if (!$cats) return;                                             // nothing to show

/* small escape helper */
function e(string $s): string { return htmlspecialchars($s, ENT_QUOTES, 'UTF-8'); }
?>

<section class="faq-shell">
  <div class="faq-card">
    <h2>Frequently&nbsp;Asked&nbsp;Questions</h2>

<?php foreach ($cats as $ci => $cat): ?>
      <h3 class="faq-cat"><?= e($cat['name'] ?: 'FAQ') ?></h3>

<?php foreach (($cat['faqs'] ?? []) as $qi => $qa):
              if (!($qa['active'] ?? true)) continue;           // skip inactive
              $id = "faq{$ci}_{$qi}";
      ?>
        <details class="faq-item" id="<?= $id ?>">
          <summary>
            <span class="q"><?= e($qa['q'] ?? 'Untitled question') ?></span>
            <svg class="chev" viewBox="0 0 16 16" width="16" height="16"
                 aria-hidden="true"><path d="M4 6l4 4 4-4" fill="none"
                 stroke="currentColor" stroke-width="2" stroke-linecap="round"
                 stroke-linejoin="round"/></svg>
          </summary>
          <div class="a">
            <?= nl2br(e($qa['a'] ?? '')) ?>
          </div>
        </details>
      <?php endforeach; ?>
    <?php endforeach; ?>
  </div>
</section>

<script type="application/ld+json">
<?= json_encode([
      '@context'    => 'https://schema.org',
      '@type'       => 'FAQPage',
      'mainEntity'  => array_merge(...array_map(function ($c) {
          return array_values(array_filter(array_map(function ($qa) {
              if (!($qa['active'] ?? true)) return null;
              return [
                  '@type'          => 'Question',
                  'name'           => $qa['q'],
                  'acceptedAnswer' => [
                      '@type' => 'Answer',
                      'text'  => $qa['a'],
                  ]
              ];
          }, $c['faqs'] ?? [])));
      }, $cats))
  ], JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT) ?>
</script>

/* ---------- gold card ---------- */
.faq-card{
  background:#fff;
  padding:1.8rem 1.6rem;
  border:3.5px solid #ffb63b;
  border-radius:27px;
  box-shadow:0 8px 26px rgba(0,0,0,.06);
}
.faq-card h2{
  margin:0 0 1.2rem;
  font-size:1.35rem;
  font-weight:700;
  color:#102a66;
  text-align:center;
}
.faq-cat{
  margin:1.6rem 0 .7rem;
  font-size:1.08rem;
  font-weight:700;
  color:#d06700;
}

/* ---------- accordion items ---------- */
.faq-item{
  border:1px solid #ffe7b2;
  border-radius:10px;
  margin:.55rem 0;
  overflow:hidden;
  background:#fffef9;
  transition:border-color .2s;
}
.faq-item summary{
  list-style:none;
  cursor:pointer;
  padding:.9rem 1.1rem;
  font-weight:600;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.faq-item summary::-webkit-details-marker{display:none}          /* Safari */
.faq-item[open]{
  border-color:#ffb63b;
  box-shadow:0 2px 8px #c49b6322;
}
.faq-item[open] .chev{transform:rotate(180deg)}
.faq-item .q{color:#b46700}
.faq-item .chev{
  flex:none;
  transition:transform .2s;
  color:#b46700;
}

/* answer */
.faq-item .a{
  padding:0 1.1rem 1rem;
  line-height:1.6;
  color:#333;
  border-top:1px solid #ffe7b2;
}

/* responsive touch target */
@media (max-width:500px){
  .faq-item summary{padding:.8rem .9rem}
  .faq-item .a{padding:.4rem .9rem 1rem}
}
</style>

Site Builder

Editing: modules-faq1.php

Site Builder