From 4fc12ff9bf4725eaf58bbc2eebc2732034e338de Mon Sep 17 00:00:00 2001
From: Arina Yakovenko <yakovenko_arina@ma-al.com>
Date: Wed, 25 Jun 2025 13:53:36 +0200
Subject: [PATCH] translations

---
 assets/icons/cart.svg                  |  3 +
 components/CartPopup.vue               | 85 ++++++++++++++---------
 components/CountryCurrencySelector.vue |  2 +-
 components/HeaderBlock.vue             | 16 +++--
 components/section/InvestmentSave.vue  |  2 +-
 components/section/Product.vue         | 12 +---
 components/section/ShopMain.vue        | 39 +++++++----
 plugins/i18n.ts                        | 21 +++---
 plugins/initLoad.ts                    |  1 -
 stores/menuStore.ts                    | 94 +++++++++++++-------------
 stores/productStore.ts                 | 62 ++++++++++++++---
 types/index.ts                         | 13 +++-
 12 files changed, 218 insertions(+), 132 deletions(-)
 create mode 100644 assets/icons/cart.svg

diff --git a/assets/icons/cart.svg b/assets/icons/cart.svg
new file mode 100644
index 0000000..1f82182
--- /dev/null
+++ b/assets/icons/cart.svg
@@ -0,0 +1,3 @@
+<svg width="26" height="25" viewBox="0 0 26 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.2724 22.8291C5.2724 23.0552 5.31265 23.2791 5.39086 23.488C5.46907 23.6969 5.5837 23.8867 5.7282 24.0466C5.87271 24.2065 6.04427 24.3333 6.23308 24.4198C6.42189 24.5064 6.62426 24.5509 6.82862 24.5509C7.24136 24.5509 7.63719 24.3695 7.92904 24.0466C8.07355 23.8867 8.18818 23.6969 8.26639 23.488C8.34459 23.2791 8.38485 23.0552 8.38485 22.8291C8.38485 22.3724 8.22089 21.9345 7.92904 21.6116C7.63719 21.2887 7.24136 21.1073 6.82862 21.1073C6.41588 21.1073 6.02005 21.2887 5.7282 21.6116C5.43636 21.9345 5.2724 22.3724 5.2724 22.8291ZM19.2784 22.8291C19.2784 23.0552 19.3187 23.2791 19.3969 23.488C19.4751 23.6969 19.5897 23.8867 19.7342 24.0466C19.8787 24.2065 20.0503 24.3333 20.2391 24.4198C20.4279 24.5064 20.6303 24.5509 20.8346 24.5509C21.2474 24.5509 21.6432 24.3695 21.9351 24.0466C22.0796 23.8867 22.1942 23.6969 22.2724 23.488C22.3506 23.2791 22.3909 23.0552 22.3909 22.8291C22.3909 22.3724 22.2269 21.9345 21.9351 21.6116C21.6432 21.2887 21.2474 21.1073 20.8346 21.1073C20.4219 21.1073 20.0261 21.2887 19.7342 21.6116C19.4424 21.9345 19.2784 22.3724 19.2784 22.8291ZM0.558594 1.30623C0.558594 1.53456 0.640573 1.75353 0.786498 1.91498C0.932422 2.07644 1.13034 2.16714 1.33671 2.16714H2.95362L3.92004 6.74032L5.2724 14.2199C5.2724 14.2819 5.29885 14.3353 5.30508 14.3956L4.51296 18.3386C4.48735 18.4644 4.4877 18.595 4.51399 18.7206C4.54028 18.8463 4.59182 18.9638 4.66479 19.0644C4.73776 19.165 4.83027 19.2461 4.93547 19.3016C5.04066 19.3572 5.15582 19.3859 5.2724 19.3854H22.9262C23.1326 19.3854 23.3305 19.2947 23.4764 19.1333C23.6223 18.9718 23.7043 18.7528 23.7043 18.5245C23.7043 18.2962 23.6223 18.0772 23.4764 17.9158C23.3305 17.7543 23.1326 17.6636 22.9262 17.6636H6.24348L6.59986 15.8901C6.67767 15.9039 6.7477 15.9418 6.82862 15.9418H21.0136C21.8726 15.9418 22.3909 15.7541 22.8048 14.6504L25.3321 6.07225C25.771 4.53466 24.8077 3.88897 23.9471 3.88897H5.2724C5.15101 3.88897 5.04519 3.93546 4.93158 3.96473L4.32777 1.10994C4.28774 0.920801 4.19107 0.752202 4.05348 0.63154C3.91589 0.510878 3.74546 0.445247 3.56989 0.445313H1.33671C1.13034 0.445313 0.932422 0.536016 0.786498 0.697469C0.640573 0.858921 0.558594 1.0779 0.558594 1.30623ZM5.30352 5.6108H23.8304L21.3466 14.046C21.3171 14.1201 21.2922 14.1735 21.2735 14.2096C21.2221 14.2148 21.1412 14.2199 21.0136 14.2199H6.82862V14.0495L6.79905 13.8825L5.30352 5.6108Z" fill="#FFFEFB"/>
+</svg>
diff --git a/components/CartPopup.vue b/components/CartPopup.vue
index d74ad91..d52c039 100644
--- a/components/CartPopup.vue
+++ b/components/CartPopup.vue
@@ -1,45 +1,66 @@
 <template>
     <div ref="dropdownRef">
         <i @click="openCart = !openCart" class="uil uil-shopping-cart text-[31px] cursor-pointer"></i>
