@crm-market/template-shared 1.0.6 → 1.0.8

package/components/FAQ/index.vue

@@ -1,121 +1,8 @@
-<template>
-  <div class="faq-area ptb-60">
-    <div class="container">
-      <div class="faq-content">
-        <h2>Frequently Ask & Question</h2>
+<script setup lang="ts">
+// Питання та відповіді: HTML продавця або дефолтний текст
+const { pageHtml } = useStaticPages();
+</script>
 
-        <div class="mb-40">
-          <h3>How can I choose the right laptop for my needs?</h3>
-          <p>
-            Selecting the right laptop depends on your specific requirements.
-            Consider factors such as intended use (work, gaming, or multimedia),
-            processing power, storage capacity, and portability. Our
-            knowledgeable staff can guide you based on your preferences and
-            budget.
-          </p>
-        </div>
-        <div class="mb-40">
-          <h3>What's the difference between LED and OLED TVs?</h3>
-          <p>
-            LED TVs use a backlight to illuminate pixels, while OLED TVs have
-            pixels that emit their own light. OLED TVs generally offer deeper
-            blacks and more vibrant colors. The choice depends on your viewing
-            preferences and budget. We can help you understand the differences
-            and find the perfect TV for your space.
-          </p>
-        </div>
-        <div class="mb-40">
-          <h3>How can I protect my devices from malware and viruses?</h3>
-          <p>
-            Keeping your devices secure is crucial. Install reputable antivirus
-            software, keep your operating system and applications up to date,
-            and be cautious with email attachments and links. We offer a range
-            of security solutions and can provide advice on best practices for
-            maintaining a secure digital environment.
-          </p>
-        </div>
-        <div class="mb-40">
-          <h3>What's the best way to enhance home audio systems?</h3>
-          <p>
-            Improving your home audio experience can involve upgrading speakers,
-            investing in a soundbar, or setting up a home theater system.
-            Consider the size of your room, your preferred audio quality, and
-            the type of content you enjoy. Our audio experts can recommend
-            solutions tailored to your needs.
-          </p>
-        </div>
-        <div class="mb-40">
-          <h3>Do you offer tech support and repair services?</h3>
-          <p>
-            Yes, we provide tech support and repair services for a variety of
-            devices. Whether you need assistance with software issues, hardware
-            repairs, or upgrades, our skilled technicians are here to help.
-            Contact us for information on our repair services and support
-            options.
-          </p>
-        </div>
-        <div class="mb-40">
-          <h3>Do you offer online shopping and home delivery services?</h3>
-          <p>
-            Yes, we provide convenient online shopping options, and our home
-            delivery service allows you to order groceries from the comfort of
-            your home. Simply browse our online store, place your order, and
-            have it delivered to your doorstep at your preferred time.
-          </p>
-        </div>
-        <div class="mb-40">
-          <h3>
-            What measures do you take to ensure the freshness of your produce?
-          </h3>
-          <p>
-            We prioritize the quality and freshness of our products. Our team
-            follows stringent sourcing standards, and our produce is regularly
-            restocked to ensure you receive the freshest fruits, vegetables, and
-            other perishables.
-          </p>
-        </div>
-        <div class="mb-40">
-          <h3>
-            Are there options for customers with dietary restrictions or
-            preferences?
-          </h3>
-          <p>
-            Absolutely! We strive to cater to various dietary needs. Our store
-            offers a diverse range of products, including gluten-free, organic,
-            and vegetarian options. Look for special labels or ask our staff for
-            assistance in finding products that meet your specific requirements.
-          </p>
-        </div>
-        <div class="mb-40">
-          <h3>
-            Do you have a loyalty program or discounts for regular customers?
-          </h3>
-          <p>
-            Yes, we value our loyal customers. We offer a loyalty program where
-            you can earn points with each purchase, and these points can be
-            redeemed for discounts or special offers. Additionally, keep an eye
-            out for exclusive promotions and discounts available to our regular
-            shoppers.
-          </p>
-        </div>
-        <div class="mb-0">
-          <h3>
-            How can I provide feedback or suggest products for your store?
-          </h3>
-          <p>
-            We welcome your feedback and suggestions! You can share your
-            thoughts with us through our website, customer service, or
-            suggestion boxes in the store. Your input helps us improve our
-            services and ensures we meet the needs of our valued customers.
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
+<template>
+  <AboutUsStaticContent :html="pageHtml('faq')" />
 </template>
