cart pop-up
This commit is contained in:
@ -1,31 +1,58 @@
|
||||
<template>
|
||||
<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="">
|
||||
<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>
|
||||
<p>+</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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 class="">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<UiButtonArrow class="w-full" type="fill" :arrow="true" :full="true">Přejít k pokladně</UiButtonArrow>
|
||||
</div>
|
||||
</div>
|
||||
<UiButtonArrow class="w-full" type="fill" :arrow="true">Přejít k pokladně</UiButtonArrow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onClickOutside } from "@vueuse/core";
|
||||
const count = ref(1)
|
||||
const productStore = useProductStore()
|
||||
const openCart = ref(false);
|
||||
|
||||
const dropdownRef = ref(null);
|
||||
onClickOutside(dropdownRef, () => {
|
||||
openCart.value = false
|
||||
});
|
||||
</script>
|
@ -18,7 +18,7 @@
|
||||
<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 @click="openCart = !openCart" class="uil uil-shopping-cart text-[31px] cursor-pointer"></i>
|
||||
<CartPopup />
|
||||
</div>
|
||||
<div class="flex">
|
||||
<LangSwitcher />
|
||||
@ -30,9 +30,6 @@
|
||||
{{ $t('eshop') }}
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="openCart" class="max-w-[1067px] w-full absolute top-[130px] z-50 right-20">
|
||||
<CartPopup />
|
||||
</div>
|
||||
</div>
|
||||
</UiContainer>
|
||||
</div>
|
||||
@ -219,7 +216,6 @@ import LangSwitcher from "./LangSwitcher.vue";
|
||||
const menuStore = useMenuStore();
|
||||
const productStore = useProductStore();
|
||||
const open = ref(false);
|
||||
const openCart = ref(false);
|
||||
const colorMode = useColorMode();
|
||||
|
||||
// productStore.getCart()
|
||||
|
@ -10,6 +10,7 @@
|
||||
: type === 'border'
|
||||
? 'border-button text-button group-hover:border-button-hover group-hover:text-button-hover border'
|
||||
: 'border-button text-button dark:border-block dark:text-block group-hover:border-button-hover group-hover:text-button-hover border',
|
||||
full && 'w-full'
|
||||
]"
|
||||
>
|
||||
<slot />
|
||||
@ -48,5 +49,8 @@ defineProps({
|
||||
arrow: {
|
||||
type: Boolean,
|
||||
},
|
||||
full: {
|
||||
type: Boolean,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
Reference in New Issue
Block a user