-        <div v-if="openCart" class="max-w-[1067px] w-full absolute top-[130px] z-50 right-20">
-            <div
-                class="w-full p-[50px] bg-bg-light dark:bg-bg-dark border border-button rounded-2xl h-full space-y-[55px]">
-                <div class="pb-[25px] border-b border-block" v-if="productStore.productList">
-                    <div class="flex items-center h-[205px]">
-                        <div class="w-[205px] h-full flex items-center justify-center">
-                            <img :src="`https://www.yourgold.cz/api/public/file/${productStore.productList[0]?.cover_picture_uuid}.webp`"
-                                alt="pics" class="w-auto h-full" />
-                        </div>
-                        <div class="flex flex-col justify-between h-full w-full gap-[7px] sm:gap-[15px]"
-                            @click="productStore.addToCart(productStore.productList[0])">
-                            <h3
-                                class="text-[10px] sm:text-base md:text-lg text-xl font-bold leading-[130%] sm:leading-[150%] text-bg-dark max-w-[250px]">
-                                {{ productStore.productList[0]?.name }}
-                            </h3>
-                            <div class="flex flex-col gap-[10px]">
-                                <p
-                                    class="text-accent-green-light font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
-                                    {{ productStore.productList[0]?.formatted_price }}
-                                </p>
-                                <div class="flex items-center gap-4 text-xl">
-                                    <p class="cursor-pointer">-</p>
-                                    <div class="w-11 min-h-11 border border-button flex items-center justify-center">{{
-                                        count }}
+        <div class="absolute left-1/2 transform -translate-x-1/2 w-full px-4 sm:max-w-[768px] sm:px-[17px] md:max-w-[1000px] md:px-6 xl:max-w-[1920px] xl:px-20 right-0 z-50 flex items-center justify-end top-[140px]">
+            <div v-if="openCart" class="xl:w-[55%] md:w-[70%] w-full px-4 md:px-0">
+                <div v-if="productStore.cart.cart_items && productStore.cart.cart_items.length > 0"
+                    class="w-full p-[25px] sm:p-[50px] first:pt-0 bg-bg-light dark:bg-bg-dark border border-button rounded-[32px] h-full space-y-[55px]">
+                    <div>
+                        <!-- product -->
+                        <div v-for="item in productStore.cart.cart_items" class="py-[25px] border-b border-block">
+                            <div class="flex items-center max-h-[205px]">
+                                <div class="min-w-[100px] sm:w-[205px] flex items-center justify-center">
+                                    <!-- <img :src="`https://www.yourgold.cz/api/public/file/${item.picture_uuid}.webp`"
+                                        alt="pics" class="max-h-[95px] sm:max-h-[180px] md:max-h-[205px] rounded-[5px]" /> -->
+                                </div>
+                                <div class="flex flex-col justify-between h-full w-full gap-[7px] sm:gap-[15px">
+
+                                    <div class="w-full flex items-center justify-between">
+                                        <h3
+                                            class="text-[10px] sm:text-base md:text-lg text-xl font-bold leading-[130%] sm:leading-[150%] max-w-[250px]">
+                                            {{ item.name }}
+                                        </h3>
+                                        <i @click="productStore.deleteCartItem(item.cart_item_id)"
+                                            class="uil uil-trash-alt text-2xl cursor-pointer"></i>
+                                    </div>
+                                    <div class="flex flex-col gap-[10px]">
+                                        <p
+                                            class="text-accent-green-light dark:text-accent-green-dark font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
+                                            {{ item.total_price }}
+                                        </p>
+                                        <div class="flex items-center gap-4 text-xl">
+                                            <i class="uil uil-minus cursor-pointer text-gray dark:text-button-disabled hover:text-gray-200 transition-all"
+                                                @click="productStore.decrementCartItem(item.cart_item_id)"></i>
+                                            <div
+                                                class="w-11 min-h-11 border border-button flex items-center justify-center rounded-[4px]">
+                                                {{ item.quantity }}
+                                            </div>
+                                            <i class="uil uil-plus cursor-pointer hover:text-gray-200 transition-all"
+                                                @click="productStore.incrementCartItem(item.product_id)"></i>
+                                        </div>
                                     </div>
