TypeScript Types

Product

models.ts

interface Product {
    c: string // currency
    d: string // description
    f: number // product merch stuff
    id: string // product id
    iso: boolean // is sold out
    l: string // product title
    p: string // price
    p_c: string // comapre price
    p_max: string
    p_max_c: string
    p_min: string
    p_min_c: string
    p_spl: number
    review: number // review score 
    reviews_count: number // review count
    s: string // sku (shopify foramt)
    sku: string // sku
    skus: string[] // skus
    t: string // main image
    t2: string // fallback image
    u: string // url
    v_c: number // varaint count
    vra: Variant[] //product variants
    vrc: object 
    att?: Attribute[] // product attribiutes
    alt?: AlternativeProduct[] // alternative (sibiling) products
}

type Variant = [string, VariantData[]]
type VariantData = [string, string[]]

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

export type AlternativeProduct = [AlternativeProductName, AlternativeProductURL, productID?]
type AlternativeProductName = string
type AlternativeProductURL = string
type productID = number

Narrow

models.ts

type Narrow = [FilterGroupName, FilterValue]

type FilterGroupName = string
type FilterValue = string

Initialization

models.ts

type AppType = "SPA" | "MPA";

Sorting

models.ts

type SortBy = "price_min_to_max" | "price_max_to_min" | "creation_date"|
              "creation_date_oldest" | "popularity" | "reviews" | "a_to_z"|
              "z_to_a" | 'relevency'

Autocomplete

models.ts

interface AutocompleteCategory {
    d: string
    id: string
    l: string
    p_id: string
    t: string
    u: string
    parent_name?: string
}

interface AutocompleteTurbolinks {
    l: string
    t: string
    u: string
}
 interface AutocompleteProduct {
    c: string
    d: string
    f: number
    id: string
    l: string
    p: string
    p_c: string
    p_max: string
    p_max_c: string
    p_min: string
    p_min_c: string
    s: string
    sku: string
    skus: string[]
    real_sku?: string
    t: string
    t2: string
    u: string
    image_id?: string // if using image optimization switch
}

 interface PopularSearch {
    label: string
    type: "p"
}

Filters

models.ts

type Facet = [string, FacetValues | CategoryFacetValue, string, boolean, number]
type FacetValues = [string, number]
type CategoryFacetValue = [string, number, string, string]

Smart Collections

models.ts

type CategoryAncestor = [string, string, string]

Upsell & Cross-sell

models.ts

interface Specs { 
    sources: Source[]
    maxSuggestions: number 
    collectionIDs?: string[] // "categoriesIds" is also supported
    widgetID: string 
}

type Source =
"related_recent_products"
| "related_purchase"
| "related_views"
| "related_cart"
| "similar_products"
| "related_recently_viewed"
| "similar_products_by_attributes"
| "similar_products_lookalike"
| "related_top_products"

Visual Discovery

Image Search Callback Action Type

models.ts

    type action =  "ImageSearch" | "Error"

Image Search Callback Payload Type

models.ts

interface Payload {
    image_id: string;
    items: Product[];
    method: string;
    bbox?: Box[];
}

Image Search Callback Payload Box Type

models.ts

interface Box {
    name: string; //Name of the detected object.
    position: Position;
    dot: Dot;
    coords: number[];
    person: string;
}

interface Position {
    width: number;
    height: number;
    top: number;
    left: number;
}
interface Dot {
    name: string;
    x: number;
    y: number;
    productSuggestions: any[]; // Define based on your actual data structure
    person: string;
    id: string;
}

{
    "bbox": [
        {
            "name": "top",
            "bb": [0.25585938, 0.2890625, 0.7734375, 0.734375],
            "position": {
                "left": 25.58,
                "top": 28.90,
                "width": 51.75,
                "height": 44.53
            },
            "dot": {
                "x": 51.46,
                "y": 51.17,
                "name": "top"
            }
        },
        {
            "name": "skirt",
            "bb": [0.28710938, 0.703125, 0.69140625, 0.99609375],
            "position": {
                "left": 28.71,
                "top": 70.31,
                "width": 40.42,
                "height": 29.29
            },
            "dot": {
                "x": 48.92,
                "y": 84.96,
                "name": "skirt"
            }
        }
    ]
}