@crm-market/template-shared 1.0.3 → 1.0.4

package/components/Layout/FooterTwo.vue

@@ -5,14 +5,13 @@
         <v-row class="justify-content-center">
           <v-col cols="12" lg="3" sm="6">
             <div class="single-footer-widget">
-              <h3>About The Shop</h3>
+              <h3>{{ t('footer.aboutTheShop') }}</h3>
               <p>
-                We're not just an online store; we're your gateway to a world of
-                cutting-edge electronics and telemobile devices
+                {{ t('footer.storeDescription') }}
               </p>
 
               <div class="call-info">
-                <span class="title">Got Question? Call us 24/7</span>
+                <span class="title">{{ t('footer.gotQuestion') }}</span>
                 <div class="d-flex align-items-center">
                   <i class="flaticon-headphones-1"></i>
                   <a href="tel:(808)-555-0111">(808) 555-0111</a>
@@ -22,78 +21,68 @@
           </v-col>
           <v-col cols="12" lg="3" sm="6">
             <div class="single-footer-widget">
-              <h3>Popular Categories</h3>
+              <h3>{{ t('footer.popularCategories') }}</h3>
 
               <ul class="ps-0 mb-0 list-unstyled import-link">
-                <li>
-                  <NuxtLink to="/products">Smartphone & Tablets</NuxtLink>
-                </li>
-                <li>
-                  <NuxtLink to="/products">Laptop & Desktop</NuxtLink>
-                </li>
-                <li>
-                  <NuxtLink to="/products">Headphones</NuxtLink>
-                </li>
-                <li>
-                  <NuxtLink to="/products">Smart Watches</NuxtLink>
-                </li>
-                <li>
-                  <NuxtLink to="/products">Drone & Camera</NuxtLink>
+                <li v-for="category in footerCategories" :key="category.id">
+                  <NuxtLink :to="`/products?categoryId=${category.id}`">
+                    {{ category.name }}
+                  </NuxtLink>
                 </li>
-                <li>
-                  <NuxtLink to="/products">Home Electronics</NuxtLink>
+                <li v-if="footerCategories.length === 0">
+                  <NuxtLink to="/products">{{ t('nav.allProducts') }}</NuxtLink>
                 </li>
               </ul>
             </div>
           </v-col>
           <v-col cols="12" lg="3" sm="6">
             <div class="single-footer-widget">
-              <h3>Let Us Help You</h3>
+              <h3>{{ t('footer.letUsHelp') }}</h3>
 
               <ul class="ps-0 mb-0 list-unstyled import-link">
                 <li>
-                  <NuxtLink to="/dashboard">Your Account</NuxtLink>
+                  <NuxtLink to="/dashboard">{{ t('account.yourAccount') }}</NuxtLink>
                 </li>
                 <li>
-                  <NuxtLink to="/order-history">Your Order</NuxtLink>
+                  <NuxtLink to="/order-history">{{ t('account.yourOrders') }}</NuxtLink>
                 </li>
                 <li>
-                  <NuxtLink to="/privacy-policy">Return Policy</NuxtLink>
+                  <NuxtLink to="/privacy-policy">{{ t('footer.returnPolicy') }}</NuxtLink>
                 </li>
                 <li>
-                  <NuxtLink to="/faq">Help Center</NuxtLink>
+                  <NuxtLink to="/faq">{{ t('common.helpCenter') }}</NuxtLink>
                 </li>
                 <li>
-                  <NuxtLink to="/products">Product Replacement</NuxtLink>
+                  <NuxtLink to="/products">{{ t('footer.productReplacement') }}</NuxtLink>
                 </li>
                 <li>
-                  <NuxtLink to="/dashboard">Shop With Points</NuxtLink>
+                  <NuxtLink to="/dashboard">{{ t('footer.shopWithPoints') }}</NuxtLink>
                 </li>
               </ul>
             </div>
           </v-col>
           <v-col cols="12" lg="3" sm="6">
             <div class="single-footer-widget">
-              <h3>Get to Know Us</h3>
+              <h3>{{ t('footer.getToKnowUs') }}</h3>
 
               <ul class="ps-0 mb-0 list-unstyled import-link">
                 <li>
-                  <NuxtLink to="/about-us">About Us</NuxtLink>
+                  <NuxtLink to="/about-us">{{ t('nav.aboutUs') }}</NuxtLink>
                 </li>
                 <li>
