cart
This commit is contained in:
@ -1,11 +1,16 @@
|
|||||||
<template>
|
<template>
|
||||||
<div ref="dropdownRef">
|
<div ref="dropdownRef">
|
||||||
<i @click="openCart = !openCart" class="uil uil-shopping-cart text-[31px] cursor-pointer"></i>
|
<div @click="openCart = !openCart" class="relative cursor-pointer">
|
||||||
<div
|
<i class="uil uil-shopping-cart text-[31px]"></i>
|
||||||
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 v-if="openCart" 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"
|
<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-[32px] h-full space-25-55">
|
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>
|
<div>
|
||||||
<!-- product -->
|
<!-- product -->
|
||||||
<div v-for="item in productStore.cart.cart_items"
|
<div v-for="item in productStore.cart.cart_items"
|
||||||
|
@ -27,7 +27,7 @@
|
|||||||
<ThemeSwitcher />
|
<ThemeSwitcher />
|
||||||
<button @click="menuStore.navigateToShop" :class="[
|
<button @click="menuStore.navigateToShop" :class="[
|
||||||
'cursor-pointer transition-all text-inter',
|
'cursor-pointer transition-all text-inter',
|
||||||
menuStore.menuItems?.find(item => (item.id_page === route.params.id) && (item.page_name === 'shop'))
|
menuStore.menuItems?.find(item => (route.params.id === '5'))
|
||||||
? 'text-accent-green-light dark:text-accent-green-dark font-bold pb-1 border-b-2'
|
? 'text-accent-green-light dark:text-accent-green-dark font-bold pb-1 border-b-2'
|
||||||
: 'hover:bg-button-hover bg-button text-white font-medium rounded-xl px-6 py-3'
|
: 'hover:bg-button-hover bg-button text-white font-medium rounded-xl px-6 py-3'
|
||||||
]">
|
]">
|
||||||
|
@ -21,7 +21,8 @@
|
|||||||
"pocketbase": "^0.26.0",
|
"pocketbase": "^0.26.0",
|
||||||
"tailwindcss": "^4.1.7",
|
"tailwindcss": "^4.1.7",
|
||||||
"vue": "^3.5.14",
|
"vue": "^3.5.14",
|
||||||
"vue-router": "^4.5.1"
|
"vue-router": "^4.5.1",
|
||||||
|
"vue3-toastify": "^0.2.8"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@nuxtjs/tailwindcss": "^6.14.0"
|
"@nuxtjs/tailwindcss": "^6.14.0"
|
||||||
|
10
plugins/vue3-toastify.client.ts
Normal file
10
plugins/vue3-toastify.client.ts
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
import * as Vue3Toastify from "vue3-toastify";
|
||||||
|
import "vue3-toastify/dist/index.css";
|
||||||
|
|
||||||
|
export default defineNuxtPlugin((nuxtApp) => {
|
||||||
|
nuxtApp.vueApp.use(Vue3Toastify.default, { autoClose: 2000 });
|
||||||
|
|
||||||
|
return {
|
||||||
|
provide: { toast: Vue3Toastify.toast },
|
||||||
|
};
|
||||||
|
});
|
13388
pnpm-lock.yaml
generated
Normal file
13388
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user