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

cart

Browse Source
This commit is contained in:
Arina Yakovenko
2025-06-26 09:22:53 +02:00
parent 10b9610918
commit 8bab93274b
20 changed files with 13551 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
components/CartPopup.vue
View File

@ -1,11 +1,16 @@
<template>
<div ref="dropdownRef">
<i @click="openCart = !openCart" class="uil uil-shopping-cart text-[31px] cursor-pointer"></i>
<div
<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 v-if="openCart" class="xl:w-[55%] md:w-[90%] w-full px-4 md:px-0">
<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-[32px] h-full space-25-55">
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"

16
components/HeaderBlock.vue
View File

@ -7,7 +7,7 @@
<ul class="flex items-center justify-between whitespace-nowrap w-full">
<li v-for="(item, index) in menuStore.menu" @click="menuStore.navigateToItem(item)" :key="item.id"
:class="['hover:text-accent-green-light dark:hover:text-accent-green-dark cursor-pointer text-lg transition-all text-inter',
route.params.id == item.id ? 'text-accent-green-light dark:text-accent-green-dark font-bold underline' : false]">
route.params.id == item.id.toString() ? 'text-accent-green-light dark:text-accent-green-dark font-bold underline' : false]">
0{{ index + 1 }} <br />
{{ item.front_menu_lang[0].name }}
</li>
@ -29,7 +29,7 @@
<button @click="menuStore.navigateToShop" :class="[
'cursor-pointer transition-all text-inter',
route.params.id == '5'
? 'text-accent-green-light dark:text-accent-green-dark font-bold pb-1 border-b-2 bg-accented px-6 py-3 rounded-xl'
? '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') }}
@ -112,10 +112,10 @@
open = false;
}
" :key="index"
:class="['flex items-center justify-between transition-all hover:text-accent-green-light dark:hover:text-accent-green-dark cursor-pointer', route.params.slug === item.link_rewrite && 'text-accent-green-light dark:text-accent-green-dark font-bold underline']">
:class="['flex items-center justify-between transition-all hover:text-accent-green-light dark:hover:text-accent-green-dark cursor-pointer', route.params.slug === item.front_menu_lang[0].link_rewrite && 'text-accent-green-light dark:text-accent-green-dark font-bold underline']">
<div class="leading-[70%] text-inter">
<span class="mr-4">0{{ index + 1 }}</span>
{{ item.name }}
{{ item.front_menu_lang[0].name }}
</div>
<!-- <i class="uil uil-arrow-up-right text-[35px]"></i> -->
<svg class="" width="20" height="20" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
@ -132,7 +132,7 @@
</div>
<div class="flex items-center justify-between">
<p class="leading-[70%] text-inter">
{{ $t("change_currency_country") }}
{{ $t("change_currency_and_country") }}
</p>
<CountryCurrencySelector />
</div>
@ -172,10 +172,10 @@
open = false;
}
" :key="index"
:class="['flex items-center justify-between transition-all hover:text-accent-green-light dark:hover:text-accent-green-dark cursor-pointer', route.params.slug === item.link_rewrite && 'text-accent-green-light dark:text-accent-green-dark font-bold underline']">
:class="['flex items-center justify-between transition-all hover:text-accent-green-light dark:hover:text-accent-green-dark cursor-pointer', route.params.slug === item.front_menu_lang[0].link_rewrite && 'text-accent-green-light dark:text-accent-green-dark font-bold underline']">
<div class="leading-[70%] text-inter">
<span class="mr-4">0{{ index + 1 }}</span>
{{ item.name }}
{{ item.front_menu_lang[0].name }}
</div>
<!-- <i class="uil uil-arrow-up-right text-[35px]"></i> -->
<svg class="" width="20" height="20" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
@ -192,7 +192,7 @@
</div>
<div class="flex items-center justify-between">
<p class="leading-[70%] text-lg text-inter">
{{ $t("change_currency_country") }}
{{ $t("change_currency_and_country") }}
</p>
<CountryCurrencySelector />
</div>

7
components/section/CheckoutMain.vue Normal file
View File

@ -0,0 +1,7 @@
<template>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veritatis dignissimos impedit eligendi quaerat. Doloribus
eius nisi facere suscipit pariatur reprehenderit reiciendis tempora est accusamus adipisci hic voluptate asperiores,
voluptas enim.
</template>
<script lang="ts" setup></script>

6
components/section/ContactMain.vue
View File

