yakovenko_arina/your-gold
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

pop-up

Browse Source
This commit is contained in:
Arina Yakovenko
2025-06-24 12:09:22 +02:00
parent 26e7467f7f
commit b867030c8d
6 changed files with 69 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
components/CartPopup.vue
View File

@ -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>

4
components/HeaderBlock.vue
View File

@ -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({

45
components/FooterBlock.vue → components/section/FooterBlock.vue
View File

@ -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({

2
components/section/Product.vue
View File

@ -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>

2
layouts/default.vue
View File

@ -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>

36
stores/productStore.ts
View File

@ -73,26 +73,26 @@ export const useProductStore = defineStore("productStore", () => {
}
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",
},
});
// 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}`);
}
// if (!res.ok) {
// throw new Error(`HTTP error: ${res.status}`);
// }
const data = await res.json();
console.log(data);
// const data = await res.json();
// console.log(data);
cart.value = data;
} catch (error) {
console.error("getList error:", error);
}
}
// cart.value = data;
// } catch (error) {
// console.error("getList error:", error);
// }
// }
return {
productList,
@ -100,6 +100,6 @@ export const useProductStore = defineStore("productStore", () => {
getList,
getModules,
addToCart,
getCart,
// getCart,
};
});