94 lines
2.2 KiB
Vue
94 lines
2.2 KiB
Vue
<template>
|
|
<section id="faq" class="faq">
|
|
<h3>{{ headline }}</h3>
|
|
<Accordion v-if="accordionItems.length" :items="accordionItems" />
|
|
<p v-else>Loading...</p>
|
|
|
|
<div class="row mt-4">
|
|
<div class="col-md-6 mb-3">
|
|
<h4> {{ $t('faqBox.questions') }} </h4>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<button role="button" class="pinkBtn" @click.prevent="toggleContactBubble">
|
|
{{ button }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, defineProps } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
import { useMainStore } from '@/stores/main'
|
|
import { useHtmlConverter } from '~/composables/useHTMLConverter'
|
|
|
|
const { t } = useI18n()
|
|
const { convertToHTML } = useHtmlConverter()
|
|
|
|
const props = defineProps({
|
|
pageLink: { type: String, required: true },
|
|
headline: { type: String, required: false },
|
|
button: { type: String, required: false },
|
|
})
|
|
|
|
// Fallbacks im Setup definieren, falls keine Props übergeben wurden
|
|
const headline = computed(() => props.headline ?? t('faqBox.faqsDefault'))
|
|
const button = computed(() => props.button ?? t('faqBox.btnDefault'))
|
|
|
|
const mainStore = useMainStore()
|
|
|
|
const accordionItems = computed(() =>
|
|
mainStore.getFaqsByPageLink(props.pageLink).map(faq => ({
|
|
title: faq.question,
|
|
html: convertToHTML(faq.answer)
|
|
}))
|
|
)
|
|
|
|
const toggleContactBubble = () => mainStore.toggleContactBubble()
|
|
|
|
// FAQ JSON-LD
|
|
|
|
useHead(() => {
|
|
if (!accordionItems.value.length) return {}
|
|
|
|
const faqJsonLd = {
|
|
"@context": "https://schema.org",
|
|
"@type": "FAQPage",
|
|
"mainEntity": accordionItems.value.map(item => ({
|
|
"@type": "Question",
|
|
"name": item.title,
|
|
"acceptedAnswer": {
|
|
"@type": "Answer",
|
|
"text": item.html.replace(/<[^>]*>?/gm, '') // HTML-Tags entfernen
|
|
}
|
|
}))
|
|
}
|
|
|
|
return {
|
|
script: [
|
|
{
|
|
type: 'application/ld+json',
|
|
children: JSON.stringify(faqJsonLd)
|
|
}
|
|
]
|
|
}
|
|
})
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="sass">
|
|
.faq
|
|
width: 80%
|
|
margin: 2rem auto
|
|
h3
|
|
font-size: 1.4rem
|
|
font-family: 'Mainfont-Bold'
|
|
h4
|
|
font-size: 1.4rem
|
|
font-family: 'Mainfont-Bold'
|
|
margin-top: .6rem
|
|
</style>
|
|
|