schon/storefront/app.vue
Alexandr SaVBaD Waltz 40ae24a04c Features: 1) Add SEO-related fragments to GraphQL queries including SEOMETA_FRAGMENT usage in brands, categories, and products queries; 2) Enable localized and dynamic SEO metadata handling in category pages with Vue composables and useSeoMeta; 3) Replace obsolete client-only wrapper with native Nuxt components like nuxt-marquee for enhanced rendering;
Fixes: 1) Correct file path imports by removing `.js` extensions in GraphQL fragments; 2) Resolve typo in `usePromocodeStore` composables to ensure consistent store usage; 3) Add missing `:type="submit"` to login form button for proper form submission handling;

Extra: 1) Remove unused `.idea` and `README.md` files for repository cleanup; 2) Delete extraneous dependencies from `package-lock.json` for streamlined package management; 3) Refactor category slug handling with improved composable logic for cleaner route parameters and SEO alignment.
2025-09-13 12:53:06 +03:00

139 lines
No EOL
3.1 KiB
Vue

<template>
<div class="main">
<nuxt-loading-indicator color="#7965d1" />
<base-header />
<ui-breadcrumbs v-if="showBreadcrumbs" />
<transition name="opacity" mode="out-in">
<base-auth v-if="activeState">
<forms-login v-if="appStore.isLogin" />
<forms-register v-if="appStore.isRegister" />
<forms-reset-password v-if="appStore.isForgot" />
<forms-new-password v-if="appStore.isReset" />
</base-auth>
</transition>
<nuxt-page />
<base-footer />
</div>
</template>
<script lang="ts" setup>
import {useAppConfig} from "~/composables/config";
import { DEFAULT_LOCALE } from '~/config/constants';
import {useRefresh} from "~/composables/auth";
import {useLanguages} from "~/composables/languages";
import {useCompanyInfo} from "~/composables/company";
import {useCategories} from "~/composables/categories";
const { locale } = useI18n();
const route = useRoute();
const router = useRouter();
const appStore = useAppStore();
const switchLocalePath = useSwitchLocalePath();
const showBreadcrumbs = computed(() => {
const name = typeof route.name === 'string' ? route.name : '';
return ![
'index',
'brand',
'search',
'profile',
'activate-user',
'reset-password'
].some(prefix => name.startsWith(prefix));
});
const activeState = computed(() => appStore.activeState);
const { COOKIES_LOCALE_KEY } = useAppConfig();
const cookieLocale = useCookie(
COOKIES_LOCALE_KEY,
{
default: () => DEFAULT_LOCALE,
path: '/'
}
);
const { refresh } = useRefresh();
const { getCategories } = await useCategories();
let refreshInterval: NodeJS.Timeout;
await Promise.all([
refresh(),
useLanguages(),
useCompanyInfo(),
getCategories()
]);
watch(
() => appStore.activeState,
(state) => {
appStore.setOverflowHidden(state !== '');
},
{ immediate: true }
);
watch(locale, () => {
useHead({
htmlAttrs: {
lang: locale.value
}
});
});
let stopWatcher: VoidFunction = () => {};
onMounted( async () => {
refreshInterval = setInterval(async () => {
await refresh();
}, 600000);
if (!cookieLocale.value) {
cookieLocale.value = DEFAULT_LOCALE;
await router.push({path: switchLocalePath(cookieLocale.value)});
}
if (locale.value !== cookieLocale.value) {
await router.push({path: switchLocalePath(cookieLocale.value)});
}
stopWatcher = watch(
() => appStore.isOverflowHidden,
(hidden) => {
const root = document.documentElement;
const body = document.body;
if (hidden) {
root.classList.add('lock-scroll');
body.classList.add('lock-scroll');
} else {
root.classList.remove('lock-scroll');
body.classList.remove('lock-scroll');
}
},
{ immediate: true }
);
useHead({
htmlAttrs: {
lang: locale.value
}
});
});
onBeforeUnmount(() => {
stopWatcher()
document.documentElement.classList.remove('lock-scroll');
document.body.classList.remove('lock-scroll');
});
</script>
<style lang="scss">
.main {
padding-top: 90px;
background-color: $light;
}
.lock-scroll {
overflow: hidden !important;
}
</style>