changed detail to details in product variants

This commit is contained in:
Mamalizz
2025-04-22 21:48:32 +03:30
parent e12853b107
commit 7823cac123
2 changed files with 13 additions and 16 deletions
@@ -1,11 +1,9 @@
<script lang="ts" setup>
import type { ProductVariantProvideType } from '~/pages/product/[id].vue';
import type { ProductVariantProvideType } from "~/pages/product/[id].vue";
// provide / inject
const { selectedVariant } = inject("productVariant") as ProductVariantProvideType;
</script>
<template>
@@ -21,9 +19,7 @@ const { selectedVariant } = inject("productVariant") as ProductVariantProvideTyp
:value="'item' + detailItem.detail_category"
class="overflow-hidden"
>
<AccordionHeader
class="border-t border-slate-200 py-[1.5rem] flex justify-between items-center"
>
<AccordionHeader class="border-t border-slate-200 py-[1.5rem] flex justify-between items-center">
<span class="typo-sub-h-md text-black">{{ detailItem.detail_category }}</span>
<AccordionTrigger class="group">
<Icon
@@ -36,21 +32,22 @@ const { selectedVariant } = inject("productVariant") as ProductVariantProvideTyp
<AccordionContent
class="data-[state=open]:animate-slide-down pb-[1.5rem] data-[state=closed]:animate-slide-up overflow-hidden"
>
<div
class="w-full grid grid-cols-2 gap-y-[1.5rem] gap-x-[1rem]"
>
<div class="w-full grid grid-cols-2 gap-y-[1.5rem] gap-x-[1rem]">
<div
v-for="item in detailItem.detail"
v-for="item in detailItem.details"
class="flex flex-col gap-y-[1.5rem]"
>
<span
class="typo-sub-h-lg text-black w-full pt-[1.5rem]"
>
<span class="typo-sub-h-lg text-black w-full pt-[1.5rem]">
{{ item.title }}
</span>
<ul class="list-disc w-full ps-5">
<li
v-for="detail in [ item.detail_text1, item.detail_text2, item.detail_text3, item.detail_text4 ]"
v-for="detail in [
item.detail_text1,
item.detail_text2,
item.detail_text3,
item.detail_text4,
]"
class="text-slate-500 typo-p-md"
>
{{ detail }}
@@ -62,4 +59,4 @@ const { selectedVariant } = inject("productVariant") as ProductVariantProvideTyp
</AccordionItem>
</AccordionRoot>
</div>
</template>
</template>