-                  <NuxtLink to="/about-us">Careers</NuxtLink>
+                  <NuxtLink to="/about-us">{{ t('footer.careers') }}</NuxtLink>
                 </li>
                 <li>
-                  <NuxtLink to="/contact">Store Location</NuxtLink>
+                  <NuxtLink to="/contact">{{ t('footer.storeLocation') }}</NuxtLink>
                 </li>
                 <li>
-                  <NuxtLink to="/our-blog">News Center</NuxtLink>
+                  <NuxtLink to="/our-blog">{{ t('footer.newsCenter') }}</NuxtLink>
                 </li>
                 <li>
                   <NuxtLink to="/about-us">Investor Relations</NuxtLink>
                 </li>
                 <li>
-                  <NuxtLink to="/contact">Contact Us</NuxtLink>
+                  <NuxtLink to="/contact">{{ t('nav.contact') }}</NuxtLink>
                 </li>
               </ul>
             </div>
@@ -107,7 +96,7 @@
               class="ps-0 mb-0 list-unstyled d-flex align-items-center social-link ms-0 justify-content-md-start justify-content-center"
             >
               <li>
-                <span class="titles">Follow Us:</span>
+                <span class="titles">{{ t('footer.followUs') }}:</span>
               </li>
               <li>
                 <a href="https://www.facebook.com/" target="_blank">
@@ -138,7 +127,7 @@
               class="ps-0 mb-0 list-unstyled d-flex align-items-center justify-content-center justify-content-lg-end app-link"
             >
               <li>
-                <span class="titles">Download App:</span>
+                <span class="titles">{{ t('footer.downloadApp') }}:</span>
               </li>
               <li>
                 <a href="https://www.apple.com/store" target="_blank">
@@ -158,8 +147,13 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "FooterTwo",
-};
+<script setup lang="ts">
+import { computed } from "vue";
+
+const { t } = useI18n();
+const { topLevelCategories } = useCategories();
+
+const footerCategories = computed(() =>
+  topLevelCategories.value.slice(0, 6)
+);
 </script>

package/components/Layout/MiddleHeader.vue

@@ -16,7 +16,7 @@
                 :aria-pressed="show ? 'true' : 'false'"
                 :class="{ show: buttonShowState }"
               >
-                All Categories
+                {{ t('nav.allCategories') }}
               </button>
               <ul class="dropdown-menu" :class="{ toggler: show }">
                 <li v-for="category in topLevelCategories" :key="category.id">
@@ -28,7 +28,7 @@
                   </NuxtLink>
                 </li>
                 <li v-if="topLevelCategories.length === 0">
-                  <span class="dropdown-item text-muted">No categories</span>
+                  <span class="dropdown-item text-muted">{{ t('nav.noCategories') }}</span>
                 </li>
               </ul>
             </div>
@@ -36,7 +36,7 @@
               <input
                 type="text"
                 class="form-control border-2"
-                placeholder="Search for products..."
+                :placeholder="t('nav.searchProducts')"
                 v-model="searchQuery"
                 @keyup.enter="handleSearch"
               />
@@ -46,7 +46,7 @@
                 @click="handleSearch"
               >
                 <i class="ri-search-line"></i>
-                <span class="d-none d-sm-inline-block">Search</span>
+                <span class="d-none d-sm-inline-block">{{ t('nav.search') }}</span>
               </button>
             </div>
           </div>
@@ -62,8 +62,8 @@
                   <i class="ri-user-line"></i>
                 </div>
                 <div class="flex-grow-1 ms-10">
-                  <span>Login Your</span>
-                  <h3>Account</h3>
+                  <span>{{ t('auth.login') }}</span>
+                  <h3>{{ t('account.yourAccount') }}</h3>
                 </div>
               </div>
             </NuxtLink>
@@ -93,7 +93,7 @@
                     </div>
                   </div>
                   <div class="flex-grow-1 ms-1">
-                    <span>Your Cart</span>
+                    <span>{{ t('account.yourCart') }}</span>
                     <h3>${{ subtotal.toFixed(2) }}</h3>
                   </div>
                 </div>
@@ -142,13 +142,13 @@
                     class="d-flex justify-content-between align-items-center cart-item"
                   >
                     <NuxtLink to="/cart" class="btn btn-primary fs-14 text-white">
-                      View Cart
+                      {{ t('account.viewCart') }}
                     </NuxtLink>
                     <NuxtLink
                       to="/checkout"
                       class="btn btn-warning fs-14 text-white"
                     >
