From 7d0a449a1ee425850f2d9339b566109ffb429c34 Mon Sep 17 00:00:00 2001
From: Arina Yakovenko <yakovenko_arina@ma-al.com>
Date: Mon, 23 Jun 2025 15:54:55 +0200
Subject: [PATCH] additions to product page

---
 components/CartPopup.vue                      |  12 ++
 components/HeaderBlock.vue                    |  19 ++-
 .../investment-page/InvestmentZone.vue        |   2 +-
 components/section/main-page/MainProducts.vue |  42 ++----
 components/section/shop-page/CategoryTree.vue |  14 +-
 .../section/shop-page/CurrencyRatesBar.vue    |  81 ++++++++++
 components/section/shop-page/Product.vue      |  16 +-
 components/section/shop-page/ShopMain.vue     | 138 ++++++++++--------
 composables/useMyFetch.ts                     |  72 +++++++++
 pages/[id]/[slug].vue                         |   2 +-
 plugins/i18n.ts                               |   1 -
 stores/menuStore.ts                           |  49 ++++---
 stores/productStore.ts                        |  75 ++++++++++
 13 files changed, 387 insertions(+), 136 deletions(-)
 create mode 100644 components/CartPopup.vue
 create mode 100644 components/section/shop-page/CurrencyRatesBar.vue
 create mode 100644 composables/useMyFetch.ts

diff --git a/components/CartPopup.vue b/components/CartPopup.vue
new file mode 100644
index 0000000..810ea8f
--- /dev/null
+++ b/components/CartPopup.vue
@@ -0,0 +1,12 @@
+<template>
+    <div class="p-[50px] bg-bg-light dark:bg-bg-dark border border-button rounded-2xl">
+        <div class="" v-if="productStore.productList">
+            {{ productStore.productList }}
+        </div>
+        <UiButtonArrow class="w-full" type="fill" :arrow="true">Přejít k pokladně</UiButtonArrow>
+    </div>
+</template>
+
+<script lang="ts" setup>
+const productStore = useProductStore()
+</script>
\ No newline at end of file
diff --git a/components/HeaderBlock.vue b/components/HeaderBlock.vue
index efa03b7..5e9f6c8 100644
--- a/components/HeaderBlock.vue
+++ b/components/HeaderBlock.vue
@@ -2,7 +2,7 @@
   <div>
     <!-- xl -->
     <div class="w-full border-b border-border">
-      <UiContainer>
+      <UiContainer class="relative">
         <div class="hidden h-[120px] w-full items-center gap-[145px] xl:flex">
           <ul class="flex items-center justify-between whitespace-nowrap w-full">
             <li v-for="(item, index) in menuStore.menu" @click="menuStore.navigateToItem(item)" :key="index"
@@ -18,18 +18,21 @@
           <div class="w-full flex items-center justify-between">
             <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>
+              <i @click="openCart = !openCart" class="uil uil-shopping-cart text-[31px] cursor-pointer"></i>
             </div>
             <div class="flex">
               <LangSwitcher />
               <CountryCurrencySelector />
             </div>
             <ThemeSwitcher />
-            <button @click="navigateToShop"
+            <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">
               {{ $t('eshop') }}
             </button>
           </div>
+          <div v-if="openCart" class="max-w-[1067px] absolute top-[130px] z-50 right-20">
+            <CartPopup />
+          </div>
         </div>
       </UiContainer>
     </div>
@@ -209,19 +212,19 @@
   </div>
 </template>
 <script lang="ts" setup>
+import CartPopup from "./CartPopup.vue";
 import CountryCurrencySelector from "./CountryCurrencySelector.vue";
 import LangSwitcher from "./LangSwitcher.vue";
 
 const menuStore = useMenuStore();
+const productStore = useProductStore();
 const open = ref(false);
+const openCart = ref(false);
 const colorMode = useColorMode();
 
+productStore.getCart()
+
 const route = useRoute()
