HomeTutorialsAPI ReferenceUpdates
Tutorials

Overwriting the Faqs Template

❗️

Advanced Concepts

The following page is for advanced users who understand HTML and are familiar with VueJS Slots.

❗️

VueJs Template Syntax

If either your question or answer has raw HTML, you need to make sure that you are using the v-html directive to render it correctly.

Default Slot

All of the "optipub-elements" allow you to overwrite the way the information is displayed through the "default" slot.

766 
<template v-slot:default="data">
  <!-- custom templating -->
</template>

<optipub-faqs publication-id="1">
  <template v-slot:default="data">
    <ul v-for="faq in data.faqs" :key="faq.id">
      <li>{{ faq.question }}: {{ faq.answer }}</li>
    </ul>
  </template>
</optipub-faqs>

Header

The "header" slot allows you to change the title of the element without affecting any of the data or default template underneath.

766 
<template v-slot:header>
  <!-- custom templating -->
</template>
  
<optipub-faqs publication-id="1">
  <template v-slot:header>
    <h1>Questions</h1>
  </template>
</optipub-faqs>

FAQs

The "faqs" slot allows for you to change the list of faqs that is being rendered. This allows you complete control over the array of faqs being rendered.

766 
<template v-slot:faqs="data">
  <!-- custom templating -->
</template>

<optipub-faqs publication-id="1">
  <template v-slot:faqs="data">
    <ul v-for="faq in data.faqs" :key="faq.id">
      <li>{{ faq.question }}: {{ faq.answer }}</li>
    </ul>
  </template>
</optipub-faqs>

FAQ

The "faq" slot allows for you to change the layout of the frequently asked quesiton without having to loop through the array.

766 
<template v-slot:faq="data">
  <!-- custom templating -->
</template>

<optipub-faqs publication-id="1">
  <template v-slot:faq="data">
    <h4>{{ data.faq.question}}</h4>
    <p>{{ data.faq.answer }}</p>
    <hr>
  </template>
</optipub-faqs>

Question

The "question" slot allows for you to the formatting of the question.

766 
<template v-slot:question="data">
  <!-- custom templating -->
</template>

<optipub-faqs publication-id="1">
  <template v-slot:image="data">
  	<h4 v-html="data.faq.question"></h4>
  </template>
</optipub-faqs>

Answer

The "answer" slot allows for you to make changes to the formatting of the answer.

766 
<template v-slot:answer="data">
  <!-- custom templating -->
</template>

<optipub-faqs publication-id="1">
  <template v-slot:answer="data">
    <div class="py-0" v-html="data.faq.answer"></div>
  </template>
</optipub-faqs>

Updated 12 months ago