-                                    <p>+</p>
                                 </div>
                             </div>
                         </div>
                     </div>
+                    <div class="flex items-center justify-between">
+                        <h4 class="h4-uppercase-bold-inter">{{ $t('total_amount') }}</h4>
+                        <p
+                            class="text-accent-green-light dark:text-accent-green-dark font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
+                            {{ productStore.cart.total_value }}
+                        </p>
+                    </div>
+                    <UiButtonArrow class="w-full" type="fill" :arrow="true" :full="true">{{ $t('to_checkout') }}
+                    </UiButtonArrow>
                 </div>
-                <div class="flex items-center justify-between">
-                    <h4 class="h4-uppercase-bold-inter">Celková částka</h4>
-                    <p
-                        class="text-accent-green-light font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
-                        {{ productStore.productList[0]?.formatted_price }}
-                    </p>
+                <div v-else
+                    class="w-full p-[50px] bg-bg-light dark:bg-bg-dark border border-button rounded-[32px] h-[400px] flex items-center justify-center">
+                    <div
+                        class="border border-block inline-flex items-center justify-center w-[30%] h-[200px] rounded-[8px]">
+                        <h4 class="font-inter text-base leading-[150%] font-bold uppercase sm:text-[20px] md:text-xl">
+                            košík je prázdný</h4>
+                    </div>
                 </div>
-                <UiButtonArrow class="w-full" type="fill" :arrow="true" :full="true">Přejít k pokladně</UiButtonArrow>
             </div>
         </div>
     </div>
diff --git a/components/CountryCurrencySelector.vue b/components/CountryCurrencySelector.vue
index 88f166b..ce3d577 100644
--- a/components/CountryCurrencySelector.vue
+++ b/components/CountryCurrencySelector.vue
@@ -6,7 +6,7 @@
       {{ menuStore.selectedCountry }}/{{ menuStore.selectedCurrency?.iso_code }}
     </UButton>
 
-    <div class="absolute ring-0 top-12 p-0 m-0 border-none w-48" v-if="isOpen">
+    <div class="absolute ring-0 top-12 p-0 m-0 border-none w-48 z-50" v-if="isOpen">
       <div class="border border-button px-4 py-[10px] rounded-[5px] bg-bg-light dark:bg-bg-dark">
         <div class="p-0 flex flex-col gap-4 bg-bg-light dark:bg-bg-dark">
           <div class="flex flex-col items-start gap-1">
