@crm-market/template-shared 1.0.0

package/e2e/navigation.spec.ts

@@ -0,0 +1,61 @@
+import { test, expect } from '@playwright/test';
+import { setupMockApi } from './fixtures/mock-api';
+
+test.describe('Навігація між сторінками', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupMockApi(page);
+  });
+
+  const pages = [
+    { path: '/about-us', title: 'Про нас' },
+    { path: '/contact', title: 'Контакти' },
+    { path: '/products', title: 'Товари' },
+    { path: '/categories', title: 'Категорії' },
+    { path: '/cart', title: 'Кошик' },
+    { path: '/login', title: 'Увійти' },
+    { path: '/register', title: 'Реєстрація' },
+    { path: '/faq', title: 'Часті запитання' },
+    { path: '/terms-conditions', title: 'Умови' },
+    { path: '/privacy-policy', title: 'Політика' },
+  ];
+
+  for (const p of pages) {
+    test(`відкривається сторінка ${p.path}`, async ({ page }) => {
+      const response = await page.goto(p.path);
+      expect(response?.status()).toBeLessThan(500);
+
+      // Сторінка має рендеритись без помилок
+      const errorOverlay = page.locator('#nuxt-error, .nuxt-error-page');
+      const hasError = await errorOverlay.isVisible().catch(() => false);
+
+      if (!hasError) {
+        // Перевіряємо наявність page banner
+        const banner = page.locator('.page-banner-area, .breadcrumb').first();
+        await expect(banner).toBeVisible({ timeout: 5000 }).catch(() => {
+          // Деякі сторінки можуть не мати banner — це ок
+        });
+      }
+    });
+  }
+});
+
+test.describe('Responsive навігація', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupMockApi(page);
+  });
+
+  test('мобільне меню відкривається', async ({ page }) => {
+    // Встановлюємо мобільний viewport
+    await page.setViewportSize({ width: 375, height: 812 });
+    await page.goto('/');
+
+    // Шукаємо кнопку мобільного меню
+    const menuButton = page.locator('.navbar-toggler, .hamburger-menu, .ri-menu-line, button[aria-label*="menu"]').first();
+    if (await menuButton.isVisible()) {
+      await menuButton.click();
+      // Перевіряємо що мобільне меню з'явилось
+      const mobileMenu = page.locator('.responsive-navbar, .mobile-menu, .offcanvas, .sidebar-menu').first();
+      await expect(mobileMenu).toBeVisible({ timeout: 3000 });
+    }
+  });
+});

package/e2e/pages/cart.page.ts

@@ -0,0 +1,44 @@
+import type { Page, Locator } from '@playwright/test';
+
+/**
+ * Page Object для сторінки кошика.
+ */
+export class CartPage {
+  readonly page: Page;
+  readonly cartItems: Locator;
+  readonly emptyCartMessage: Locator;
+  readonly subtotal: Locator;
+  readonly checkoutButton: Locator;
+  readonly removeButtons: Locator;
+  readonly quantityInputs: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.cartItems = page.locator('.cart-item, .cart-table tbody tr');
+    this.emptyCartMessage = page.locator('.empty-cart, :text("порожній"), :text("empty")');
+    this.subtotal = page.locator('.subtotal, .cart-total');
+    this.checkoutButton = page.locator('a[href*="checkout"], button:has-text("Checkout"), button:has-text("Оформити")');
+    this.removeButtons = page.locator('.remove-btn, .ri-delete-bin-line, .ri-close-line');
+    this.quantityInputs = page.locator('.quantity-input, input[type="number"]');
+  }
+
+  async goto() {
+    await this.page.goto('/cart');
+  }
+
+  async getItemCount() {
+    return await this.cartItems.count();
+  }
+
+  async removeItem(index: number) {
+    await this.removeButtons.nth(index).click();
+  }
+
+  async proceedToCheckout() {
+    await this.checkoutButton.click();
+  }
+
+  async isEmpty() {
+    return await this.emptyCartMessage.isVisible();
+  }
+}

package/e2e/pages/homepage.page.ts

