pop-up

components/CartPopup.vue

@@ -1,7 +1,26 @@
 <template>
-    <div class="p-[50px] bg-bg-light dark:bg-bg-dark border border-button rounded-2xl">
+    <div class="w-full p-[50px] bg-bg-light dark:bg-bg-dark border border-button rounded-2xl h-full">
-        <div class="" v-if="productStore.productList">
+        <div class="flex items-center h-[205px]" v-if="productStore.productList">
-            {{ productStore.productList }}
+            <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] max-w-[250px]"
+                @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">
+                    {{ productStore.productList[0]?.name }}
+                </h3>
+                <div class="">
+                    <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="">
+
+                    </div>
+                </div>
+            </div>
         </div>
         <UiButtonArrow class="w-full" type="fill" :arrow="true">Přejít k pokladně</UiButtonArrow>
     </div>

components/HeaderBlock.vue

@@ -30,7 +30,7 @@
               {{ $t('eshop') }}
             </button>
           </div>
-          <div v-if="openCart" class="max-w-[1067px] absolute top-[130px] z-50 right-20">
+          <div v-if="openCart" class="max-w-[1067px] w-full absolute top-[130px] z-50 right-20">
             <CartPopup />
           </div>
         </div>
@@ -222,7 +222,7 @@ const open = ref(false);
 const openCart = ref(false);
 const colorMode = useColorMode();
 
-productStore.getCart()
+// productStore.getCart()
 
 const route = useRoute()
 const isDark = computed({

components/section/FooterBlock.vue

@@ -2,40 +2,45 @@
   <div class="border-t border-border pt-[75px]">
     <UiContainer class="flex flex-col gap-24">
       <div
-        class="grid grid-cols-1 md:grid-cols-2 gap-[75px] xl:gap-0 xl:grid-cols-none xl:grid-flow-col auto-cols-max justify-between"
+        class="grid grid-cols-1 md:grid-cols-2 gap-[75px] xl:gap-0 xl:grid-cols-none xl:grid-flow-col auto-cols-max justify-between">
-      >
+        <div v-for="(item, index) in component.section_lang_data" :key="index"
-        <div
+          class="flex flex-col gap-[25px] sm:gap-8 max-w-[280px]">
-          v-for="(item, index) in menuStore.footerItems?.items[0].data"
-          :key="index"
-          class="flex flex-col gap-[25px] sm:gap-8 max-w-[280px]"
-        >
           <h3 class="h4-uppercase-bold-inter">{{ item.title }}</h3>
-          <div
+          <div class="cursor-pointer hover:text-text-light/80 dark:hover:text-text-dark/70 transition-all text-inter"
-            class="cursor-pointer hover:text-text-light/80 dark:hover:text-text-dark/70 transition-all text-inter"
+            v-for="(el, indexEl) in item.children" :key="indexEl">
-            v-for="(el, indexEl) in item.items"
+            {{ el.title }}
-            :key="indexEl"
-          >
-            {{ el }}
           </div>
         </div>
       </div>
 
       <ClientOnly v-if="!colorMode?.forced">
-        <img
+        <img class="cursor-pointer w-[70%] sm:w-[50%] xl:w-[30%]"
-          class="cursor-pointer w-[70%] sm:w-[50%] xl:w-[30%]"
+          :src="isDark ? '/logo-footer-dark.svg' : '/logo-footer.svg'" alt="logo" @click="menuStore.navigateToItem()" />
-          :src="isDark ? '/logo-footer-dark.svg' : '/logo-footer.svg'"
-          alt="logo"
-          @click="menuStore.navigateToItem()"
-        />
       </ClientOnly>
     </UiContainer>
   </div>
 </template>
 
 <script lang="ts" setup>
-const menuStore = useMenuStore();
+const props = defineProps<{ component: Component }>();
+type Component = {
+  image_collection: string;
+  section_id: string;
+  section_img: string;
+  section_lang_data: {
+    title: string;
+    children: {
+      title: string;
+      value: 'email' | 'address' | 'certificate' | 'document' | 'form' | 'info';
+      link?: string;
+    }[];
+  }[];
+};
+
+
 const store = useStore();
 const open = ref(false);
+const menuStore = useMenuStore();
 const colorMode = useColorMode();
 
 const isDark = computed({

components/section/Product.vue

@@ -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">
-          <UButton icon="i-lucide-shopping-cart" variant="ghost" class="sm:text-[25px] md:text-2xl text-bg-light" />
+          <i class="uil uil-shopping-cart text-[10px] sm:text-[25px] md:text-2xl cursor-pointer"></i>
         </button>
       </div>
     </div>

layouts/default.vue

@@ -6,7 +6,7 @@
       class="flex-1 py-[25px] sm:py-[55px] md:py-[75px] space-y-[55px] sm:space-y-[75px] md:space-y-[100px] text-inter">
       <slot />
     </div>
-    <FooterBlock />
+    <!-- <FooterBlock /> -->
   </div>
 </template>
 

stores/productStore.ts

@@ -73,26 +73,26 @@ export const useProductStore = defineStore("productStore", () => {
   }
 
   const cart = ref();
-  async function getCart() {
+  // async function getCart() {
-    try {
+  //   try {
-      const res = await fetch(`http://127.0.0.1:4000/api/public/user/cart`, {
+  //     const res = await fetch(`http://127.0.0.1:4000/api/public/user/cart`, {
-        headers: {
+  //       headers: {
-          "Content-Type": "application/json",
+  //         "Content-Type": "application/json",
-        },
+  //       },
-      });
+  //     });
 
-      if (!res.ok) {
+  //     if (!res.ok) {
-        throw new Error(`HTTP error: ${res.status}`);
+  //       throw new Error(`HTTP error: ${res.status}`);
-      }
+  //     }
 
-      const data = await res.json();
+  //     const data = await res.json();
-      console.log(data);
+  //     console.log(data);
 
-      cart.value = data;
+  //     cart.value = data;
-    } catch (error) {
+  //   } catch (error) {
-      console.error("getList error:", error);
+  //     console.error("getList error:", error);
-    }
+  //   }
-  }
+  // }
 
   return {
     productList,
@@ -100,6 +100,6 @@ export const useProductStore = defineStore("productStore", () => {
     getList,
     getModules,
     addToCart,
-    getCart,
+    // getCart,
   };
 });