# Product Detail
ใช้แสดงรายละเอียดสินค้า และปุ่ม add to cart
# Usage
<snt-product-detail></snt-product-detail>
# API
# Example
# รายละเอียดสินค้า
<snt-product-detail #default="{ item, selectOption, addCart }">
<div>
<h1>{{ item.name }}</h1>
<span>{{ item.price | toLocaleString }}</span>
<template v-if="!item.isCollection && item.subproducts.length">
<div>
สินค้าย่อย
</div>
<snt-select
:value="item.subproducts.find(item => item.selected)"
:items="item.subproducts"
item-text="name"
return-object
hide-details
outlined
dense
@change="selectOption($event)">
</snt-select>
</template>
<snt-button @click="addCart()">
สั่งซื้อสินค้า
</snt-button>
</div>
</snt-product-detail>
# การทำรายละเอียดสินค้าเพื่อกดสั่งซื้อ
<snt-products #default="{ items, addMainToCart, itemProps}">
<div>
<template v-for="product in items">
<snt-product-detail
#default="{ item, selectOption, addCart }"
:key="product.id"
:item-id="product.id">
<div>
<h1>{{ item.name }}</h1>
<span>{{ item.price | toLocaleString }}</span>
<template v-if="!item.isCollection && item.subproducts.length">
<div>
สินค้าย่อย
</div>
<snt-select
:value="item.subproducts.find(item => item.selected)"
:items="item.subproducts"
item-text="name"
return-object
hide-details
outlined
dense
@change="selectOption($event)">
</snt-select>
</template>
<snt-button @click="addCart()">
สั่งซื้อสินค้า
</snt-button>
</div>
</snt-product-detail>
</template>
</div>
</snt-products>