@crm-market/template-shared 1.0.7 → 1.0.8

package/components/Layout/SitewideBanner.vue

@@ -0,0 +1,285 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+/**
+ * Наскрізний банер магазину (siteConfig.sitewideBanner, редактор «Банери» → «Наскрізний банер» в адмінці).
+ * Варіанти: full (фото-фон + текст), split-left / split-right (фото збоку), text (колір + текст), marquee (біжуча стрічка).
+ * Кольори без значень — з теми (--primary-color / --accent-color), тож банер підхоплює «Налаштування шаблону».
+ */
+const { siteConfig } = useSiteConfig();
+
+const HEX = /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+const str = (v: any) => (typeof v === 'string' ? v.trim() : '');
+const hex = (v: any) => (HEX.test(str(v)) ? str(v) : '');
+// Посилання лише внутрішні або http(s)
+const link = (v: any) => {
+  const s = str(v);
+  return s && (/^\/(?!\/)/.test(s) || /^https?:\/\//i.test(s)) ? s : '/products';
+};
+
+const VARIANTS = ['full', 'split-left', 'split-right', 'text', 'marquee'];
+
+const b = computed(() => {
+  const s: any = siteConfig.value?.sitewideBanner;
+  if (!s || s.enabled !== true) return null;
+  const variant = VARIANTS.includes(s.variant) ? s.variant : 'full';
+  const overlay = Number(s.overlay);
+  const speed = Number(s.marqueeSpeed);
+  return {
+    variant,
+    image: resolveMediaUrl(str(s.imageUrl)),
+    title: str(s.title),
+    subtitle: str(s.subtitle),
+    buttonLabel: str(s.buttonLabel),
+    buttonLink: link(s.buttonLink),
+    buttonStyle: s.buttonStyle === 'outline' ? 'outline' : 'solid',
+    buttonColor: hex(s.buttonColor),
+    textAlign: ['left', 'center', 'right'].includes(s.textAlign) ? s.textAlign : 'center',
+    height: ['compact', 'standard', 'tall'].includes(s.height) ? s.height : 'standard',
+    overlay: Number.isFinite(overlay) ? Math.min(80, Math.max(0, overlay)) / 100 : 0.35,
+    bgColor: hex(s.bgColor),
+    marqueeItems: (Array.isArray(s.marqueeItems) ? s.marqueeItems : []).map(str).filter(Boolean) as string[],
+    marqueeSpeed: Number.isFinite(speed) ? Math.min(60, Math.max(5, speed)) : 20,
+  };
+});
+
+// Що показувати: стрічка — є пункти; text — є текст; full/split — є фото (без фото падаємо в text, якщо є текст)
+const view = computed(() => {
+  const x = b.value;
+  if (!x) return '';
+  if (x.variant === 'marquee') return x.marqueeItems.length ? 'marquee' : x.title ? 'text' : '';
+  if (x.variant === 'text') return x.title || x.subtitle ? 'text' : '';
+  if (x.image) return x.variant;
+  return x.title || x.subtitle ? 'text' : '';
+});
+
+const isExternal = computed(() => /^https?:\/\//i.test(b.value?.buttonLink || ''));
+
+const rootStyle = computed(() => {
+  const x = b.value;
+  if (!x) return {};
+  return {
+    '--sw-bg': x.bgColor || 'var(--primary-color, #4a8d16)',
+    '--sw-btn': x.buttonColor || 'var(--accent-color, #f7931e)',
+    '--sw-overlay': String(x.overlay),
+    '--sw-speed': `${x.marqueeSpeed}s`,
+    '--sw-align': x.textAlign,
+    '--sw-justify': x.textAlign === 'left' ? 'flex-start' : x.textAlign === 'right' ? 'flex-end' : 'center',
+  } as Record<string, string>;
+});
+
+// Стрічка: короткий список повторюємо (щоб заповнити широкий екран), потім подвоюємо для безшовного циклу
+const marqueeBase = computed(() => {
+  const items = b.value?.marqueeItems || [];
+  if (!items.length) return [];
+  const times = Math.max(1, Math.ceil(8 / items.length));
+  return Array.from({ length: times }, () => items).flat();
+});
+const marqueeLoop = computed(() => [...marqueeBase.value, ...marqueeBase.value]);
+</script>
+
+<template>
+  <section
+    v-if="view && b"
+    class="sitewide-banner"
+    :class="[`sw-${view}`, `sw-h-${b.height}`]"
+    :style="rootStyle"
+    aria-label="Оголошення магазину"
+  >
+    <!-- Біжуча стрічка -->
+    <div v-if="view === 'marquee'" class="sw-marquee">
+      <div class="sw-marquee-track">
+        <span v-for="(item, i) in marqueeLoop" :key="i" class="sw-marquee-item" :aria-hidden="i >= b.marqueeItems.length ? 'true' : undefined">{{ item }}</span>
+      </div>
+    </div>
+
+    <!-- Фото збоку + текст -->
+    <div v-else-if="view === 'split-left' || view === 'split-right'" class="sw-split" :class="{ 'sw-rev': view === 'split-right' }">
+      <div class="sw-split-img"><img :src="b.image" :alt="b.title || 'Банер'" loading="lazy" /></div>
+      <div class="sw-body container">
+        <div class="sw-text">
+          <div v-if="b.title" class="sw-title">{{ b.title }}</div>
+          <div v-if="b.subtitle" class="sw-subtitle">{{ b.subtitle }}</div>
+          <NuxtLink v-if="b.buttonLabel" :to="b.buttonLink" :target="isExternal ? '_blank' : undefined" :rel="isExternal ? 'noopener' : undefined" class="sw-btn" :class="`sw-btn-${b.buttonStyle}`">{{ b.buttonLabel }}</NuxtLink>
+        </div>
+      </div>
+    </div>
+
+    <!-- Колір + текст / фото-фон + текст -->
+    <div v-else class="sw-box">
+      <template v-if="view === 'full'">
+        <img :src="b.image" :alt="b.title || 'Банер'" class="sw-bg-img" />
+        <div class="sw-overlay"></div>
+      </template>
+      <div class="sw-body container">
+        <div class="sw-text">
+          <div v-if="b.title" class="sw-title">{{ b.title }}</div>
+          <div v-if="b.subtitle" class="sw-subtitle">{{ b.subtitle }}</div>
+          <NuxtLink v-if="b.buttonLabel" :to="b.buttonLink" :target="isExternal ? '_blank' : undefined" :rel="isExternal ? 'noopener' : undefined" class="sw-btn" :class="`sw-btn-${b.buttonStyle}`">{{ b.buttonLabel }}</NuxtLink>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.sitewide-banner {
+  --sw-h: 160px;
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  background: var(--sw-bg);
+  color: #fff;
+  margin-bottom: 20px;
+}
+.sw-h-compact { --sw-h: 110px; }
+.sw-h-standard { --sw-h: 160px; }
+.sw-h-tall { --sw-h: 220px; }
+
+.sw-box,
+.sw-split {
+  position: relative;
+  min-height: var(--sw-h);
+  display: flex;
+}
+.sw-bg-img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.sw-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, var(--sw-overlay));
+}
+.sw-body {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: var(--sw-justify);
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+.sw-text {
+  max-width: 720px;
+  text-align: var(--sw-align);
+}
+.sw-title {
+  font-family: var(--fontFamilyBold);
+  font-size: 26px;
+  line-height: 1.2;
+  font-weight: 700;
+  color: #fff;
+}
+.sw-subtitle {
+  margin-top: 4px;
+  font-size: 16px;
+  opacity: 0.92;
+}
+.sw-btn {
+  display: inline-block;
+  margin-top: 12px;
+  padding: 8px 20px;
+  border-radius: 999px;
+  font-size: 14px;
+  font-weight: 600;
+  text-decoration: none;
+  transition: var(--transition, all ease 0.3s);
+}
+.sw-btn-solid {
+  background: var(--sw-btn);
+  border: 2px solid var(--sw-btn);
+  color: #fff;
+}
+.sw-btn-outline {
+  background: transparent;
+  border: 2px solid var(--sw-btn);
+  color: var(--sw-btn);
+}
+.sw-btn:hover {
+  filter: brightness(0.92);
+  color: #fff;
+}
+.sw-btn-outline:hover {
+  background: var(--sw-btn);
+}
+
+/* Фото збоку */
+.sw-split-img {
+  position: relative;
+  flex: 0 0 38%;
+  max-width: 38%;
+}
+/* Фото не розтягує банер: займає висоту блока (обрізається cover) */
+.sw-split-img img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.sw-split .sw-body {
+  flex: 1 1 auto;
+  max-width: none;
+}
+.sw-rev {
+  flex-direction: row-reverse;
+}
+
+/* Біжуча стрічка */
+.sw-marquee {
+  overflow: hidden;
+  padding: 10px 0;
+}
+.sw-marquee-track {
+  display: inline-flex;
+  white-space: nowrap;
+  will-change: transform;
+  animation: sw-marquee var(--sw-speed) linear infinite;
+}
+.sw-marquee:hover .sw-marquee-track {
+  animation-play-state: paused;
+}
+.sw-marquee-item {
+  position: relative;
+  padding: 0 2.5rem;
+  font-weight: 600;
+  font-size: 15px;
+}
+.sw-marquee-item::after {
+  content: '•';
+  position: absolute;
+  right: 0;
+  opacity: 0.5;
+}
+@keyframes sw-marquee {
+  from { transform: translateX(0); }
+  to { transform: translateX(-50%); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .sw-marquee-track { animation: none; }
+}
+
+/* Мобільний: менша висота й шрифт, фото збоку — зверху */
+@media (max-width: 767.98px) {
+  .sw-h-compact { --sw-h: 90px; }
+  .sw-h-standard { --sw-h: 120px; }
+  .sw-h-tall { --sw-h: 160px; }
+  .sw-title { font-size: 19px; }
+  .sw-subtitle { font-size: 14px; }
+  .sw-split,
+  .sw-rev {
+    flex-direction: column;
+  }
+  .sw-split-img {
+    flex-basis: auto;
+    max-width: 100%;
+    height: 140px;
+  }
+  .sw-marquee-item { font-size: 14px; padding: 0 1.6rem; }
+}
+</style>

package/components/Layout/TopHeader.vue

@@ -1,73 +1,27 @@
+<script setup lang="ts">
+import { useLayoutData } from './layoutData';
+const { t } = useI18n();
+const { phone, email, workingHours } = useLayoutData();
+// Наскрізний банер тепер рендериться повністю (LayoutSitewideBanner) — тут його текст не дублюємо
+</script>
+
 <template>
-  <div class="top-header-area border-bottom ptb-12">
+  <!-- Мобільний: лише телефон в один рядок -->
+  <div :class="['top-header-area border-bottom ptb-12', { 'd-none d-md-block': !phone }]">
     <div class="container">
       <v-row>
-        <v-col cols="12" lg="6" md="5">
+        <v-col cols="12" lg="8" md="8">
           <ul
-            class="ps-0 mb-0 list-unstyled info-link d-flex align-items-center justify-content-center justify-content-md-start position-relative tops-1"
+            class="ps-0 mb-0 list-unstyled info-link d-flex flex-wrap align-items-center justify-content-center justify-content-md-start position-relative tops-1"
           >
-            <li>
-              <NuxtLink to="/about-us">{{ t('nav.aboutUs') }}</NuxtLink>
+            <li v-if="phone">
+              <a :href="`tel:${phone}`"><i class="ri-phone-line me-1"></i>{{ phone }}</a>
             </li>
-            <li>
-              <NuxtLink to="/faq">{{ t('nav.faqs') }}</NuxtLink>
+            <li v-if="email" class="d-none d-md-block">
+              <a :href="`mailto:${email}`"><i class="ri-mail-line me-1"></i>{{ email }}</a>
             </li>
-            <li>
-              <NuxtLink to="/contact">{{ t('nav.helpContact') }}</NuxtLink>
-            </li>
-          </ul>
-        </v-col>
-        <v-col cols="12" lg="6" md="7">
-          <ul
-            class="ps-0 mb-0 list-unstyled info-link info-right d-flex align-items-center justify-content-center justify-content-md-end mt-2 mt-md-0"
-          >
-            <li>
-              <NuxtLink
-                to="/products"
-                class="text-danger d-flex align-items-center position-relative tops-1"
-              >
-                <i class="flaticon-flash-sale"></i>
-                <span>{{ t('nav.flashSale') }}</span>
-              </NuxtLink>
-            </li>
-            <li>
-              <div class="dropdown flag-wrap">
-                <button
-                  class="dropdown-toggle fw-medium fs-14 p-0 border-0 bg-transparent flag"
-                  @click="toggleDropdown"
-                  :aria-pressed="show ? 'true' : 'false'"
-                  :class="{ show: buttonShowState }"
-                >
-                  <span class="me-1">{{ currentLocaleOption?.flag }}</span>
-                  <span>{{ currentLocaleOption?.name }}</span>
-                </button>
-                <ul class="dropdown-menu" :class="{ toggler: show }">
-                  <li>
-                    <div v-if="locales.length > 0">
-                      <a
-                        class="dropdown-item d-flex align-items-center"
-                        href="#"
-                        v-for="loc in locales"
-                        :key="loc.code"
-                        @click.prevent="selectLocale(loc.code)"
-                      >
-                        <span>{{ loc.flag }}</span>
-                        <span class="ms-2">{{ loc.name }}</span>
-                      </a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
-            </li>
-            <li>
-              <select
-                class="form-select p-0 border-0 currency fw-medium fs-14 text-secondary"
-                :aria-label="t('nav.currencySelect')"
-              >
-                <option selected>{{ t('nav.currencyUSD') }}</option>
-                <option value="1">{{ t('nav.currencyEUR') }}</option>
-                <option value="2">{{ t('nav.currencyYEN') }}</option>
-              </select>
+            <li v-if="workingHours" class="d-none d-md-block">
+              <span><i class="ri-time-line me-1"></i>{{ workingHours }}</span>
             </li>
           </ul>
         </v-col>
@@ -75,23 +29,3 @@
     </div>
   </div>
 </template>
-
-<script setup lang="ts">
-import { ref } from "vue";
-
-const { t, locale, locales, setLocale, currentLocaleOption } = useI18n();
-
-const show = ref(false);
-const buttonShowState = ref(false);
-
-const toggleDropdown = () => {
-  show.value = !show.value;
-  buttonShowState.value = !buttonShowState.value;
-};
-
-const selectLocale = (code: string) => {
-  setLocale(code);
-  show.value = false;
-  buttonShowState.value = false;
-};
-</script>

package/components/Layout/layoutData.ts

@@ -0,0 +1,83 @@
+import { computed, ref, onMounted } from 'vue';
+
+/**
+ * Спільні дані для шапки, меню та футера: беруться з конфігу магазину (CRM),
+ * а не з демо-контенту теми.
+ */
+
+// Пункти меню лише на існуючі сторінки
+export const NAV_ITEMS = [
+  { to: '/', key: 'layout.menu.home' },
+  { to: '/products', key: 'layout.menu.catalog' },
+  { to: '/categories', key: 'layout.menu.categories' },
+  { to: '/about-us', key: 'pages.about.title' },
+  { to: '/delivery', key: 'pages.delivery.title' },
+  { to: '/contact', key: 'layout.menu.contact' },
+];
+
+const SOCIAL_META: Record<string, { icon: string; label: string }> = {
+  facebook: { icon: 'ri-facebook-fill', label: 'Facebook' },
+  instagram: { icon: 'ri-instagram-line', label: 'Instagram' },
+  telegram: { icon: 'ri-telegram-fill', label: 'Telegram' },
+  youtube: { icon: 'ri-youtube-fill', label: 'YouTube' },
+  twitter: { icon: 'ri-twitter-x-line', label: 'X' },
+};
+
+export const useLayoutData = () => {
+  const { siteConfig } = useSiteConfig();
+  const cfg = computed<any>(() => siteConfig.value || {});
+
+  // Відносні media-шляхи → повна адреса медіа-домену (як mediaBase у template-grocery)
+  const mediaBase = String(
+    (useRuntimeConfig().public as any).mediaBase || 'https://media.crm-market.com.ua',
+  ).replace(/\/$/, '');
+  const resolveMedia = (u?: string | null) => {
+    if (!u) return '';
+    if (/^(https?:)?\/\//.test(u) || u.startsWith('data:')) return u;
+    return mediaBase + (u.startsWith('/') ? u : '/' + u);
+  };
+
+  const siteName = computed<string>(() => cfg.value.siteName || '');
+  const siteDescription = computed<string>(() => cfg.value.siteDescription || '');
+  const logo = computed(() => resolveMedia(cfg.value.logoUrl));
+  const contact = computed<any>(() => cfg.value.contactInfo || {});
+  const phone = computed<string>(() => contact.value.phone || '');
+  const phones = computed<string[]>(() =>
+    [contact.value.phone, ...(contact.value.additionalPhones || [])].filter(Boolean),
+  );
+  const email = computed<string>(() => contact.value.email || '');
+  const address = computed<string>(() => contact.value.address || '');
+  const workingHours = computed<string>(() => contact.value.workingHours || '');
+
+  // Лише заповнені соцмережі
+  const socials = computed(() =>
+    Object.entries(contact.value.socialMedia || {})
+      .filter(([k, v]) => !!v && SOCIAL_META[k])
+      .map(([k, v]) => ({ key: k, url: String(v), ...SOCIAL_META[k] })),
+  );
+
+  // Текст наскрізного банера (якщо увімкнений)
+  const bannerText = computed<string>(() => {
+    const b = cfg.value.sitewideBanner;
+    if (!b || b.enabled !== true) return '';
+    return b.title || (Array.isArray(b.marqueeItems) ? b.marqueeItems.filter(Boolean).join(' • ') : '');
+  });
+
+  // Локальний wishlist (localStorage) — лише лічильник
+  const wishlistCount = ref(0);
+  onMounted(() => {
+    try {
+      const raw = localStorage.getItem('wishlist');
+      const arr = raw ? JSON.parse(raw) : [];
+      wishlistCount.value = Array.isArray(arr) ? arr.length : 0;
+    } catch {
+      wishlistCount.value = 0;
+    }
+  });
+
+  return {
+    siteName, siteDescription, logo, phone, phones, email, address,
+    workingHours, socials, bannerText, wishlistCount, resolveMedia,
+  };
+};
+

package/components/PrivacyPolicy/index.vue

@@ -1,112 +1,8 @@
-<template>
-  <div class="ptb-60">
-    <div class="container">
-      <div class="main-content-text">
-        <span class="update">Last updated: February 2024</span>
-        <h3>Privacy policy</h3>
-        <p>
-          Turpis gravida turpis mauris magna in libero ac dis consequat.
-          Imperdiet ac semper quisque volutpat consectetur cursus non pretium
-          pharetra. Nisl duis blandit dui imperdiet nec id integer. Elit varius
-          cras arcu tempor integer in.
-        </p>
-        <p>
-          Quam nunc arcu nunc a lobortis convallis magnis dolor. Integer
-          malesuada vel mi eu elementum. Etiam eget urna quis dui amet facilisis
-          fringilla sed. Massa vitae accumsan viverra in morbi nec volutpat
-          aenean tortor. At nec sagittis eget placerat. Mi accumsan massa vitae
-          etiam nisi suspendisse condimentum elementum. Arcu varius id ipsum
-          arcu et diam non rutrum. Auctor elit malesuada non aenean posuere
-          mattis iaculis mauris nibh.
-        </p>
-
-        <div class="gap-20"></div>
-
-        <h3>What type of personal information do we collect?</h3>
-        <p>
-          Turpis gravida turpis mauris magna in libero ac dis consequat.
-          Imperdiet ac semper quisque volutpat consectetur cursus non pretium
-          pharetra. Nisl duis blandit dui imperdiet nec id integer. Elit varius
-          cras arcu tempor integer in. Quam nunc arcu nunc a lobortis convallis
-          magnis dolor. Integer malesuada vel mi eu elementum. Etiam eget urna
-          quis dui amet facilisis fringilla sed. Massa vitae accumsan viverra in
-          morbi nec volutpat aenean tortor. At nec sagittis eget placerat. Mi
-          accumsan massa vitae etiam nisi suspendisse condimentum elementum.
-          Arcu varius id ipsum arcu et diam non rutrum. Auctor elit malesuada
-          non aenean posuere mattis iaculis mauris nibh.
-        </p>
-
-        <div class="gap-20"></div>
-
-        <h3>How do we collect your personal data?</h3>
-        <p>
-          Turpis gravida turpis mauris magna in libero ac dis consequat.
-          Imperdiet ac semper quisque volutpat consectetur cursus non pretium
-          pharetra. Nisl duis blandit dui imperdiet nec id integer. Elit varius
-          cras arcu tempor integer in.
-        </p>
-        <p>
-          Quam nunc arcu nunc a lobortis convallis magnis dolor. Integer
-          malesuada vel mi eu elementum. Etiam eget urna quis dui amet facilisis
-          fringilla sed. Massa vitae accumsan viverra in morbi nec volutpat
-          aenean tortor. At nec sagittis eget placerat. Mi accumsan massa vitae
-          etiam nisi suspendisse condimentum elementum. Arcu varius id ipsum
-          arcu et diam non rutrum. Auctor elit malesuada non aenean posuere
-          mattis iaculis mauris nibh.
-        </p>
-        <ol>
-          <li>
-            Imperdiet ac semper quisque volutpat consectetur cursus non pretium
-            pharetra.
-          </li>
-          <li>Nisl duis blandit dui imperdiet nec id integer.</li>
-          <li>Quam nunc arcu nunc a lobortis convallis magnis dolor.</li>
-          <li>
-            Massa vitae accumsan viverra in morbi nec volutpat aenean tortor.
-          </li>
-        </ol>
-
-        <div class="gap-20"></div>
-
-        <h3>What are our legal bases for processing your data?</h3>
-        <p>
-          Turpis gravida turpis mauris magna in libero ac dis consequat.
-          Imperdiet ac semper quisque volutpat consectetur cursus non pretium
-          pharetra. Nisl duis blandit dui imperdiet nec id integer. Elit varius
-          cras arcu tempor integer in. Quam nunc arcu nunc a lobortis convallis
-          magnis dolor. Integer malesuada vel mi eu elementum. Etiam eget urna
-          quis dui amet facilisis fringilla sed. Massa vitae accumsan viverra in
-          morbi nec volutpat aenean tortor. At nec sagittis eget placerat. Mi
-          accumsan massa vitae etiam nisi suspendisse condimentum elementum.
-          Arcu varius id ipsum arcu et diam non rutrum. Auctor elit malesuada
-          non aenean posuere mattis iaculis mauris nibh.
-        </p>
-
-        <div class="gap-20"></div>
+<script setup lang="ts">
+// Політика конфіденційності: HTML продавця або дефолтний текст
+const { pageHtml } = useStaticPages();
+</script>
 
-        <h3>Security</h3>
-        <p>
-          Turpis gravida turpis mauris magna in libero ac dis consequat.
-          Imperdiet ac semper quisque volutpat consectetur cursus non pretium
-          pharetra. Nisl duis blandit dui imperdiet nec id integer. Elit varius
-          cras arcu tempor integer in.
-        </p>
-        <p>
-          Quam nunc arcu nunc a lobortis convallis magnis dolor. Integer
-          malesuada vel mi eu elementum. Etiam eget urna quis dui amet facilisis
-          fringilla sed. Massa vitae accumsan viverra in morbi nec volutpat
-          aenean tortor. At nec sagittis eget placerat. Mi accumsan massa vitae
-          etiam nisi suspendisse condimentum elementum. Arcu varius id ipsum
-          arcu et diam non rutrum. Auctor elit malesuada non aenean posuere
-          mattis iaculis mauris nibh.
-        </p>
-      </div>
-    </div>
-  </div>
+<template>
+  <AboutUsStaticContent :html="pageHtml('privacy')" />
 </template>
-
-<script>
-export default {
-  name: "PrivacyPolicy",
-};
-</script>