-
-function navigateToShop() {
-  menuStore.navigateToItem(menuStore.menuItems?.items.find(item => item.page_name === 'shop'))
-}
-
 const isDark = computed({
   get() {
     return colorMode.value === "dark";
diff --git a/components/section/investment-page/InvestmentZone.vue b/components/section/investment-page/InvestmentZone.vue
index 8824441..273eb1c 100644
--- a/components/section/investment-page/InvestmentZone.vue
+++ b/components/section/investment-page/InvestmentZone.vue
@@ -52,7 +52,7 @@
         </div>
       </div>
 
-      <UiButtonArrow :arrow="true" class="mx-auto" type="fill">E-shop</UiButtonArrow>
+      <UiButtonArrow :arrow="true" class="mx-auto" type="fill">{{ $t('eshop') }}</UiButtonArrow>
     </div>
 
     <!-- calculator-block -->
diff --git a/components/section/main-page/MainProducts.vue b/components/section/main-page/MainProducts.vue
index 26ff2fd..e3caa3e 100644
--- a/components/section/main-page/MainProducts.vue
+++ b/components/section/main-page/MainProducts.vue
@@ -1,27 +1,17 @@
 <template>
   <UiContainer class="space-y-[40px] sm:space-y-[55px] md:space-y-[75px]">
-    <div
-      :class="[
-        'sm:mx-[50px] md:mx-0 xl:mx-[92px] flex items-stretch',
-        itemCount === 1 ? 'justify-center' : 'justify-between gap-2',
-      ]"
-    >
+    <div :class="[
+      'sm:mx-[50px] md:mx-0 xl:mx-[92px] flex items-stretch',
+      itemCount === 1 ? 'justify-center' : 'justify-between gap-2',
+    ]">
       <!-- product -->
-      <div
-        v-for="(item, index) in productStore.productList"
-        :key="index"
-        class="w-[200px] sm:w-[260px] md:w-[290px] sm:py-5 sm:px-[15px] py-[15px] px-[10px] bg-block rounded-2xl flex flex-col items-center gap-5 sm:gap-7"
-      >
-        <img
-          :src="`https://www.yourgold.cz/api/public/file/${item.cover_picture_uuid}.webp`"
-          alt="pics"
-          class="max-h-[150px] sm:max-h-[180px] md:max-h-[205px]"
-        />
+      <div v-for="(item, index) in productStore.productList" :key="index"
+        class="w-[200px] sm:w-[260px] md:w-[290px] sm:py-5 sm:px-[15px] py-[15px] px-[10px] bg-block rounded-2xl flex flex-col items-center gap-5 sm:gap-7">
+        <img :src="`https://www.yourgold.cz/api/public/file/${item.cover_picture_uuid}.webp`" alt="pics"
+          class="max-h-[150px] sm:max-h-[180px] md:max-h-[205px]" />
         <div class="flex flex-col justify-between h-full">
           <div class="flex flex-col gap-[10px] sm:gap-[15px] w-full">
-            <h3
-              class="text-[13px] sm:text-base md:text-lg text-xl font-bold leading-[150%] text-bg-dark"
-            >
+            <h3 class="text-[13px] sm:text-base md:text-lg text-xl font-bold leading-[150%] text-bg-dark">
               {{ item.name }}
             </h3>
             <p class="text-[10px] sm:text-[12px] text-sm text-bg-dark">
@@ -33,24 +23,19 @@
               {{ item.formatted_price }}
             </p>
             <button
-              class="w-9 h-9 md:w-12 md:h-12 rounded-xl bg-button cursor-pointer hover:bg-button-hover transition-all flex items-center justify-center"
-            >
-              <i
-                class="uil uil-shopping-cart text-[25px] md:text-[24px] text-bg-light"
-              ></i>
+              class="w-9 h-9 md:w-12 md:h-12 rounded-xl bg-button cursor-pointer hover:bg-button-hover transition-all flex items-center justify-center">
+              <i class="uil uil-shopping-cart text-[25px] md:text-[24px] text-bg-light"></i>
             </button>
           </div>
         </div>
       </div>
     </div>
     <div class="flex flex-col gap-6 md:flex-row items-center justify-between">
-      <h3
-        class="h4-uppercase-bold-inter w-full text-center md:text-start xl:max-w-[50%]"
-      >
+      <h3 class="h4-uppercase-bold-inter w-full text-center md:text-start xl:max-w-[50%]">
         Zlato je jistota, která nepodléhá času. Udělejte dnes rozhodnutí, které
         vás ochrání zítra
       </h3>
-      <UiButtonArrow type="fill" :arrow="true">E-shop</UiButtonArrow>
+      <UiButtonArrow @click="menuStore.navigateToShop" type="fill" :arrow="true">{{ $t('eshop') }}</UiButtonArrow>
     </div>
   </UiContainer>
 </template>
@@ -72,6 +57,7 @@ type Component = {
   ];
 };
 
