Skip to content

feat(general): add 404 error page #148

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 38 commits into
base: release/v0.2
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
38 commits
Select commit Hold shift + click to select a range
2b7260a
[POND-1] add first components
aheartforspinach Feb 26, 2025
1eb5691
[POND-1] add wishlist icon in header
aheartforspinach Feb 26, 2025
a72d0b7
[POND-1] add shadcn
aheartforspinach Feb 26, 2025
075d749
[POND-1] push broken stuff
aheartforspinach Feb 27, 2025
9610f87
[POND-1] fix import topic
aheartforspinach Feb 28, 2025
110fa93
[POND-1] add inner and outer
aheartforspinach Mar 7, 2025
e176fd6
[POND-12] add cms handling
aheartforspinach Mar 7, 2025
426bd05
[POND-12] adjust throw error
aheartforspinach Mar 7, 2025
09a59f0
[POND-1] fix linter
aheartforspinach Mar 11, 2025
1bf00a7
[POND-1] fix formatting
aheartforspinach Mar 11, 2025
ec5d6b8
[POND-1] add code comments
aheartforspinach Mar 18, 2025
6eedace
[POND-1] use line items instead of number
aheartforspinach Mar 18, 2025
0a3a3a6
[POND-1] Merge remote-tracking branch 'origin/release/v0.2' into feat…
aheartforspinach Mar 18, 2025
d5ee09c
Apply suggestions from code review
aheartforspinach Mar 19, 2025
ae98044
[POND-1] adjust spacing, add snippets for closing stuff
aheartforspinach Mar 19, 2025
631d21f
Merge branch 'feature/POND-1-header' into feature/POND-12-cms-pages
aheartforspinach Mar 19, 2025
7fca445
[POND-12] update branch
aheartforspinach Mar 19, 2025
1401254
[POND-12] use shopware cms base layer
aheartforspinach Mar 19, 2025
2afc7bb
[POND-12] write documentation
aheartforspinach Mar 19, 2025
27f18f8
[POND-12] remove unused code
aheartforspinach Mar 19, 2025
680152a
[POND-12] edit env and add more in docs
aheartforspinach Mar 19, 2025
a3a1539
Apply suggestions from code review
aheartforspinach Mar 28, 2025
0c816da
change title
aheartforspinach Apr 3, 2025
820f772
Merge remote-tracking branch 'origin/release/v0.2' into feature/POND-…
aheartforspinach Apr 3, 2025
bfcb852
solve megre conflicts
aheartforspinach Apr 3, 2025
d4548e9
Merge remote-tracking branch 'origin/feature/POND-12-cms-pages' into …
chlongng Apr 16, 2025
5357abc
Merge remote-tracking branch 'origin/release/v0.2' into feature/POND-…
aheartforspinach Apr 17, 2025
93616f3
fix merge conflicts
aheartforspinach Apr 17, 2025
dd097da
POND-14: add 404 error page
chlongng Apr 17, 2025
36321ef
Merge remote-tracking branch 'origin/feature/POND-12-cms-pages' into …
chlongng Apr 17, 2025
a9313a8
POND-14: fix spacing
chlongng Apr 17, 2025
8b7f1c7
POND-14: add link
chlongng Apr 17, 2025
ed5479a
POND-14: add a general error layout
chlongng Apr 29, 2025
803c699
POND-14: refactored filenames
chlongng Apr 29, 2025
dd13e34
POND-14: update docs
chlongng Apr 29, 2025
02f3370
Merge remote-tracking branch 'origin/release/v0.2' into feature/POND-…
chlongng May 15, 2025
1cd6447
POND-8: renamed component
chlongng May 20, 2025
aef15a3
POND-14: fixed documentation naming
chlongng May 20, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions components/error/ErrorLayout.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<template>
<ErrorLayoutInner>
<template #wrapper>
<slot name="wrapper" />
</template>
<template #container>
<slot name="container" />
</template>
<template #title>
<slot name="title" />
</template>
<template #subTitle>
<slot name="subTitle" />
</template>
<template #button>
<slot name="button" />
</template>
</ErrorLayoutInner>
</template>
21 changes: 21 additions & 0 deletions components/error/ErrorLayoutInner.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<template>
<slot name="wrapper">
<div class="container mt-12">
<slot name="container">
<h1 class="mb-4 text-center text-4xl uppercase">
<slot name="title">{{ $t('error.generalHeadline') }}</slot>
</h1>
<p class="mb-4 text-center">
<slot name="subTitle" />
</p>
<div class="text-center">
<slot name="button">
<NuxtLinkLocale to="/">
<UiButton variant="link">{{ $t('error.generalButton') }}</UiButton>
</NuxtLinkLocale>
</slot>
</div>
</slot>
</div>
</slot>
</template>
3 changes: 3 additions & 0 deletions components/error/ErrorNotFound.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<template>
<ErrorNotFoundInner />
</template>
10 changes: 10 additions & 0 deletions components/error/ErrorNotFoundInner.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<template>
<ErrorLayout>
<template #title>
{{ $t('error.404.heading') }}
</template>
<template #subTitle>
{{ $t('error.404.detail') }}
</template>
</ErrorLayout>
</template>
1 change: 1 addition & 0 deletions docs/.vitepress/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ export default defineConfig({
collapsed: true,
items: [
{ text: 'CMS System', link: '/how-to/cms-system' },
{ text: 'Error Handling', link: '/how-to/error-handling'},
],
},
],
Expand Down
36 changes: 36 additions & 0 deletions docs/how-to/error-handling.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
# Http Error Handling