-
-<script>
-export default {
-  name: "FAQ",
-};
-</script>

package/components/Layout/Copyright.vue

@@ -1,23 +1,25 @@
+<script setup lang="ts">
+import { useLayoutData } from './layoutData';
+const { t } = useI18n();
+const { siteName } = useLayoutData();
+</script>
+
 <template>
   <div class="copyright-area bg-white">
     <div class="container">
       <v-row class="align-items-center">
         <v-col cols="12" lg="6" md="6">
           <p class="mb-2 mb-md-0 text-center text-md-start">
-            © <span>Tuan.</span> {{ t('footer.allRightsReserved') }}
-            <a href="https://envytheme.com/" target="_blank">EnvyTheme</a>
+            © {{ new Date().getFullYear() }} {{ siteName }}
           </p>
         </v-col>
         <v-col cols="12" lg="6" md="6">
-          <div class="text-center text-md-end">
-            <img src="~/assets/images/payment.svg" alt="payment" />
-          </div>
+          <ul class="list-unstyled d-flex flex-wrap justify-content-center justify-content-md-end gap-3 mb-0">
+            <li><NuxtLink to="/privacy-policy">{{ t('layout.footer.privacy') }}</NuxtLink></li>
+            <li><NuxtLink to="/terms-conditions">{{ t('layout.footer.terms') }}</NuxtLink></li>
+          </ul>
         </v-col>
       </v-row>
     </div>
   </div>
 </template>
-
-<script setup lang="ts">
-const { t } = useI18n();
-</script>

package/components/Layout/Footer.vue

@@ -1,168 +1,81 @@
+<script setup lang="ts">
+import { useLayoutData } from './layoutData';
+// Футер: дані магазину з конфігу CRM
+const { t } = useI18n();
+const { topLevelCategories } = useCategories();
+const { siteName, siteDescription, phones, email, address, workingHours, socials } = useLayoutData();
+
+const footerCategories = computed(() => topLevelCategories.value.slice(0, 6));
+// Колонку «Контакти» показуємо, лише якщо є хоч одне значення
+const hasContacts = computed(() => !!(phones.value.length || email.value || address.value || workingHours.value));
+</script>
+
 <template>
   <div class="footer-area pb-60 bg-gray1">
     <div class="container">
       <div class="border-top pt-60 pb-35">
-        <v-row class="justify-content-center">
-          <v-col cols="12" lg="3" sm="6">
+        <v-row class="justify-content-start">
+          <v-col cols="12" lg="4" sm="6">
             <div class="single-footer-widget">
-              <h3>{{ storeName }}</h3>
-              <p v-if="siteConfig?.siteDescription">
-                {{ siteConfig.siteDescription }}
-              </p>
-              <p v-else>
-                {{ t('footer.storeDescription') }}
-              </p>
-
-              <div class="call-info" v-if="phone">
-                <span class="title">{{ t('footer.gotQuestion') }}</span>
-                <div class="d-flex align-items-center">
-                  <i class="flaticon-headphones-1"></i>
-                  <a :href="`tel:${phone}`">{{ phone }}</a>
-                </div>
-              </div>
-              <div class="call-info" v-if="email">
-                <a :href="`mailto:${email}`">{{ email }}</a>
-              </div>
-              <div class="mt-2" v-if="address">
-                <small class="text-muted">{{ address }}</small>
-              </div>
+              <h3>{{ siteName }}</h3>
+              <p v-if="siteDescription">{{ siteDescription }}</p>
+              <ul v-if="socials.length" class="ps-0 mb-0 mt-3 list-unstyled d-flex align-items-center social-link">
+                <li v-for="s in socials" :key="s.key">
+                  <a :href="s.url" target="_blank" rel="noopener noreferrer" :aria-label="s.label">
+                    <i :class="s.icon"></i>
+                  </a>
+                </li>
+              </ul>
             </div>
           </v-col>