-                      Checkout
+                      {{ t('account.checkout') }}
                     </NuxtLink>
                   </li>
                 </template>
@@ -177,6 +177,7 @@ export default defineComponent({
     const defaultLogo = defaultLogoImg;
     const router = useRouter();
 
+    const { t } = useI18n();
     const { topLevelCategories } = useCategories();
     const { logoUrl } = useSiteConfig();
     const { cart, itemCount, subtotal, isEmpty, removeFromCart } = useCart();
@@ -223,6 +224,7 @@ export default defineComponent({
       isEmpty,
       removeFromCart,
       resolveImageUrl,
+      t,
     };
   },
 });

package/components/Layout/MiddleHeaderThree.vue

@@ -12,7 +12,7 @@
             <input
               type="text"
               class="form-control border-2"
-              placeholder="Search for products..."
+              :placeholder="t('nav.searchProducts')"
               v-model="searchQuery"
               @keyup.enter="handleSearch"
             />
@@ -22,7 +22,7 @@
               @click="handleSearch"
             >
               <i class="ri-search-line"></i>
-              <span class="d-none d-sm-inline-block">Search</span>
+              <span class="d-none d-sm-inline-block">{{ t('nav.search') }}</span>
             </button>
           </div>
         </div>
@@ -37,7 +37,7 @@
                   <i class="ri-phone-line bg-danger-10"></i>
                 </div>
                 <div class="flex-grow-1 ms-10">
-                  <span>Hotline</span>
+                  <span>{{ t('nav.hotline') }}</span>
                   <h3>{{ phone }}</h3>
                 </div>
               </div>
@@ -125,13 +125,13 @@
                     class="d-flex justify-content-between align-items-center cart-item"
                   >
                     <NuxtLink to="/cart" class="btn btn-primary fs-14 text-white">
-                      View Cart
+                      {{ t('account.viewCart') }}
                     </NuxtLink>
                     <NuxtLink
                       to="/checkout"
                       class="btn btn-warning fs-14 text-white"
                     >
-                      Checkout
+                      {{ t('account.checkout') }}
                     </NuxtLink>
                   </li>
                 </template>
@@ -158,6 +158,7 @@ export default defineComponent({
     const defaultLogo = defaultLogoImg;
     const router = useRouter();
 
+    const { t } = useI18n();
     const { logoUrl, contactInfo } = useSiteConfig();
     const { cart, itemCount, subtotal, isEmpty, removeFromCart } = useCart();
 
@@ -198,6 +199,7 @@ export default defineComponent({
       isEmpty,
       removeFromCart,
       resolveImageUrl,
+      t,
     };
   },
 });

package/components/Layout/MiddleHeaderTwo.vue

@@ -16,7 +16,7 @@
                 :aria-pressed="show ? 'true' : 'false'"
                 :class="{ show: buttonShowState }"
               >
-                All Categories
+                {{ t('nav.allCategories') }}
               </button>
               <ul class="dropdown-menu" :class="{ toggler: show }">
                 <li v-for="category in topLevelCategories" :key="category.id">
@@ -28,7 +28,7 @@
                   </NuxtLink>
                 </li>
                 <li v-if="topLevelCategories.length === 0">
-                  <span class="dropdown-item text-muted">No categories</span>
+                  <span class="dropdown-item text-muted">{{ t('nav.noCategories') }}</span>
                 </li>
               </ul>
             </div>
@@ -36,7 +36,7 @@
               <input
                 type="text"
                 class="form-control border-2"
-                placeholder="Search for products..."
+                :placeholder="t('nav.searchProducts')"
                 v-model="searchQuery"
                 @keyup.enter="handleSearch"
               />
@@ -46,7 +46,7 @@
                 @click="handleSearch"
               >
                 <i class="ri-search-line"></i>
-                <span class="d-none d-sm-inline-block">Search</span>
+                <span class="d-none d-sm-inline-block">{{ t('nav.search') }}</span>
               </button>
             </div>
           </div>
@@ -62,7 +62,7 @@
                   <i class="ri-phone-line bg-danger-10"></i>
                 </div>
                 <div class="flex-grow-1 ms-10">
-                  <span>Hotline</span>
+                  <span>{{ t('nav.hotline') }}</span>
                   <h3>{{ phone }}</h3>
                 </div>
               </div>
@@ -150,13 +150,13 @@
                     class="d-flex justify-content-between align-items-center cart-item"
                   >
                     <NuxtLink to="/cart" class="btn btn-primary fs-14 text-white">
