@crm-market/template-shared 1.0.6 → 1.0.8

package/composables/useHomeContent.ts

@@ -0,0 +1,220 @@
+import { computed } from 'vue';
+import { useSiteConfig } from './useSiteConfig';
+import { resolveMediaUrl } from './useProducts';
+
+export interface HeroSlide {
+  id: string;
+  image: string;
+  subTitle: string;
+  heading: string;
+  shortDesc: string;
+  btnText: string;
+  btnLink: string;
+}
+
+export interface PromoItem {
+  id: string;
+  /** Верхній підпис картки (offers.cards[].topTitle) */
+  topTitle: string;
+  title: string;
+  text: string;
+  /** Текст знижки (offers.cards[].discount) */
+  discount: string;
+  buttonText: string;
+  link: string;
+  image: string;
+}
+
+export interface PromoBanner {
+  topTitle: string;
+  heading: string;
+  description: string;
+  image: string;
+  buttonText: string;
+  buttonLink: string;
+}
+
+const str = (v: any): string => (typeof v === 'string' ? v.trim() : v == null ? '' : String(v));
+
+/**
+ * Контент головної з конфігу магазину.
+ *
+ * Пріоритет джерел (нове → старе):
+ * - hero: values.banner (bannerType/bannerImage/bannerSlides) → siteConfig.banners →
+ *   customization.banner.slides → heroImageUrl;
+ * - карусель банерів («Банери» в адмінці): siteConfig.banners — окремим блоком під hero,
+ *   якщо hero вже взято з values.banner (інакше ці банери самі стають hero);
+ * - промо-картки: values.offers.cards → values.promo.items (контракт v1);
+ * - промо-банери: values.weekendSale / values.weekendSaleTwo → sitewideBanner / promo.items[3].
+ * Порожні дані → порожні масиви/null (секція не рендериться).
+ */
+export const useHomeContent = () => {
+  const { siteConfig } = useSiteConfig();
+  const cfg = computed<any>(() => siteConfig.value || {});
+  const values = computed<Record<string, any>>(() => cfg.value.customization?.values || {});
+
+  // Слайди з «Налаштувань шаблону» → values.banner
+  const settingsSlides = computed<HeroSlide[]>(() => {
+    const b = values.value.banner || {};
+    const slides: any[] = Array.isArray(b.bannerSlides) ? b.bannerSlides : [];
+    const image = str(b.bannerImage);
+    // Тип не обрано явно (дефолт схеми — single), але слайди заповнені — показуємо слайди
+    const type = b.bannerType || (slides.length && !image ? 'slider' : 'single');
+
+    if (type === 'slider') {
+      return slides
+        .filter((s) => s && (str(s.image) || str(s.title)))
+        .map((s, i) => ({
+          id: `v${i}`,
+          image: resolveMediaUrl(str(s.image)),
+          subTitle: str(s.subtitle),
+          heading: str(s.title),
+          shortDesc: str(s.description),
+          btnText: str(s.buttonText),
+          btnLink: str(s.buttonLink) || '/products',
+        }));
+    }
+    if (type === 'single' && image) {
+      return [{ id: 'single', image: resolveMediaUrl(image), subTitle: '', heading: '', shortDesc: '', btnText: '', btnLink: '' }];
+    }
+    // 'video' у схемі без поля відео — використовуємо фолбеки нижче
+    return [];
+  });
+
+  // Банери, завантажені через «Банери» (config/banners); вимикач showCarousel ховає їх
+  const uploadedBanners = computed<HeroSlide[]>(() => {
+    const c = cfg.value;
+    if (c.customization?.componentSettings?.homepage?.showCarousel === false) return [];
+    const banners: any[] = Array.isArray(c.banners) ? c.banners : [];
+    return [...banners]
+      .filter((b) => b && b.url)
+      .sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0))
+      .map((b, i) => ({
+        id: `b${i}`,
+        image: resolveMediaUrl(b.url),
+        subTitle: str(b.subtitle),
+        heading: str(b.title || b.alt),
+        shortDesc: '',
+        btnText: str(b.buttonLabel),
+        btnLink: str(b.buttonLink || b.link) || '/products',
+      }));
+  });
+
+  const heroSlides = computed<HeroSlide[]>(() => {
+    if (settingsSlides.value.length) return settingsSlides.value;
+    if (uploadedBanners.value.length) return uploadedBanners.value;
+
+    const c = cfg.value;
+    const banner = c.customization?.banner || {};
+    const slides: any[] = Array.isArray(banner.slides) ? banner.slides : [];
+    if (slides.length) {
+      return slides.map((s, i) => ({
+        id: `s${i}`,
+        image: resolveMediaUrl(s.image || s.imageUrl),
+        subTitle: s.subtitle || s.subTitle || '',
+        heading: s.title || s.heading || '',
+        shortDesc: s.description || '',
+        btnText: s.buttonText || '',
+        btnLink: s.buttonLink || '/products',
+      }));
+    }
+
+    if (c.heroImageUrl || c.siteName) {
+      return [{
+        id: 'default',
+        image: resolveMediaUrl(c.heroImageUrl),
+        subTitle: '',
+        heading: c.siteName || '',
+        shortDesc: c.siteDescription || '',
+        btnText: '',
+        btnLink: '/products',
+      }];
+    }
+    return [];
+  });
+
+  // Карусель «Банери» окремим блоком — лише коли hero зайнятий слайдами з налаштувань шаблону
+  const carouselBanners = computed<HeroSlide[]>(() =>
+    settingsSlides.value.length ? uploadedBanners.value : [],
+  );
+
+  // Промо-картки: values.offers.cards (схема grocery) → values.promo.items (контракт v1)
+  const promoItems = computed<PromoItem[]>(() => {
+    const cards = values.value.offers?.cards;
+    if (Array.isArray(cards) && cards.length) {
+      return cards
+        .filter((p: any) => p && (str(p.heading) || str(p.image)))
+        .map((p: any, i: number) => ({
+          id: `o${i}`,
+          topTitle: str(p.topTitle),
+          title: str(p.heading),
+          text: str(p.description),
+          discount: str(p.discount),
+          buttonText: str(p.buttonText),
+          link: str(p.buttonLink) || '/products',
+          image: resolveMediaUrl(str(p.image)),
+        }));
+    }
+    const items = values.value.promo?.items;
+    if (!Array.isArray(items)) return [];
+    return items
+      .filter((p: any) => p && p.title)
+      .slice(0, 4)
+      .map((p: any, i: number) => ({
+        id: `p${i}`,
+        topTitle: '',
+        title: String(p.title),
+        text: p.text || '',
+        discount: '',
+        buttonText: p.buttonText || '',
+        link: p.link || '/products',
+        image: resolveMediaUrl(p.imageUrl || p.image),
+      }));
+  });
+
+  // Наскрізний банер (якщо увімкнений і має заголовок)
+  const sitewide = computed(() => {
+    const s = cfg.value.sitewideBanner;
+    if (!s || s.enabled !== true || !s.title) return null;
+    return {
+      title: String(s.title),
+      text: s.subtitle || '',
+      buttonText: s.buttonLabel || '',
+      link: s.buttonLink || '/products',
+      image: resolveMediaUrl(s.imageUrl),
+    };
+  });
+
+  // Промо-банер секції (weekendSale / weekendSaleTwo): потрібен заголовок або картинка
+  const promoBanner = (sectionKey: string): PromoBanner | null => {
+    const v = values.value[sectionKey] || {};
+    const heading = str(v.heading);
+    const image = str(v.image);
+    if (!heading && !image) return null;
+    return {
+      topTitle: str(v.topTitle),
+      heading,
+      description: str(v.description),
+      image: resolveMediaUrl(image),
+      buttonText: str(v.buttonText),
+      buttonLink: str(v.buttonLink) || '/products',
+    };
+  };
+
+  // Оформлення hero з values.banner: колір/картинка фону, затемнення картинки, колір тексту, декор
+  const HEX = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
+  const heroBackground = computed(() => {
+    const b = values.value.banner || {};
+    const overlay = Math.round(Number(b.backgroundOverlay));
+    return {
+      color: HEX.test(str(b.backgroundColor)) ? str(b.backgroundColor) : '',
+      image: resolveMediaUrl(str(b.backgroundImage)),
+      overlay: Number.isFinite(overlay) ? Math.min(80, Math.max(0, overlay)) : 0,
+      textColor: HEX.test(str(b.textColor)) ? str(b.textColor) : '',
+      // Декор показуємо, доки продавець явно не вимкнув
+      showDecorations: b.showDecorations !== false,
+    };
+  });
+
+  return { heroSlides, carouselBanners, promoItems, sitewide, promoBanner, heroBackground, values };
+};