## ErrorLayout
The ErrorLayout component is used to display an error page. It comes with customizable slots that allow you to override key elements of the page, including the title, subtitle, button, layout. This documentation will guide you through how to use and customize these slots.

### Default Structure

By default, the ErrorLayout component includes the following:

| Name | Comment |
|:----------|:----------------------------------------------------------------------------------------------|
| Title | A large text that indicates the error (e.g., "Page Not Found") |
| Subtitle | A smaller description of the error (e.g., "Sorry, the page you're looking for doesn't exist") |
| Button | A button that users can click to navigate back to a home or specific page |
| Container | The container for the error message |
| Wrapper | The wrapper for the container |

### Basic Usage

```vue
<template>
<ErrorLayout>
<template #title>
Page Not Found
</template>
<template #subTitle>
The requested page could not be found
</template>
<template #button>
<div class="text-center"><a href="/">
<UiButton>Back to homepage</UiButton>
</a></div>
</template>
</ErrorLayout>
</template>
```
25 changes: 19 additions & 6 deletions error.vue
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
<script setup lang="ts">
import type { NuxtError } from '#app';
import type {NuxtError} from '#app';

const props = defineProps({
// we don't need a default value -> it's always set
// eslint-disable-next-line vue/require-default-prop
error: Object as () => NuxtError,
});

const { locale } = useI18n();
const {locale} = useI18n();
const url = useRequestURL();
const route = useRoute();
const configStore = useConfigStore();
await configStore.loadConfig();
const shopName = configStore.get('core.basicInformation.shopName') as string|null ?? 'pond';
const shopName = configStore.get('core.basicInformation.shopName') as string | null ?? 'pond';

useHead(() => ({
title: `${shopName } - ${ props.error?.statusCode}`,
title: `${shopName} - ${props.error?.statusCode}`,
htmlAttrs: {
lang: locale.value,
},
Expand All @@ -26,14 +26,27 @@ useHead(() => ({
},
],
}));

const pageNotFound = computed(() => props.error?.statusCode === 404);
</script>

<template>
<NuxtLoadingIndicator />
<LayoutHeader />

<main class="container">
<h1>{{ error?.statusCode }}</h1>
<p>{{ error?.message }}</p>
<template v-if="pageNotFound">
<ErrorNotFound />
</template>
<template v-else>
<ErrorLayout>
<template #title>
{{ error?.message }}
</template>
<template #subTitle>
{{ error?.statusCode }}
</template>
</ErrorLayout>
</template>
</main>
</template>
1 change: 1 addition & 0 deletions i18n/locales/de-DE/error.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"detail": "Die angeforderte Seite konnte nicht gefunden werden."
},
"generalHeadline": "Leider lief etwas schief",
"generalButton": "Zurück zur Startseite",
"CHECKOUT__CUSTOMER_NOT_FOUND": "Es konnte kein Account mit den angegebenen Zugangsdaten gefunden werden.",
"CHECKOUT__CUSTOMER_AUTH_BAD_CREDENTIALS": "Es konnte kein Account mit den angegebenen Zugangsdaten gefunden werden."
}
Expand Down
1 change: 1 addition & 0 deletions i18n/locales/en-GB/error.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"detail": "The requested page could not be found."
},
"generalHeadline": "Something went wrong, unfortunately.",
"generalButton": "Back to homepage",
"CHECKOUT__CUSTOMER_NOT_FOUND": "No account could be found with the provided credentials.",
"CHECKOUT__CUSTOMER_AUTH_BAD_CREDENTIALS": "No account could be found with the provided credentials."
}
Expand Down