+const menuStore = useMenuStore()
 const itemCount = ref(4);
 const productStore = useProductStore();
 
diff --git a/components/section/shop-page/CategoryTree.vue b/components/section/shop-page/CategoryTree.vue
index ec386ec..d07d8a1 100644
--- a/components/section/shop-page/CategoryTree.vue
+++ b/components/section/shop-page/CategoryTree.vue
@@ -2,18 +2,20 @@
   <div v-if="hasMainCategory" :class="['flex flex-col gap-[25px]', isOpen && 'border-b border-block pb-[10px]']">
     <div @click="toggle" class="flex items-center justify-between rounded-lg cursor-pointer">
       <div class="flex items-center justify-between w-full">
-        <p class="text-2xl font-extrabold text-black dark:text-white">
+        <p class="text-lg xl:text-2xl font-extrabold text-black dark:text-white">
           {{ mainCategoryName }}
         </p>
-        <span :class="[isOpen && 'rotate-180', 'transition-all']"> <i
-            class="uil uil-angle-down text-3xl text-button font-light cursor-pointer"></i></span>
+        <span :class="['flex items-center justify-center',isOpen && 'rotate-180', 'transition-all']"><i
+            class="iconify i-lucide:chevron-down text-button shrink-0 size-6 ms-auto"></i></span>
       </div>
     </div>
 
-    <ul class="flex flex-col gap-[25px] text-black dark:text-gray" v-show="isOpen">
-      <li @click="$emit('change-category', child)" v-for="child in subcategories" :key="child.id" class="cursor-pointer"
+    <ul class="flex flex-col gap-[25px]" v-show="isOpen">
+      <li @click="$emit('change-category', child)" v-for="child in subcategories" :key="child.id"
+        class="text-base xl:text-lg cursor-pointer flex justify-between items-center"
         :class="child.id === props.active ? 'text-yellow' : ''">
-        {{ child.langs[0].Name }}
+        <span>{{ child.langs[0].Name }}</span>
+        <span>12</span>
       </li>
     </ul>
   </div>