-          <v-col cols="12" lg="3" sm="6">
+          <v-col cols="6" :lg="hasContacts ? 3 : 4" sm="6">
             <div class="single-footer-widget">
-              <h3>{{ t('footer.popularCategories') }}</h3>
-
+              <h3>{{ t('layout.footer.categories') }}</h3>
               <ul class="ps-0 mb-0 list-unstyled import-link">
                 <li v-for="category in footerCategories" :key="category.id">
-                  <NuxtLink :to="`/products?categoryId=${category.id}`">
-                    {{ category.name }}
-                  </NuxtLink>
+                  <NuxtLink :to="categoryPath(category)">{{ category.name }}</NuxtLink>
                 </li>
                 <li v-if="footerCategories.length === 0">
-                  <NuxtLink to="/products">{{ t('nav.allProducts') }}</NuxtLink>
+                  <NuxtLink to="/products">{{ t('layout.menu.catalog') }}</NuxtLink>
                 </li>
               </ul>
             </div>
           </v-col>
-          <v-col cols="12" lg="3" sm="6">
+          <v-col cols="6" :lg="hasContacts ? 2 : 4" sm="6">
             <div class="single-footer-widget">
-              <h3>{{ t('footer.letUsHelp') }}</h3>
-
+              <h3>{{ t('layout.footer.info') }}</h3>
               <ul class="ps-0 mb-0 list-unstyled import-link">
-                <li>
-                  <NuxtLink to="/dashboard">{{ t('account.yourAccount') }}</NuxtLink>
-                </li>
-                <li>
-                  <NuxtLink to="/order-history">{{ t('account.yourOrders') }}</NuxtLink>
-                </li>
-                <li>
-                  <NuxtLink to="/privacy-policy">{{ t('common.privacyPolicy') }}</NuxtLink>
-                </li>
-                <li>
-                  <NuxtLink to="/faq">{{ t('common.helpCenter') }}</NuxtLink>
-                </li>
-                <li>
-                  <NuxtLink to="/terms-conditions">{{ t('common.termsConditions') }}</NuxtLink>
-                </li>
+                <li><NuxtLink to="/about-us">{{ t('layout.menu.about') }}</NuxtLink></li>
+                <li><NuxtLink to="/delivery">{{ t('pages.delivery.title') }}</NuxtLink></li>
+                <li><NuxtLink to="/returns">{{ t('pages.returns.title') }}</NuxtLink></li>
+                <li><NuxtLink to="/contact">{{ t('layout.menu.contact') }}</NuxtLink></li>
+                <li><NuxtLink to="/privacy-policy">{{ t('layout.footer.privacy') }}</NuxtLink></li>
+                <li><NuxtLink to="/terms-conditions">{{ t('layout.footer.terms') }}</NuxtLink></li>
               </ul>
             </div>
           </v-col>
-          <v-col cols="12" lg="3" sm="6">
+          <v-col v-if="hasContacts" cols="12" lg="3" sm="6">
             <div class="single-footer-widget">
-              <h3>{{ t('footer.getToKnowUs') }}</h3>
-
+              <h3>{{ t('layout.footer.contacts') }}</h3>
               <ul class="ps-0 mb-0 list-unstyled import-link">
-                <li>
-                  <NuxtLink to="/about-us">{{ t('nav.aboutUs') }}</NuxtLink>
-                </li>
-                <li>
-                  <NuxtLink to="/contact">{{ t('nav.contact') }}</NuxtLink>
-                </li>
-                <li>
-                  <NuxtLink to="/categories">{{ t('nav.categories') }}</NuxtLink>
-                </li>
-                <li>
-                  <NuxtLink to="/products">{{ t('nav.allProducts') }}</NuxtLink>
-                </li>
+                <li v-for="p in phones" :key="p"><a :href="`tel:${p}`">{{ p }}</a></li>
+                <li v-if="email"><a :href="`mailto:${email}`">{{ email }}</a></li>
+                <li v-if="address">{{ address }}</li>
+                <li v-if="workingHours">{{ workingHours }}</li>
               </ul>
             </div>
           </v-col>
         </v-row>
       </div>