@@ -0,0 +1,46 @@
+import type { Page, Locator } from '@playwright/test';
+
+/**
+ * Page Object для головної сторінки шаблону.
+ */
+export class HomepagePage {
+  readonly page: Page;
+  readonly topHeader: Locator;
+  readonly middleHeader: Locator;
+  readonly navbar: Locator;
+  readonly banner: Locator;
+  readonly footer: Locator;
+  readonly searchInput: Locator;
+  readonly cartIcon: Locator;
+  readonly logo: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.topHeader = page.locator('.top-header-area');
+    this.middleHeader = page.locator('.middle-header-area');
+    this.navbar = page.locator('.navbar-area');
+    this.banner = page.locator('.banner-area, .swiper');
+    this.footer = page.locator('.footer-area');
+    this.searchInput = page.locator('.search-input, input[type="search"], .search-box input');
+    this.cartIcon = page.locator('.cart-btn, .ri-shopping-cart-line').first();
+    this.logo = page.locator('.logo img, .navbar-brand img').first();
+  }
+
+  async goto() {
+    await this.page.goto('/');
+  }
+
+  async searchProduct(query: string) {
+    await this.searchInput.fill(query);
+    await this.searchInput.press('Enter');
+  }
+
+  async openCart() {
+    await this.cartIcon.click();
+  }
+
+  async getSectionCount() {
+    // Підраховує кількість видимих секцій на головній сторінці
+    return await this.page.locator('section, .section-area, [class*="area"]').count();
+  }
+}

package/e2e/playwright.config.ts

@@ -0,0 +1,32 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Базова конфігурація Playwright для шаблонів магазинів.
+ * Кожен шаблон може розширити цю конфігурацію, змінивши baseURL та порт.
+ */
+export default defineConfig({
+  testDir: '.',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  timeout: 30_000,
+
+  use: {
+    baseURL: process.env.BASE_URL || 'http://localhost:3000',
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    {
+      name: 'mobile',
+      use: { ...devices['iPhone 14'] },
+    },
+  ],
+});

package/e2e/products.spec.ts

@@ -0,0 +1,33 @@
+import { test, expect } from '@playwright/test';
+import { setupMockApi } from './fixtures/mock-api';
+import { ProductsPage } from './pages/products.page';
+
+test.describe('Сторінка товарів', () => {
+  let productsPage: ProductsPage;
+
+  test.beforeEach(async ({ page }) => {
+    await setupMockApi(page);
+    productsPage = new ProductsPage(page);
+    await productsPage.goto();
+  });
+
+  test('відображає банер сторінки', async ({ page }) => {
+    await expect(page.locator('.page-banner-area, .breadcrumb').first()).toBeVisible();
+  });
+
+  test('відображає товари з API', async () => {
+    // Чекаємо завантаження товарів
+    await productsPage.page.waitForTimeout(2000);
+    const count = await productsPage.getProductCount();
+    expect(count).toBeGreaterThan(0);
+  });
+
+  test('товар має назву та ціну', async ({ page }) => {
+    await page.waitForTimeout(2000);
+    // Перевіряємо що є текст з цінами (грн або числа)
+    const priceElements = page.locator('.product-card .price, .product-item .price, .product-price');
+    if (await priceElements.count() > 0) {
+      await expect(priceElements.first()).toBeVisible();
+    }
+  });
+});

package/layouts/default.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+/**
+ * Головний layout шаблону магазину.
+ * Динамічно обирає варіант header/navbar/footer
+ * на основі templateType або componentSettings з API.
+ */
+const config = useRuntimeConfig();
+const { siteConfig, componentSettings } = useSiteConfig();
+
+const templateType = computed(() => {
+  return siteConfig.value?.template?.type || config.public.templateType || 'electronics';
+});
+
+// Визначаємо варіант header на основі шаблону або componentSettings
+const headerStyle = computed(() => {
+  return componentSettings.value?.header?.style || getDefaultHeaderStyle(templateType.value);
+});
+
+const navbarStyle = computed(() => {
+  return componentSettings.value?.navbar?.style || getDefaultNavbarStyle(templateType.value);
+});
+
+const footerStyle = computed(() => {
+  return componentSettings.value?.footer?.style || getDefaultFooterStyle(templateType.value);
+});
+
+function getDefaultHeaderStyle(type: string): string {
+  const map: Record<string, string> = {
+    electronics: 'default',
+    grocery: 'two',
+    healthy_diet: 'three',
+  };
+  return map[type] || 'default';
+}
+
+function getDefaultNavbarStyle(type: string): string {
+  const map: Record<string, string> = {
+    electronics: 'default',
+    grocery: 'two',
+    healthy_diet: 'three',
+  };
+  return map[type] || 'default';
+}
+
+function getDefaultFooterStyle(type: string): string {
+  const map: Record<string, string> = {
+    electronics: 'default',
+    grocery: 'default',
+    healthy_diet: 'two',
+  };
+  return map[type] || 'default';
+}
+
+// Маппінг стилів до компонентів
+const headerComponents: Record<string, any> = {
+  default: resolveComponent('LayoutMiddleHeader'),
+  two: resolveComponent('LayoutMiddleHeaderTwo'),
+  three: resolveComponent('LayoutMiddleHeaderThree'),
+};
+
+const navbarComponents: Record<string, any> = {
+  default: resolveComponent('LayoutNavbar'),
+  two: resolveComponent('LayoutNavbarStyleTwo'),
+  three: resolveComponent('LayoutNavbarStyleThree'),
+  four: resolveComponent('LayoutNavbarStyleFour'),
+};
+
+const footerComponents: Record<string, any> = {
+  default: resolveComponent('LayoutFooter'),
+  two: resolveComponent('LayoutFooterTwo'),
+};
+
+const currentHeader = computed(() => headerComponents[headerStyle.value] || headerComponents.default);
+const currentNavbar = computed(() => navbarComponents[navbarStyle.value] || navbarComponents.default);
+const currentFooter = computed(() => footerComponents[footerStyle.value] || footerComponents.default);
+</script>
+
+<template>
+  <div>
+    <LayoutTopHeader />
+    <component :is="currentHeader" />
+    <component :is="currentNavbar" />
+
+    <slot />
+
+    <CommonServices class="bg-gray1" />
+    <component :is="currentFooter" />
+    <LayoutBackToUp />
+    <LayoutResponsiveNavbar />
+    <LayoutLocationOption />
+    <LayoutCopyright />
+    <LayoutRTLSwitchBtn />
+  </div>
+</template>