diff --git a/components/section/shop-page/CurrencyRatesBar.vue b/components/section/shop-page/CurrencyRatesBar.vue
new file mode 100644
index 0000000..2a0251c
--- /dev/null
+++ b/components/section/shop-page/CurrencyRatesBar.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class="flex gap-24">
+    <div class="price-container">
+      <div class="slider" v-html="duplicatedContent">
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+let res = "<span class=\"text-base sm:text-lg font-bold\">CZK price (to EUR). Kč 25,1720<span class=\"text-accent-green-light dark:text-accent-green-dark\"> Kč 0,0180 (0.07%) </span></span><span class=\"text-base sm:text-lg font-bold\">Gold price on market. 2 929,7250 €<span class=\"text-[#B72D2D]\"> -6,9560 € (-0.24%) </span></span><span class=\"text-base sm:text-lg font-bold\">Silver price on market. 31,5280 €<span class=\"text-accent-green-light dark:text-accent-green-dark\"> 0,1690 € (0.54%) </span></span><span class=\"text-base sm:text-lg font-bold\">PLN price (to EUR). zł 4,2660<span class=\"text-[#B72D2D]\"> zł -0,0050 (-0.12%) </span></span>"
+const productStore = useProductStore()
+const activeElement = ref(1);
+productStore.getModules()
+
+// Computed property to duplicate the content
+const duplicatedContent = computed(() => {
+  const originalContent = res || '';
+  return originalContent + originalContent + originalContent + originalContent;
+});
+
+
+const changeActive = (item: number) => {
+  activeElement.value = item;
+};
+</script>
+
+
+<style scoped>
+.price-container {
+  /* display: flex; */
+  overflow: hidden;
+}
+
+.slider {
+  display: flex;
+  gap: 64px;
+  animation: slidein 40s linear infinite;
+  white-space: nowrap;
+}
+
+.logos {
+  display: flex;
+  gap: 64px;
+  width: 100%;
+  /* display: inline-block; */
+  margin: 0px 0;
+}
+
+.fas {
+  height: 50%;
+  animation: fade-in 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
+}
+
+@keyframes slidein {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@media (min-width: 900px) {
+  .slider {
+    animation: slidein 80s linear infinite;
+  }
+}
+</style>
diff --git a/components/section/shop-page/Product.vue b/components/section/shop-page/Product.vue
index 6b090db..4fed871 100644
--- a/components/section/shop-page/Product.vue
+++ b/components/section/shop-page/Product.vue
@@ -1,14 +1,15 @@
 <template>
   <div
-    class="w-[150px] sm:w-[260px] md:w-[330px] sm:py-5 sm:px-[15px] py-[15px] px-[10px] bg-block rounded-2xl flex flex-col items-center gap-5 sm:gap-[50px]">
+    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"
-      class="max-h-[95px] sm:max-h-[180px] md:max-h-[205px]" />
-    <div class="flex flex-col justify-between h-full w-full gap-[7px] sm:gap-[15px]">
+      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)">
       <div class="flex flex-col gap-[7px] sm:gap-[15px] w-full">
-        <h3 class="text-[13px] sm:text-base md:text-lg text-xl font-bold leading-[130%] sm:leading-[150%] text-bg-dark">
+        <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 }}
         </h3>
-        <p class="text-[10px] sm:text-[12px] text-sm text-bg-dark">
+        <p class="text-[9px] sm:text-[12px] text-sm text-bg-dark">
           {{ props.product?.tax_name }}
         </p>
       </div>
@@ -18,8 +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">
-          <UButton icon="i-lucide-shopping-cart" variant="ghost"
-            class="text-xl sm:text-[25px] md:text-2xl text-bg-light" />
+          <UButton icon="i-lucide-shopping-cart" variant="ghost" class="sm:text-[25px] md:text-2xl text-bg-light" />
         </button>
       </div>
     </div>
@@ -32,6 +32,8 @@ const props = defineProps({
   product: Object,
 });
 
+const productStore = useProductStore()
+
 // const addToCartAndPreventNavigation = (event: any) => {
 //   event.preventDefault();
 //   useCartStore().addToCart(props.product);
diff --git a/components/section/shop-page/ShopMain.vue b/components/section/shop-page/ShopMain.vue
index 4ee2161..a3939eb 100644
--- a/components/section/shop-page/ShopMain.vue
+++ b/components/section/shop-page/ShopMain.vue
@@ -1,53 +1,7 @@
 <template>
+    <SectionShopPageCurrencyRatesBar class="mb-[25px] sm:mb-[55px] xl:mb-[75px]" />
     <UiContainer>
