Zizr Frontend Plugin API Reference

This guide provides detailed information on the advanced configuration options available for the Zizr frontend plugin. These options allow you to customize the behavior and appearance of the plugin to suit your store's needs.

Configuration Parameters

The Zizr frontend plugin can be configured using various parameters, either as data-* attributes in the HTML element or as query parameters in the URL to override the values. The data attributes are specified in kebab-case, while query parameters use camelCase prefixed with zizr.

Below is a list of available configuration parameters:

Basic Configuration

• injectionSelector (data-injection-selector, zizrInjectionSelector):
  Type: string
  Description: CSS selector for the element where the plugin will be injected.

• injectBefore (data-inject-before, zizrInjectBefore):
  Type: boolean
  Description: Determines whether the plugin should be injected before the specified element.

• requireModelStyleId (data-require-model-style-id, zizrRequireModelStyleId):
  Type: boolean
  Description: If true, requires the model style ID for certain features.

• productRetailerIdentifier (data-product-retailer-identifier, zizrProductRetailerIdentifier):
  Type: string
  Description: Unique identifier for the product within the retailer's system.

• retailerIdentifier (data-retailer-identifier, zizrRetailerIdentifier):
  Type: string
  Description: Unique identifier issued to the retailer. Defaults to the domain name if not provided.

• languageFallback (data-language-fallback, zizrLanguageFallback):
  Type: string
  Description: Fallback language code if the specified language is not supported.

• language (data-language, zizrLanguage):
  Type: string
  Description: ISO code for the display language. Defaults to en.

• host (data-host, zizrHost):
  Type: string
  Description: Host URL for the Zizr API.

• storeType (data-store-type, zizrStoreType):
  Type: string
  Description: Type of store (e.g., online, physical).

• cssLocation (data-css-location, zizrCssLocation):
  Type: string
  Description: URL location for custom CSS.

• briefStyles (data-brief-styles, zizrBriefStyles):
  Type: string
  Description: Styles for brief product recommendations.

• iframeDefaultHeight (data-iframe-default-height, zizrIframeDefaultHeight):
  Type: string
  Description: Default height for iframes.

• iframeUseDynamicHeight (data-iframe-use-dynamic-height, zizrIframeUseDynamicHeight):
  Type: string
  Description: Determines if dynamic iframe height should be used.

• iframeUrlRequiredParts (data-iframe-url-required-parts, zizrIframeUrlRequiredParts):
  Type: string
  Description: Required parts of the iframe URL for functionality.

• storeFeature (data-store-feature, zizrStoreFeature):
  Type: string
  Description: Specific features enabled for the store.

Modal Configuration

• modalInjectionSelector (data-modal-injection-selector, zizrModalInjectionSelector):
  Type: string
  Description: CSS selector for modal injection point.

• modalRefererSelector (data-modal-referer-selector, zizrModalRefererSelector):
  Type: string
  Description: Selector to determine the referer for modal actions.

• modalRefererAttribute (data-modal-referer-attribute, zizrModalRefererAttribute):
  Type: string
  Description: Attribute used to identify the modal referer.

Advanced Options

• enableDynamicDomChanges (data-enable-dynamic-dom-changes, zizrEnableDynamicDomChanges):
  Type: boolean
  Description: Enables dynamic DOM changes when true.

• variationIdSelector (data-variation-id-selector, zizrVariationIdSelector):
  Type: string
  Description: Selector for the variation ID element.

• variationId (data-variation-id, zizrVariationId):
  Type: string
  Description: ID of the product variation.

• modelStyleId (data-model-style-id, zizrModelStyleId):
  Type: string
  Description: Model style ID, required if URL identification is not configured.

• modelId (data-model-id, zizrModelId):
  Type: string
  Description: Unique identifier for the model.

Theming and Styling

• theme (data-theme, zizrTheme):
  Type: ThemeType ("standard" | "minimal" | "ynap")
  Description: Theme style for the plugin.

• debug (data-debug, zizrDebug):
  Type: boolean
  Description: Enables debug mode for additional logging. Defaults to false.

• baseUrl (data-base-url, zizrBaseUrl):
  Type: string
  Description: Base URL for the plugin's assets.

• referer (data-referer, zizrReferer):
  Type: string
  Description: Referer information for analytics and tracking.

• token (data-token, zizrToken):
  Type: string
  Description: Authentication token for secure API access.

• recommendationMock (data-recommendation-mock, zizrRecommendationMock):
  Type: string
  Description: Mock data for recommendations during development.

• defaultSizeGroup (data-default-size-group, zizrDefaultSizeGroup):
  Type: string
  Description: Default size group for recommendations.

• authIframeUrl (data-auth-iframe-url, zizrAuthIframeUrl):
  Type: string
  Description: URL for authentication iframe.

• historyStyle (data-history-style, zizrHistoryStyle):
  Type: "wardrobe" | "bestMatch"
  Description: Style of history tracking.

• loginType (data-login-type, zizrLoginType):
  Type: LoginType ("external" | "internal" | "guest")
  Description: Type of login flow used.

Visual and Animation Settings

• modalAnimation (data-modal-animation, zizrModalAnimation):
  Type: AnimationTypes
  Description: Animation style for modals.

• textAnimation (data-text-animation, zizrTextAnimation):
  Type: AnimationTypes
  Description: Animation style for text elements.

• showTooltip (data-show-tooltip, zizrShowTooltip):
  Type: boolean
  Description: Determines if tooltips are shown.

• tooltipAlignText (data-tooltip-align-text, zizrTooltipAlignText):
  Type: boolean
  Description: Aligns text within tooltips.

• tooltipAnimation (data-tooltip-animation, zizrTooltipAnimation):
  Type: AnimationTypes
  Description: Animation style for tooltips.

Custom Login Parameters

• authProvider (data-auth-provider, zizrAuthProvider):
  Type: string
  Description: Custom authentication provider name.