package/layouts/inner.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+/**
+ * Layout для внутрішніх сторінок (cart, checkout, login, тощо).
+ * Використовує NavbarStyleFour замість основного навбару.
+ */
+const config = useRuntimeConfig();
+const { siteConfig, componentSettings } = useSiteConfig();
+
+const templateType = computed(() => {
+  return siteConfig.value?.template?.type || config.public.templateType || 'electronics';
+});
+
+const headerStyle = computed(() => {
+  return componentSettings.value?.header?.style || getDefaultHeaderStyle(templateType.value);
+});
+
+const footerStyle = computed(() => {
+  return componentSettings.value?.footer?.style || getDefaultFooterStyle(templateType.value);
+});
+
+function getDefaultHeaderStyle(type: string): string {
+  const map: Record<string, string> = {
+    electronics: 'default',
+    grocery: 'two',
+    healthy_diet: 'three',
+  };
+  return map[type] || 'default';
+}
+
+function getDefaultFooterStyle(type: string): string {
+  const map: Record<string, string> = {
+    electronics: 'default',
+    grocery: 'default',
+    healthy_diet: 'two',
+  };
+  return map[type] || 'default';
+}
+
+const headerComponents: Record<string, any> = {
+  default: resolveComponent('LayoutMiddleHeader'),
+  two: resolveComponent('LayoutMiddleHeaderTwo'),
+  three: resolveComponent('LayoutMiddleHeaderThree'),
+};
+
+const footerComponents: Record<string, any> = {
+  default: resolveComponent('LayoutFooter'),
+  two: resolveComponent('LayoutFooterTwo'),
+};
+
+const currentHeader = computed(() => headerComponents[headerStyle.value] || headerComponents.default);
+const currentFooter = computed(() => footerComponents[footerStyle.value] || footerComponents.default);
+</script>
+
+<template>
+  <div>
+    <LayoutTopHeader />
+    <component :is="currentHeader" />
+    <LayoutNavbarStyleFour />
+
+    <slot />
+
+    <CommonServices class="bg-gray1" />
+    <component :is="currentFooter" />
+    <LayoutBackToUp />
+    <LayoutResponsiveNavbar />
+    <LayoutLocationOption />
+    <LayoutCopyright />
+    <LayoutRTLSwitchBtn />
+  </div>
+</template>

package/nuxt.config.ts

