75 lines
2.4 KiB
Vue
75 lines
2.4 KiB
Vue
<template>
|
|
<div>
|
|
<nuxt-link
|
|
:to="{
|
|
name: `id-slug___${$i18n.locale}`,
|
|
params: {
|
|
id: menuStore.getProductMenu()?.id,
|
|
slug: menuStore.getProductMenu()?.front_menu_lang.at(0)?.link_rewrite,
|
|
},
|
|
query: {
|
|
prod_id: props.product?.id,
|
|
name: props.product?.link_rewrite,
|
|
},
|
|
}"
|
|
>
|
|
<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="`/api/public/file/${props.product?.cover_picture_uuid}.webp`"
|
|
alt="Product Image"
|
|
class="h-[95px] sm:h-[180px] md: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 }}
|
|
</h3>
|
|
<p class="text-[9px] sm:text-[12px] text-sm text-bg-dark">
|
|
{{ props.product?.tax_name }}
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<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
|
|
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"
|
|
@click.self="productStore.incrementCartItem(props.product?.id)"
|
|
>
|
|
<i
|
|
class="uil uil-shopping-cart text-lg sm:text-2xl md:text-[31px] cursor-pointer"
|
|
/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nuxt-link>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps({
|
|
product: Object,
|
|
})
|
|
|
|
const productStore = useProductStore()
|
|
const menuStore = useMenuStore()
|
|
|
|
const isError = ref(false);
|
|
|
|
function handleImageError(event: Event) {
|
|
isError.value = true;
|
|
(event.target as HTMLImageElement).src = '/photo.svg';
|
|
}
|
|
</script>
|