# Products
<snt-app
#default="{ _, theme, breakpoint, router, route,
scrollY, isAuth, purchasesQuantity,
productCategories, productBrands }">
<snt-section name="รูปภาพ">
<snt-container>
<snt-image src="https://waave.s3.ap-southeast-1.amazonaws.com/uploads/asset_image/sale_products.jpg" />
</snt-container>
</snt-section>
<snt-section name="สินค้าทั้งหมด">
<snt-all-products #default="{
items, isCollection, loading, page, itemsCount, pagesCount, sortItems, selectOrderBy, selectCategories, selectBrands, selectPage, filters
}">
<snt-container>
<snt-row>
<snt-col cols="12"
md="2">
<div class="products-filter">
<div class="products-filter-header">
<div>การค้นหา</div>
<snt-link
:to="{ name: 'SalePageProducts' }"
label="ตั้งค่าใหม่" />
</div>
<div class="products-filter-producttype">
<snt-button
:to="{
name: (!filters.categoryId || !filters.categoryId.length) ? 'SalePageProducts' : 'SalePageCategoryProducts',
query: route.query
}"
:color="isCollection ? '#747475': 'primary'"
:outlined="isCollection"
class="products-filter-producttype__btn"
rounded
depressed>
สินค้า
</snt-button>
<snt-button
:to="{
name: (!filters.categoryId || !filters.categoryId.length) ? 'SalePageCollection' : 'SalePageCategoryCollection',
query: route.query
}"
:color="!isCollection ? '#747475': 'primary'"
:outlined="!isCollection"
class="products-filter-producttype__btn"
rounded
depressed>
สินค้าเซ็ต
</snt-button>
</div>
<snt-collapse
#default="{ collapse, setCollapse }"
:value="!route.params.categoryId"
class="products-filter-collapse" >
<div class="products-filter-collapse__title">
<div>ประเภท</div>
<snt-button
:icon="collapse ? 'mdi-plus' : 'mdi-minus'"
@click="setCollapse(!collapse)" />
</div>
<div class="products-filter-collapse__content"
:class="{ 'products-filter-collapse__content--hide': collapse }">
<div class="products-filter-collapse__item"
@click="selectCategories([])">
<snt-checkbox
:value="!filters.categoryId || !filters.categoryId.length"
color="#000"
@click="selectCategories([])"/>
<div> สินค้าทั้งหมด </div>
</div>
<template v-for="item in productCategories">
<div
v-if="item.name"
:key="`category-product-${item.id}`"
class="products-filter-collapse__item"
@click="selectCategories(_.knock(filters.categoryId || [], item.id))">
<snt-checkbox
:value="_.includes(filters.categoryId || [], item.id)"
color="#000"
@click="selectCategories(_.knock(filters.categoryId || [], item.id))"/>
<div> {{ item.name }} </div>
</div>
</template>
</div>
</snt-collapse>
<snt-collapse
#default="{ collapse, setCollapse }"
:value="!route.query.brandId"
class="products-filter-collapse">
<div class="products-filter-collapse__title">
<div>แบรนด์</div>
<snt-button
:icon="collapse ? 'mdi-plus' : 'mdi-minus'"
@click="setCollapse(!collapse)" />
</div>
<div class="products-filter-collapse__content"
:class="{ 'products-filter-collapse__content--hide': collapse }">
<template v-for="item in productBrands">
<div
v-if="item.name"
:key="`brand-product-${item.id}`"
class="products-filter-collapse__item"
@click="selectBrands(_.knock(filters.brandId || [], item.id))">
<snt-checkbox
:value="_.includes(filters.brandId || [], item.id)"
color="#000"
@click="selectBrands(_.knock(filters.brandId || [], item.id))"/>
<div> {{ item.name }} </div>
</div>
</template>
</div>
</snt-collapse>
</div>
</snt-col>
<snt-col cols="12"
md="10">
<div class="products-header">
<div class="products-header__title">
สินค้าทั้งหมด
<span
v-if="itemsCount"
class="products-header__count">
({{ itemsCount }} รายการ)
</span>
</div>
<div class="spacer"></div>
<div class="products-header-search">
<snt-text-field
prepend-icon="mdi-magnify"
placeholder="ค้นหา"
hide-details
outlined
dense
@keydown.enter="router.push({
query: {
...route.query,
search: $event.target.value
}
})"/>
</div>
<div class="products-header-sort">
<snt-select
:value="filters.orderBy"
:items="sortItems"
prepend-icon="mdi-sort"
hide-details
outlined
dense
@change="selectOrderBy($event)"
/>
</div>
</div>
<div
v-if="loading"
class="loading__wrap">
</div>
<template v-else>
<snt-row>
<snt-col
v-for="(item, i) in items"
:key="`product-item-${item.id}`"
cols="6"
md="4">
<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 />
<div
v-if="item.displayOnSale && item.fullPrice"
class="product-item-discount">
{{ ((item.price / item.fullPrice) * 100) | toLocaleString }} %
</div>
</snt-link>
<div
v-if="item.productBrand"
class="product-item-brand">{{ item.productBrand.name }}</div>
<snt-link
:label="item.name"
:to="{
name: item.isCollection ? 'SalePageCollectionDetail' : 'SalePageProductDetail',
params: {
productId: item.id
}
}"
class="product-item-name" />
<snt-link
:label="item.price"
:to="{
name: item.isCollection ? 'SalePageCollectionDetail' : 'SalePageProductDetail',
params: {
productId: item.id
}
}"
class="product-item-price">
<template #activator="{ label }">
<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>
</template>
</snt-link>
</div>
</snt-col>
<div
v-if="!itemsCount"
class="products__not-found">
<snt-icon icon="mdi-bag-personal-outline" size="64" />
<div class="products-not-found">
ไม่พบสินค้า
</div>
</div>
</snt-row>
<snt-pagination
v-if="pagesCount > 1"
:value="page"
:length="pagesCount"
:total-visible="7"
class="products__pagination"
@input="selectPage($event)" />
</template>
</snt-col>
</snt-row>
</snt-container>
</snt-all-products>
</snt-section>
</snt-app>