@@ -0,0 +1,86 @@
+import { defineNuxtConfig } from "nuxt/config";
+import type { Plugin } from "vite";
+import vuetify, { transformAssetUrls } from "vite-plugin-vuetify";
+import { fileURLToPath } from 'url';
+import { dirname, resolve } from 'path';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+export default defineNuxtConfig({
+  ssr: true,
+
+  app: {
+    pageTransition: {
+      name: "fade",
+      mode: "out-in",
+    },
+    layoutTransition: {
+      name: "slide",
+      mode: "out-in",
+    },
+  },
+
+  runtimeConfig: {
+    public: {
+      apiBase: process.env.API_BASE_URL || 'http://localhost:3001/api',
+      templateType: process.env.TEMPLATE_TYPE || 'electronics',
+    },
+  },
+
+  // CSS з абсолютними шляхами відносно цього layer
+  css: [
+    "bootstrap/dist/css/bootstrap.min.css",
+    resolve(__dirname, 'assets/css/remixicon.css'),
+    resolve(__dirname, 'assets/fonts/flaticon.css'),
+    resolve(__dirname, 'assets/css/satoshi-font.css'),
+  ],
+
+  // Plugins авто-скануються з plugins/ — не потрібно оголошувати явно
+
+  build: {
+    transpile: ["vuetify"],
+  },
+
+  modules: [
+    (
+      _options: any,
+      nuxt: {
+        hooks: {
+          hook: (
+            arg0: string,
+            arg1: (config: { plugins: Plugin<any>[][] }) => void
+          ) => void;
+        };
+      }
+    ) => {
+      nuxt.hooks.hook(
+        "vite:extendConfig",
+        (config: { plugins: Plugin<any>[][] }) => {
+          config.plugins.push(vuetify({ autoImport: true }));
+        }
+      );
+    },
+    "nuxt-swiper",
+  ],
+
+  vite: {
+    vue: {
+      template: {
+        transformAssetUrls,
+      },
+    },
+    css: {
+      preprocessorOptions: {
+        scss: {
+          sourceMap: true,
+          additionalData: `
+            @import "${resolve(__dirname, 'assets/scss/_variables.scss')}";
+          `,
+        },
+      },
+    },
+  },
+
+  components: true,
+  compatibilityDate: "2026-01-02",
+});

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@crm-market/template-shared",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "Shared Nuxt 3 layer for CRM Market store templates (layouts, components, composables, pages)",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "nuxt dev",
+    "build": "nuxt build",
+    "postinstall": "nuxt prepare"
+  },
+  "files": [
+    "nuxt.config.ts",
+    "assets",
+    "components",
+    "composables",
+    "layouts",
+    "pages",
+    "plugins",
+    "types",
+    "utils",
+    "e2e"
+  ],
+  "dependencies": {
+    "bootstrap": "^5.3.3",
+    "nuxt": "^3.12.4",
+    "nuxt-swiper": "^1.2.2",
+    "vue": "^3.4.34",
+    "vue-router": "^4.4.0"
+  },
+  "devDependencies": {
+    "sass": "^1.77.8",
+    "vite-plugin-vuetify": "^2.0.3",
+    "vuetify": "^3.6.13"
+  }
+}

package/pages/about-us.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <CommonPageBanner pageTitle="Про нас" />
+    <AboutUsTuan />
+    <AboutUsStatistics />
+    <AboutUsSubscribeToTheNewsletter />
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({ layout: 'inner' });
+</script>

package/pages/address.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <CommonPageBanner pageTitle="Додати адресу" />
+    <AddAddress />
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({ layout: 'inner' });
+</script>

package/pages/cart.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <CommonPageBanner pageTitle="Кошик" />
+    <Cart />
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({ layout: 'inner' });
+</script>

package/pages/categories.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <CommonPageBanner pageTitle="Категорії" />
+    <Categories />
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({ layout: 'inner' });
+</script>

package/pages/change-password.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <CommonPageBanner pageTitle="Зміна пароля" />
+    <ChangePassword />
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({ layout: 'inner' });
+</script>

package/pages/checkout.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <CommonPageBanner pageTitle="Оформлення замовлення" />
+    <Checkout />
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({ layout: 'inner' });
+</script>

package/pages/contact.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <CommonPageBanner pageTitle="Контакти" />
+    <ContactInfo />
+    <ContactForm />
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({ layout: 'inner' });
+</script>

package/pages/dashboard.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <CommonPageBanner pageTitle="Дашборд" />
+    <Dashboard />
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({ layout: 'inner' });
+</script>

package/pages/edit-address.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <CommonPageBanner pageTitle="Редагувати адресу" />
+    <EditAddress />
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({ layout: 'inner' });
+</script>

package/pages/edit-profile.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <CommonPageBanner pageTitle="Редагувати профіль" />
+    <EditProfile />
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({ layout: 'inner' });
+</script>

package/pages/faq.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <CommonPageBanner pageTitle="Часті запитання" />
+    <FAQ />
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({ layout: 'inner' });
+</script>

package/pages/forgot-password.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <CommonPageBanner pageTitle="Відновити пароль" />
+    <ForgotPassword />
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({ layout: 'inner' });
+</script>

package/pages/login.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <CommonPageBanner pageTitle="Увійти" />
+    <Login />
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({ layout: 'inner' });
+</script>

package/pages/my-account.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <CommonPageBanner pageTitle="Мій акаунт" />
+    <MyAccount />
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({ layout: 'inner' });
+</script>