diff --git a/components/HeaderBlock.vue b/components/HeaderBlock.vue
index 46417f2..eeaecd3 100644
--- a/components/HeaderBlock.vue
+++ b/components/HeaderBlock.vue
@@ -25,8 +25,12 @@
               <CountryCurrencySelector />
             </div>
             <ThemeSwitcher />
-            <button @click="menuStore.navigateToShop"
-              class="hover:bg-button-hover bg-button cursor-pointer rounded-xl px-6 py-3 font-medium text-white transition-all text-inter">
+            <button @click="menuStore.navigateToShop" :class="[
+              'cursor-pointer transition-all text-inter',
+              menuStore.menuItems?.find(item => (item.id_page === route.params.id) && (item.page_name === 'shop'))
+                ? 'text-accent-green-light dark:text-accent-green-dark font-bold pb-1 border-b-2'
+                : 'hover:bg-button-hover bg-button text-white font-medium rounded-xl px-6 py-3'
+            ]">
               {{ $t('eshop') }}
             </button>
           </div>
@@ -45,7 +49,7 @@
           <div class="flex items-center gap-6">
             <div class="flex items-center gap-[30px]">
               <i class="uil uil-user text-[31px] cursor-pointer"></i>
-              <i class="uil uil-shopping-cart text-[31px] cursor-pointer"></i>
+              <CartPopup />
             </div>
             <div class="flex">
               <LangSwitcher />
@@ -91,7 +95,7 @@
           <div class="flex items-center gap-6">
             <div class="flex items-center gap-[30px]">
               <i class="uil uil-user text-[31px] cursor-pointer"></i>
-              <i class="uil uil-shopping-cart text-[31px] cursor-pointer"></i>
+              <CartPopup />
             </div>
             <i variant="subtle" block class="uil uil-apps text-[30px] cursor-pointer" @click="open = !open"></i>
           </div>
@@ -152,7 +156,7 @@
               @click="menuStore.navigateToItem()" />
           </ClientOnly>
           <div class="flex items-center gap-6">
-            <i class="uil uil-shopping-cart text-[31px] cursor-pointer"></i>
+            <CartPopup />
             <i variant="subtle" block class="uil uil-apps text-[30px] cursor-pointer" @click="open = !open"></i>
           </div>
         </UiContainer>
@@ -214,7 +218,7 @@ const productStore = useProductStore();
 const open = ref(false);
 const colorMode = useColorMode();
 