-      <v-row class="align-items-end justify-content-center">
-        <v-col cols="12" lg="3" md="6">
-          <div class="single-footer-bottom-item">
-            <span class="title">{{ t('footer.subscribe') }}</span>
-            <form class="subscribe-form position-relative" @submit.prevent>
-              <input
-                type="text"
-                class="form-control"
-                :placeholder="t('footer.enterEmail')"
-              />
-              <button
-                class="btn btn-warning text-white position-absolute top-50 end-0 translate-middle-y"
-              >
-                {{ t('footer.submitNow') }}
-              </button>
-            </form>
-          </div>
-        </v-col>
-        <v-col cols="12" lg="4" md="6">
-          <div class="single-footer-bottom-item" v-if="hasSocialMedia">
-            <ul
-              class="ps-0 mb-0 list-unstyled d-flex align-items-center social-link justify-content-center"
-            >
-              <li>
-                <span class="titles">{{ t('footer.followUs') }}:</span>
-              </li>
-              <li v-if="socialMedia?.facebook">
-                <a :href="socialMedia.facebook" target="_blank">
-                  <i class="ri-facebook-fill"></i>
-                </a>
-              </li>
-              <li v-if="socialMedia?.twitter">
-                <a :href="socialMedia.twitter" target="_blank">
-                  <i class="ri-twitter-x-line"></i>
-                </a>
-              </li>
-              <li v-if="socialMedia?.instagram">
-                <a :href="socialMedia.instagram" target="_blank">
-                  <i class="ri-instagram-line"></i>
-                </a>
-              </li>
-            </ul>
-          </div>
-        </v-col>
-        <v-col cols="12" lg="5" md="6">
-          <div class="single-footer-bottom-item">
-            <p class="text-center text-lg-end mb-0 text-muted">
-              &copy; {{ new Date().getFullYear() }} {{ storeName }}. {{ t('footer.allRightsReserved') }}.
-            </p>
-          </div>
-        </v-col>
-      </v-row>
     </div>
   </div>
 </template>
 
-<script setup lang="ts">
-import { computed } from "vue";
-
-const { t } = useI18n();
-const { siteConfig, siteName, contactInfo } = useSiteConfig();
-const { topLevelCategories } = useCategories();
-
-const storeName = computed(() => siteName.value || 'Our Store');
-const phone = computed(() => contactInfo.value?.phone);
-const email = computed(() => contactInfo.value?.email);
-const address = computed(() => contactInfo.value?.address);
-const socialMedia = computed(() => contactInfo.value?.socialMedia);
-const hasSocialMedia = computed(() => {
-  const sm = socialMedia.value;
-  return sm && (sm.facebook || sm.twitter || sm.instagram);
-});
-
-const footerCategories = computed(() =>
-  topLevelCategories.value.slice(0, 6)
-);
-</script>
+<style scoped>
+/* Мобільний: колонки в один стовпчик з охайними відступами */
+@media (max-width: 575.98px) {
+  .single-footer-widget { margin-bottom: 8px; }
+  .single-footer-widget p { overflow-wrap: anywhere; }
+  .single-footer-widget li { overflow-wrap: anywhere; }
+}
+</style>

package/components/Layout/HeaderBar.vue