-        <div class="flex justify-between mb-[25px] sm:mb-[55px] xl:mb-[75px] whitespace-nowrap gap-[100px]">
-            <p>CZK cena (na EUR). Kč 25,2380 Kč +0,0030 (+0.01%)</p>
-            <p>Cena zlata na trhu. 2 852,1450 € -21,6520 € (-0.75%)</p>
-            <p>Cena stříbra na trhu. 28,6500 € -0,1570 € (-0.54%)</p>
-            <p>PLN cena (na EUR). zł 4,2550</p>
-        </div>
-        <div class="flex flex-col gap-10 xl:flex-row">
-            <Transition>
-                <div v-if="openCategories" class="z-40 block w-full pt-8 xl:w-1/4 xl:pt-36 xl:hidden">
-                    <BaseTitle>
-                        {{ $t("FrontTranslations", "Categories") }}
-                    </BaseTitle>
-                    <div class="mt-14">
-                        <div class="flex flex-col gap-12">
-                            <div>
-                                <CategoryTree :data="categoriesList" @change-category="changeCategory($event)"
-                                    :active="categoryId" />
-                            </div>
-                            <div>
-                                <p class="mb-8 text-2xl font-extrabold text-black dark:text-white">
-                                    {{ $t("FrontTranslations", "Filtered by") }}
-                                </p>
-
-                                <div v-for="(item, itemIndex) in filters" :key="itemIndex" class="mb-8 text-white">
-                                    <span
-                                        class="flex justify-between font-bold text-black cursor-pointer 2xl:pr-24 dark:text-gray"
-                                        @click="toggleFeature(item.feature)">
-                                        {{ item.feature }}
-                                        <span class="w-4 h-4 text-yellow"><i
-                                                class="uil uil-angle-down text-2xl font-light cursor-pointer"></i></span>
-                                    </span>
-                                    <ul v-show="visibleFeatures[item.feature]"
-                                        class="flex flex-col gap-8 pl-8 mt-8 text-black dark:text-gray">
-                                        <li v-for="filter in item.feature_values" :key="filter.value_id"
-                                            class="flex gap-1">
-                                            <input :id="`${filter.value_id}`"
-                                                :value="`${filter.parent}.${filter.value_id}`" v-model="selectedFilters"
-                                                type="checkbox" />
-                                            <label :for="`${filter.value_id}`">{{ filter.value }}</label>
-                                        </li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </Transition>
-
+        <div class="flex flex-col gap-[25px] sm:gap-10 xl:flex-row">
             <!-- button to open categories -->
             <div class="xl:hidden flex items-center w-full">
                 <button @click="openCategories = !openCategories"
@@ -56,6 +10,57 @@
                 </button>
             </div>
 
+            <Transition>
+                <div v-if="openCategories" class="min-w-[250px] px-5 sm:p-0 xl:hidden">
+                    <h1 class="font-bounded leading-[140%] font-bold text-[24px] mb-[25px]">
+                        {{ $t("category") }}
+                    </h1>
+                    <div class="flex flex-col gap-[25px]">
+                        <div>
+                            <div v-if="categoriesList.length < 1" class="animate-pulse">
+                                <div
+                                    class="flex items-center justify-between mt-4 text-white rounded-lg cursor-pointer xl:pr-24">
+                                    <div class="w-32 h-4 bg-gray-200 rounded"></div>
+                                    <div class="w-4 h-4 bg-gray-200 rounded-full"></div>
+                                </div>
+                            </div>
+                            <CategoryTree :data="categoriesList" @change-category="changeCategory($event)"
+                                :active="categoryId" />
+                        </div>
+                        <div>
+                            <p class="mb-[25px] text-lg font-extrabold text-black dark:text-white">
+                                {{ $t("filtered_by") }}
+                            </p>
+
+                            <div v-for="(item, itemIndex) in filters" :key="itemIndex"
+                                :class="['mb-[30px]', visibleFeatures[item.feature] && 'border-b border-block pb-2']">
+                                <span class="flex justify-between items-center font-bold cursor-pointer mb-[25px] text-base"
+                                    @click="toggleFeature(item.feature)">
+                                    {{ item.feature }}
+                                    <span :class="[visibleFeatures[item.feature] && 'rotate-180', 'transition-all']"><i
+                                            class="iconify i-lucide:chevron-down text-button shrink-0 size-6 ms-auto"></i></span>
+                                </span>
+                                <ul v-show="visibleFeatures[item.feature]" class="flex flex-col gap-5">
+                                    <li v-for="filter in item.feature_values" :key="filter.value_id"
+                                        class="flex items-center gap-[10px] cursor-pointer">
+
+                                        <input :id="`${filter.value_id}`" :value="`${filter.parent}.${filter.value_id}`"
+                                            v-model="selectedFilters" type="checkbox"
+                                            class="border-button !bg-inherit" />
+                                        <label :for="`${filter.value_id}`"
+                                            class="cursor-pointer flex items-center justify-between w-full text-base">
+                                            <span>{{ filter.value }}</span>
+                                            <span>12</span>
+                                        </label>
+
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </Transition>
+
             <!-- categories -->
             <div class="min-w-[250px] hidden xl:block">
                 <h1 class="font-bounded leading-[140%] font-bold text-[40px] mb-[55px]">
