Shipnity Website Document

# All Products

The snt-all-products component is used for displaying product data. Features include sorting, searching and pagination.

# Usage

The standard all-products will by default render your data as simple.

<snt-all-products cols="4"></snt-all-products>

# API

# Examples

<snt-all-products>
  <template #header>
    <h3>My Store</h3>
  </template>
</snt-all-products>

# Item

<snt-all-products>
  <template #item="{ item }">
    <snt-link 
      :label="item.name"
      :to="{
        name: item.isCollection 
          ? 'SalePageCollectionDetail' 
          : 'SalePageProductDetail',
        params: {
          productId: item.id
        }
      }">
      <template #activator="{ label }">
        <snt-image
          :src="item.images.length 
            ? item.images[0] 
            : 'https://via.placeholder.com/300/eee/c6c6c6?text=No image'"
          contain>
        </snt-image>
        <div>{{ item.name }}</div>
        <div>{{ item.price | toLocaleString }} ฿</div>
        <div v-if="item.displayOnSale">
          {{ item.fullPrice | toLocaleString }} ฿
        </div>
      </template>
    </snt-link>
  </template>
</snt-all-products>

# Switch to collection

<snt-app #default="{ route, router }">
  <snt-all-products>
    <template #filter="{ isCollection }">
      <div>
        <snt-button
          :to="{  name: 'SalePageProducts', query: route.query }"
          :color="isCollection ? '#C4C4C4': 'primary'">
          All
        </snt-button>
        <snt-button
          :to="{ name: 'SalePageCollection', query: route.query }"
          :color="!isCollection ? '#C4C4C4': 'primary'">
          Combos
        </snt-button>
      </div>
    </template>
  </snt-all-products>
</snt-app>

<snt-app #default="{ route, router }">
  <snt-all-products>
    <template #filter="{ filters: { search } }">
      <snt-text-field
        :value="search"
        type="search"
        placeholder="Search..."
        prepend-inner-icon="mdi-magnify"
        autocomplete="off"
        background-color="#ffffff"
        dense
        outlined
        hide-details
        @keydown.enter="router.push({
          query: {
            ...route.query,
            search: $event.target.value
          }
        })">
      </snt-text-field>
    </template>
  </snt-all-products>
</snt-app>

# Brand & Category

<snt-app #default="{ productCategories, productBrands }">
  <snt-all-products>
    <template #filter="{ filters: { categoryId, brandId }, selectCategories, selectBrands }">
      <snt-select
        :value="categoryId"
        :items="productCategories"
        placeholder="Category"
        item-value="id"
        item-text="name"
        background-color="#ffffff"
        dense
        outlined
        hide-details
        chips
        multiple
        clearable
        @change="selectCategories($event)">
      </snt-select>
      <snt-select
        :value="brandId"
        :items="productBrands"
        placeholder="Brand"
        item-value="id"
        item-text="name"
        background-color="#ffffff"
        dense
        outlined
        hide-details
        chips
        multiple
        clearable
        @change="selectBrands($event)">
      </snt-select>
    </template>
  </snt-all-products>
</snt-app>

# Sorting

<snt-all-products>
  <template #filter="{ sortItems, filters: { orderBy }, selectOrderBy }">
    <snt-select
      :value="orderBy"
      :items="sortItems"
      placeholder="Sort"
      item-text="text"
      item-value="value"
      background-color="#ffffff"
      dense
      outlined
      hide-details
      @change="selectOrderBy($event)">
    </snt-select>
  </template>
</snt-all-products>

# Pagination

<snt-all-products>
  <template #pagination="{ page, pagesCount, selectPage }">
    <snt-pagination
      :value="page"
      :length="pagesCount"
      :total-visible="7"
      @input="selectPage($event)">
    </snt-pagination>
  </template>
</snt-all-products>

# Loader

You can use the loading prop to indicate that data in the list is currently loading. If there is no data in the list, a loading message will also be displayed.

<snt-all-products>
  <template #loader>
    <div>Loading...</div>
  </template>
</snt-all-products>

# No data

<snt-all-products>
  <template #[`no-data`]>
    <div>No data</div>
  </template>
</snt-all-products>

Address →