# Header
<snt-app
#default="{
_, theme, breakpoint, router, route, scrollUp, scrollY, customerName,
isAuth, purchasesQuantity, productCategories, productBrands
}"
class="lush">
<snt-section name="โฆษณา">
<template v-if="!_.includes(['SalePageCheckout'], route.name)">
<snt-text-editor
:html="`
<div style='color:#fff;font-size:14px;'>
ส่งฟรีเมื่อสั่งซื้อตั้งแต่ 300 บาทขึ้นไป
</div>`"
class="lush-announcement"/>
</template>
</snt-section>
<snt-section name="หัวข้อ">
<template v-if="!_.includes(['SalePageCheckout'], route.name)">
<snt-navbar
#default="{
logo,
menuHome,
menuProducts,
extendLinks,
logout,
props: {
align
}
}"
:menu-home="{ label: 'Home' }"
:menu-products="{ label: 'Shop' }"
:elevation="0"
:align="`left`"
:class="{
'lush-navbar--notop': scrollY > 100,
'lush-navbar--fixed':
(scrollUp > 0 && scrollY > 100 )
|| (_.includes([
'SalePageProducts',
'SalePageCollection',
'SalePageCategoryProducts',
'SalePageCategoryCollection'
], route.name) && scrollY > 200)
}"
class="lush-navbar"
src="https://waave.s3.ap-southeast-1.amazonaws.com/uploads/asset_image/potatona.jpg">
<snt-container
class="lush-navbar__container"
fluid>
<snt-row>
<snt-col
:cols="(breakpoint.xs ? 6 : (breakpoint.sm ? 4 : (align === 'center' ? 4 : 2)))"
:order="(align === 'center' ? 2 : (align === 'right' ? 3 : 1))"
class="lush-navbar__col lush-navbar-col__logo">
<snt-link
#activator
:to="{ name: 'SalePage' }"
class="lush-navbar-logo">
<img
:src="logo"
height="100%"
width="100%" />
</snt-link>
</snt-col>
<snt-col
v-if="!breakpoint.xs"
:cols="breakpoint.sm ? 4 : (align === 'center' ? 4 : null)"
:order="(align === 'center' ? 1 : 2)"
class="lush-navbar__col lush-navbar-link">
<div
v-if="_.includes([
'SalePageCategoryProducts',
'SalePageCategoryCollection'
], route.name) && scrollY > 200 && !breakpoint.xs"
class="lush-navbar__title">
{{ route.params.categoryName }}
</div>
<div class="spacer" />
<snt-dialog
:class="{ 'lush-search--full': _.includes([
'SalePage',
], route.name) }"
content-class="lush-search__dialog"
transition="scroll-y-transition">
<template #activator="{ on }">
<snt-text-field
:dense="!_.includes([
'SalePage',
], route.name)"
value="ค้นหาสินค้าที่ต้องการ"
class="lush-search__input"
append-icon="mdi-magnify"
filled
readonly
v-on="on"/>
</template>
<template #default="{ attrs, close }">
<div class="lush-dialog__container">
<div class="lush-navbar-dialog__title">
<snt-link
#activator
:to="{ name: 'SalePage' }"
class="lush-navbar-logo">
<img
:src="logo"
height="100%"
width="100%" />
</snt-link>
<div class="spacer"></div>
<snt-icon
class="lush-navbar-cart__close"
color="#2f2f2f"
size="32"
icon="mdi-close"
@click="close()" />
<snt-collapse v-if="isAuth">
<template v-slot="{ collapse, setCollapse }">
<div class="navbar-user">
<snt-icon
class="lush-navbar-login"
color="#2f2f2f"
size="32"
icon="mdi-emoticon-outline"
@click="setCollapse(!collapse)" />
<div
v-show="!collapse"
class="lush-navbar-login__menu">
<div class="lush-navbar-login__name"> Hi! {{ customerName }} </div>
<div class="lush-navbar-login__divider"></div>
<snt-button
:to="{ name: 'SalePageOrders' }"
label="Orders"
text
@click="setCollapse(!collapse)" />
<div class="lush-navbar-login__divider"></div>
<snt-button
label="Logout"
text
@click="logout();setCollapse(!collapse);" />
</div>
</div>
</template>
</snt-collapse>
<snt-dialog
v-else
:max-width="400"
content-class="lush-navbar-login__dialog"
transition="fade-transition"
scrollable>
<template #activator="{ on }">
<snt-icon
class="lush-navbar-login"
color="#2f2f2f"
size="32"
icon="mdi-emoticon-happy-outline"
v-on="on" />
</template>
<template #default="{ close }">
<div class="lush-navbar-login__content">
<snt-login @click:close="close()">
<template #header>
<div>
<snt-icon
class="lush-navbar-login__close"
size="42"
icon="mdi-close"
@click="close()" />
<div class="lush-navbar-login__title">
Login
</div>
</div>
</template>
</snt-login>
</div>
</template>
</snt-dialog>
<snt-dialog
:max-width="375"
content-class="lush-navbar-cart-dialog"
transition="slide-x-reverse-transition"
scrollable>
<template #activator="{ on, attrs }">
<div
class="lush-navbar-cart"
v-on="on">
<snt-icon
color="#2f2f2f"
size="32"
icon="mdi-shopping-outline" />
<div v-if="purchasesQuantity"
class="lush-navbar-cart__count">
{{ purchasesQuantity }}
</div>
</div>
</template>
<template #default="{ attrs, on: { close } }">
<div class="lush-navbar-cart__content" >
<div class="lush-navbar-cart__title">
<div>Basket ({{purchasesQuantity}})</div>
<snt-icon
class="lush-navbar-cart__close"
size="32"
color='#2f2f2f'
icon="mdi-close"
@click="close()" />
</div>
<snt-cart
#default="{ items, totalPrice, selectQuantity, selectedPurchase, remove, submit }"
class="lush-navbar-cart">
<template v-if="selectedPurchase.length">
<div class="lush-navbar-cart__container">
<template v-for="item in items">
<div
:key="`pop-cart-item-${item.id}`"
class="lush-navbar-cart-item">
<snt-button
class="lush-navbar-cart-remove__button"
icon="mdi-close"
small
@click="remove(item)"/>
<snt-image
:src="item.pictureUrl"
height="112px"
width="85px" />
<div class="lush-navbar-cart-item__content">
<div class="lush-navbar-cart-item__title">
<div>{{ item.name }}</div>
<div v-if="item.discount">
<s class="lush-navbar-cart-item__discount">{{ item.price | toLocaleString }} ฿</s>
{{ (item.price - item.discount) | toLocaleString }} ฿
</div>
<div v-else>{{ item.price | toLocaleString }} ฿</div>
</div>
<div class="lush-navbar-cart-item__options">
<div>
<snt-number-field
:value="item.quantity"
:min="1"
:max="item.available"
controls
center
@input="selectQuantity(item, $event)" />
</div>
</div>
</div>
</div>
</template>
</div>
<div class="lush-navbar-cart__actions">
<div class="lush-navbar-cart__total">
<div>
Total
</div>
<div>
{{ totalPrice | toLocaleString }} ฿
</div>
</div>
<snt-button
:to="{ name: 'SalePageCheckout' }"
:disabled="!selectedPurchase.length"
color="primary"
class="lush-cart-action__submit"
tile
depressed
x-large
block>
Checkout
</snt-button>
</div>
</template>
<div v-else class="snt-cart-no-data">
<div class="snt-cart-no-data">
<snt-icon icon="mdi-cart-variant" size="64" />
<div class="snt-cart-no-data__title">
ยังไม่มีสินค้าในตะกร้า
</div>
<snt-button
:to="{ name: 'SalePageProducts' }"
class="snt-cart__submit"
color="primary"
depressed
large>
ไปซื้อสินค้า
</snt-button>
</div>
</div>
</snt-cart>
</div>
</template>
</snt-dialog>
</div>
<div class="lush-search--full">
<snt-text-field
class="lush-search__input lush-search__input--large"
placeholder="Search"
append-icon="mdi-magnify"
autofocus
filled
@keypress.enter="router.push({
name: 'SalePageProducts',
query: {
search: $event.target.value,
}
})" />
</div>
<div class="lush-navbar-category">
<div class="lush-navbar-category__title">You might like:</div>
<div class="lush-navbar-category__items">
<div
class="lush-hero-category-label"
@click="router.push({
name: 'SalePageProducts',
});close()">
{{ menuProducts.label }}
</div>
<template v-for="item in productCategories">
<div v-if="item.name"
:key="`cat-link-${item.id}`"
class="lush-hero-category-label"
@click="router.push({
name: 'SalePageCategoryProducts',
params: {
categoryId: item.id,
categoryName: item.name
}
});close()">
{{ item.name }}
</div>
</template>
</div>
</div>
</div>
</template>
</snt-dialog>
</snt-col>
<snt-col
:cols="breakpoint.xs ? 6 : (breakpoint.sm ? 4 : (align === 'center' ? 4 : 1))"
:order="(align === 'right' ? 1 : 3)"
class="lush-navbar__col lush-navbar-user">
<snt-dialog
v-if="breakpoint.xs"
:class="{ 'lush-search--full': _.includes([
'SalePage',
], route.name) }"
content-class="lush-search__dialog"
transition="scroll-y-transition">
<template #activator="{ on }">
<snt-icon
class="lush-search__icon"
color="#2f2f2f"
size="32"
icon="mdi-magnify"
v-on="on" />
</template>
<template #default="{ attrs, close }">
<div class="lush-dialog__container">
<div class="lush-navbar-dialog__title">
<snt-link
#activator
:to="{ name: 'SalePage' }"
class="lush-navbar-logo">
<img
:src="logo"
height="100%"
width="100%" />
</snt-link>
<div class="spacer"></div>
<snt-icon
class="lush-navbar-cart__close"
color="#2f2f2f"
size="32"
icon="mdi-close"
@click="close()" />
<snt-collapse v-if="isAuth">
<template v-slot="{ collapse, setCollapse }">
<div class="navbar-user">
<snt-icon
class="lush-navbar-login"
color="#2f2f2f"
size="32"
icon="mdi-emoticon-outline"
@click="setCollapse(!collapse)" />
<div
v-show="!collapse"
class="lush-navbar-login__menu">
<div class="lush-navbar-login__name"> Hi! {{ customerName }} </div>
<div class="lush-navbar-login__divider"></div>
<snt-button
:to="{ name: 'SalePageOrders' }"
label="Orders"
text
@click="setCollapse(!collapse)" />
<div class="lush-navbar-login__divider"></div>
<snt-button
label="Logout"
text
@click="logout();setCollapse(!collapse);" />
</div>
</div>
</template>
</snt-collapse>
<snt-dialog
v-else
:max-width="400"
content-class="lush-navbar-login__dialog"
transition="fade-transition"
scrollable>
<template #activator="{ on }">
<snt-icon
class="lush-navbar-login"
color="#2f2f2f"
size="32"
icon="mdi-emoticon-happy-outline"
v-on="on" />
</template>
<template #default="{ close }">
<div class="lush-navbar-login__content">
<snt-login @click:close="close()">
<template #header>
<div>
<snt-icon
class="lush-navbar-login__close"
size="42"
icon="mdi-close"
@click="close()" />
<div class="lush-navbar-login__title">
Login
</div>
</div>
</template>
</snt-login>
</div>
</template>
</snt-dialog>
<snt-dialog
:max-width="375"
content-class="lush-navbar-cart-dialog"
transition="slide-x-reverse-transition"
scrollable>
<template #activator="{ on, attrs }">
<div
class="lush-navbar-cart"
v-on="on">
<snt-icon
color="#2f2f2f"
size="32"
icon="mdi-shopping-outline" />
<div v-if="purchasesQuantity"
class="lush-navbar-cart__count">
{{ purchasesQuantity }}
</div>
</div>
</template>
<template #default="{ attrs, on: { close } }">
<div class="lush-navbar-cart__content" >
<div class="lush-navbar-cart__title">
<div>Basket ({{purchasesQuantity}})</div>
<snt-icon
class="lush-navbar-cart__close"
size="32"
color='#2f2f2f'
icon="mdi-close"
@click="close()" />
</div>
<snt-cart
#default="{ items, totalPrice, selectQuantity, selectedPurchase, remove, submit }"
class="lush-navbar-cart">
<template v-if="selectedPurchase.length">
<div class="lush-navbar-cart__container">
<template v-for="item in items">
<div
:key="`pop-cart-item-${item.id}`"
class="lush-navbar-cart-item">
<snt-button
class="lush-navbar-cart-remove__button"
icon="mdi-close"
small
@click="remove(item)"/>
<snt-image
:src="item.pictureUrl"
height="112px"
width="85px" />
<div class="lush-navbar-cart-item__content">
<div class="lush-navbar-cart-item__title">
<div>{{ item.name }}</div>
<div v-if="item.discount">
<s class="lush-navbar-cart-item__discount">{{ item.price | toLocaleString }} ฿</s>
{{ (item.price - item.discount) | toLocaleString }} ฿
</div>
<div v-else>{{ item.price | toLocaleString }} ฿</div>
</div>
<div class="lush-navbar-cart-item__options">
<div>
<snt-number-field
:value="item.quantity"
:min="1"
:max="item.available"
controls
center
@input="selectQuantity(item, $event)" />
</div>
</div>
</div>
</div>
</template>
</div>
<div class="lush-navbar-cart__actions">
<div class="lush-navbar-cart__total">
<div>
Total
</div>
<div>
{{ totalPrice | toLocaleString }} ฿
</div>
</div>
<snt-button
:to="{ name: 'SalePageCheckout' }"
:disabled="!selectedPurchase.length"
color="primary"
class="lush-cart-action__submit"
tile
depressed
x-large
block>
Checkout
</snt-button>
</div>
</template>
<div v-else class="snt-cart-no-data">
<div class="snt-cart-no-data">
<snt-icon icon="mdi-cart-variant" size="64" />
<div class="snt-cart-no-data__title">
ยังไม่มีสินค้าในตะกร้า
</div>
<snt-button
:to="{ name: 'SalePageProducts' }"
class="snt-cart__submit"
color="primary"
depressed
large>
ไปซื้อสินค้า
</snt-button>
</div>
</div>
</snt-cart>
</div>
</template>
</snt-dialog>
</div>
<div class="lush-search--full">
<snt-text-field
class="lush-search__input lush-search__input--large"
placeholder="Search"
append-icon="mdi-magnify"
autofocus
filled
@keypress.enter="router.push({
name: 'SalePageProducts',
query: {
search: $event.target.value,
}
})" />
</div>
<div class="lush-navbar-category">
<div class="lush-navbar-category__title">You might like:</div>
<div class="lush-navbar-category__items">
<div
class="lush-hero-category-label"
@click="router.push({
name: 'SalePageProducts',
});close()">
{{ menuProducts.label }}
</div>
<template v-for="item in productCategories">
<div v-if="item.name"
:key="`cat-link-${item.id}`"
class="lush-hero-category-label"
@click="router.push({
name: 'SalePageCategoryProducts',
params: {
categoryId: item.id,
categoryName: item.name
}
});close()">
{{ item.name }}
</div>
</template>
</div>
</div>
</div>
</template>
</snt-dialog>
<snt-collapse v-if="isAuth">
<template v-slot="{ collapse, setCollapse }">
<div class="navbar-user">
<snt-icon
class="lush-navbar-login"
color="#2f2f2f"
size="32"
icon="mdi-emoticon-outline"
@click="setCollapse(!collapse)" />
<div
v-show="!collapse"
class="lush-navbar-login__menu">
<div class="lush-navbar-login__name"> Hi! {{ customerName }} </div>
<div class="lush-navbar-login__divider"></div>
<snt-button
:to="{ name: 'SalePageOrders' }"
label="Orders"
text
@click="setCollapse(!collapse)" />
<div class="lush-navbar-login__divider"></div>
<snt-button
label="Logout"
text
@click="logout();setCollapse(!collapse);" />
</div>
</div>
</template>
</snt-collapse>
<snt-dialog
v-else
:max-width="400"
content-class="lush-navbar-login__dialog"
transition="fade-transition"
scrollable>
<template #activator="{ on }">
<snt-icon
class="lush-navbar-login"
color="#2f2f2f"
size="32"
icon="mdi-emoticon-happy-outline"
v-on="on" />
</template>
<template #default="{ close }">
<div class="lush-navbar-login__content">
<snt-login @click:close="close()">
<template #header>
<div>
<snt-icon
class="lush-navbar-login__close"
size="42"
icon="mdi-close"
@click="close()" />
<div class="lush-navbar-login__title">
Login
</div>
</div>
</template>
</snt-login>
</div>
</template>
</snt-dialog>
<snt-dialog
:max-width="375"
content-class="lush-navbar-cart-dialog"
transition="slide-x-reverse-transition"
scrollable>
<template #activator="{ on, attrs }">
<div
class="lush-navbar-cart"
v-on="on">
<snt-icon
color="#2f2f2f"
size="32"
icon="mdi-shopping-outline" />
<div v-if="purchasesQuantity"
class="lush-navbar-cart__count">
{{ purchasesQuantity }}
</div>
</div>
</template>
<template #default="{ attrs, on: { close } }">
<div class="lush-navbar-cart__content" >
<div class="lush-navbar-cart__title">
<div>Basket ({{purchasesQuantity}})</div>
<snt-icon
class="lush-navbar-cart__close"
size="32"
color='#2f2f2f'
icon="mdi-close"
@click="close()" />
</div>
<snt-cart
#default="{ items, totalPrice, selectQuantity, selectedPurchase, remove, submit }"
class="lush-navbar-cart">
<template v-if="selectedPurchase.length">
<div class="lush-navbar-cart__container">
<template v-for="item in items">
<div class="lush-navbar-cart-item">
<snt-button
class="lush-navbar-cart-remove__button"
icon="mdi-close"
small
@click="remove(item)"/>
<snt-image
:src="item.pictureUrl"
height="112px"
width="85px" />
<div class="lush-navbar-cart-item__content">
<div class="lush-navbar-cart-item__title">
<div>{{ item.name }}</div>
<div>{{ item.price | toLocaleString }}</div>
</div>
<div class="lush-navbar-cart-item__options">
<div>
<snt-number-field
:value="item.quantity"
:min="1"
:max="item.available"
controls
center
@input="selectQuantity(item, $event)" />
</div>
</div>
</div>
</div>
</template>
</div>
<div class="lush-navbar-cart__actions">
<div class="lush-navbar-cart__total">
<div>
Total
</div>
<div>
{{ totalPrice | toLocaleString }} ฿
</div>
</div>
<snt-button
:to="{ name: 'SalePageCheckout' }"
:disabled="!selectedPurchase.length"
color="primary"
class="lush-cart-action__submit"
tile
depressed
x-large
block>
Checkout
</snt-button>
</div>
</template>
<div v-else class="snt-cart-no-data">
<div class="snt-cart-no-data">
<snt-icon icon="mdi-cart-variant" size="64" />
<div class="snt-cart-no-data__title">
ยังไม่มีสินค้าในตะกร้า
</div>
<snt-button
:to="{ name: 'SalePageProducts' }"
class="snt-cart__submit"
color="primary"
depressed
large>
ไปซื้อสินค้า
</snt-button>
</div>
</div>
</snt-cart>
</div>
</template>
</snt-dialog>
</snt-col>
</snt-row>
</snt-container>
</snt-navbar>
<div></div>
</template>
</snt-section>
</snt-app>
← Stylesheet Landing →