# Landing
<snt-app class="pom"
#default="{ _, theme, breakpoint, router,
scrollY, isAuth, purchasesQuantity,
productCategories, productBrands }">
<snt-section name="ภาพสไลด์">
<snt-container class="container--no-gutter">
<snt-carousel :items="[
{
src: 'https://images.unsplash.com/photo-1544957992-20514f595d6f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80',
label: 'ช้อปเลย'
},
{
src: 'https://images.unsplash.com/photo-1509695507497-903c140c43b0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1052&q=80',
label: 'ดูรายละเอียด',
href: 'https://google.com'
},
{
src: 'https://images.unsplash.com/photo-1523381294911-8d3cead13475?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80',
label: 'ช้อปเลย'
},
{
src: 'https://waave.s3.ap-southeast-1.amazonaws.com/uploads/asset_image/newproduct.jpg',
label: 'ช้อปเลย'
}
]"
:hide-delimiters="false"
height="100%"
class="x-carousel"
cycle >
<template #label="{ item }">
<snt-button :label="item.label"
:class="`x-carousel-item x-carousel-item-${item.sequence}`"
depressed />
</template>
</snt-carousel>
</snt-container>
</snt-section>
<snt-section name="หมวดหมู่ 1">
<snt-container class="container--no-gutter">
<div class="x-category">
<div class="x-category__item">
<snt-text-editor :html="`<a href='https://google.com' target='_blank'>
<span>รับส่วนลด 15% เมื่อซื้อครบ 500 บาท</span>
<span>ใช้โค้ดส่วนลด: 15PER</span>
<span>ส่งฟรีทุกออเดอร์!</span>
<span>รับโค้ดส่วนลดเพิ่มเติมใน Live สด</span>
<span>ทุกวันพฤหัส 2 ทุ่ม</span>
</a>`"
class="x-category-link" />
</div>
<div class="x-category__item">
<snt-image
href='products'
src="https://images.unsplash.com/photo-1543163521-1bf539c55dd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80"
aspect-ratio="1" />
</div>
</div>
</snt-container>
</snt-section>
<snt-section name="หมวดหมู่ 2">
<snt-container class="container--no-gutter">
<div class="x-category">
<div class="x-category__item">
<snt-image
href='products'
src="https://images.unsplash.com/photo-1491897554428-130a60dd4757?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2000&q=80"
aspect-ratio="1" />
</div>
<div class="x-category__item">
<snt-image
href='products'
src="https://images.unsplash.com/photo-1525430182374-bf7e61d4f220?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1966&q=80"
aspect-ratio="1" />
</div>
</div>
</snt-container>
</snt-section>
<snt-section name="หมวดหมู่ 3">
<snt-container class="container--no-gutter">
<div class="x-category">
<div class="x-category__item">
<snt-image
href='products'
src="https://images.unsplash.com/photo-1589810635657-232948472d98?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80"
aspect-ratio="1"/>
</div>
<div class="x-category__item">
<snt-image
href='products'
src="https://images.unsplash.com/photo-1566454544259-f4b94c3d758c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=80"
aspect-ratio="1"/>
</div>
</div>
</snt-container>
</snt-section>
<snt-section name="สินค้าขายดี">
<snt-container>
<snt-products
:limit="12"
:itemProps="{
showSku: true,
showPrice: true,
showDescription: true,
showStock: true,
showCart: false
}"
title="สินค้าขายดี"
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="Hashtag">
<snt-container>
<snt-feeds
:items="[
{
src: 'https://images.unsplash.com/photo-1528341866330-07e6d1752ec2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=801&q=80',
href: 'https://www.google.com',
target: '_blank',
html: `<div style='text-align: center;'><a>description 1</a>
<div><strong>@someone</strong></div>
</div>`
},
{
src: 'https://images.unsplash.com/photo-1550088282-c9659bbe49b9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=748&q=80',
href: 'https://www.google.com',
target: '_blank',
html: `<div style='text-align: center;'><a>description 2</a><strong>@someone</strong></div>`
},
{
src: 'https://images.unsplash.com/photo-1627902252614-6cdc3e8d3f1d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=786&q=80',
href: 'https://www.google.com',
target: '_blank',
html: `<div style='text-align: center;'><a>description 3</a><strong>@someone</strong></div>`
},
{
src: 'https://images.unsplash.com/photo-1621341103818-01dada8c6ef8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=80',
href: 'https://www.google.com',
target: '_blank',
html: `<div style='text-align: center;'><a>Our Watch</a><strong>@someone</strong></div>`
}
]"
class="feeds"
title="#yourbrand"
type="image"
aspect-ratio="3/4"
cols="12"
sm="6"
md="3"
vertical />
</snt-container>
</snt-section>
</snt-app>