Initial commit
This commit is contained in:
156
resources/js/pages/front-pages/help-center/article/[title].vue
Normal file
156
resources/js/pages/front-pages/help-center/article/[title].vue
Normal file
@@ -0,0 +1,156 @@
|
||||
<script setup>
|
||||
import Footer from '@/views/front-pages/front-page-footer.vue'
|
||||
import Navbar from '@/views/front-pages/front-page-navbar.vue'
|
||||
import { useConfigStore } from '@core/stores/config'
|
||||
|
||||
const store = useConfigStore()
|
||||
|
||||
store.skin = 'default'
|
||||
definePage({
|
||||
meta: {
|
||||
layout: 'blank',
|
||||
public: true,
|
||||
},
|
||||
})
|
||||
|
||||
const articleData = ref()
|
||||
|
||||
setTimeout(async () => {
|
||||
const { data, error } = await useApi('/pages/help-center/article')
|
||||
if (error.value)
|
||||
console.log(error.value)
|
||||
else
|
||||
articleData.value = data.value
|
||||
}, 1000)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<div class="bg-surface help-center-article">
|
||||
<!-- 👉 Navbar -->
|
||||
<Navbar />
|
||||
|
||||
<!-- 👉 Content -->
|
||||
<VContainer>
|
||||
<div
|
||||
v-if="articleData && articleData?.title"
|
||||
class="article-section"
|
||||
>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="8"
|
||||
>
|
||||
<div>
|
||||
<VBreadcrumbs
|
||||
class="px-0 pb-2 pt-0 help-center-breadcrumbs"
|
||||
:items="[{ title: 'Help Center', to: { name: 'front-pages-help-center' }, class: 'text-primary' }, { title: 'how to add product in cart' }]"
|
||||
/>
|
||||
<h4 class="text-h4 mb-2">
|
||||
{{ articleData?.title }}
|
||||
</h4>
|
||||
<div class="text-body-1">
|
||||
{{ articleData?.lastUpdated }}
|
||||
</div>
|
||||
</div>
|
||||
<VDivider class="my-6" />
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<div
|
||||
class="mb-6 text-body-1"
|
||||
v-html="articleData?.productContent"
|
||||
/>
|
||||
<VImg
|
||||
class="rounded-lg"
|
||||
:src="articleData?.productImg"
|
||||
/>
|
||||
<p class="my-6 text-body-1">
|
||||
{{ articleData?.checkoutContent }}
|
||||
</p>
|
||||
<VImg
|
||||
class="rounded-lg"
|
||||
:src="articleData?.checkoutImg"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="4"
|
||||
>
|
||||
<VTextField
|
||||
prepend-inner-icon="tabler-search"
|
||||
placeholder="Search..."
|
||||
class="mb-6"
|
||||
/>
|
||||
<div>
|
||||
<!-- 👉 Article List -->
|
||||
<h5
|
||||
class="text-h5 px-6 py-2 mb-4 rounded"
|
||||
style="background: rgba(var(--v-theme-on-surface), var(--v-hover-opacity));"
|
||||
>
|
||||
Articles in this section
|
||||
</h5>
|
||||
<VList class="card-list">
|
||||
<VListItem
|
||||
v-for="(item, index) in articleData?.articleList"
|
||||
:key="index"
|
||||
link
|
||||
class="text-disabled"
|
||||
>
|
||||
<template #append>
|
||||
<VIcon
|
||||
:icon="$vuetify.locale.isRtl ? 'tabler-chevron-left' : 'tabler-chevron-right'"
|
||||
size="20"
|
||||
/>
|
||||
</template>
|
||||
<div class="text-body-1 text-high-emphasis">
|
||||
{{ item }}
|
||||
</div>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</div>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</div>
|
||||
</VContainer>
|
||||
|
||||
<!-- 👉 Footer -->
|
||||
<Footer />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.article-section {
|
||||
margin-block: 10.5rem 5.25rem;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.article-section {
|
||||
margin-block-start: 6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.card-list {
|
||||
--v-card-list-gap: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
@media (max-width: 960px) and (min-width: 600px) {
|
||||
.help-center-article {
|
||||
.v-container {
|
||||
padding-inline: 2rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.help-center-breadcrumbs {
|
||||
&.v-breadcrumbs {
|
||||
.v-breadcrumbs-item {
|
||||
padding: 0 !important;
|
||||
|
||||
&.v-breadcrumbs-item--disabled {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
123
resources/js/pages/front-pages/help-center/index.vue
Normal file
123
resources/js/pages/front-pages/help-center/index.vue
Normal file
@@ -0,0 +1,123 @@
|
||||
<script setup>
|
||||
import Footer from '@/views/front-pages/front-page-footer.vue'
|
||||
import Navbar from '@/views/front-pages/front-page-navbar.vue'
|
||||
import HelpCenterLandingArticlesOverview from '@/views/pages/help-center/HelpCenterLandingArticlesOverview.vue'
|
||||
import HelpCenterLandingFooter from '@/views/pages/help-center/HelpCenterLandingFooter.vue'
|
||||
import HelpCenterLandingKnowledgeBase from '@/views/pages/help-center/HelpCenterLandingKnowledgeBase.vue'
|
||||
import { useConfigStore } from '@core/stores/config'
|
||||
|
||||
// fetching data from fake-api
|
||||
const store = useConfigStore()
|
||||
|
||||
store.skin = 'default'
|
||||
definePage({
|
||||
meta: {
|
||||
layout: 'blank',
|
||||
public: true,
|
||||
},
|
||||
})
|
||||
|
||||
const apiData = ref()
|
||||
|
||||
// // ℹ️ Check if MSW service worker is registered and ready to intercept requests
|
||||
setTimeout(async () => {
|
||||
const faqData = await $api('/pages/help-center')
|
||||
|
||||
apiData.value = faqData
|
||||
}, 1000)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="help-center-page">
|
||||
<Navbar />
|
||||
<div v-if="apiData && apiData.allArticles.length">
|
||||
<AppSearchHeader
|
||||
subtitle="Common troubleshooting topics: eCommerce, Blogging to payment"
|
||||
custom-class="rounded-0"
|
||||
placeholder="Search"
|
||||
>
|
||||
<template #title>
|
||||
<h4
|
||||
class="text-h4 font-weight-medium"
|
||||
style="color: rgba(var(--v-theme-primary), 1);"
|
||||
>
|
||||
Hello, how can we help?
|
||||
</h4>
|
||||
</template>
|
||||
</AppSearchHeader>
|
||||
|
||||
<!-- 👉 Popular Articles -->
|
||||
<div class="help-center-section bg-surface">
|
||||
<VContainer>
|
||||
<h4 class="text-h4 text-center mb-6">
|
||||
Popular Articles
|
||||
</h4>
|
||||
<HelpCenterLandingArticlesOverview :articles="apiData.popularArticles" />
|
||||
</VContainer>
|
||||
</div>
|
||||
|
||||
<!-- 👉 Knowledge Base -->
|
||||
<div class="help-center-section">
|
||||
<VContainer>
|
||||
<h4 class="text-h4 text-center mb-6">
|
||||
Knowledge Base
|
||||
</h4>
|
||||
<HelpCenterLandingKnowledgeBase :categories="apiData.allArticles" />
|
||||
</VContainer>
|
||||
</div>
|
||||
|
||||
<!-- 👉 Keep Learning -->
|
||||
<div class="help-center-section bg-surface">
|
||||
<VContainer>
|
||||
<h4 class="text-h4 text-center mb-6">
|
||||
Keep Learning
|
||||
</h4>
|
||||
<HelpCenterLandingArticlesOverview :articles="apiData.keepLearning" />
|
||||
</VContainer>
|
||||
</div>
|
||||
|
||||
<!-- 👉 Still need help? -->
|
||||
<div class="help-center-section">
|
||||
<HelpCenterLandingFooter />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Footer />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.help-center-page {
|
||||
.search-header {
|
||||
background-size: cover !important;
|
||||
padding-block: 9.25rem 4.75rem !important;
|
||||
}
|
||||
|
||||
.help-center-section {
|
||||
padding-block: 5.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 960px) and (min-width: 600px) {
|
||||
.help-center-page {
|
||||
.v-container {
|
||||
padding-inline: 2rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 599px) {
|
||||
.help-center-page {
|
||||
.search-header {
|
||||
padding-block: 7rem 2rem !important;
|
||||
padding-inline: 2rem !important;
|
||||
}
|
||||
|
||||
.help-center-section {
|
||||
padding-block: 3.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user