Typescript

Tweakwise JS Typescript typings

Integration methods

tweakwiseSuggestions, tweakwiseListerPage, tweakwiseRecommendations and tweakwiseGuidedSelling

import type { SuggestionsOptions } from './suggestions.d.ts';
import type { ListerPageOptions } from './listerpage.d.ts';
import type { GuidedSellingOptions } from './guidedselling.d.ts';
import type { RecommendationsOptions } from './recommendations.d.ts';

declare global {
    interface Window {
        tweakwiseSuggestions: (options: SuggestionsOptions) => void;
        tweakwiseListerPage: (options: ListerPageOptions) => {
            setOpen: () => void;
            setQuery: (value: string) => void;
            destroy: () => void;
        };
        tweakwiseGuidedSelling: (options: GuidedSellingOptions) => void;
        tweakwiseRecommendations: (options: RecommendationsOptions) => void;
    }
}

declare function tweakwiseSuggestions(options: SuggestionsOptions);
declare function tweakwiseListerPage(options: ListerPageOptions): {
    setOpen: () => void;
    setQuery: (value: string) => void;
    destroy: () => void;
};
declare function tweakwiseGuidedSelling(options: GuidedSellingOptions);
declare function tweakwiseRecommendations(options: RecommendationsOptions);
/* eslint-disable no-use-before-define */

export type Dictionary<T> = Record<string, T | undefined>;

export type KeyboardType = "qwerty" | "azerty" | "qwertz";

/**
 * Configuration (twn-starter-config)
 */
export type Configuration = {
    instancekey?: string;
    input?: string | string[];
    output?: string;
    lang?: string;
    cid?: string;
    keyboard?: KeyboardType;
    sort?: string;
    pageSize?: number;
    filterTemplateId?: number;
    sortingTemplateId?: number;
    parameters?: string;
    parametersExcept?: string;
    profileKey?: string;
    filters?: FiltersOptions;
    products?: ProductsOptions;
    currency?: CurrencyOptions;
    pagination?: PaginationOptions;
    ui?: UiOptions;
    translations?: any;
    analytics?: string | AnalyticsOptions;
    navigation?: NavigationOptions;
    on?: Dictionary<Function>;
    endpointBaseUrl?: string;
    skipApiConfig?: boolean;
    grouped?: boolean;
    sourceName?: string;
    compileCustomTranslations?: boolean;
    components?: ComponentsOptions;
    auto?: boolean;
};

/**
 * ListerPageOptions
 */
export type ListerPageOptions = {
    // Binding options
    output?: string;

    // API options
    endpointBaseUrl?: string;
    instancekey?: string;
    query?: string;
    cid?: string;
    keyboard?: KeyboardType;
    sort?: string;
    pageSize?: number;
    filterTemplateId?: number;
    sortingTemplateId?: number;
    parameters?: string;
    parametersExcept?: string;
    profileKey?: string;
    selection?: Record<string, string | undefined>; // Initial selection
    grouped?: boolean;
    sourceName?: string;

    // UI options
    lang?: string;
    filters?: FiltersOptions;
    products?: ProductsOptions;
    currency?: CurrencyOptions;
    pagination?: PaginationOptions;
    ui?: UiOptions;
    translations?: any;
    compileCustomTranslations?: boolean;

    // Other options
    on?: Dictionary<Function>;
    analytics?: string | AnalyticsOptions;
    components?: ComponentsOptions;
};

export type FiltersOptions = {
    position?: "left" | "top";
    displayThreshold?: number;
    activeFirst?: boolean;
    leftCategory?: boolean;
};

export type ProductsOptions = {
    mobile?: number;
    tablet?: number;
    desktop?: number;
    mobileView?: "grid" | "list";
    tabletView?: "grid" | "list";
    desktopView?: "grid" | "list";
};

export type PaginationOptions = {
    type?: "default" | "button" | "infinite";
};

export type CurrencyOptions = {
    symbol?: string;
    symbolPosition?: "left" | "right";
};

export type UiOptions = {
    addToCartButton?: boolean;
    addToFavoritesButton?: boolean;
    colorSwatches?: boolean;
    productsViewButton?: boolean;
    scrollToTopOnFilter?: boolean;
    scrollToTopOnPagination?: boolean;
    scrollBehavior?: "smooth" | "instant";
    sliderInputFields?: boolean;
    closeSearchButton?: boolean;
};

export type AnalyticsOptions = {
    type?: string;
    args?: string | Array<object>;
};

export type NavigationOptions = {
    output?: string;
    cid?: string;
    parameters?: string;
    parametersExcept?: string;
    filters?: Dictionary<string>;
    sort?: string;
    pageSize?: number;
    filterTemplateId?: number;
    sortingTemplateId?: number;
};

export type ComponentsOptions = {
    productTile?: string;
};

export type LayoutItem =
    | "SearchPhrase"
    | "Category"
    | "FacetFilter"
    | "Product";

export type SearchPhrasesOptions = {
    categoryKey?: string;
    handle?: (event: { data: any }) => void;
};

export type CategoriesOptions = {
    handle?: (event: { data: any }) => void;
};

export type FacetFiltersOptions = {
    handle?: (event: { data: any }) => void;
};

export type CurrencyOptions = {
    symbol?: string;
    symbolPosition?: "left" | "right";
};

export type ComponentsConfiguration = {
    productTile?: string;
};

export type KeyboardType = "qwerty" | "azerty" | "qwertz";

