Skip to main content

Types

PLP Typescript types

tip

New to Typescript?, check this ;)

Products​

models.ts
interface Products {
    [product_id: string]: Product
}

Product​

models.ts
export interface Product {
    currency: string
    id: string
    title: string
    description: string
    variants: Variants
    isSoldOut: boolean
    price: number
    comparePrice: number
    reviewScore: number | undefined
    reviewCount: number | undefined
    imageURL: string
    formattedPrice: string
    formattedCompare: string | undefined
    vendor: string
    sku: string
    s: string
    inventory_lvl?: number
    imagesSrcset: string
    productURL: string
    productBadges: Badge[]
    productTextBadges?: TextBadge[]
    alternativeProducts?: AlternativeProduct[]
    tags?: string[]
    attributes?: Attribute[]
}

export interface Variants {
    [variant_id: number]: Record<string, VariantsAttribute>
}

export type VariantsAttribute = string | number | boolean

export interface AlternativeProduct {
    color: string,
    url: string,
    id: string,
    variants?: Variants,
    s?: string,
    price?: number
    comparePrice?: number,
    formattedCompare?: string,
    formattedPrice?: string
}

export type Attribute = [string, AttributeData[]]
export type AttributeData = string[] | string[][]

Facet​

models.ts
export type Facet = {
    id: string
    name: string
    values: FacetValue[]
    meta?: Record<string, string | number | boolean>
}

export interface FacetValue {
    name: string,
    displayName: string
    count: number
    meta?: Record<string, string | number | boolean>
}

Narrow​

models.ts
export type ServerNarrow = [FilterGroupName, FilterValue]
type FilterGroupName = string
type FilterValue = string

export interface Narrow {
    [FilterGroupName: string]: Set<FilterValue>
}

Animation Options​

models.ts
export interface AnimationOptions {
    duration?: number;
    animationInX?: number;
    animationOutX?: number;
    animationInY?: number;
    animationOutY?: number;
}

Removable Tags​

models.ts
export type RemovableTags = [FilterGroupName, Set<FilterValue>][]

Quick View​

models.ts
export type Device = "desktop" | "tablet" | "mobile"
export type CloseQuickViewReason = "overlay" | "close-btn"

Options​

models.ts
export interface IspOptions {
    with_product_attributes: boolean
    full_product_url_path_redirect: boolean
    color_attribute_names: string[]
    url_parameters_to_keep: string[]
    relatedCollectionsConfiguration: Record<string, string[]>
}

Shopify​

models.ts
export interface AddToCartResponse 
{
    token: string
    item_count: number
    total_price: number
    items: any[];
}