# Product
<snt-app #default="{ breakpoint, router, goTo }">
<snt-section name="รายละเอียดสินค้า">
<snt-container>
<snt-product-detail #default="{ item, loading, selectImage, selectOption, isAvailable, addCart }">
<div
v-if="!loading"
class="product-detail__container">
<snt-carousel
v-if="breakpoint.xs"
:items="item.images.map(src => ({src}))"
class="product-detail__carousel-images"
height="400"
hide-delimiter-background
show-arrows-on-hover
@change="selectImage($event)" />
<div v-else
class="product-detail__images">
<div class="product-detail-images__thumbnails">
<template v-for="(img, i) in item.images">
<snt-image
:key="`product-image__thumbnail-${i}`"
:src="img"
aspect-ratio="1"
contain
@click="goTo(`#productImageHero${i}`, { offset: 60 })" />
</template>
</div>
<div class="product-detail-hero-img">
<div class="product-detail-hero-img__wrapper">
<template v-for="(img, i) in item.images">
<div
:id="`productImageHero${i}`"
:key="`product-image__hero-${i}`">
<snt-image
:src="img"
aspect-ratio="1"
contain />
</div>
</template>
</div>
</div>
</div>
<div
class="product-detail__infomation"
v-sticky-bottom>
<div v-if="item.productBrand"
class="product-detail__brand">{{ item.productBrand.name }}</div>
<div class="product-detail__name">{{ item.name }}</div>
<div class="product-detail__short">{{ item.descriptionShort }}</div>
<div class="product-detail__price">
<div :class="{'product-detail__price--discount': item.displayOnSale}">{{ item.price | toLocaleString }} ฿</div>
<div v-if="item.displayOnSale"
class="product-detail__discount">{{ item.fullPrice | toLocaleString }} ฿</div>
</div>
<template v-if="!item.isCollection && item.subproducts.length">
<div class="product-detail__options">
สินค้าย่อย
</div>
<div class="product-detail-options">
<template v-for="(opt, i) in item.subproducts">
<snt-button
:key="`product-opt-${i}`"
:label="opt.name"
:color="opt.selected ? 'primary' : 'default'"
class="product-detail-options__btn"
outlined
icon-reverse
depressed
@click="selectOption(opt)" />
</template>
</div>
</template>
<snt-button
class="product-detail__addcart"
:disabled="!isAvailable"
block
large
@click="addCart()">
{{ isAvailable ? 'ซื้อสินค้า' : 'สินค้าหมด' }}
</snt-button>
<div class="product-detail-description">
<div class="product-detail-description__title">รายละเอียด</div>
<div class="product-detail-description__content">
<div v-html="item.descriptionLong"></div>
</div>
</div>
</div>
</div>
</snt-product-detail>
</snt-container>
</snt-section >
<snt-section name="รายการสินค้า 1">
<snt-container>
<snt-products
:limit="12"
:itemProps="{
showSku: false,
showPrice: true,
showDescription: true,
showStock: false,
showCart: false
}"
title="Flash Sales"
class="products"
cols="6"
md="3">
<template #item="{ item, itemProps }">
<div class="product-item">
<snt-link
#activator
:to="{
name: item.isCollection ? 'SalePageCollectionDetail' : 'SalePageProductDetail',
params: {
productId: item.id
}
}"
class="product-item-image" >
<snt-image
:src="item.images.length ? item.images[0] : 'https://via.placeholder.com/300/eee/c6c6c6?text=No image'"
:class="{ 'product-item-image--opacity': item.images.length > 1 }"
class="product-image__cover"
aspect-ratio="1"
contain />
<snt-image
v-if="item.images.length > 1"
:src="item.images[1]"
class="product-image__hover product-item-image--opacity"
aspect-ratio="1"
contain>
</snt-image>
<div
v-if="item.displayOnSale && item.fullPrice"
class="product-item-discount">
{{ ((item.price / item.fullPrice) * 100) | toLocaleString }} %
</div>
</snt-link>
<template v-if="itemProps.showDescription">
<div
v-if="item.productBrand"
class="product-item-category">{{ item.productBrand.name }}</div>
<snt-link
:to="{
name: item.isCollection ? 'SalePageCollectionDetail' : 'SalePageProductDetail',
params: {
productId: item.id
}
}"
:label="item.name"
class="product-item-name" />
</template>
<template v-if="itemProps.showSku">
<div
v-if="!(item.subproducts.length === 1 && item.subproducts[0].name === 'main')"
class="product-item-subitems">
<template v-for="(sub, i) in item.subproducts">
<div
v-if="sub.name !== 'main'"
:key="`sub-item-${i}`"
class="product-item-subitems__item">
{{ sub.name }}
</div>
</template>
</div>
</template>
<template v-if="itemProps.showPrice">
<div class="product-item-price">
<div :class="{'product-item-price--discount':item.displayOnSale}">
{{ item.price | toLocaleString }} ฿
</div>
<div
v-if="item.displayOnSale"
class="product-item-price-discount">
{{ item.fullPrice | toLocaleString }} ฿
</div>
</div>
</template>
<template v-if="itemProps.showStock">
<div v-if="item.available > 0">คงเหลือ {{ item.available }}</div>
<div v-else>สินค้าหมด</div>
</template>
</div>
</template>
</snt-products>
</snt-container>
</snt-section >
<snt-section name="รายการสินค้า 2">
<snt-container>
<snt-products
:limit="12"
:itemProps="{
showSku: false,
showPrice: true,
showDescription: true,
showStock: false,
showCart: false
}"
title="People Also Bought"
class="products"
cols="6"
md="3">
<template #item="{ item, itemProps }">
<div class="product-item">
<snt-link
#activator
:to="{
name: item.isCollection ? 'SalePageCollectionDetail' : 'SalePageProductDetail',
params: {
productId: item.id
}
}"
class="product-item-image" >
<snt-image
:src="item.images.length ? item.images[0] : 'https://via.placeholder.com/300/eee/c6c6c6?text=No image'"
:class="{ 'product-item-image--opacity': item.images.length > 1 }"
class="product-image__cover"
aspect-ratio="1"
contain />
<snt-image
v-if="item.images.length > 1"
:src="item.images[1]"
class="product-image__hover product-item-image--opacity"
aspect-ratio="1"
contain>
</snt-image>
<div
v-if="item.displayOnSale && item.fullPrice"
class="product-item-discount">
{{ ((item.price / item.fullPrice) * 100) | toLocaleString }} %
</div>
</snt-link>
<template v-if="itemProps.showDescription">
<div
v-if="item.productBrand"
class="product-item-category">{{ item.productBrand.name }}</div>
<snt-link
:to="{
name: item.isCollection ? 'SalePageCollectionDetail' : 'SalePageProductDetail',
params: {
productId: item.id
}
}"
:label="item.name"
class="product-item-name" />
</template>
<template v-if="itemProps.showSku">
<div
v-if="!(item.subproducts.length === 1 && item.subproducts[0].name === 'main')"
class="product-item-subitems">
<template v-for="(sub, i) in item.subproducts">
<div
v-if="sub.name !== 'main'"
:key="`sub-item-${i}`"
class="product-item-subitems__item">
{{ sub.name }}
</div>
</template>
</div>
</template>
<template v-if="itemProps.showPrice">
<div class="product-item-price">
<div :class="{'product-item-price--discount':item.displayOnSale}">
{{ item.price | toLocaleString }} ฿
</div>
<div
v-if="item.displayOnSale"
class="product-item-price-discount">
{{ item.fullPrice | toLocaleString }} ฿
</div>
</div>
</template>
<template v-if="itemProps.showStock">
<div v-if="item.available > 0">คงเหลือ {{ item.available }}</div>
<div v-else>สินค้าหมด</div>
</template>
</div>
</template>
</snt-products>
</snt-container>
</snt-section >
</snt-app>