export type SuggestionsOptions = {
    input: string;
    instancekey: string;
    cid: string;
    keyboard?: KeyboardType;
    lang?: string;
    profileKey?: string;
    latency?: number;
    layout?: LayoutItem[];
    searchPhrases?: SearchPhrasesOptions;
    categories?: CategoriesOptions;
    facetFilters?: FacetFiltersOptions;
    currency?: CurrencyOptions;
    parameters?: string;
    parametersExcept?: string;
    grouped?: boolean;
    on?: Record<string, Function>;
    sourceName?: string;
    components?: ComponentsConfiguration;
};

/* eslint-disable no-use-before-define */

export type GuidedSellingOptions = {
    instancekey: string;
    code: string;
    output: string;
    lang?: string;
    theme?: ThemeOptions;
    results?: ResultsOptions;
    ui?: UIOptions;
    translations?: any;
    currency?: CurrencyOptions;
    on?: Record<string, Function>;
    starterProductTile?: boolean;
    compileCustomTranslations?: boolean;
    components?: ComponentsConfiguration;
  };
  
  export type UIOptions = {
    autoAdvance?: boolean;
    scrollToTop?: boolean;
    scrollToTopOffset?: number;
  };
  
  export type ThemeOptions = {
    color?: string;
    rounded?: boolean;
  };
  
  export type ResultsOptions = {
    redirect?: string;
    handle?: (event: any) => void;
  };
  
  export type CurrencyOptions = {
    symbol?: string;
    symbolPosition?: 'left' | 'right';
  };
  
  export type ComponentsConfiguration = {
    productTile?: string;
  };
  
/* eslint-disable no-use-before-define */

export type RecommendationsOptions = {
    instancekey: string;
    output: string;
    lang?: string;
    featured?: FeaturedOptions;
    related?: RelatedOptions;
    products?: ProductsOptions;
    parameters?: string;
    parametersExcept?: string;
    translations?: any;
    currency?: CurrencyOptions;
    on?: Record<string, Function>;
    starterProductTile?: boolean;
    compileCustomTranslations?: boolean;
    components?: ComponentsConfiguration;
};

export type FeaturedOptions = {
    id?: string;
};

export type RelatedOptions = {
    productId?: string;
    groupKey?: string;
};

export type ProductsOptions = {
    mobile?: number;
    tablet?: number;
    desktop?: number;
};

export type CurrencyOptions = {
    symbol?: string;
    symbolPosition?: 'left' | 'right';
};

export type ComponentsConfiguration = {
    productTile?: string;
};



API response

interface IApiNavigation {
  facets?: IApiNavigationFacet[];
  items?: IApiProduct[];
  properties?: IApiNavigationProperties;
  redirects?: IApiNavigationRedirect[];
  searchbanners?: IApiNavigationSearchbanner[];
}

interface IApiNavigationProperties {
    nrofitems?: number;
    pagesize?: number;
    nrofpages?: number;
    currentpage?: number;
    selectedcategory?: number;
    searchterm?: string;
    suggestedsearchterm?: string;
    isdirectsearch?: boolean;
    isrootcategory?: boolean;
    pageurl?: string;
    reseturl?: string;
    sortfields?: ApiNavigationSortfield[];
}

interface IApiNavigationRedirect {
    url?: string;
}

interface IApiProduct {
    itemno?: string;
    title?: string;
    price?: number;
    brand?: string;
    image?: string;
    url?: string;
    origin?: ApiProductOrigin;
    labels?: ApiProductLabels;
    attributes?: ApiProductAttribute[];
}

interface IApiGroupedProduct {
    code?: string;
    items?: ApiProduct[];
}

interface IApiProductOrigin {
    type?: string;
    name?: string;
}

interface IApiProductAttribute {
    name?: string;
    values?: string[];
}

interface IApiNavigationAttribute {
    title?: string;
    alternatesortorder?: number;
    isselected?: boolean;
    nrofresults?: number;
    attributeid?: string;
    url?: string;
    imagetag?: string;
    children?: IApiNavigationAttribute[];
}

interface IApiNavigationSearchbanner {
    imageurl?: string;
    clickurl?: string;
    clicktarget?: string;
    type?: string;
    location?: string;
    catgoryid?: number;
}

interface IApiNavigationFacetsettings {
    facetid?: number;
    isvisible?: boolean;
    attributename?: string;
    urlkey?: string;
    title?: string;
    iscollapsible?: boolean;
    iscollapsed?: boolean;
    nrofshownattributes?: number;
    expandtext?: string;
    collapsetext?: string;
    ismultiselect?: boolean;
    multiselectlogic?: string;
    selectiontype?: string;
    nrofcolumns?: number;
    isnrofresultsvisible?: boolean;
    isinfovisible?: boolean;
    infotext?: string;
    containsclickpoints?: boolean;
    containsbuckets?: boolean;
    source?: string;
    prefix?: string;
    postfix?: string;
    cssclass?: string;
    issearchable?: boolean;
    searchplaceholder?: string;
    searchnoresultstext?: string;
}

interface IApiNavigationBucket {
    rangemin?: number;
    rangemax?: number;
    relativeamount?: number;
}
    
interface IApiNavigationClickpoint {
    value?: number;
 }
    
interface IApiNavigationFacet {
    facetsettings?: IApiNavigationFacetsettings;
    attributes?: IApiNavigationAttribute[];
    buckets?: IApiNavigationBucket[];
    clickpoints?: IApiNavigationClickpoint[];
}

interface IApiNavigationSortfield {
    title?: string;
    displaytitle?: string;
    order?: string;
    isselected?: boolean;
    url?: string;
}