-                      View Cart
+                      {{ t('account.viewCart') }}
                     </NuxtLink>
                     <NuxtLink
                       to="/checkout"
                       class="btn btn-warning fs-14 text-white"
                     >
-                      Checkout
+                      {{ t('account.checkout') }}
                     </NuxtLink>
                   </li>
                 </template>
@@ -185,6 +185,7 @@ export default defineComponent({
     const defaultLogo = defaultLogoImg;
     const router = useRouter();
 
+    const { t } = useI18n();
     const { topLevelCategories } = useCategories();
     const { logoUrl, contactInfo } = useSiteConfig();
     const { cart, itemCount, subtotal, isEmpty, removeFromCart } = useCart();
@@ -234,6 +235,7 @@ export default defineComponent({
       isEmpty,
       removeFromCart,
       resolveImageUrl,
+      t,
     };
   },
 });

package/components/Layout/Navbar.vue

@@ -29,7 +29,7 @@
             :class="{ show: buttonShowState }"
           >
             <i class="ri-menu-2-line"></i>
-            <span>Browse Categories</span>
+            <span>{{ t('nav.browseCategories') }}</span>
           </div>
 
           <ul class="dropdown-menu" :class="{ show: show }">
@@ -68,7 +68,7 @@
               </template>
             </li>
             <li v-if="topLevelCategories.length === 0">
-              <span class="dropdown-item text-muted">No categories</span>
+              <span class="dropdown-item text-muted">{{ t('nav.noCategories') }}</span>
             </li>
           </ul>
         </li>
@@ -77,23 +77,23 @@
       <div class="collapse navbar-collapse">
         <ul class="navbar-nav me-auto ms-68">
           <li class="nav-item">
-            <NuxtLink class="nav-link" to="/"> Home </NuxtLink>
+            <NuxtLink class="nav-link" to="/"> {{ t('nav.home') }} </NuxtLink>
           </li>
 
           <li class="nav-item">
-            <NuxtLink class="nav-link" to="/products"> Products </NuxtLink>
+            <NuxtLink class="nav-link" to="/products"> {{ t('nav.products') }} </NuxtLink>
           </li>
 
           <li class="nav-item">
-            <NuxtLink class="nav-link" to="/categories"> Categories </NuxtLink>
+            <NuxtLink class="nav-link" to="/categories"> {{ t('nav.categories') }} </NuxtLink>
           </li>
 
           <li class="nav-item">
-            <NuxtLink class="nav-link" to="/about-us"> About </NuxtLink>
+            <NuxtLink class="nav-link" to="/about-us"> {{ t('nav.about') }} </NuxtLink>
           </li>
 
           <li class="nav-item">
-            <NuxtLink class="nav-link" to="/contact"> Contact </NuxtLink>
+            <NuxtLink class="nav-link" to="/contact"> {{ t('nav.contact') }} </NuxtLink>
           </li>
         </ul>
       </div>
@@ -108,7 +108,7 @@
                 <i class="ri-phone-line bg-danger-10"></i>
               </div>
               <div class="flex-grow-1 ms-10">
-                <span>Hotline</span>
+                <span>{{ t('nav.hotline') }}</span>
                 <h3>{{ phone }}</h3>
               </div>
             </div>
@@ -135,6 +135,7 @@ export default defineComponent({
     const stateStoreInstance = stateStore;
     const defaultLogo = defaultLogoImg;
 
+    const { t } = useI18n();
     const { topLevelCategories, getSubcategories } = useCategories();
     const { logoUrl, contactInfo } = useSiteConfig();
 
@@ -179,6 +180,7 @@ export default defineComponent({
       getSubcategories,
       logoUrl,
       phone,
+      t,
     };
   },
 });

package/components/Layout/NavbarStyleThree.vue

@@ -29,7 +29,7 @@
             :class="{ show: buttonShowState }"
           >
             <i class="ri-menu-2-line"></i>
-            <span>Browse Categories</span>
+            <span>{{ t('nav.browseCategories') }}</span>
           </div>
 
           <ul class="dropdown-menu" :class="{ show: show }">
@@ -68,7 +68,7 @@
               </template>
             </li>
             <li v-if="topLevelCategories.length === 0">
-              <span class="dropdown-item text-muted">No categories</span>
+              <span class="dropdown-item text-muted">{{ t('nav.noCategories') }}</span>
             </li>
           </ul>
         </li>