package/composables/useI18n.ts

@@ -1,6 +1,6 @@
 import { ref, computed } from 'vue';
 
-type LocaleCode = 'en' | 'uk' | 'ru' | 'ar';
+type LocaleCode = 'en' | 'uk';
 
 interface LocaleOption {
   code: LocaleCode;
@@ -12,21 +12,20 @@ interface LocaleOption {
 const LOCALES: LocaleOption[] = [
   { code: 'en', name: 'English', dir: 'ltr', flag: '\u{1F1EC}\u{1F1E7}' },
   { code: 'uk', name: '\u0423\u043A\u0440\u0430\u0457\u043D\u0441\u044C\u043A\u0430', dir: 'ltr', flag: '\u{1F1FA}\u{1F1E6}' },
-  { code: 'ru', name: '\u0420\u0443\u0441\u0441\u043A\u0438\u0439', dir: 'ltr', flag: '\u{1F1F7}\u{1F1FA}' },
-  { code: 'ar', name: '\u0627\u0644\u0639\u0631\u0628\u064A\u0629', dir: 'rtl', flag: '\u{1F1F8}\u{1F1E6}' },
 ];
 
-// Lazy-load locale files
-const localeModules: Record<LocaleCode, () => Promise<any>> = {
-  en: () => import('../locales/en.json'),
-  uk: () => import('../locales/uk.json'),
-  ru: () => import('../locales/ru.json'),
-  ar: () => import('../locales/ar.json'),
+// Локалі імпортуємо статично: переклади доступні синхронно на SSR і клієнті (без сирих ключів у HTML)
+import ukMessages from '../locales/uk.json';
+import enMessages from '../locales/en.json';
+
+const localeMessages: Record<LocaleCode, Record<string, any>> = {
+  uk: ukMessages as Record<string, any>,
+  en: enMessages as Record<string, any>,
 };
 
 const currentLocale = ref<LocaleCode>('uk');
-const messages = ref<Record<string, any>>({});
-const isLoaded = ref(false);
+const messages = ref<Record<string, any>>(localeMessages.uk);
+const isLoaded = ref(true);
 
 // Отримати вкладене значення за шляхом через крапку: t('nav.home') -> messages.nav.home
 function getNestedValue(obj: any, path: string): string | undefined {
@@ -37,8 +36,7 @@ export const useI18n = () => {
   // Завантажити повідомлення для обраної локалі
   const loadLocale = async (code: LocaleCode) => {
     try {
-      const mod = await localeModules[code]();
-      messages.value = mod.default || mod;
+      messages.value = localeMessages[code] || localeMessages.uk;
       currentLocale.value = code;
       isLoaded.value = true;
 
@@ -46,17 +44,7 @@ export const useI18n = () => {
       if (import.meta.client) {
         localStorage.setItem('locale', code);
 
-        // Встановити RTL напрямок для арабської
-        const locale = LOCALES.find(l => l.code === code);
-        if (locale) {
-          document.documentElement.dir = locale.dir;
-          document.documentElement.lang = code;
-          if (locale.dir === 'rtl') {
-            document.body.classList.add('rtl');
-          } else {
-            document.body.classList.remove('rtl');
-          }
-        }
+        document.documentElement.lang = code;
       }
     } catch (e) {
       console.error(`Failed to load locale: ${code}`, e);

package/composables/useJsonLd.ts

@@ -0,0 +1,162 @@
+import { computed, toValue, type MaybeRefOrGetter } from 'vue';
+import { useHead } from '#imports';
+import { useSiteConfig } from './useSiteConfig';
+import { useStoreOrigin } from './useStoreOrigin';
+import { getProductPrice, getProductOldPrice, getProductImage, htmlToText, resolveMediaUrl, type Product } from './useProducts';
+import { productPath, categoryPath } from '../utils/seo-urls';
+
+type Json = Record<string, any>;
+
+/** Безпечна серіалізація для <script>: екрануємо < > &, щоб не закрити тег. */
+const stringify = (data: unknown): string =>
+  JSON.stringify(data).replace(/</g, '\\u003c').replace(/>/g, '\\u003e').replace(/&/g, '\\u0026');
+
+/** Реєструє JSON-LD блоки (реактивно, SSR-сумісно). */
+export const useJsonLd = (blocks: MaybeRefOrGetter<Array<Json | null | undefined>>, keyPrefix = 'ld') => {
+  useHead({
+    script: computed(() =>
+      (toValue(blocks) || [])
+        .filter((b): b is Json => !!b)
+        .map((b, i) => ({ key: `${keyPrefix}-${i}`, type: 'application/ld+json', innerHTML: stringify(b) })),
+    ) as any,
+  });
+};
+
+const compact = <T extends Json>(o: T): T =>
+  Object.fromEntries(Object.entries(o).filter(([, v]) => v !== undefined && v !== null && v !== '' && !(Array.isArray(v) && !v.length))) as T;
+
+/** Organization/Store + WebSite з пошуком — для всіх сторінок. */
+export const useSiteJsonLd = () => {
+  const { siteConfig } = useSiteConfig();
+  const { storeOrigin } = useStoreOrigin();
+
+  useJsonLd(() => {
+    const c = siteConfig.value as any;
+    if (!c) return [];
+    const origin = storeOrigin();
+    const ci = c.contactInfo || {};
+    const social = Object.values(ci.socialMedia || {}).filter((u): u is string => typeof u === 'string' && /^https?:/.test(u));
+    const store = compact({
+      '@context': 'https://schema.org',
+      '@type': 'Store',
+      '@id': `${origin}/#organization`,
+      name: c.siteName,
+      url: origin,
+      logo: resolveMediaUrl(c.logoUrl),
+      image: resolveMediaUrl(c.logoUrl),
+      description: c.siteDescription,
+      telephone: ci.phone,
+      email: ci.email,
+      address: ci.address ? { '@type': 'PostalAddress', streetAddress: ci.address, addressCountry: 'UA' } : undefined,
+      sameAs: social,
+    });
+    const website = compact({
+      '@context': 'https://schema.org',
+      '@type': 'WebSite',
+      '@id': `${origin}/#website`,
+      name: c.siteName,
+      url: origin,
+      potentialAction: {
+        '@type': 'SearchAction',
+        target: { '@type': 'EntryPoint', urlTemplate: `${origin}/products?search={search_term_string}` },
+        'query-input': 'required name=search_term_string',
+      },
+    });
+    return [store, website];
+  }, 'site');
+};
+
+const breadcrumb = (origin: string, items: Array<{ name: string; path: string }>) => ({
+  '@context': 'https://schema.org',
+  '@type': 'BreadcrumbList',
+  itemListElement: items.map((it, i) => ({
+    '@type': 'ListItem',
+    position: i + 1,
+    name: it.name,
+    item: origin + it.path,
+  })),
+});
+
+/** Product + BreadcrumbList для сторінки товару. */
+export const useProductJsonLd = (product: MaybeRefOrGetter<Product | null | undefined>) => {
+  const { storeOrigin } = useStoreOrigin();
+  const { siteConfig } = useSiteConfig();
+
+  useJsonLd(() => {
+    const p = toValue(product);
+    if (!p) return [];
+    const origin = storeOrigin();
+    const url = origin + productPath(p);
+    const images = (p.images || [])
+      .map((i: any) => resolveMediaUrl(typeof i === 'string' ? i : i?.url))
+      .filter(Boolean);
+    const desc = htmlToText(p.description).slice(0, 500);
+    const brandRaw: any = (p as any).brand;
+    const brand = typeof brandRaw === 'string' ? brandRaw : brandRaw?.name || (p as any).brands?.[0]?.name;
+    const inStock = !(p.isActive === false || (typeof p.stock === 'number' && p.stock <= 0));
+    const cat = p.categories?.[0];
+    const crumbs = [{ name: siteConfig.value?.siteName || 'Головна', path: '/' }];
+    if (cat) crumbs.push({ name: cat.name, path: categoryPath(cat) });
+    crumbs.push({ name: p.title, path: productPath(p) });
+    return [
+      compact({
+        '@context': 'https://schema.org',
+        '@type': 'Product',
+        name: p.title,
+        image: images.length ? images : undefined,
+        description: desc,
+        sku: p.sku,
+        brand: brand ? { '@type': 'Brand', name: brand } : undefined,
+        offers: {
+          '@type': 'Offer',
+          // Ефективна ціна (з урахуванням акції)
+          price: getProductPrice(p).toFixed(2),
+          priceCurrency: 'UAH',
+          // Акційна ціна діє до завершення акції
+          priceValidUntil: getProductOldPrice(p) && p.discount?.endDate ? String(p.discount.endDate).slice(0, 10) : undefined,
+          availability: `https://schema.org/${inStock ? 'InStock' : 'OutOfStock'}`,
+          itemCondition: 'https://schema.org/NewCondition',
+          url,
+        },
+      }),
+      breadcrumb(origin, crumbs),
+    ];
+  }, 'product');
+};
+
+/** BreadcrumbList + ItemList (до 20 товарів) для сторінки категорії. */
+export const useCategoryJsonLd = (
+  category: MaybeRefOrGetter<{ id: string; name: string; parentId?: string } | null | undefined>,
+  parent: MaybeRefOrGetter<{ id: string; name: string } | null | undefined>,
+  products: MaybeRefOrGetter<Product[] | null | undefined>,
+) => {
+  const { storeOrigin } = useStoreOrigin();
+  const { siteConfig } = useSiteConfig();
+
+  useJsonLd(() => {
+    const c = toValue(category);
+    if (!c) return [];
+    const origin = storeOrigin();
+    const crumbs = [{ name: siteConfig.value?.siteName || 'Головна', path: '/' }];
+    const par = toValue(parent);
+    if (par) crumbs.push({ name: par.name, path: categoryPath(par) });
+    crumbs.push({ name: c.name, path: categoryPath(c) });
+    const items = (toValue(products) || []).slice(0, 20);
+    return [
+      breadcrumb(origin, crumbs),
+      items.length
+        ? {
+            '@context': 'https://schema.org',
+            '@type': 'ItemList',
+            itemListElement: items.map((p, i) => ({
+              '@type': 'ListItem',
+              position: i + 1,
+              url: origin + productPath(p),
+              name: p.title,
+              image: getProductImage(p) || undefined,
+            })),
+          }
+        : null,
+    ];
+  }, 'category');
+};