Types

PLP Typescript types

tip

New to Typescript?, check this ;)

• Everyday Types
• Object Types

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[]
    sp_s?: 'large' | 'horizontal'
}

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[]>
    wishlist_checked_icon_html?: string
    wishlist_not_checked_icon_html?: string
}

Wishlist Custom Icons

Use wishlist_checked_icon_html and wishlist_not_checked_icon_html to override the default heart icons with custom HTML (e.g. an inline SVG). This takes priority over any custom icons configured in the editor. Both values must be provided — if only one is set, the feature falls back to the editor icons.

Security

These values are rendered as raw HTML without sanitization. Only pass trusted, static content (e.g. inline SVGs). Never include user-generated content or event handlers (onclick, etc.) to avoid XSS vulnerabilities.

Example

var __fast_options = {
    wishlist_checked_icon_html: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="red" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>',
    wishlist_not_checked_icon_html: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-width="2" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>'
}

Shopify

models.ts

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