@ -8,12 +8,12 @@
<div class="p-[25px] md:p-[50px] bg-block rounded-2xl space-y-[30px] xl:ml-40 xl:w-[65%]">
<div class="flex gap-[30px]">
<input :placeholder="$t('first_name')" type="text"
class="border border-text-dark placeholder:text-button rounded-lg px-3 py-1.5 w-full focus:outline-none focus:ring-0 focus:border-2 text-button" />
class="border border-button placeholder:text-button rounded-lg px-3 py-1.5 w-full focus:outline-none focus:ring-0 focus:border-2 text-button" />
<input :placeholder="$t('email')" type="text"
class="border border-text-dark placeholder:text-button rounded-lg px-3 py-1.5 w-full focus:outline-none focus:ring-0 focus:border-2 text-button" />
class="border border-button placeholder:text-button rounded-lg px-3 py-1.5 w-full focus:outline-none focus:ring-0 focus:border-2 text-button" />
</div>
<textarea :placeholder="$t('form_question')"
class="border h-[276px] border-text-dark placeholder:text-button rounded-lg px-3 py-1.5 w-full focus:outline-none focus:ring-0 focus:border-2 text-button" />
class="border h-[276px] border-button placeholder:text-button rounded-lg px-3 py-1.5 w-full focus:outline-none focus:ring-0 focus:border-2 text-button" />
<div class="w-full flex justify-center sm:justify-start">
<UiButtonArrow type="border">{{

6
components/section/InvestmentZone.vue
View File

@ -43,7 +43,7 @@
<p class="text-accent-green-light text-bold-24">
{{ item.formatted_price }}
</p>
<button
<button @click="productStore.incrementCartItem(item.id)"
class="w-9 h-9 md:w-12 md:h-12 rounded-xl bg-button cursor-pointer hover:bg-button-hover transition-all flex items-center justify-center">
<i class="uil uil-shopping-cart text-[25px] md:text-[24px] text-bg-light"></i>
</button>
@ -52,7 +52,7 @@
</div>
</div>
<UiButtonArrow :arrow="true" class="mx-auto" type="fill">{{ $t('eshop') }}</UiButtonArrow>
<UiButtonArrow @click="menuStore.navigateToShop" :arrow="true" class="mx-auto" type="fill">{{ $t('eshop') }}</UiButtonArrow>
</div>
<!-- calculator-block -->
@ -107,7 +107,7 @@
</div>
<UiButtonArrow :arrow="true" type="fill" class="mx-auto sm:m-0">{{
component.front_section_lang[0].data.button
}}</UiButtonArrow>
}}</UiButtonArrow>
</div>
</div>
</div>

23
components/section/MainBlocks.vue
View File

@ -1,12 +1,7 @@
<template>
<UiContainer
class="flex flex-wrap items-center justify-between gap-[30px] sm:gap-y-[55px] xl:gap-y-[100px]"
>
<div
class="w-full flex flex-col gap-[25px] xl:max-w-[48%] md:mx-10 xl:m-0"
v-for="(item, index) in component.front_section_lang[0].data"
:key="index"
>
<UiContainer class="flex flex-wrap items-center justify-between gap-[30px] sm:gap-y-[55px] xl:gap-y-[100px]">
<div class="w-full flex flex-col gap-[25px] xl:max-w-[48%] md:mx-10 xl:m-0"
v-for="(item, index) in component.front_section_lang[0].data" :key="index">
<!-- xl -->
<div class="hidden xl:flex xl:h-[330px] flex-col justify-between">
<div class="space-y-[55px]">
@ -29,23 +24,19 @@
backgroundImage: `url('/api/public/file/${component.img[index]}_l.webp')`,
backgroundSize: 'cover',
backgroundPosition: 'center',
}"
>
}">
<div
class="hidden sm:block absolute bottom-0 right-0 pt-2 pl-2 bg-bg-light dark:bg-bg-dark rounded-tl-2xl"
>
class="hidden sm:block absolute bottom-0 right-0 pt-2 pl-2 bg-bg-light dark:bg-bg-dark rounded-tl-2xl">
<UiButtonArrow :arrow="true">{{ item.title }}</UiButtonArrow>
</div>
</div>
<UiButtonArrow :arrow="true" class="sm:hidden mx-auto">{{
item.title
}}</UiButtonArrow>
}}</UiButtonArrow>
</div>
<!-- Map block with same layout rules -->
<div
class="w-full xl:max-w-[48%] md:mx-10 xl:m-0 flex flex-col gap-4 items-center"
>
<div class="w-full xl:max-w-[48%] md:mx-10 xl:m-0 flex flex-col gap-4 items-center">
<h1 class="text-sm sm:text-xl uppercase">
Jsme tu pro vás napříč Evropou
</h1>

2
components/section/MainProducts.vue
View File

@ -22,7 +22,7 @@
<p class="text-accent-green-light text-bold-24">
{{ item.formatted_price }}
</p>
<button
<button @click="productStore.incrementCartItem(item.id)"
class="w-9 h-9 md:w-12 md:h-12 rounded-xl bg-button cursor-pointer hover:bg-button-hover transition-all flex items-center justify-center">
<i class="uil uil-shopping-cart text-[25px] md:text-[24px] text-bg-light"></i>
</button>

11
components/section/Product.vue
View File

@ -1,10 +1,11 @@
<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 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.incrementCartItem(props.product?.id)">
<img :src="`https://www.yourgold.cz/api/public/file/${props.product?.cover_picture_uuid}.webp`" alt="Product Image"
class="max-h-[95px] sm:max-h-[180px] md:max-h-[205px] rounded-[5px]"
onerror="this.onerror=null; this.src='/photo.svg';" />
<div class="flex flex-col justify-between h-full w-full gap-[7px] sSm:gap-[15px]">
<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 }}
@ -17,7 +18,7 @@
<p class="text-accent-green-light font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
{{ props.product?.formatted_price }}
</p>
<button
<button @click="productStore.incrementCartItem(props.product?.id)"
class="w-[22px] h-[22px] sm:w-9 sm:h-9 md:w-12 md:h-12 rounded-[5px] text-bg-light 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-lg sm:text-2xl md:text-[31px] cursor-pointer"></i>
</button>