Shipnity Website Document

# snt-all-products

# Component Pages

# Props

# cols

  • Type: boolean|number|string
  • Default: undefined

Sets the default number of columns the component extends. Available options are 1 -> 12 and auto.

# xl

  • Type: boolean|number|string
  • Default: undefined

Changes the number of columns on large and greater breakpoints.

# lg

  • Type: boolean|number|string
  • Default: undefined

Changes the number of columns on extra large and greater breakpoints.

# md

  • Type: boolean|number|string
  • Default: undefined

Changes the number of columns on large and greater breakpoints.

# sm

  • Type: boolean|number|string
  • Default: undefined

Changes the number of columns on medium and greater breakpoints.

# per-page

  • Type: number|string
  • Default: 12

# items

  • Type: Product[]
  • Default: @api/products
Array<{   
  // uid ของสินค้า
  id: ID,
  // จำนวนคงเหลือ
  available: number,
  // รหัสสินค้า
  code: string,
  // รายละเอียดสินค้า
  descriptionLong: string,
  // รายละเอียดสินค้าแบบย่อ
  descriptionShort: string,
  // แสดงราคาส่วนลด
  displayOnSale: boolean,
  // ราคาเต็มเพื่อแสดงส่วนลด
  fullPrice: number,
  // รูปภาพทั้งหมด
  images: string[],
  // ชื่อสินค้า
  name: string,
  // รูปภาพหลัก
  pictureUrl: string,
  // ราคา
  price: number,
  // แบรนด์
  productBrand: {
    id: ID,
    name: string
  },
  // หมวดหมู่
  productCategory: {
    id: ID,
    name: string
  },
  // สินค้าย่อย
  subproducts: Array<{ 
    id: ID,
    available: number,
    inventory: number,
    name: string,
    price: number
  }>,
  // รูปขนาดย่อ
  thumbUrl: string,
  routerLink: {
    name: string,
    params: {
      productId: number
    }
  },
  // เป็นเซ็ตสินค้า
  isCollection: boolean
}>

# Slots

# item

Slot to customize a specific item

{
  index: number,
  item: Product
}

# loader

Defines content for when loading is true and no items are provided

Slot to customize a specific header column

{
  isCollection: boolean,
  category: {
    id: string,
    name: string
  }
}

# filter

Slot to customize a specific filter

{
  sortItems:  Array<{ text: string, value: string }>,
  filters: {
    page: number,
    perPage: number,
    orderBy: string,
    search: string,
    categoryId: string[],
    brandId: string[]
  }
  category: {
    id: string,
    name: string
  },
  selectOrderBy: (value: string) => void,
  selectCategories: (categories: string[]) => void,
  selectBrands: (brands: string[]) => void
}

# pagination

Slot to customize a specific pagination

{
  pagesCount: number,
  itemsCount: number,
  page: number,
  selectPage: (value: number) => void
}

# no-data

Slot to customize a specific no data

# default

The default Vue slot.

{
  isCollection: boolean,
  loading: boolean,
  items: Product[],
  sortItems:  Array<{ text: string, value: string }>,
  filters: {
    page: number,
    perPage: number,
    orderBy: string,
    search: string,
    categoryId: string[],
    brandId: string[]
  },
  pagesCount: number,
  itemsCount: number,
  page: number,
  category: {
    id: string,
    name: string
  },    
  props: {
    perPage: number
  }
  selectPage: (value: number) => void,
  selectOrderBy: (value: string) => void,
  selectCategories: (categories: string[]) => void,
  selectBrands: (brands: string[]) => void,
  addMainToCart: (item: Product) => void,
}

← snt-address →