@crm-market/template-shared 1.0.6 → 1.0.8

package/composables/useStaticPages.ts

@@ -0,0 +1,48 @@
+import { computed } from 'vue';
+import { sanitizeHtml } from './useSanitize';
+
+export type StaticPageKey = 'about' | 'delivery' | 'returns' | 'contacts' | 'faq' | 'privacy' | 'terms';
+
+// Альтернативні ключі, під якими CRM може віддавати розділ
+const ALIASES: Record<StaticPageKey, string[]> = {
+  about: ['about'],
+  delivery: ['delivery'],
+  returns: ['returns'],
+  contacts: ['contacts'],
+  faq: ['faq'],
+  privacy: ['privacy', 'privacyPolicy'],
+  terms: ['terms', 'termsOfService'],
+};
+
+// Дефолтні тексти, якщо продавець нічого не заповнив
+const DEFAULTS: Record<StaticPageKey, string> = {
+  about: '<p>Інформація про магазин незабаром зʼявиться на цій сторінці.</p>',
+  delivery: '<p>Інформацію про доставку уточнюйте у менеджера.</p>',
+  returns: '<p>Умови повернення та обміну уточнюйте у менеджера.</p>',
+  contacts: '',
+  faq: '<p>Розділ наповнюється.</p>',
+  privacy: '<p>Розділ наповнюється.</p>',
+  terms: '<p>Розділ наповнюється.</p>',
+};
+
+/**
+ * Статичні сторінки магазину (HTML від продавця) з дефолтами.
+ * pageHtml повертає лише санітизований HTML.
+ */
+export const useStaticPages = () => {
+  const { siteConfig } = useSiteConfig();
+  const pages = computed<Record<string, string>>(() => (siteConfig.value as any)?.staticPages || {});
+
+  const raw = (key: StaticPageKey): string => {
+    for (const k of ALIASES[key]) {
+      const v = pages.value[k];
+      if (typeof v === 'string' && v.replace(/<[^>]*>|&nbsp;|\s/g, '').length > 0) return v;
+    }
+    return '';
+  };
+
+  const hasPage = (key: StaticPageKey) => !!raw(key);
+  const pageHtml = (key: StaticPageKey): string => sanitizeHtml(raw(key) || DEFAULTS[key]);
+
+  return { pageHtml, hasPage };
+};

package/composables/useStoreOrigin.ts

@@ -0,0 +1,32 @@
+import { useRequestURL, useRoute, useRuntimeConfig } from '#imports';
+import { useSiteConfig } from './useSiteConfig';
+import { computeStoreOrigin, buildCanonicalUrl } from '../utils/store-origin';
+
+/** Основний домен магазину та canonical-адреси сторінок. */
+export const useStoreOrigin = () => {
+  const { siteConfig } = useSiteConfig();
+  const config = useRuntimeConfig();
+  const reqUrl = useRequestURL();
+
+  const storeOrigin = (): string =>
+    computeStoreOrigin(
+      siteConfig.value,
+      String((config.public as any).storeBaseDomain || ''),
+      reqUrl.hostname,
+      reqUrl.origin,
+    );
+
+  /** page додається лише для каталогу/категорії і лише якщо > 1. */
+  const canonicalUrl = (path: string, page?: number | string | null): string =>
+    buildCanonicalUrl(storeOrigin(), path, page);
+
+  return { storeOrigin, canonicalUrl };
+};
+
+/** Canonical поточного маршруту (для каталогу/категорії враховує ?page=N). */
+export const useRouteCanonical = () => {
+  const route = useRoute();
+  const { canonicalUrl } = useStoreOrigin();
+  const PAGED = /^\/(products|categories|category\/)/;
+  return () => canonicalUrl(route.path, PAGED.test(route.path) ? route.query.page as string : null);
+};

package/composables/useTemplateSections.ts

@@ -19,7 +19,21 @@ export const useTemplateSections = () => {
     registeredSections.value = sections;
   };
 