@@ -77,23 +77,23 @@
       <div class="collapse navbar-collapse">
         <ul class="navbar-nav me-auto ms-68">
           <li class="nav-item">
-            <NuxtLink class="nav-link" to="/"> Home </NuxtLink>
+            <NuxtLink class="nav-link" to="/"> {{ t('nav.home') }} </NuxtLink>
           </li>
 
           <li class="nav-item">
-            <NuxtLink class="nav-link" to="/products"> Products </NuxtLink>
+            <NuxtLink class="nav-link" to="/products"> {{ t('nav.products') }} </NuxtLink>
           </li>
 
           <li class="nav-item">
-            <NuxtLink class="nav-link" to="/categories"> Categories </NuxtLink>
+            <NuxtLink class="nav-link" to="/categories"> {{ t('nav.categories') }} </NuxtLink>
           </li>
 
           <li class="nav-item">
-            <NuxtLink class="nav-link" to="/about-us"> About </NuxtLink>
+            <NuxtLink class="nav-link" to="/about-us"> {{ t('nav.about') }} </NuxtLink>
           </li>
 
           <li class="nav-item">
-            <NuxtLink class="nav-link" to="/contact"> Contact </NuxtLink>
+            <NuxtLink class="nav-link" to="/contact"> {{ t('nav.contact') }} </NuxtLink>
           </li>
         </ul>
       </div>
@@ -111,7 +111,7 @@
                 <i class="ri-phone-line"></i>
               </div>
               <div class="flex-grow-1 ms-10">
-                <span>Hotline</span>
+                <span>{{ t('nav.hotline') }}</span>
                 <h3>{{ phone }}</h3>
               </div>
             </div>
@@ -138,6 +138,7 @@ export default defineComponent({
     const stateStoreInstance = stateStore;
     const defaultLogo = defaultLogoImg;
 
+    const { t } = useI18n();
     const { topLevelCategories, getSubcategories } = useCategories();
     const { logoUrl, contactInfo } = useSiteConfig();
 
@@ -182,6 +183,7 @@ export default defineComponent({
       getSubcategories,
       logoUrl,
       phone,
+      t,
     };
   },
 });

package/components/Layout/NavbarStyleTwo.vue

@@ -25,23 +25,23 @@
       <div class="collapse navbar-collapse" id="navbarSupportedContent">
         <ul class="navbar-nav me-auto">
           <li class="nav-item">
-            <NuxtLink class="nav-link" to="/"> Home </NuxtLink>
+            <NuxtLink class="nav-link" to="/"> {{ t('nav.home') }} </NuxtLink>
           </li>
 
           <li class="nav-item">
-            <NuxtLink class="nav-link" to="/products"> Products </NuxtLink>
+            <NuxtLink class="nav-link" to="/products"> {{ t('nav.products') }} </NuxtLink>
           </li>
 
           <li class="nav-item">
-            <NuxtLink class="nav-link" to="/categories"> Categories </NuxtLink>
+            <NuxtLink class="nav-link" to="/categories"> {{ t('nav.categories') }} </NuxtLink>
           </li>
 
           <li class="nav-item">
-            <NuxtLink class="nav-link" to="/about-us"> About </NuxtLink>
+            <NuxtLink class="nav-link" to="/about-us"> {{ t('nav.about') }} </NuxtLink>
           </li>
 
           <li class="nav-item">
-            <NuxtLink class="nav-link" to="/contact"> Contact </NuxtLink>
+            <NuxtLink class="nav-link" to="/contact"> {{ t('nav.contact') }} </NuxtLink>
           </li>
         </ul>
       </div>
@@ -59,7 +59,7 @@
                 <i class="ri-phone-line"></i>
               </div>
               <div class="flex-grow-1 ms-10">
-                <span>Hotline</span>
+                <span>{{ t('nav.hotline') }}</span>
                 <h3>{{ phone }}</h3>
               </div>
             </div>
@@ -83,6 +83,7 @@ export default defineComponent({
     const stateStoreInstance = stateStore;
     const defaultLogo = defaultLogoImg;
 
+    const { t } = useI18n();
     const { logoUrl, contactInfo } = useSiteConfig();
 
     const phone = computed(() => contactInfo.value?.phone);
@@ -102,6 +103,7 @@ export default defineComponent({
       defaultLogo,
       logoUrl,
       phone,
+      t,
     };
   },
 });