-// productStore.getCart()
+productStore.getCart()
 
 const route = useRoute()
 const isDark = computed({
diff --git a/components/section/InvestmentSave.vue b/components/section/InvestmentSave.vue
index c21ece5..1aeac86 100644
--- a/components/section/InvestmentSave.vue
+++ b/components/section/InvestmentSave.vue
@@ -23,7 +23,7 @@
           }" />
         </div>
       </div>
-      <div class="flex items-center justify-center">
+      <div class="flex items-center justify-center w-[60%] mx-auto">
         <div class="flex flex-col items-center p-3 sm:p-6 md:p-8 xl:p-11 border border-block rounded-2xl gap-5">
           <h4 class="h4-uppercase-bold-inter text-accent-green-light dark:text-accent-green-dark">
             20 {{ $t("years") }}
diff --git a/components/section/Product.vue b/components/section/Product.vue
index ff36f14..8e7072c 100644
--- a/components/section/Product.vue
+++ b/components/section/Product.vue
@@ -1,10 +1,10 @@
 <template>
   <div
     class="w-[150px] sm:w-[260px] md:w-[330px] px-2 py-3 sm:py-5 sm:px-[15px] bg-block rounded-2xl flex flex-col items-center gap-[15px] sm:gap-[50px]">
-    <img :src="`https://www.yourgold.cz/api/public/file/${props.product?.cover_picture_uuid}.webp`" alt="pics"
+    <img onerror="this.src='https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?cs=srgb&dl=pexels-souvenirpixels-414612.jpg&fm=jpg'" :src="`https://www.yourgold.cz/api/public/file/${props.product?.cover_picture_uuid}.webp`" alt="pics"
       class="max-h-[95px] sm:max-h-[180px] md:max-h-[205px] rounded-[5px]" />
     <div class="flex flex-col justify-between h-full w-full gap-[7px] sSm:gap-[15px]"
-      @click="productStore.addToCart(props.product)">
+      @click="productStore.incrementCartItem(props.product?.id)">
       <div class="flex flex-col gap-[7px] sm:gap-[15px] w-full">
         <h3 class="text-[10px] sm:text-base md:text-lg text-xl font-bold leading-[130%] sm:leading-[150%] text-bg-dark">
           {{ props.product?.name }}
@@ -19,7 +19,7 @@
         </p>
         <button
           class="w-[22px] h-[22px] sm:w-9 sm:h-9 md:w-12 md:h-12 rounded-[5px] sm:rounded-xl bg-button cursor-pointer hover:bg-button-hover transition-all flex items-center justify-center p-1">
-          <i class="uil uil-shopping-cart text-[10px] sm:text-[25px] md:text-2xl cursor-pointer"></i>
+          <i class="uil uil-shopping-cart text-lg sm:text-2xl md:text-[31px] cursor-pointer"></i>
         </button>
       </div>
     </div>
@@ -27,15 +27,9 @@
 </template>
 
 <script setup lang="ts">
-// import imgUrl from "~/utils/imgUrl";
 const props = defineProps({
   product: Object,
 });
 
 const productStore = useProductStore()
-
-// const addToCartAndPreventNavigation = (event: any) => {
-//   event.preventDefault();
-//   useCartStore().addToCart(props.product);
-// };
 </script>
diff --git a/components/section/ShopMain.vue b/components/section/ShopMain.vue
index 038cc73..9d468e6 100644
--- a/components/section/ShopMain.vue
+++ b/components/section/ShopMain.vue
@@ -137,13 +137,11 @@
                     <div class="flex flex-col sm:flex-row gap-[25px]">
                         <div class="flex flex-col justify-between gap-[25px]">
                             <h4 class="font-inter text-lg sm:text-[24px] leading-[150%] md:leading-[120%] font-bold">
-                                {{ component.section_lang_data.title }}
+                                {{ component.front_section_lang[0].data.title }}
                             </h4>
-                            <p>{{ component.section_lang_data.description }}</p>
+                            <p>{{ component.front_section_lang[0].data.description }}</p>
                         </div>
-                        <img class="max-w-[150px] mx-auto"
-                            :src="`/api/files/${component.image_collection}/${component.section_id}/${component.section_img[0]}?thumb=640x0')`"
-                            alt="" />
+                        <img class="max-w-[150px] mx-auto" :src="`/api/public/file/${component.img[0]}_m.webp')`" />
                     </div>
                 </div>
 
@@ -171,16 +169,27 @@ import Product from "./Product.vue";
 import type { Feature, GenericResponse, GenericResponseChildren, GenericResponseItems, ProductType } from "~/types";
 import CategoryTree from "./CategoryTree.vue";
 
-defineProps<{ component: Component }>();
-type Component = {
-    image_collection: string;
-    section_id: string;
-    section_img: string;
-    section_lang_data: {
-        title: string;
-        description: string
-    };
-};
+const props = defineProps<{
+    component: {
+        id: number
+        name: string
+        img: string[]
+        component_name: string
+        is_no_lang: boolean
+        page_name: string
+        front_section_lang: {
+            data: {
+                title: string;
+                description: string
+            }
+            id_front_section: number
+            id_lang: number
+        }[]
+    }
+}>();
+
+console.log(props.component);
+
 
 const openCategories = ref(false);
 const isInfo = ref<boolean>(true);
diff --git a/plugins/i18n.ts b/plugins/i18n.ts
index c0af135..900d767 100644
--- a/plugins/i18n.ts
+++ b/plugins/i18n.ts
@@ -1,5 +1,6 @@
 import type { VueI18n } from "vue-i18n";
 import { usePB } from "~/composables/usePB";
+import type { GenericResponse } from "~/types";
 
 export default defineNuxtPlugin(async (nuxtApp) => {
   const loaded = [] as Array<string>;
@@ -11,16 +12,16 @@ export default defineNuxtPlugin(async (nuxtApp) => {
     if (loaded.includes(newLocale)) return;
 
     try {
-      const translation = await pb.collection("translation").getList(1, 1, {
-        expand: "id_lang",
-        filter: `id_lang.iso='${newLocale}'`,
-      });
+      // const translation = await pb.collection("translation").getList(1, 1, {
+      //   expand: "id_lang",
+      //   filter: `id_lang.iso='${newLocale}'`,
+      // });
 
-      if (translation.totalItems === 1) {
-        i18n.setLocaleMessage(newLocale, translation.items[0].data);
-      } else {
-        i18n.setLocaleMessage(newLocale, {});
-      }
+      const { data } = await useMyFetch<GenericResponse<object>>(
+        "/api/public/front/translation"
+      );
+
+      i18n.setLocaleMessage(newLocale, data);
 
       loaded.push(newLocale);
     } catch (err) {
@@ -28,4 +29,4 @@ export default defineNuxtPlugin(async (nuxtApp) => {
       throw err;
     }
   };
-});
\ No newline at end of file
+});
diff --git a/plugins/initLoad.ts b/plugins/initLoad.ts
index 5300ede..c2e2f98 100644
--- a/plugins/initLoad.ts
+++ b/plugins/initLoad.ts
@@ -3,7 +3,6 @@ import { defineNuxtPlugin } from "#app";
 export default defineNuxtPlugin(async () => {
   const menuStore = useMenuStore();
   await menuStore.loadMenu();
-  await menuStore.loadFooter();
   await menuStore.getCountryList();
   await menuStore.getCurrencies();
 });
\ No newline at end of file
diff --git a/stores/menuStore.ts b/stores/menuStore.ts
index adca200..5ccde8c 100644
--- a/stores/menuStore.ts
+++ b/stores/menuStore.ts
@@ -30,13 +30,21 @@ import { useMyFetch } from "#imports";
 //   }));
 // }
 
-function buildTreeRecursive(data: (FrontMenu | UIFrontMenu)[], parentId: number): UIFrontMenu[] {
-  const children = data.filter((item): item is UIFrontMenu => item.id_parent === parentId && !item.is_default);
+function buildTreeRecursive(
+  data: (FrontMenu | UIFrontMenu)[],
+  parentId: number
+): UIFrontMenu[] {
+  const children = data.filter(
+    (item): item is UIFrontMenu =>
+      item.id_parent === parentId && !item.is_default
+  );
 
-  return children.map((item) => ({ ...item, children: buildTreeRecursive(data, item.id) }));
+  return children.map((item) => ({
+    ...item,
+    children: buildTreeRecursive(data, item.id),
+  }));
 }
 
-
 export const useMenuStore = defineStore("menuStore", () => {
   const pb = usePB();
   const store = useStore();
@@ -72,15 +80,20 @@ export const useMenuStore = defineStore("menuStore", () => {
       //     sort: "position_id",
       //   })) as MenuListResponse;
 
-      const { data } = await useMyFetch<GenericResponse<FrontMenu[]>>(`/api/public/front/menu`, {
-        onErrorOccured: (err, status) => {
-          console.log(err, status);
-        },
-        // onSuccess(data) {
-        //   console.log(data.data, "data");
+      const { data } = await useMyFetch<GenericResponse<FrontMenu[]>>(
+        `/api/public/front/menu`,
+        {
+          onErrorOccured: (err, status) => {
+            console.log(err, status);
+          },
+          // onSuccess(data) {
+          //   console.log(data.data, "data");
 
-        // },
-      })
+          // },
+        }
+      );
+
+      menuItems.value = data;
 
       const root = data.find((item) => item.is_root) as UIFrontMenu;
       defaultMenu.value = data.find((item) => item.is_default);
@@ -92,7 +105,6 @@ export const useMenuStore = defineStore("menuStore", () => {
         menu.value = [];
       }
 
-
       // const root = menuItems.value.items.find((item) => item.is_root);
       // defaultMenu.value = menuItems.value.items.find((item) => item.is_default);
 
@@ -108,18 +120,6 @@ export const useMenuStore = defineStore("menuStore", () => {
     }
   };
 
-  const loadFooter = async () => {
-    try {
-      footerItems.value = (await pb
-        .collection("footer_view")
-        .getList<PBFooterItem>(1, 50, {
-          filter: `id_lang="${$i18n.locale.value}"`,
-        })) as FooterListResponse;
-    } catch (error) {
-      console.log(error);
-    }
-  };
-
   const getCountryList = async () => {
     try {
       const { data } = await useMyFetch<GenericResponse<Country[]>>(
@@ -136,14 +136,12 @@ export const useMenuStore = defineStore("menuStore", () => {
       // }
 
       // const data = await res.json();
-      countryList.value = data
-      if (countryList.value)
-        selectedPhoneCountry.value = countryList.value[0]
-
+      countryList.value = data;
+      if (countryList.value) selectedPhoneCountry.value = countryList.value[0];
     } catch (error) {
       console.error("getList error:", error);
     }
-  }
+  };
 
   const getCurrencies = async () => {
     try {
@@ -153,7 +151,9 @@ export const useMenuStore = defineStore("menuStore", () => {
           headers: {
             "Content-Type": "application/json",
           },
-          onErrorOccured: (_, status) => { throw new Error(`HTTP error: ${status}`) },
+          onErrorOccured: (_, status) => {
+            throw new Error(`HTTP error: ${status}`);
+          },
         }
       );
 
@@ -162,14 +162,13 @@ export const useMenuStore = defineStore("menuStore", () => {
       // }
 
       // const data = await res.json();
-      currencies.value = data.items
+      currencies.value = data.items;
 
       // console.log(data.items, "data");
-
     } catch (error) {
       console.error("getList error:", error);
     }
-  }
+  };
 
   const navigateToItem = (item?: UIFrontMenu) => {
     if (item) {
@@ -178,12 +177,11 @@ export const useMenuStore = defineStore("menuStore", () => {
         name: `id-slug___${$i18n.locale.value}`,
       });
       openDropDown.value = false;
-    }
-    else {
+    } else {
       router.push({
         params: {
-          slug: defaultMenu.value.link_rewrite,
-          id: defaultMenu.value.id_page,
+          slug: defaultMenu.value.front_menu_lang[0].link_rewrite,
+          id: defaultMenu.value.id,
         },
         name: `id-slug___${$i18n.locale.value}`,
       });
@@ -191,7 +189,9 @@ export const useMenuStore = defineStore("menuStore", () => {
   };
 
   function navigateToShop() {
-    navigateToItem(menuItems.value?.items.find(item => item.page_name === 'shop'))
+    console.log(menuItems.value);
+
+    navigateToItem(menuItems.value?.find((item) => item.id === 5));
   }
 
   // function redirectToPage(link_rewrite: string) {
@@ -218,9 +218,11 @@ export const useMenuStore = defineStore("menuStore", () => {
     let img = "";
     for (const s in store.components) {
       store.components[s].section_img.map((item) => {
-        img = `${req?.headers.get("x-forwarded-proto") || url.protocol}://${req?.headers.get("x-forwarded-host") || req?.headers.get("host")
-          }/api/files/${store.components[s].image_collection}/${store.components[s].section_id
-          }/${item}?thumb=400x0`;
+        img = `${req?.headers.get("x-forwarded-proto") || url.protocol}://${
+          req?.headers.get("x-forwarded-host") || req?.headers.get("host")
+        }/api/files/${store.components[s].image_collection}/${
+          store.components[s].section_id
+        }/${item}?thumb=400x0`;
       });
       if (img.length > 0) return img;
     }
@@ -273,12 +275,11 @@ export const useMenuStore = defineStore("menuStore", () => {
 
   watch($i18n.locale, async () => {
     await loadMenu();
-    await loadFooter();
   });
 
   watch(selectedCurrency, () => {
-    store.getCalculator()
-  })
+    store.getCalculator();
+  });
   return {
     menu,
     menuItems,
@@ -294,10 +295,9 @@ export const useMenuStore = defineStore("menuStore", () => {
     headMeta,
     navigateToShop,
     loadMenu,
-    loadFooter,
     getCountryList,
     navigateToItem,
     // redirectToPage,
-    getCurrencies
+    getCurrencies,
   };
 });
diff --git a/stores/productStore.ts b/stores/productStore.ts
index 60fe220..49dc2a3 100644
--- a/stores/productStore.ts
+++ b/stores/productStore.ts
@@ -1,6 +1,7 @@
 import { NuxtErrorBoundary } from "#components";
 import { useMyFetch } from "#imports";
 import type {
+  CartItem,
   GenericResponse,
   GenericResponseChildren,
   GenericResponseItems,
@@ -59,10 +60,10 @@ export const useProductStore = defineStore("productStore", () => {
     }
   }
 
-  async function addToCart(product: Product) {
+  async function incrementCartItem(id: number) {
     try {
-      const { data } = await useMyFetch<GenericResponse<UserCart>>(
-        `/api/public/user/cart/item/add/${product.id}/1`,
+      await useMyFetch(
+        `/api/public/user/cart/item/add/${id}/1`,
         {
           method: "PUT",
           headers: {
@@ -73,11 +74,55 @@ export const useProductStore = defineStore("productStore", () => {
           },
         }
       );
+
+      getCart();
     } catch (error) {
       console.error("getList error:", error);
     }
   }
 
+  async function decrementCartItem(id: number) {
+    try {
+      await useMyFetch(
+        `/api/public/user/cart/item/subtract/${id}/1`,
+        {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          onErrorOccured: (_, status) => {
+            throw new Error(`HTTP error: ${status}`);
+          },
+        }
+      );
+
+      getCart();
+    } catch (error) {
+      console.error("removeFromCart error:", error);
+    }
+  }
+
+  async function deleteCartItem(id: number) {
+    try {
+      await useMyFetch(
+        `/api/public/user/cart/item/${id}`,
+        {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          onErrorOccured: (_, status) => {
+            throw new Error(`HTTP error: ${status}`);
+          },
+        }
+      );
+
+      getCart();
+    } catch (error) {
+      console.error("removeFromCart error:", error);
+    }
+  }
+
   const cart = ref({} as UserCart);
   async function getCart() {
     try {
@@ -93,10 +138,6 @@ export const useProductStore = defineStore("productStore", () => {
         }
       );
 
-      // if (!res.ok) {
-      //   throw new Error(`HTTP error: ${res.status}`);
-      // }
-
       cart.value = data;
     } catch (error) {
       console.error("getList error:", error);
@@ -106,9 +147,12 @@ export const useProductStore = defineStore("productStore", () => {
   return {
     productList,
     modules,
+    cart,
     getList,
     getModules,
-    addToCart,
-    // getCart,
+    incrementCartItem,
+    decrementCartItem,
+    deleteCartItem,
+    getCart,
   };
 });
diff --git a/types/index.ts b/types/index.ts
index 388146f..9312c53 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -181,11 +181,22 @@ export interface Currency {
   suffix: boolean;
 }
 
+export interface CartItem {
+  cart_item_id: number;
+  link_rewrite: string;
+  name: string;
+  picture_uuid: string;
+  product_id: number;
+  quantity: number;
+  single_item_price: number;
+  total_price: number;
+}
 export interface UserCart {
+  cart_items: CartItem[];
   id: number;
   checkout_in_progress: boolean;
-  total_value: number;
   currency_iso: string;
+  total_value: number;
 }
 
 export interface GenericResponse<Data> {