-  // Секції з contentBlocks API (кастомізовано організацією)
+  // Секції з «Налаштувань шаблону»: values.contentBlocks.blocks (схема шаблону, repeater key/enabled/order)
+  const settingsBlocks = computed<ContentBlock[]>(() => {
+    const blocks = (siteConfig.value?.customization as any)?.values?.contentBlocks?.blocks;
+    if (!Array.isArray(blocks)) return [];
+    const seen = new Set<string>();
+    return blocks
+      .filter((b: any) => b && typeof b.key === 'string' && b.key && !seen.has(b.key) && seen.add(b.key))
+      .map((b: any, i: number) => ({
+        key: b.key,
+        order: Number.isFinite(Number(b.order)) && b.order !== '' && b.order !== null ? Number(b.order) : i + 1,
+        enabled: b.enabled !== false,
+      }));
+  });
+
+  // Старе місце: customization.contentBlocks (кастомізовано організацією через API)
   const contentBlocks = computed<ContentBlock[]>(() => {
     const blocks = siteConfig.value?.customization?.contentBlocks;
     if (!blocks || !Array.isArray(blocks) || blocks.length === 0) {
@@ -28,11 +42,44 @@ export const useTemplateSections = () => {
     return blocks;
   });
 
-  // Фінальний порядок секцій: API contentBlocks мають пріоритет, інакше — дефолтний порядок
-  const orderedSections = computed(() => {
+  // Фінальний порядок секцій:
+  // 1) values.contentBlocks.blocks — перелічені секції за order (вимкнені ховаються),
+  //    неперелічені секції шаблону йдуть після них у дефолтному порядку;
+  // 2) customization.contentBlocks — лише перелічені (стара поведінка);
+  // 3) дефолтний порядок з реєстру шаблону.
+  // Вимикач у самій секції: values[<ключ секції>].enabled === false ховає її (діє разом зі списком — AND)
+  const enabledInSection = (key: string) =>
+    (siteConfig.value?.customization as any)?.values?.[key]?.enabled !== false;
+
+  const orderedSections = computed(() => listedSections.value.filter((s) => enabledInSection(s.key)));
+
+  const listedSections = computed(() => {
     const sections = registeredSections.value;
     if (sections.length === 0) return [];
 
+    if (settingsBlocks.value.length > 0) {
+      const listed = new Set(settingsBlocks.value.map(b => b.key));
+      const fromSettings = [...settingsBlocks.value]
+        .sort((a, b) => a.order - b.order)
+        .filter(b => b.enabled)
+        .map(b => {
+          const registered = sections.find(s => s.key === b.key);
+          return {
+            key: b.key,
+            component: registered?.component || b.key,
+            label: registered?.label || b.key,
+            order: b.order,
+            enabled: true,
+            data: null,
+          };
+        });
+      const rest = sections
+        .filter(s => s.defaultEnabled && !listed.has(s.key))
+        .sort((a, b) => a.defaultOrder - b.defaultOrder)
+        .map(s => ({ key: s.key, component: s.component, label: s.label, order: s.defaultOrder, enabled: true, data: null }));
+      return [...fromSettings, ...rest];
+    }
+
     // Якщо є contentBlocks з API — використовуємо їх
     if (contentBlocks.value.length > 0) {
       return contentBlocks.value
@@ -71,5 +118,6 @@ export const useTemplateSections = () => {
     registerSections,
     orderedSections,
     contentBlocks,
+    settingsBlocks,
   };
 };

package/composables/useThemeVars.ts

@@ -0,0 +1,113 @@
+import { computed } from 'vue';
+import { useHead } from '#imports';
+import { useSiteConfig } from './useSiteConfig';
+
+// Шрифти, які не вшиті в шар (Satoshi є локально) — підтягуємо з Google Fonts
+// (з кириличним сабсетом; 500 — для елементів теми на --fontFamilyMedium)
+const GOOGLE_FONTS: Record<string, string> = {
+  Roboto: 'Roboto:wght@400;500;700',
+  'Open Sans': 'Open+Sans:wght@400;500;600;700',
+  Montserrat: 'Montserrat:wght@400;500;600;700',
+  Inter: 'Inter:wght@400;500;600;700',
+};
+
+// Фолбек для будь-якого шрифту: Satoshi не має кирилиці — без фолбеку браузер малював її serif'ом
+export const FONT_FALLBACK = 'system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif';
+const fontStack = (name: string) => `'${name}', ${FONT_FALLBACK}`;
+
+const HEX = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
+const color = (v: any) => (typeof v === 'string' && HEX.test(v.trim()) ? v.trim() : '');
+// Лише безпечні назви шрифтів (літери, цифри, пробіл, дефіс) — значення йде в CSS
+const font = (v: any) => (typeof v === 'string' && /^[\w \-]{1,40}$/.test(v.trim()) ? v.trim() : '');
+
+const hexToRgb = (hex: string) => {
+  let h = hex.slice(1);
+  if (h.length === 3) h = h.split('').map((c) => c + c).join('');
+  const n = parseInt(h, 16);
+  return `${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}`;
+};
+
+/**
+ * Тема з «Налаштувань шаблону»: values.colors / values.fonts (схема шаблону)
+ * з фолбеком на старі customization.colors / customization.fonts.
+ */
+export const resolveTheme = (customization: any) => {
+  const v = customization?.values || {};
+  const c = v.colors || {};
+  const legacyC = customization?.colors || {};
+  const f = v.fonts || {};
+  const legacyF = customization?.fonts || {};
+  return {
+    colors: {
+      primary: color(c.primaryColor) || color(legacyC.primary),
+      secondary: color(c.secondaryColor) || color(legacyC.secondary),
+      accent: color(c.accentColor) || color(legacyC.accent),
+      body: color(c.textColor) || color(legacyC.bodyColor),
+    },
+    fonts: {
+      heading: font(f.headingFont) || font(legacyF.headingFont),
+      body: font(f.bodyFont) || font(legacyF.bodyFont),
+    },
+  };
+};
+
+/**
+ * Інжектить CSS-змінні теми в <head> (працює і на SSR — без «миготіння» кольорів).
+ * :root:root — вища специфічність за :root зі стилів шаблону, які йдуть пізніше.
+ */
+export const useThemeVars = () => {
+  const { siteConfig } = useSiteConfig();
+  const theme = computed(() => resolveTheme(siteConfig.value?.customization));
+
+  const css = computed(() => {
+    const { colors, fonts } = theme.value;
+    const rules: string[] = [];
+    if (colors.primary) {
+      const rgb = hexToRgb(colors.primary);
+      rules.push(`--primary-color:${colors.primary}`, `--primary:${colors.primary}`, `--bs-primary:${colors.primary}`, `--bs-primary-rgb:${rgb}`,
+        `--bs-link-color:${colors.primary}`, `--bs-link-color-rgb:${rgb}`,
+        // Тема Tuan будує головні CTA (.btn-success, .read-more.success, «У кошик») на --success
+        `--success:${colors.primary}`, `--bs-success:${colors.primary}`, `--bs-success-rgb:${rgb}`);
+    }
+    if (colors.secondary) {
+      rules.push(`--secondary-color:${colors.secondary}`, `--bs-secondary:${colors.secondary}`, `--bs-link-hover-color:${colors.secondary}`,
+        `--successdiv:${colors.secondary}`);
+    }
+    if (colors.accent) {
+      // Помаранчеві елементи теми («Категорії товарів», «Пошук», «Оформити») — на --warning
+      rules.push(`--accent-color:${colors.accent}`, `--warning:${colors.accent}`, `--warningdiv:${colors.accent}`,
+        `--bs-warning:${colors.accent}`, `--bs-warning-rgb:${hexToRgb(colors.accent)}`);
+    }
+    if (colors.body) rules.push(`--body-color:${colors.body}`, `--bodyColor:${colors.body}`);
+    // Заголовки → Bold-шрифт теми; текст, кнопки, навігація → Regular/Medium
+    if (fonts.heading) rules.push(`--font-family-heading:${fontStack(fonts.heading)}`, `--fontFamilyBold:${fontStack(fonts.heading)}`);
+    if (fonts.body) {
+      rules.push(`--font-family-body:${fontStack(fonts.body)}`, `--fontFamilyRegular:${fontStack(fonts.body)}`,
+        `--fontFamilyMedium:${fontStack(fonts.body)}`);
+    }
+    return rules.length ? `:root:root{${rules.join(';')}}` : '';
+  });
+
+  // Google Fonts — лише для обраних шрифтів: один <link> + preconnect
+  const fontLinks = computed(() => {
+    const { heading, body } = theme.value.fonts;
+    const families = [...new Set([heading, body].filter((x) => GOOGLE_FONTS[x]).map((x) => GOOGLE_FONTS[x]))];
+    if (!families.length) return [];
+    return [
+      { key: 'theme-fonts-pre1', rel: 'preconnect', href: 'https://fonts.googleapis.com' },
+      { key: 'theme-fonts-pre2', rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
+      {
+        key: 'theme-fonts',
+        rel: 'stylesheet',
+        href: `https://fonts.googleapis.com/css2?${families.map((x) => `family=${x}`).join('&')}&display=swap`,
+      },
+    ];
+  });
+
+  useHead({
+    style: () => (css.value ? [{ key: 'theme-vars', innerHTML: css.value }] : []),
+    link: () => fontLinks.value,
+  });
+
+  return { theme, css };
+};

package/composables/useWishlist.ts

@@ -0,0 +1,72 @@
+import { useState } from '#imports';
+import { getProductImage, getProductPrice, type Product } from './useProducts';
+
+// Той самий ключ і формат, що пише CommonProductCard та читає лічильник у шапці:
+// масив { id, title, image, price }
+const WISHLIST_KEY = 'wishlist';
+
+interface WishItem {
+  id: string;
+  title?: string;
+  image?: string;
+  price?: number;
+}
+
+const read = (): WishItem[] => {
+  if (typeof window === 'undefined') return [];
+  try {
+    const arr = JSON.parse(localStorage.getItem(WISHLIST_KEY) || '[]');
+    if (!Array.isArray(arr)) return [];
+    return arr
+      .map((i) => (typeof i === 'string' ? { id: i } : i))
+      .filter((i) => i && i.id);
+  } catch {
+    return [];
+  }
+};
+
+const write = (items: WishItem[]) => {
+  try {
+    localStorage.setItem(WISHLIST_KEY, JSON.stringify(items));
+  } catch { /* сховище недоступне — лишається лише стан у пам'яті */ }
+};
+
+/** Список бажань у localStorage; стан id спільний із картками товарів. */
+export const useWishlist = () => {
+  const ids = useState<string[]>('wishlist-ids', () => []);
+
+  /** Синхронізує стан із localStorage (викликати в onMounted). */
+  const load = () => {
+    ids.value = read().map((i) => i.id);
+  };
+
+  const has = (id: string) => ids.value.includes(id);
+  const count = computed(() => ids.value.length);
+
+  const remove = (id: string) => {
+    const next = read().filter((i) => i.id !== id);
+    write(next);
+    ids.value = next.map((i) => i.id);
+  };
+
+  const toggle = (product: Product) => {
+    const list = read();
+    if (list.some((i) => i.id === product.id)) {
+      remove(product.id);
+      return;
+    }
+    const next = [
+      ...list,
+      {
+        id: product.id,
+        title: product.title || product.name || '',
+        image: getProductImage(product),
+        price: getProductPrice(product),
+      },
+    ];
+    write(next);
+    ids.value = next.map((i) => i.id);
+  };
+
+  return { ids, count, load, has, toggle, remove };
+};

package/layouts/default.vue

@@ -1,27 +1,63 @@
 <script setup lang="ts">
 /**
- * Головний layout шаблону магазину.
- * Динамічно обирає варіант header/navbar/footer
- * на основі templateType або componentSettings з API.
+ * Єдиний layout шаблону магазину (головна і внутрішні сторінки).
+ * Динамічно обирає варіант header/navbar/footer на основі templateType
+ * або componentSettings з API; каркас — flex-колонка, футер завжди внизу.
  */
 const config = useRuntimeConfig();
-const { siteConfig, componentSettings } = useSiteConfig();
+const { siteConfig, componentSettings, updateMetaTags } = useSiteConfig();
+// SEO-теги з конфігу магазину реєструємо тут: у плагіні useHead не потрапляє в SSR
+updateMetaTags();
+
+// Canonical для кожної сторінки (сторінки товару/категорії повторюють той самий хелпер) + JSON-LD організації
+const route = useRoute();
+const canonicalFor = useRouteCanonical();
+const NOINDEX = ['/cart', '/checkout', '/order-success', '/wishlist', '/product-details'];
+useHead({ link: () => [{ key: 'canonical', rel: 'canonical', href: canonicalFor() }] });
+useSeoMeta({ robots: () => (NOINDEX.includes(route.path) ? 'noindex, nofollow' : undefined) });
+useSiteJsonLd();
+
+// Осмислені title/description для каталогу й статичних сторінок (сторінки товару/категорії перекривають своїми)
+const { t } = useI18n();
+const siteLabel = computed(() => siteConfig.value?.siteName || '');
+const ROUTE_SEO: Record<string, { title?: string; description: string }> = {
+  '/products': { title: 'seo.productsTitle', description: 'seo.productsDescription' },
+  '/categories': { title: 'seo.categoriesTitle', description: 'seo.categoriesDescription' },
+  '/about-us': { description: 'seo.aboutDescription' },
+  '/contact': { description: 'seo.contactDescription' },
+  '/delivery': { description: 'seo.deliveryDescription' },
+  '/returns': { description: 'seo.returnsDescription' },
+};
+const routeSeo = computed(() => ROUTE_SEO[route.path]);
+useHead({
+  titleTemplate: (title) => (title && siteLabel.value && !title.includes(siteLabel.value) ? `${title} — ${siteLabel.value}` : title),
+  title: () => (routeSeo.value?.title ? t(routeSeo.value.title) : undefined) as any,
+});
+useSeoMeta({
+  description: () => (routeSeo.value ? t(routeSeo.value.description).replace('{site}', siteLabel.value) : undefined),
+  ogDescription: () => (routeSeo.value ? t(routeSeo.value.description).replace('{site}', siteLabel.value) : undefined),
+});
 
 const templateType = computed(() => {
   return siteConfig.value?.template?.type || config.public.templateType || 'electronics';
 });
 
-// Визначаємо варіант header на основі шаблону або componentSettings
+// CSS-змінні кольорів/шрифтів з «Налаштувань шаблону» (SSR-сумісно)
+useThemeVars();
+
+// Варіант header/navbar/footer: values.layout («Налаштування шаблону») → componentSettings → дефолт шаблону
+const layoutValues = computed<Record<string, any>>(() => (siteConfig.value?.customization as any)?.values?.layout || {});
+
 const headerStyle = computed(() => {
-  return componentSettings.value?.header?.style || getDefaultHeaderStyle(templateType.value);
+  return layoutValues.value.headerStyle || componentSettings.value?.header?.style || getDefaultHeaderStyle(templateType.value);
 });
 
 const navbarStyle = computed(() => {
-  return componentSettings.value?.navbar?.style || getDefaultNavbarStyle(templateType.value);
+  return layoutValues.value.navbarStyle || componentSettings.value?.navbar?.style || getDefaultNavbarStyle(templateType.value);
 });
 
 const footerStyle = computed(() => {
-  return componentSettings.value?.footer?.style || getDefaultFooterStyle(templateType.value);
+  return layoutValues.value.footerStyle || componentSettings.value?.footer?.style || getDefaultFooterStyle(templateType.value);
 });
 
 function getDefaultHeaderStyle(type: string): string {
@@ -65,9 +101,9 @@ const navbarComponents: Record<string, any> = {
   four: resolveComponent('LayoutNavbarStyleFour'),
 };
 
+// Один футер: старе значення 'two' (якщо збережене) показує той самий
 const footerComponents: Record<string, any> = {
   default: resolveComponent('LayoutFooter'),
-  two: resolveComponent('LayoutFooterTwo'),
 };
 
 const currentHeader = computed(() => headerComponents[headerStyle.value] || headerComponents.default);
@@ -76,19 +112,44 @@ const currentFooter = computed(() => footerComponents[footerStyle.value] || foot
 </script>
 
 <template>
-  <div>
-    <LayoutTopHeader />
-    <component :is="currentHeader" />
-    <component :is="currentNavbar" />
+  <div class="site-wrapper">
+    <header class="site-header">
+      <LayoutTopHeader />
+      <component :is="currentHeader" />
+      <component :is="currentNavbar" />
+    </header>
 
-    <slot />
+    <!-- Наскрізний банер (sitewideBanner) — під шапкою на всіх сторінках -->
+    <LayoutSitewideBanner />
+
+    <main class="site-main">
+      <slot />
+    </main>
+
+    <footer class="site-footer">
+      <component :is="currentFooter" />
+      <LayoutCopyright />
+    </footer>
 
-    <CommonServices class="bg-gray1" />
-    <component :is="currentFooter" />
     <LayoutBackToUp />
     <LayoutResponsiveNavbar />
-    <LayoutLocationOption />
-    <LayoutCopyright />
-    <LayoutRTLSwitchBtn />
   </div>
 </template>
+
+<style scoped>
+/* Каркас сторінки: шапка → контент (росте) → футер завжди знизу, жодних перекриттів */
+.site-wrapper {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+.site-header,
+.site-footer {
+  flex: 0 0 auto;
+}
+.site-main {
+  flex: 1 0 auto;
+  display: block;
+  width: 100%;
+}
+</style>