94 lines
6.2 KiB
Vue
94 lines
6.2 KiB
Vue
<template>
|
|
<div ref="dropdownRef">
|
|
<div @click="openCart = !openCart" class="relative cursor-pointer">
|
|
<i class="uil uil-shopping-cart text-[31px]"></i>
|
|
<div v-if="productStore.cart.cart_items && productStore.cart.cart_items.length > 0"
|
|
class="w-[15px] h-[15px] rounded-full bg-accent-green-light dark:bg-accent-green-light text-white flex items-center justify-center text-[9px] absolute top-1 right-0">
|
|
{{ productStore.cart.cart_items.length }}</div>
|
|
</div>
|
|
<div v-if="openCart" @click.self="openCart = !openCart"
|
|
class="absolute left-1/2 transform -translate-x-1/2 w-full px-4 sm:max-w-[768px] sm:px-[17px] md:max-w-[1000px] md:px-6 xl:max-w-[1920px] xl:px-20 right-0 z-50 flex items-center justify-end top-[90px] sm:top-[100px] md:top-[140px]">
|
|
<div class="xl:w-[55%] md:w-[90%] w-full px-4 md:px-0">
|
|
<div v-if="productStore.cart.cart_items && productStore.cart.cart_items.length > 0"
|
|
class="w-full p-[25px] sm:p-[50px] bg-bg-light dark:bg-bg-dark border border-button rounded-xl sm:rounded-[32px] h-full space-25-55">
|
|
<div>
|
|
<!-- product -->
|
|
<div v-for="item in productStore.cart.cart_items"
|
|
class="py-[13px] sm:py-[25px] first:pt-0 border-b border-block">
|
|
<div class="flex items-center h-[100px] sm:h-[205px]">
|
|
<div
|
|
class="min-w-[100px] sm:min-w-[205px] flex items-center justify-center h-[100px] sm:h-[205px]">
|
|
<img :src="`https://www.yourgold.cz/api/public/file/${item.picture_uuid}.webp`"
|
|
alt="" class="max-w-full max-h-full object-contain">
|
|
</div>
|
|
|
|
<div class="flex flex-col justify-between min-h-full w-full gap-[7px] sm:gap-[15px]">
|
|
<div class="w-full flex items-center justify-between">
|
|
<h3
|
|
class="text-[10px] sm:text-base md:text-lg text-xl font-bold leading-[130%] sm:leading-[150%] max-w-[100px] sm:max-w-[200px] md:max-w-[250px]">
|
|
{{ item.name }}
|
|
</h3>
|
|
<i @click="productStore.deleteCartItem(item.cart_item_id)"
|
|
class="uil uil-trash-alt text-lg sm:text-2xl cursor-pointer"></i>
|
|
</div>
|
|
<div class="flex flex-col gap-[10px]">
|
|
<p
|
|
class="text-accent-green-light dark:text-accent-green-dark font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
|
|
{{ item.total_price }}
|
|
</p>
|
|
<div class="flex items-center gap-[2px] sm:gap-4 text-xl">
|
|
<div
|
|
class="w-5 min-h-5 sm:w-11 sm:min-h-11 text-[10px] sm:text-lg flex items-center justify-center">
|
|
<i class="uil uil-minus cursor-pointer text-gray dark:text-button-disabled hover:text-gray-200 transition-all"
|
|
@click="productStore.decrementCartItem(item.cart_item_id)"></i>
|
|
</div>
|
|
<div
|
|
class="w-5 min-h-5 sm:w-10 sm:min-h-11 text-[10px] sm:text-xl border border-button flex items-center justify-center rounded-[4px]">
|
|
{{ item.quantity }}
|
|
</div>
|
|
<div
|
|
class="w-5 min-h-5 sm:w-11 sm:min-h-11 text-[10px] sm:text-lg flex items-center justify-center">
|
|
<i class="uil uil-plus cursor-pointer hover:text-gray-200 transition-all"
|
|
@click="productStore.incrementCartItem(item.product_id)"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<h4 class="font-inter text-[12px] leading-[150%] font-bold uppercase sm:text-[24px]">{{
|
|
$t('total_amount') }}</h4>
|
|
<p
|
|
class="text-accent-green-light dark:text-accent-green-dark font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
|
|
{{ productStore.cart.total_value }}
|
|
</p>
|
|
</div>
|
|
<UiButtonArrow class="w-full" type="fill" :arrow="true" :full="true">{{ $t('to_checkout') }}
|
|
</UiButtonArrow>
|
|
</div>
|
|
<div v-else
|
|
class="w-full p-[50px] bg-bg-light dark:bg-bg-dark border border-button rounded-[32px] h-[400px] flex items-center justify-center">
|
|
<div
|
|
class="border border-block inline-flex items-center justify-center w-[30%] h-[200px] rounded-[8px]">
|
|
<h4 class="font-inter text-base leading-[150%] font-bold uppercase sm:text-[20px] md:text-xl">
|
|
košík je prázdný</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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> |