# Header
<snt-app
#default="{ _, theme, breakpoint, router,
scrollY, isAuth, customerName, purchasesQuantity,
productCategories, productBrands }"
class="pom">
<snt-section name="โฆษณา">
<snt-container class="announce" fluid>
<snt-row no-gutters>
<snt-col cols="12" md="8" align-self="center">
<snt-text-editor class="announce__content"
:html="`<div><strong><a href='https://www.google.com/' target='_blank' style='color: var(--v-accent-lighten5);'>โปรโมชันพิเศษ ลดสูงถึง 50%</a></strong><a href='https://www.google.com/' target='_blank' style='color: var(--v-accent-lighten5);'> | และเก็บโค้ดต่อได้อีก 20%! ช้อปเลย</a></div>`" />
</snt-col>
<snt-col cols="12" md="4" align-self="center">
<div class="d-flex">
<div class="spacer" />
<snt-dialog label="*เป็นไปตามข้อตกลงและเงื่อนไข"
:content="`<div style='text-align:center;'>
<h2>TERMS & CONDITIONS</h2>
<div>“ข้อตกลงและเงื่อนไขรหัสส่วนลด:</div>
<div>รหัสส่วนลดหมดอายุวันที่ 5 กรกฎาคม 2564 เวลา 10:00 น.</div>
<div>มาใช้ส่วนลดกันเถอะ</div>
</div>`"
transition="fade-transition"
fullscreen>
<template #activator="{ on, attrs }">
<snt-text :label="attrs.label"
class="announce-content__text"
v-on="on" />
</template>
<template #default="{ attrs, on: { close } }">
<div class="announce-content__content" >
<div class="announce-modal__title">
<snt-button icon="mdi-close"
@click="close()" />
</div>
<snt-text-editor :html="attrs.content"
class="announce-modal__content"/>
</div>
</template>
</snt-dialog>
</div>
</snt-col>
</snt-row>
</snt-container>
</snt-section>
<snt-section name="หัวข้อ">
<snt-navbar
:menu-home="{ label: 'หน้าแรก' }"
:menu-products="{ label: 'สินค้า' }"
:items="[
{
label: 'Facebook',
href: 'https://www.facebook.com/',
target: '_blank'
}
]"
:elevation="0"
:class="{ 'navbar--fixed': scrollY > 50 }"
class="navbar"
align="center"
src="https://waave.s3.ap-southeast-1.amazonaws.com/uploads/asset_image/potatona.jpg"
#default="{
logo,
menuHome,
menuProducts,
extendLinks,
logout,
props: {
align
}
}">
<snt-container class="container--no-gutter">
<div v-if="breakpoint.smAndDown"
class="navbar__wrapper">
<snt-dialog
:attach="false"
:max-width="375"
content-class="navbar-menu-dialog"
transition="fade-transition"
scrollable>
<template #activator="{ on }">
<snt-button icon="mdi-menu" v-on="on" />
</template>
<template #default="{ attrs, on: { close } }">
<div class="navbar-menu__content">
<div class="navbar-menu-title">
<div
v-if="!isAuth"
class="navbar-menu__header">
<snt-icon
class="navbar-menu-account__icon"
icon="mdi-account-circle"
size="32" />
<div class="navbar-menu-account__content">
<div class="navbar-menu__hello">
สวัสดี
</div>
<div class="navbar-menu__profile">
<div class="navbar-menu__name">{{ customerName }}!</div>
<snt-button
label="ออกจากระบบ"
depressed
small
@click="logout()" />
</div>
</div>
</div>
<snt-dialog
v-else
:attach="false"
:max-width="400"
content-class="navbar-user__login-dialog"
transition="fade-transition"
scrollable>
<template #activator="{ on }">
<div
:ripple="false"
class="navbar-menu__login"
v-on="on">
<div class="navbar-menu__hello">สวัสดี !</div>
<div>เข้าสู่ระบบ</div>
</div>
</template>
<template #default="{ close }">
<div class="navbar-login__content">
<snt-login @click:close="close()">
<template #header>
<div>
<snt-icon
class="navbar-login__close"
size="42"
icon="mdi-close"
@click="close()" />
<div class="navbar-login__title">
เข้าสู่ระบบ
</div>
</div>
</template>
</snt-login>
</div>
</template>
</snt-dialog>
</div>
<div class="navbar-menu-items">
<snt-link
:to="{ name: 'SalePage' }"
:label="menuHome.label"
class="navbar-menu-item"
@click.native="close()" />
<snt-link
:to="{ name: 'SalePageProducts' }"
:label="menuProducts.label"
class="navbar-menu-item"
@click.native="close()" />
<template v-for="(item, i) in extendLinks">
<snt-link
v-if="item.visible"
:key="`navbar-custom-${i}`"
:label="item.label"
:href="item.href"
:target="item.target"
class="navbar-menu-item"
@click.native="close()" />
</template>
</div>
</div>
</template>
</snt-dialog>
<snt-link
#activator
:to="{ name: 'SalePage' }"
class="navbar-logo">
<img
:src="logo"
height="100%" />
</snt-link>
<div class="spacer" />
<snt-button
v-if="isAuth"
:to="{ name: 'SalePageOrders' }"
icon="mdi-history"
class="navbar-icon" />
<snt-dialog
:attach="false"
:max-width="375"
content-class="navbar-cart-dialog"
transition="fade-transition"
scrollable>
<template #activator="{ on, attrs }">
<div
class="navbar-cart"
v-on="on" >
<snt-button icon="mdi-shopping-outline"
class="navbar-icon"/>
<div v-if="purchasesQuantity"
class="navbar-cart__count">
{{ purchasesQuantity }}
</div>
</div>
</template>
<template #default="{ attrs, on: { close } }">
<div class="navbar-cart__content" >
<div class="navbar-cart-title">
<snt-button icon="mdi-close"
@click="close()" />
<div class="navbar-cart-title__text">ตะกร้าสินค้า</div>
</div>
<snt-cart
#default="{ items, totalPrice, selectQuantity, selectedPurchase, remove, submit }"
class="navbar-cart">
<template v-if="selectedPurchase.length">
<div class="navbar-cart__container">
<template v-for="item in items">
<div class="navbar-cart-item">
<snt-button
class="navbar-cart-remove__button"
icon="mdi-close"
small
@click="remove(item)"/>
<snt-image
:src="item.pictureUrl"
height="112px"
width="85px" />
<div class="navbar-cart-item__content">
<div class="navbar-cart-item__title">
<div>{{ item.name }}</div>
<div v-if="item.discount">
<s class="navbar-cart-item__discount">{{ item.price | toLocaleString }} ฿</s>
{{ (item.price - item.discount) | toLocaleString }} ฿
</div>
<div v-else>{{ item.price | toLocaleString }} ฿</div>
</div>
<div class="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 class="navbar-cart__subtitle-1">
สรุปการชำระเงิน
</div>
<div class="navbar-cart__subtitle-2">
<div>
ยอดรวม
</div>
<div>
{{ totalPrice | toLocaleString }} ฿
</div>
</div>
</div>
<div class="navbar-cart__actions">
<snt-button
:to="{ name: 'SalePageCheckout' }"
:disabled="!selectedPurchase.length"
class="snt-cart-action__submit"
depressed
large
block
@click="close()">
สั่งสินค้า
</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
@click="close()">
ไปซื้อสินค้า
</snt-button>
</div>
</div>
</snt-cart>
</div>
</template>
</snt-dialog>
</div>
<snt-row v-else
no-gutters>
<snt-col cols="4"
:class="{
'navbar--order-1': align === 'center',
'navbar--order-2': align === 'left' || align === 'right'
}"
class="navbar__col">
<snt-text :label="menuHome.label"
class="navbar-item"
@click="router.push({ name: 'SalePage' })" />
<snt-collapse #default="{ collapse, setCollapse }">
<div class="navbar-product">
<div class="navbar-item"
@click="setCollapse(!collapse)">
<snt-text :label="menuProducts.label"/>
<snt-icon icon="mdi-chevron-down" />
</div>
<div
:style="{ 'top': scrollY > 50 ? '100%' : 'calc(100% + 1px)' }"
:class="{ 'navbar-product__hover--opacity': collapse }"
class="navbar-product__hover">
<snt-container class="container--no-gutter">
<snt-row no-gutters>
<snt-col cols="3">
<div class="navbar-sub-menu__title">ประเภท</div>
<snt-link
:to="{ name: 'SalePageProducts' }"
label="ทั้งหมด"
class="navbar-sub-menu__item"
@click.native="setCollapse(true)"/>
<template v-for="item in productCategories">
<snt-link v-if="item.name"
:key="`cat-link-${item.id}`"
:to="{ name: 'SalePageCategoryProducts', params: { categoryId: item.id, categoryName: item.name } }"
:label="item.name"
class="navbar-sub-menu__item"
@click.native="setCollapse(true)" />
</template>
</snt-col>
<snt-col cols="3">
<div class="navbar-sub-menu__title">แบรนด์</div>
<template v-for="item in productBrands">
<snt-link v-if="item.name"
:key="`brand-link-${item.id}`"
:to="{
name: 'SalePageProducts',
query: { brandId: item.id }
}"
:label="item.name"
class="navbar-sub-menu__item"
@click.native="setCollapse(true)" />
</template>
</snt-col>
</snt-row>
</snt-container>
</div>
</div>
</snt-collapse>
<template v-for="(item, i) in extendLinks">
<snt-link
v-if="item.visible"
:key="`navbar-custom-${i}`"
:label="item.label"
:href="item.href"
:target="item.target"
class="navbar-item" />
</template>
</snt-col>
<snt-col
cols="4"
:class="{
'navbar--order-1': align === 'left',
'navbar--order-2': align === 'center',
'navbar--order-3': align === 'right'
}"
class="navbar__col">
<snt-link
#activator
:to="{ name: 'SalePage' }"
class="navbar-logo">
<img
:src="logo"
height="100%" />
</snt-link>
</snt-col>
<snt-col cols="4"
:class="{
'navbar--order-1': align === 'right',
'navbar--order-3': align === 'center' || align === 'left'
}"
class="navbar__col">
<snt-hover v-if="isAuth"
#default="{ hover }">
<div class="navbar-user">
<div class="navbar-user__btn">
<snt-icon icon="mdi-account" />
<div class="navbar-user__name">สวัสดี {{ customerName }}</div>
</div>
<div v-show="hover" class="navbar-user__hover">
<snt-button
label="ออกจากระบบ"
depressed
@click="logout()" />
</div>
</div>
</snt-hover>
<snt-dialog
v-else
:attach="false"
:max-width="400"
content-class="navbar-user__login-dialog"
transition="fade-transition"
scrollable>
<template #activator="{ on }">
<div
:ripple="false"
class="navbar-user__login"
v-on="on">
เข้าสู่ระบบ
</div>
</template>
<template #default="{ close }">
<div class="navbar-login__content">
<snt-login @click:close="close()">
<template #header>
<div>
<snt-icon
class="navbar-login__close"
size="42"
icon="mdi-close"
@click="close()" />
<div class="navbar-login__title">
เข้าสู่ระบบ
</div>
</div>
</template>
</snt-login>
</div>
</template>
</snt-dialog>
<div class="navbar-user-divider">|</div>
<snt-button
v-if="isAuth"
:to="{ name: 'SalePageOrders' }"
icon="mdi-history"
class="navbar-icon" />
<snt-dialog
:attach="false"
:max-width="375"
content-class="navbar-cart-dialog"
transition="fade-transition"
scrollable>
<template #activator="{ on, attrs }">
<div
class="navbar-cart"
v-on="on" >
<snt-button icon="mdi-shopping-outline"
class="navbar-icon"/>
<div v-if="purchasesQuantity"
class="navbar-cart__count">
{{ purchasesQuantity }}
</div>
</div>
</template>
<template #default="{ attrs, on: { close } }">
<div class="navbar-cart__content" >
<div class="navbar-cart-title">
<snt-button icon="mdi-close"
@click="close()" />
<div class="navbar-cart-title__text">ตะกร้าสินค้า</div>
</div>
<snt-cart
#default="{ items, totalPrice, selectQuantity, selectedPurchase, remove, submit }"
class="navbar-cart">
<template v-if="selectedPurchase.length">
<div class="navbar-cart__container">
<template v-for="item in items">
<div class="navbar-cart-item">
<snt-button
class="navbar-cart-remove__button"
icon="mdi-close"
small
@click="remove(item)"/>
<snt-image
:src="item.pictureUrl"
height="112px"
width="85px" />
<div class="navbar-cart-item__content">
<div class="navbar-cart-item__title">
<div>{{ item.name }}</div>
<div v-if="item.discount">
<s class="navbar-cart-item__discount">{{ item.price | toLocaleString }} ฿</s>
{{ (item.price - item.discount) | toLocaleString }} ฿
</div>
<div v-else>{{ item.price | toLocaleString }} ฿</div>
</div>
<div class="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 class="navbar-cart__subtitle-1">
สรุปการชำระเงิน
</div>
<div class="navbar-cart__subtitle-2">
<div>
ยอดรวม
</div>
<div>
{{ totalPrice | toLocaleString }} ฿
</div>
</div>
</div>
<div class="navbar-cart__actions">
<snt-button
:to="{ name: 'SalePageCheckout' }"
:disabled="!selectedPurchase.length"
class="snt-cart-action__submit"
depressed
large
block
@click="close()">
สั่งสินค้า
</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
@click="close()">
ไปซื้อสินค้า
</snt-button>
</div>
</div>
</snt-cart>
</div>
</template>
</snt-dialog>
</snt-col>
</snt-row>
</snt-container>
</snt-navbar>
</snt-section>
<snt-section name="หัวข้อรอง">
<snt-container
:class="{ 'navbar--space': scrollY > 50 }"
class="container--no-gutter">
<div class="divider" />
<div class="navbar__bottom">
<snt-card icon="mdi-cart"
title="หัวข้อรอง"
content="<div><div>รายละเอียด 1</div><a style='font-size: 11px;' href='https://www.google.com/' target='_blank'>คลิกดูรายละเอียด</a></div>"
class="navbar-header-bottom"
#default="{ attrs }">
<snt-hover #default="{ hover }">
<div v-if="!!attrs.icon || !!attrs.title">
<div :class="{ 'navbar-header-bottom--borderless': !attrs.content }"
class="navbar-header-bottom__label d-flex align-center">
<snt-icon :icon="attrs.icon" />
<snt-text :label="attrs.title" />
</div>
<div v-show="hover && attrs.content"
class="navbar-header-bottom__hover"
v-html="attrs.content" />
</div>
</snt-hover>
</snt-card>
<snt-card icon="mdi-tag"
title="สินค้าใหม่รายสัปดาห์"
content=""
class="navbar-header-bottom"
#default="{ attrs }">
<snt-hover #default="{ hover }">
<div v-if="!!attrs.icon || !!attrs.title">
<div :class="{ 'navbar-header-bottom--borderless': !attrs.content }"
class="navbar-header-bottom__label d-flex align-center">
<snt-icon :icon="attrs.icon" />
<snt-text :label="attrs.title" />
</div>
<div
v-show="hover && attrs.content"
class="navbar-header-bottom__hover">
<div v-html="attrs.content"></div>
</div>
</div>
</snt-hover>
</snt-card>
<snt-card icon="mdi-truck"
title="ส่งฟรีเมื่อซื้อครบ 1000 บาท"
content="จัดส่งให้ฟรี เมื่อซื้อสินค้าครบ 1000 บาท"
class="navbar-header-bottom"
#default="{ attrs }">
<snt-hover #default="{ hover }">
<div v-if="!!attrs.icon || !!attrs.title">
<div :class="{ 'navbar-header-bottom--borderless': !attrs.content }"
class="navbar-header-bottom__label d-flex align-center">
<snt-icon :icon="attrs.icon" />
<snt-text :label="attrs.title" />
</div>
<div
v-show="hover && attrs.content"
class="navbar-header-bottom__hover">
<div v-html="attrs.content"></div>
</div>
</div>
</snt-hover>
</snt-card>
<snt-card icon="mdi-cash"
title="บริการเก็บเงินปลายทาง"
content="สามารถเลือกบริการเก็บเงินปลายทาง
และชำระเงินกับพนักงานส่งสินค้าเมื่อสินค้าถึงมือเรียบร้อยแล้ว"
class="navbar-header-bottom"
#default="{ attrs }">
<snt-hover #default="{ hover }">
<div v-if="!!attrs.icon || !!attrs.title">
<div :class="{ 'navbar-header-bottom--borderless': !attrs.content }"
class="navbar-header-bottom__label d-flex align-center">
<snt-icon :icon="attrs.icon" />
<snt-text :label="attrs.title" />
</div>
<div
v-show="hover && attrs.content"
class="navbar-header-bottom__hover">
<div v-html="attrs.content"></div>
</div>
</div>
</snt-hover>
</snt-card>
<div class="spacer" />
<snt-card v-if="breakpoint.lg"
title="ร้านนี้ดี ค้าขายร่ำรวย"
class="navbar-header-bottom"
#default="{ attrs }">
<snt-hover #default="{ hover }">
<div v-if="!!attrs.icon || !!attrs.title">
<div :class="{ 'navbar-header-bottom--borderless': !attrs.content }"
class="navbar-header-bottom__label d-flex align-center">
<snt-icon :icon="attrs.icon" />
<snt-text :label="attrs.title" />
</div>
<div
v-show="hover && attrs.content"
class="navbar-header-bottom__hover">
<div v-html="attrs.content"></div>
</div>
</div>
</snt-hover>
</snt-card>
</div>
</snt-container>
</snt-section>
</snt-app>
Landing →