# Products
<snt-app class="lush"
#default="{ _, theme, breakpoint, route, router,
scrollY, isAuth, purchasesQuantity,
productCategories, productBrands,
addToCart }">
<snt-section name="สินค้าทั้งหมด">
<snt-all-products
class="lush-all-products"
per-page="20"
#default="{
items, category, isCollection, loading, page, itemsCount, pagesCount, sortItems, selectOrderBy,
selectCategories, selectBrands, selectPage, addMainToCart, filters
}">
<div class="lush-container">
<div v-if="category" class="lush-all-products__title">{{ category.name }}</div>
<snt-row>
<snt-col
class="lush-all-products__cols"
cols="12"
md="9">
<div class="lush-all-products-categories">
<div v-if="category"
class="lush-hero-category-label"
@click="selectCategories([])">
ทั้งหมด
</div>
<template v-for="item in productCategories">
<div v-if="item.name && (!category || (item.id !== category.id))"
:key="`cat-link-${item.id}`"
class="lush-hero-category-label"
@click="selectCategories([item.id])">
{{ item.name }}
</div>
</template>
</div>
</snt-col>
<snt-col
class="lush-all-products__cols"
cols="12"
md="3">
<div class="lush-all-products-filters__wrapper">
<snt-select
:value="filters.orderBy"
:items="sortItems"
class="lush-all-products-orderby"
placeholder="ราคา"
item-text="text"
item-value="value"
background-color="#eaeaea"
attach
dense
outlined
hide-details
@change="selectOrderBy($event)">
</snt-select>
<snt-dialog
:max-width="375"
content-class="lush-all-products-filters-dialog"
transition="slide-x-reverse-transition"
scrollable>
<template #activator="{ on, attrs }">
<div
class="lush-all-products-filters"
v-on="on">
ตัวกรอง
</div>
</template>
<template #default="{ attrs, on: { close } }">
<div class="lush-all-products-filters__content" >
<div class="lush-all-products-filters__title">
<div>ตัวกรอง</div>
<snt-icon
class="lush-all-products-filters__close"
size="32"
color='#2f2f2f'
icon="mdi-close"
@click="close()" />
</div>
<div class="lush-all-products-filters__container">
<div class="lush-all-products-filters-title">Types</div>
<div class="lush-all-products-filters-type">
<snt-button
:to="{
name: (!filters.categoryId || !filters.categoryId.length) ? 'SalePageProducts' : 'SalePageCategoryProducts',
query: route.query
}"
:color="isCollection ? '#747475': 'secondary'"
:outlined="isCollection"
rounded
depressed>
สินค้าทั่วไป
</snt-button>
<snt-button
:to="{
name: (!filters.categoryId || !filters.categoryId.length) ? 'SalePageCollection' : 'SalePageCategoryCollection',
query: route.query
}"
:color="!isCollection ? '#747475': 'secondary'"
:outlined="!isCollection"
rounded
depressed>
สินค้าเซ็ต
</snt-button>
</div>
<div class="lush-all-products-filters-title">Brands</div>
<template v-for="item in productBrands">
<div
v-if="item.name"
:key="`pop-filter-item-${item.id}`"
class="lush-all-products-filters-item">
<snt-checkbox
:value="_.includes(filters.brandId || [], item.id)"
color="#000"
@click="selectBrands(_.knock(filters.brandId || [], item.id))"/>
<div @click="selectBrands(_.knock(filters.brandId || [], item.id))">
{{ item.name }}
</div>
</div>
</template>
</div>
<div class="lush-all-products-filters__actions">
<snt-button
class="lush-all-products-filters__clear"
color="white"
tile
depressed
x-large
block
@click="selectBrands([])">
ล้างตัวกรอง ({{ filters.brandId ? filters.brandId.length : 0 }})
</snt-button>
</div>
</div>
</template>
</snt-dialog>
</div>
</snt-col>
</snt-row>
<snt-row v-if="!loading">
<template v-for="item in items">
<snt-col
:key="`all-products-item-${item.id}`"
class="lush-all-products__cols"
cols="12"
lg="3"
sm="6">
<div class="lush-products-item">
<snt-link
#activator
:to="item.routerLink">
<div class="lush-products-item__wrapper lush-products-item__wrapper--dark">
<div class="lush-products-item__image">
<snt-image
:src="item.pictureUrl || 'https://via.placeholder.com/300/eee/c6c6c6?text=No image'"
aspect-ratio="1"
contain />
</div>
<div class="lush-products-item__content">
<div class="lush-products-item__name">
{{ item.name }}
</div>
<div
v-if="item.productCategory"
class="lush-products-item__categoryname">
{{ item.productCategory.name }}
</div>
<div class="lush-products-item__price">
<span :class="{ 'lush-products-item__price--on-sale': item.displayOnSale }">
{{ item.price | toLocaleString }} THB
</span>
<s v-if="item.displayOnSale">
{{ item.fullPrice | toLocaleString }}
</s>
</div>
</div>
</div>
</snt-link>
<div class="lush-products-item__action">
<snt-button :disabled="item.available <= 0"
:label="item.available <= 0 ? 'Sold Out' : 'Add to basket'"
:icon="item.available <= 0 ? '' : 'mdi-shopping-outline'"
class="lush-products-item__addtocart"
depressed
large
@click="addMainToCart(item)" />
</div>
</div>
</snt-col>
</template>
<div
v-if="!itemsCount"
class="lush-all-products__not-found">
<snt-icon icon="mdi-bag-personal-outline" size="64" />
<div class="lush-all-products-not-found">
ไม่พบสินค้า
</div>
</div>
<snt-pagination
v-if="pagesCount > 1"
:value="page"
:length="pagesCount"
:total-visible="breakpoint.smAndDown ? 4 : 7"
class="lush-all-products__pagination"
@input="selectPage($event)" />
</snt-row>
</div>
</snt-all-products>
</snt-section>
<snt-section name="ข้อความ">
<div class="lush-container">
<div class="lush-all-products__content">
<snt-text-editor :html="`<div style='font-size: 2.15em;color:#000;'><h3>What is Lorem Ipsum?</h3>
<strong>Lorem Ipsum</strong><div>is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
but also the leap into electronic typesetting, remaining essentially unchanged.</div></div>`" />
</div>
</div>
</snt-section>
</snt-app>