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

translations

Browse Source
This commit is contained in:
Arina Yakovenko
2025-06-25 13:53:36 +02:00
parent 9407253e69
commit 4fc12ff9bf
12 changed files with 218 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
components/CartPopup.vue
View File

@ -1,45 +1,66 @@
<template>
<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 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-[140px]">
<div v-if="openCart" class="xl:w-[55%] md:w-[70%] 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] first:pt-0 bg-bg-light dark:bg-bg-dark border border-button rounded-[32px] h-full space-y-[55px]">
<div>
<!-- product -->
<div v-for="item in productStore.cart.cart_items" class="py-[25px] border-b border-block">
<div class="flex items-center max-h-[205px]">
<div class="min-w-[100px] sm:w-[205px] flex items-center justify-center">
<!-- <img :src="`https://www.yourgold.cz/api/public/file/${item.picture_uuid}.webp`"
alt="pics" class="max-h-[95px] sm:max-h-[180px] md:max-h-[205px] rounded-[5px]" /> -->
</div>
<div class="flex flex-col justify-between 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-[250px]">
{{ item.name }}
</h3>
<i @click="productStore.deleteCartItem(item.cart_item_id)"
class="uil uil-trash-alt 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-4 text-xl">
<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
class="w-11 min-h-11 border border-button flex items-center justify-center rounded-[4px]">
{{ item.quantity }}
</div>
<i class="uil uil-plus cursor-pointer hover:text-gray-200 transition-all"
@click="productStore.incrementCartItem(item.product_id)"></i>
</div>
</div>
<p>+</p>
</div>
</div>
</div>
</div>
<div class="flex items-center justify-between">
<h4 class="h4-uppercase-bold-inter">{{ $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 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 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>
<UiButtonArrow class="w-full" type="fill" :arrow="true" :full="true">Přejít k pokladně</UiButtonArrow>
</div>
</div>
</div>

2
components/CountryCurrencySelector.vue
View File

@ -6,7 +6,7 @@
{{ menuStore.selectedCountry }}/{{ menuStore.selectedCurrency?.iso_code }}
</UButton>
<div class="absolute ring-0 top-12 p-0 m-0 border-none w-48" v-if="isOpen">
<div class="absolute ring-0 top-12 p-0 m-0 border-none w-48 z-50" v-if="isOpen">
<div class="border border-button px-4 py-[10px] rounded-[5px] bg-bg-light dark:bg-bg-dark">
<div class="p-0 flex flex-col gap-4 bg-bg-light dark:bg-bg-dark">
<div class="flex flex-col items-start gap-1">

16
components/HeaderBlock.vue
View File

@ -25,8 +25,12 @@
<CountryCurrencySelector />
</div>
<ThemeSwitcher />
<button @click="menuStore.navigateToShop"
class="hover:bg-button-hover bg-button cursor-pointer rounded-xl px-6 py-3 font-medium text-white transition-all text-inter">
<button @click="menuStore.navigateToShop" :class="[
'cursor-pointer transition-all text-inter',
menuStore.menuItems?.find(item => (item.id_page === route.params.id) && (item.page_name === 'shop'))
? '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'
]">
{{ $t('eshop') }}
</button>
</div>
@ -45,7 +49,7 @@
<div class="flex items-center gap-6">
<div class="flex items-center gap-[30px]">
<i class="uil uil-user text-[31px] cursor-pointer"></i>
<i class="uil uil-shopping-cart text-[31px] cursor-pointer"></i>
<CartPopup />
</div>
<div class="flex">
<LangSwitcher />
@ -91,7 +95,7 @@
<div class="flex items-center gap-6">
<div class="flex items-center gap-[30px]">
<i class="uil uil-user text-[31px] cursor-pointer"></i>
<i class="uil uil-shopping-cart text-[31px] cursor-pointer"></i>
<CartPopup />
</div>
<i variant="subtle" block class="uil uil-apps text-[30px] cursor-pointer" @click="open = !open"></i>
</div>
@ -152,7 +156,7 @@
@click="menuStore.navigateToItem()" />
</ClientOnly>
<div class="flex items-center gap-6">
<i class="uil uil-shopping-cart text-[31px] cursor-pointer"></i>
<CartPopup />
<i variant="subtle" block class="uil uil-apps text-[30px] cursor-pointer" @click="open = !open"></i>
</div>
</UiContainer>
@ -214,7 +218,7 @@ const productStore = useProductStore();
const open = ref(false);
const colorMode = useColorMode();
// productStore.getCart()
productStore.getCart()
const route = useRoute()
const isDark = computed({

2
components/section/InvestmentSave.vue
View File

@ -23,7 +23,7 @@
}" />
</div>
</div>
<div class="flex items-center justify-center">
<div class="flex items-center justify-center w-[60%] mx-auto">
<div class="flex flex-col items-center p-3 sm:p-6 md:p-8 xl:p-11 border border-block rounded-2xl gap-5">
<h4 class="h4-uppercase-bold-inter text-accent-green-light dark:text-accent-green-dark">
20 {{ $t("years") }}

12
components/section/Product.vue
View File

@ -1,10 +1,10 @@
<template>
<div
class="w-[150px] sm:w-[260px] md:w-[330px] px-2 py-3 sm:py-5 sm:px-[15px] bg-block rounded-2xl flex flex-col items-center gap-[15px] sm:gap-[50px]">
<img :src="`https://www.yourgold.cz/api/public/file/${props.product?.cover_picture_uuid}.webp`" alt="pics"
<img onerror="this.src='https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?cs=srgb&dl=pexels-souvenirpixels-414612.jpg&fm=jpg'" :src="`https://www.yourgold.cz/api/public/file/${props.product?.cover_picture_uuid}.webp`" alt="pics"
class="max-h-[95px] sm:max-h-[180px] md:max-h-[205px] rounded-[5px]" />
<div class="flex flex-col justify-between h-full w-full gap-[7px] sSm:gap-[15px]"
@click="productStore.addToCart(props.product)">
@click="productStore.incrementCartItem(props.product?.id)">
<div class="flex flex-col gap-[7px] sm:gap-[15px] w-full">
<h3 class="text-[10px] sm:text-base md:text-lg text-xl font-bold leading-[130%] sm:leading-[150%] text-bg-dark">
{{ props.product?.name }}
@ -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">
<i class="uil uil-shopping-cart text-[10px] sm:text-[25px] md:text-2xl cursor-pointer"></i>
<i class="uil uil-shopping-cart text-lg sm:text-2xl md:text-[31px] cursor-pointer"></i>
</button>
</div>
</div>
@ -27,15 +27,9 @@
</template>
<script setup lang="ts">
// import imgUrl from "~/utils/imgUrl";
const props = defineProps({
product: Object,
});
const productStore = useProductStore()
// const addToCartAndPreventNavigation = (event: any) => {
// event.preventDefault();
// useCartStore().addToCart(props.product);
// };
</script>

39
components/section/ShopMain.vue
View File

@ -137,13 +137,11 @@
<div class="flex flex-col sm:flex-row gap-[25px]">
<div class="flex flex-col justify-between gap-[25px]">
<h4 class="font-inter text-lg sm:text-[24px] leading-[150%] md:leading-[120%] font-bold">
{{ component.section_lang_data.title }}
{{ component.front_section_lang[0].data.title }}
</h4>
<p>{{ component.section_lang_data.description }}</p>
<p>{{ component.front_section_lang[0].data.description }}</p>
</div>
<img class="max-w-[150px] mx-auto"
:src="`/api/files/${component.image_collection}/${component.section_id}/${component.section_img[0]}?thumb=640x0')`"
alt="" />
<img class="max-w-[150px] mx-auto" :src="`/api/public/file/${component.img[0]}_m.webp')`" />
</div>
</div>
@ -171,16 +169,27 @@ import Product from "./Product.vue";
import type { Feature, GenericResponse, GenericResponseChildren, GenericResponseItems, ProductType } from "~/types";
import CategoryTree from "./CategoryTree.vue";
defineProps<{ component: Component }>();
type Component = {
image_collection: string;
section_id: string;
section_img: string;
section_lang_data: {
title: string;
description: string
};
};
const props = defineProps<{
component: {
id: number
name: string
img: string[]
component_name: string
is_no_lang: boolean
page_name: string
front_section_lang: {
data: {
title: string;
description: string
}
id_front_section: number
id_lang: number
}[]
}
}>();
console.log(props.component);
const openCategories = ref(false);
const isInfo = ref<boolean>(true);