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="" v-if="productStore.productList">
-            {{ productStore.productList }}
+    <div class="w-full p-[50px] bg-bg-light dark:bg-bg-dark border border-button rounded-2xl h-full">
+        <div class="flex items-center h-[205px]" v-if="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"
-      >
-        <div
-          v-for="(item, index) in menuStore.footerItems?.items[0].data"
-          :key="index"
-          class="flex flex-col gap-[25px] sm:gap-8 max-w-[280px]"
-        >
+        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"
+          class="flex flex-col gap-[25px] sm:gap-8 max-w-[280px]">
           <h3 class="h4-uppercase-bold-inter">{{ item.title }}</h3>
-          <div
-            class="cursor-pointer hover:text-text-light/80 dark:hover:text-text-dark/70 transition-all text-inter"
-            v-for="(el, indexEl) in item.items"
-            :key="indexEl"
-          >
-            {{ el }}
+          <div 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">
+            {{ el.title }}
           </div>
         </div>
       </div>
 
       <ClientOnly v-if="!colorMode?.forced">
-        <img
-          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()"
-        />
+        <img 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()" />
       </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>