From 98a4125804048af00f139090eee1d84d4eebb3f1 Mon Sep 17 00:00:00 2001 From: Arina Yakovenko Date: Tue, 24 Jun 2025 15:53:07 +0200 Subject: [PATCH] cart pop-up --- components/CartPopup.vue | 61 +++++++++++++++++++++++---------- components/HeaderBlock.vue | 6 +--- components/ui/ButtonArrow.vue | 4 +++ stores/productStore.ts | 37 ++++++++++---------- stores/store.ts | 63 +++++++++++++++++++---------------- 5 files changed, 101 insertions(+), 70 deletions(-) diff --git a/components/CartPopup.vue b/components/CartPopup.vue index 033e008..d74ad91 100644 --- a/components/CartPopup.vue +++ b/components/CartPopup.vue @@ -1,31 +1,58 @@ \ No newline at end of file diff --git a/components/HeaderBlock.vue b/components/HeaderBlock.vue index 4b19924..90e3808 100644 --- a/components/HeaderBlock.vue +++ b/components/HeaderBlock.vue @@ -18,7 +18,7 @@
- +
@@ -30,9 +30,6 @@ {{ $t('eshop') }}
-
- -
@@ -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() diff --git a/components/ui/ButtonArrow.vue b/components/ui/ButtonArrow.vue index e00eb20..73bd94e 100644 --- a/components/ui/ButtonArrow.vue +++ b/components/ui/ButtonArrow.vue @@ -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' ]" > @@ -48,5 +49,8 @@ defineProps({ arrow: { type: Boolean, }, + full: { + type: Boolean, + }, }); diff --git a/stores/productStore.ts b/stores/productStore.ts index 1f4ba11..60fe220 100644 --- a/stores/productStore.ts +++ b/stores/productStore.ts @@ -1,15 +1,20 @@ import { NuxtErrorBoundary } from "#components"; import { useMyFetch } from "#imports"; -import type { GenericResponse, GenericResponseItems, UserCart } from "~/types"; +import type { + GenericResponse, + GenericResponseChildren, + GenericResponseItems, + UserCart, +} from "~/types"; import type { Product } from "~/types/product"; export const useProductStore = defineStore("productStore", () => { - const productList = ref(); + const productList = ref(); const modules = ref(); async function getList(count: number, categoryId = 1) { try { - const { data } = await useMyFetch>( + const { data } = await useMyFetch>( `/api/public/products/category/${categoryId}?p=1&elems=${count}`, { headers: { @@ -33,20 +38,18 @@ export const useProductStore = defineStore("productStore", () => { async function getModules() { try { - const res = await fetch( - `http://127.0.0.1:4000/api/public/module/e_shop`, + const { data } = await useMyFetch>( + `/api/public/module/e_shop`, { headers: { "Content-Type": "application/json", }, + onErrorOccured: (_, status) => { + throw new Error(`HTTP error: ${status}`); + }, } ); - if (!res.ok) { - throw new Error(`HTTP error: ${res.status}`); - } - - const data = await res.json(); modules.value = data.children.find( (item: { id: number; name: string }) => item.name === "currency_rates_bar" @@ -58,22 +61,18 @@ export const useProductStore = defineStore("productStore", () => { async function addToCart(product: Product) { try { - const res = await fetch( - `http://127.0.0.1:4000/api/public/user/cart/item/add/${product.id}/1`, + const { data } = await useMyFetch>( + `/api/public/user/cart/item/add/${product.id}/1`, { method: "PUT", headers: { "Content-Type": "application/json", }, + onErrorOccured: (_, status) => { + throw new Error(`HTTP error: ${status}`); + }, } ); - - if (!res.ok) { - throw new Error(`HTTP error: ${res.status}`); - } - - const data = await res.json(); - console.log(data); } catch (error) { console.error("getList error:", error); } diff --git a/stores/store.ts b/stores/store.ts index 0e30467..760e27c 100644 --- a/stores/store.ts +++ b/stores/store.ts @@ -1,6 +1,11 @@ import { useMyFetch } from "#imports"; import { usePB } from "~/composables/usePB"; -import type { componentsListType, GenericResponse, PBPageItem, PlanPrediction } from "~/types"; +import type { + componentsListType, + GenericResponse, + PBPageItem, + PlanPrediction, +} from "~/types"; // import { useI18n } from "vue-i18n"; export const useStore = defineStore("store", () => { @@ -11,20 +16,21 @@ export const useStore = defineStore("store", () => { // calculator const monthlySavings = ref(137); const storagePeriod = ref(10); - const totalInvestment:Ref = ref(0) - const minValue = ref() + const totalInvestment: Ref = ref(0); + const minValue = ref(); // login - const email = ref() - const password = ref() + const email = ref(); + const password = ref(); const components = ref({} as PBPageItem[]); const getSections = async (id: string) => { pb.cancelRequest("menu_view"); components.value = ( await pb.collection("page_view").getList(1, 50, { - filter: `id="${id}"&&(section_lang_id_lang="${$i18n.locale.value - }"||section_is_no_lang=${true})`, + filter: `id="${id}"&&(section_lang_id_lang="${ + $i18n.locale.value + }"||section_is_no_lang=${true})`, sort: "page_section_id_position", }) ).items as PBPageItem[]; @@ -72,18 +78,19 @@ export const useStore = defineStore("store", () => { async function getCalculator() { try { - const {data} = await useMyFetch>( + const { data } = await useMyFetch>( `/api/public/plan-prediction/easy/calculate?monthly_deposit=${monthlySavings.value}&years=${storagePeriod.value}`, { headers: { "Content-Type": "application/json", }, - onErrorOccured: (_, status) => { throw new Error(`HTTP error: ${status}`) }, + onErrorOccured: (_, status) => { + throw new Error(`HTTP error: ${status}`); + }, } ); - totalInvestment.value = data.total_investement_value - + totalInvestment.value = data.total_investement_value; } catch (error) { console.error("getList error:", error); } @@ -91,13 +98,15 @@ export const useStore = defineStore("store", () => { async function getMinValue() { try { - const {data} = await useMyFetch>( - '/api/public/plan-prediction/free/minimum', + const { data } = await useMyFetch>( + "/api/public/plan-prediction/free/minimum", { headers: { "Content-Type": "application/json", }, - onErrorOccured: (_, status) => { throw new Error(`HTTP error: ${status}`) }, + onErrorOccured: (_, status) => { + throw new Error(`HTTP error: ${status}`); + }, } ); @@ -106,8 +115,7 @@ export const useStore = defineStore("store", () => { // } // const data = await res.json(); - minValue.value = data - + minValue.value = data; } catch (error) { console.error("getList error:", error); } @@ -115,34 +123,31 @@ export const useStore = defineStore("store", () => { async function logIn() { try { - const res = await fetch( - 'http://127.0.0.1:4000/api/public/user/session/start', + const { data } = await useMyFetch>( + `/api/public/user/session/start`, { - method: 'POST', + method: "POST", body: JSON.stringify({ mail: email.value, - password: password.value + password: password.value, }), headers: { "Content-Type": "application/json", }, + onErrorOccured: (_, status) => { + throw new Error(`HTTP error: ${status}`); + }, } ); - if (!res.ok) { - throw new Error(`HTTP error: ${res.status}`); - } - - const data = await res.json(); - minValue.value = data.data - + minValue.value = data; } catch (error) { console.error("getList error:", error); } } - getCalculator() - getMinValue() + getCalculator(); + getMinValue(); return { currentPageID,