@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import stateStore from '~/utils/store';
+import { useLayoutData } from './layoutData';
+// Універсальна середня частина шапки; три варіанти лише передають props
+const props = withDefaults(
+  defineProps<{
+    withCategories?: boolean;
+    btnClass?: string;
+    areaClass?: string;
+    logoClass?: string;
+    searchClass?: string;
+  }>(),
+  { withCategories: true, btnClass: 'btn-warning', areaClass: '', logoClass: '', searchClass: '' },
+);
+
+const { t } = useI18n();
+const router = useRouter();
+const { topLevelCategories } = useCategories();
+const { cart, itemCount, subtotal, isEmpty, removeFromCart } = useCart();
+const { phone, wishlistCount, resolveMedia } = useLayoutData();
+
+const searchQuery = ref('');
+const catOpen = ref(false);
+const cartOpen = ref(false);
+
+// Пошук веде на каталог з параметром search
+const handleSearch = () => {
+  const q = searchQuery.value.trim();
+  if (q) router.push(`/products?search=${encodeURIComponent(q)}`);
+};
+const money = (n: number) => `${n.toFixed(2)} ${t('layout.currency')}`;
+</script>
+
+<template>
+  <div :class="['middle-header-area ptb-20', areaClass]">
+    <div class="container">
+      <!-- Мобільний: ряд 1 — логотип + іконки + бургер, ряд 2 — пошук на всю ширину -->
+      <div class="hb-row d-flex flex-wrap align-items-center justify-content-between">
+        <div class="hb-left d-lg-flex align-items-center middle-header-left justify-content-lg-end">
+          <NuxtLink to="/" :class="['hb-logo middle-logo', logoClass]">
+            <LayoutHeaderLogo />
+          </NuxtLink>
+          <div class="hb-search d-flex">
+            <div v-if="props.withCategories" class="dropdown d-none d-lg-block">
+              <button
+                class="dropdown-toggle border border-2 bg-transparent all-categories"
+                :class="{ show: catOpen }"
+                @click="catOpen = !catOpen"
+              >
+                {{ t('layout.header.allCategories') }}
+              </button>
+              <ul class="dropdown-menu" :class="{ toggler: catOpen }">
+                <li v-for="category in topLevelCategories" :key="category.id">
+                  <NuxtLink class="dropdown-item" :to="categoryPath(category)" @click="catOpen = false">
+                    {{ category.name }}
+                  </NuxtLink>
+                </li>
+                <li v-if="topLevelCategories.length === 0">
+                  <span class="dropdown-item text-muted">{{ t('layout.header.noCategories') }}</span>
+                </li>
+              </ul>
+            </div>
+            <div :class="['position-relative hb-search-box', searchClass]">
+              <input
+                v-model="searchQuery"
+                type="text"
+                class="form-control border-2"
+                :placeholder="t('layout.header.searchPlaceholder')"
+                @keyup.enter="handleSearch"
+              />
+              <button
+                type="button"
+                :class="['position-absolute top-50 end-0 translate-middle-y btn fs-14 fw-medium text-white', btnClass]"
+                @click="handleSearch"
+              >
+                <i class="ri-search-line"></i>
+                <span class="d-none d-sm-inline-block">{{ t('layout.header.search') }}</span>
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <ul class="hb-right d-flex align-items-center middle-header-right ps-0 mb-0 list-unstyled justify-content-end">
+          <li v-if="phone" class="info d-none d-lg-block">
+            <a :href="`tel:${phone}`" class="text-decoration-none">
+              <div class="d-flex align-items-center">
+                <div class="flex-shrink-0"><i class="ri-phone-line bg-danger-10"></i></div>
+                <div class="flex-grow-1 ms-10">
+                  <span>{{ t('layout.header.hotline') }}</span>
+                  <h3>{{ phone }}</h3>
+                </div>
+              </div>
+            </a>
+          </li>
+          <li class="buy-info tops-4 position-relative">
+            <NuxtLink to="/wishlist" class="text-decoration-none success-hover-bg" :aria-label="t('layout.header.wishlist')">
+              <div class="position-relative me-9">
+                <i class="ri-heart-line"></i>
+                <ClientOnly><span class="count bg-success">{{ wishlistCount }}</span><template #fallback><span class="count bg-success">0</span></template></ClientOnly>
+              </div>
+            </NuxtLink>
+          </li>
+          <li class="buy-info">
+            <div class="dropdown">
+              <a
+                class="text-decoration-none success-hover-bg"
+                href="javascript:void(0);"
+                :class="{ active: cartOpen }"
+                :aria-label="t('layout.header.cart')"
+                @click="cartOpen = !cartOpen"
+              >
+                <div class="position-relative me-9">
+                  <i class="ri-shopping-cart-line"></i>
+                  <ClientOnly><span class="count bg-success">{{ itemCount }}</span><template #fallback><span class="count bg-success">0</span></template></ClientOnly>
+                </div>
+              </a>
+              <ul class="dropdown-menu cart-dropdown dropdown-menu-end" :class="{ toggler: cartOpen }">
+                <!-- Вміст кошика з localStorage — лише на клієнті, щоб не було hydration-розбіжностей -->
+                <ClientOnly>
+                <li v-for="item in cart.items.slice(0, 3)" :key="item.productId" class="d-flex justify-content-between align-items-center cart-item">
+                  <button class="p-0 border-0 bg-transparent delete-btn" :aria-label="t('layout.header.remove')" @click="removeFromCart(item.productId)">
+                    <i class="ri-delete-bin-7-line"></i>
+                  </button>
+                  <NuxtLink class="dropdown-item d-flex align-items-center" :to="productPath({ id: item.productId, name: item.name })" @click="cartOpen = false">
+                    <img v-if="item.image" :src="resolveMedia(item.image)" :alt="item.name" />
+                    <div class="ms-3 d-inline-block text-truncate">
+                      <span>{{ item.name }}</span>
+                      <h3>{{ money(item.discountPrice || item.price) }}</h3>
+                    </div>
+                  </NuxtLink>
+                </li>
+                <li v-if="isEmpty" class="cart-item text-center text-muted py-3">{{ t('layout.header.cartEmpty') }}</li>
+                <template v-else>
+                  <li class="d-flex justify-content-between align-items-center cart-item">
+                    <h3 class="fs-15 mb-0">{{ t('layout.header.total') }}</h3>
+                    <h3 class="fs-15 mb-0">{{ money(subtotal) }}</h3>
+                  </li>
+                  <li class="d-flex justify-content-between align-items-center cart-item">
+                    <NuxtLink to="/cart" class="btn btn-primary fs-14 text-white" @click="cartOpen = false">{{ t('layout.header.viewCart') }}</NuxtLink>
+                    <NuxtLink to="/checkout" class="btn btn-warning fs-14 text-white" @click="cartOpen = false">{{ t('layout.header.checkout') }}</NuxtLink>
+                  </li>
+                </template>
+                </ClientOnly>
+              </ul>
+            </div>
+          </li>
+          <li class="d-lg-none hb-burger">
+            <button type="button" class="btn p-0 border-0 bg-transparent" :aria-label="t('layout.menu.toggle')" @click="stateStore.onChangeShow">
+              <i class="ri-menu-line"></i>
+            </button>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* Мобільна розкладка шапки: від lg — оригінальна тема */
+@media (max-width: 991.98px) {
+  .hb-left { display: contents; }
+  .hb-logo { order: 1; display: block; max-width: 45%; margin: 0 !important; flex: 0 1 auto; }
+  .hb-row { row-gap: 0; }
+  .hb-logo :deep(img) { max-height: 40px; width: auto; max-width: 100%; }
+  .hb-right { order: 2; gap: 14px; }
+  .hb-right :deep(.buy-info) { margin-right: 0 !important; }
+  .hb-search { order: 3; width: 100%; max-width: 100%; margin-top: 12px; }
+  .hb-search-box { width: 100%; }
+  .hb-search-box { flex: 1 1 auto; min-width: 0; }
+  .hb-search-box :deep(.form-control) { width: 100% !important; }
+  .hb-burger i { font-size: 28px; color: var(--primary-color); line-height: 1; }
+  .hb-right :deep(.cart-dropdown) { position: absolute; right: 0; max-width: calc(100vw - 32px); }
+}
+</style>

package/components/Layout/HeaderLogo.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { useLayoutData } from './layoutData';
+// Логотип магазину: картинка з конфігу або текст з назвою
+defineProps<{ imgClass?: string }>();
+const { logo, siteName } = useLayoutData();
+</script>
+
+<template>
+  <img v-if="logo" :src="logo" :alt="siteName" :class="imgClass" style="max-height: 48px; width: auto" />
+  <span v-else class="header-logo-text fs-4 fw-bold text-dark" :title="siteName">{{ siteName }}</span>
+</template>
+
+
+<style scoped>
+/* Довга назва магазину не повинна ламати шапку: один рядок з трикрапкою */
+.header-logo-text {
+  display: inline-block;
+  max-width: 260px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+}
+@media (max-width: 575.98px) {
+  .header-logo-text { max-width: 170px; font-size: 1.1rem !important; }
+}
+</style>