@@ -88,21 +93,31 @@
                         </div> -->
 
                         <div v-for="(item, itemIndex) in filters" :key="itemIndex"
-                            :class="['mb-[30px] text-white', visibleFeatures[item.feature] && 'border-b border-block pb-[10px]']">
-                            <span
-                                class="flex justify-between items-center font-bold text-black cursor-pointer dark:text-gray mb-[25px]"
+                            :class="['mb-[30px]', visibleFeatures[item.feature] && 'border-b border-block pb-2']">
+                            <span class="flex justify-between items-center font-bold cursor-pointer mb-[25px]"
                                 @click="toggleFeature(item.feature)">
                                 {{ item.feature }}
-                                <span :class="[visibleFeatures[item.feature] && 'rotate-180', 'transition-all']"> <i
-                                        class="uil uil-angle-down text-3xl text-button font-light cursor-pointer"></i></span>
+                                <span :class="[visibleFeatures[item.feature] && 'rotate-180', 'transition-all']"><i
+                                        class="iconify i-lucide:chevron-down text-button shrink-0 size-6 ms-auto"></i></span>
+
+
                             </span>
-                            <ul v-show="visibleFeatures[item.feature]"
-                                class="flex flex-col gap-5 text-black dark:text-gray">
+                            <ul v-show="visibleFeatures[item.feature]" class="flex flex-col gap-5">
                                 <li v-for="filter in item.feature_values" :key="filter.value_id"
-                                    class="flex gap-[10px] cursor-pointer">
+                                    class="flex items-center gap-[10px] cursor-pointer">
+                                    <!-- <input :id="`${filter.value_id}`" :value="`${filter.parent}.${filter.value_id}`"
+                                        v-model="selectedFilters" type="checkbox" class="border-button !bg-inherit" />
+                                    <label :for="`${filter.value_id}`" class="cursor-pointer">{{ filter.value }}</label> -->
+
+
                                     <input :id="`${filter.value_id}`" :value="`${filter.parent}.${filter.value_id}`"
-                                        v-model="selectedFilters" type="checkbox" />
-                                    <label :for="`${filter.value_id}`" class="cursor-pointer">{{ filter.value }}</label>
+                                        v-model="selectedFilters" type="checkbox" class="border-button !bg-inherit" />
+                                    <label :for="`${filter.value_id}`"
+                                        class="cursor-pointer flex items-center justify-between w-full">
+                                        <span>{{ filter.value }}</span>
+                                        <span>12</span>
+                                    </label>
+
                                 </li>
                             </ul>
                         </div>
@@ -118,8 +133,8 @@
                     <UButton @click="closeElement()" size="xl" icon="i-lucide-x" variant="ghost"
                         class="p-0 absolute right-0 top-2 sm:right-2 sm:top-2 cursor-pointer text-button font-light hover:bg-inherit hover:text-button-hover" />
 
-                    <div class="flex flex-col gap-[25px]">
-                        <div class="flex flex-col justify-between gap-[25px ]">
+                    <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 }}
                             </h4>
@@ -136,8 +151,7 @@
                 </div>
 
                 <!-- products -->
-                <div v-else ref="loadingElement"
-                    class="xl:grid gap-5 sm:gap-10 grid grid-cols-2 sm:flex sm:flex-wrap justify-center xl:grid-cols-4">
+                <div v-else ref="loadingElement" class="flex flex-wrap justify-center gap-5 sm:gap-10">
                     <Product v-for="product in products" :key="product.id" :product="product" />
                 </div>
 
diff --git a/composables/useMyFetch.ts b/composables/useMyFetch.ts
new file mode 100644
index 0000000..f6a8784
--- /dev/null
+++ b/composables/useMyFetch.ts
@@ -0,0 +1,72 @@
+import { ofetch } from "ofetch";
+
+export interface RequestOptions<T> extends RequestInit {
+  onError?: (error: Error, statusCode: number) => void;
+  onSuccess?: (data: T, statusCode: number) => void;
+  onStart?: () => void;
+}
+
+/**
+ * @function useMyFetch
+ *
+ * @description
+ * Makes a request to a given url, handles cookies and errors.
+ *
+ * @param {string} url - The url to make a request to.
+ * @param {RequestOptions} [options] - The options to use for the request.
+ *
+ * @returns {Promise<T | undefined>} - A promise resolving to the response data
+ *  or undefined if an error occurred.
+ *
+ * @example
+ * const { data } = useMyFetch<{ name: string }>('/api/user')
+ */
+export const useMyFetch = async <T>(
+  url: string,
+  options?: RequestOptions<T>
+): Promise<T | undefined> => {
+  if (options?.onStart) options.onStart();
+  let response = null;
+  try {
+    const event = useRequestEvent();
+
+    if (options == null) options = {};
+
+    options.credentials = "include";
+
+    if (import.meta.server) {
+      const api_uri =
+        event?.node.req.headers["api-uri"] || "http://localhost:4000";
+      url = api_uri + url;
+      options.headers = event?.headers;
+    }
+
+    response = await ofetch.raw(url, options);
+    if (import.meta.server && !event?.handled) {
+      for (const cookie of response.headers.getSetCookie()) {
+        event?.headers.set("Cookie", cookie);
+        event?.node.res.setHeader("set-cookie", cookie);
+      }
+    }
+
+    // handle errors if any
+    if (!response.ok && typeof options.onError == "function") {
+      options.onError(new Error(response.statusText), response.status);
+    }
+
+    // handle success to be able clearly marked that request has finished
+    if (response.ok && typeof options.onSuccess == "function") {
+      options.onSuccess(response._data.data, response.status);
+    }
+
+    return response._data as T;
+  } catch (e) {
+    // handle errors if any
+    if (typeof options?.onError == "function") {
+      options.onError(e as Error, response?.status || 500);
+    } else {
+      console.error(e);
+    }
+    return undefined;
+  }
+};
diff --git a/pages/[id]/[slug].vue b/pages/[id]/[slug].vue
index 809ad0b..c6741c6 100644
--- a/pages/[id]/[slug].vue
+++ b/pages/[id]/[slug].vue
@@ -23,4 +23,4 @@ onMounted(() => {
 useHead(menuStore.headMeta);
 
 const componentsList = await store.getComponents(route.params.id);
-</script>
+</script>
\ No newline at end of file
diff --git a/plugins/i18n.ts b/plugins/i18n.ts
index e026b4d..c0af135 100644
--- a/plugins/i18n.ts
+++ b/plugins/i18n.ts
@@ -28,5 +28,4 @@ export default defineNuxtPlugin(async (nuxtApp) => {
       throw err;
     }
   };
-
 });
\ No newline at end of file
diff --git a/stores/menuStore.ts b/stores/menuStore.ts
index 3ac3652..db187fa 100644
--- a/stores/menuStore.ts
+++ b/stores/menuStore.ts
@@ -151,6 +151,28 @@ export const useMenuStore = defineStore("menuStore", () => {
     }
   };
 
+  function navigateToShop() {
+    navigateToItem(menuItems.value?.items.find(item => item.page_name === 'shop'))
+  }
+
+  // function redirectToPage(link_rewrite: string) {
+  //   const page = menuItems.value?.items.find(
+  //     (item) => item.link_rewrite === link_rewrite
+  //   );
+
+  //   if (!page?.id_page || !page?.link_rewrite) {
+  //     console.warn(`Page not found or missing data for name: ${link_rewrite}`);
+  //     return;
+  //   }
+
+  //   router.push({
+  //     params: {
+  //       id: page?.id_page,
+  //       slug: page?.link_rewrite,
+  //     },
+  //   });
+  // }
+
   const getFirstImage = () => {
     const req = useRequestEvent();
     const url = useRequestURL();
@@ -210,24 +232,6 @@ export const useMenuStore = defineStore("menuStore", () => {
     };
   });
 
-  function redirectToPage(link_rewrite: string) {
-    const page = menuItems.value?.items.find(
-      (item) => item.link_rewrite === link_rewrite
-    );
-
-    if (!page?.id_page || !page?.link_rewrite) {
-      console.warn(`Page not found or missing data for name: ${link_rewrite}`);
-      return;
-    }
-
-    router.push({
-      params: {
-        id: page?.id_page,
-        slug: page?.link_rewrite,
-      },
-    });
-  }
-
   watch($i18n.locale, async () => {
     await loadMenu();
     await loadFooter();
@@ -247,13 +251,14 @@ export const useMenuStore = defineStore("menuStore", () => {
     selectedCountry,
     selectedCurrency,
     selectedPhoneCountry,
+    defaultMenu,
+    headMeta,
+    navigateToShop,
     loadMenu,
     loadFooter,
     getCountryList,
     navigateToItem,
-    redirectToPage,
-    getCurrencies,
-    defaultMenu,
-    headMeta,
+    // redirectToPage,
+    getCurrencies
   };
 });
diff --git a/stores/productStore.ts b/stores/productStore.ts
index 0da43ea..88b94f8 100644
--- a/stores/productStore.ts
+++ b/stores/productStore.ts
@@ -1,5 +1,6 @@
 export const useProductStore = defineStore("productStore", () => {
   const productList = ref();
+  const modules = ref();
 
   async function getList(count: number, categoryId = 1) {
     try {
@@ -23,8 +24,82 @@ export const useProductStore = defineStore("productStore", () => {
     }
   }
 
+  async function getModules() {
+    try {
+      const res = await fetch(
+        `http://127.0.0.1:4000/api/public/module/e_shop`,
+        {
+          headers: {
+            "Content-Type": "application/json",
+          },
+        }
+      );
+
+      if (!res.ok) {
+        throw new Error(`HTTP error: ${res.status}`);
+      }
+
+      const data = await res.json();
+      modules.value = data.children.find(
+        (item: { id: number; name: string }) =>
+          item.name === "currency_rates_bar"
+      );
+    } catch (error) {
+      console.error("getList error:", error);
+    }
+  }
+
+  async function addToCart(product) {
+    try {
+      const res = await fetch(
+        `http://127.0.0.1:4000/api/public/user/cart/item/add/${product.id}/1`,
+        {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        }
+      );
+
+      if (!res.ok) {
+        throw new Error(`HTTP error: ${res.status}`);
+      }
+
+      const data = await res.json();
+      console.log(data);
+    } catch (error) {
+      console.error("getList error:", error);
+    }
+  }
+
+  const cart = ref();
+  async function getCart() {
+    try {
+      const res = await fetch(`http://127.0.0.1:4000/api/public/user/cart`, {
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+
+      if (!res.ok) {
+        throw new Error(`HTTP error: ${res.status}`);
+      }
+
+      const data = await res.json();
+      console.log(data);
+
+      cart.value = data;
+    } catch (error) {
+      console.error("getList error:", error);
+    }
+  }
+
   return {
     productList,
+    modules,
     getList,
+    getModules,
+    addToCart,
+    getCart,
   };
 });