Configuration

Pass an options object to $.fn.preferabliSearchDiscover. integration_id is required. Every other option has a default.

$('#sd-search').preferabliSearchDiscover({
  integration_id: '11610',
  type: 'search',
});

Brand colors and pane layout are CSS variables, not plugin options. See Styling.

Quick reference

Product and recipe buttons identify the item with a single merchant id: merchant_variant_id or merchant_recipe_id.

Which options each type needs

integration_id

Type: Number
Required

Preferabli client identity. Provided by Preferabli.

$('#sd-search').preferabliSearchDiscover({
  integration_id: 11610,
});

collection_id

Type: String or Number
Default: none
Provided by Preferabli.

channel_id

Type: String or Number
Default: none
Provided by Preferabli.

type

Type: String
Default: 'search'

Chooses the first view when the launcher button opens the pane.

$('#sd-food').preferabliSearchDiscover({
  integration_id: '11610',
  type: 'search',
});

lang

Type: String
Default: 'en'

Supported languages

Hyphenated codes such as es-GT and zh-CN resolve to es_GT and zh_CN. Unknown codes fall back to the primary language when available (for example fr-FR → fr), otherwise en.

Use changeLanguage to update every button and reload Lokalise.

$('#sd-search').preferabliSearchDiscover({
  integration_id: '11610',
  lang: 'es',
});

placement

Type: String
Default: 'right'

lokalise_text

Type: Object
Default: {}

Override any UI string by Lokalise slug. Keys are slugs; values are the copy to show. Host overrides win over remote and bundled catalogs.

$('#sd-search').preferabliSearchDiscover({
  integration_id: '11610',
  type: 'search',
  lokalise_text: {
    'page.search.title': 'Find a wine',
    'page.search.inputplaceholder': 'Search wines',
  },
});

Common slugs: page.search.title (default English: Search & Discover), page.search.inputplaceholder, product.pane.tab.food_pairings, product.gotoproduct. See the bundled files under src/locale/ for the full list.

showPrice

Type: Boolean
Default: true

When true, shows price on the product hero and on product cards in search / pairings / similar results (when the API returns a price).

showBin

Type: Boolean
Default: false

When true, shows aisle or bin from the product lookup on the product hero, if that value is present.

showDetailKey

Type: Boolean
Default: true

On the Taste Facts tab:

numberPriceDecimals

Type: Number
Default: 0

Fraction digits when formatting a shown price (0 → $89, 2 → $89.00).

search

Type: Object
Default:

search: {
  allowed_search: ['tags', 'products', 'recipes'],
  allowed_products: [],
  collection_ids: [],
}

Only applies when the user is on the search view.

allowed_search values

Empty tabs are hidden automatically when a search returns no rows for that type.

$('#sd-search').preferabliSearchDiscover({
  integration_id: '11610',
  collection_id: '794101',
  type: 'search',
  search: {
    allowed_search: ['tags', 'recipes'],
    allowed_products: ['wine'],
  },
});

cta_button

Type: Boolean or Object
Default: false

Controls whether the plugin injects a Preferabli CTA button (class sdjs__launcher). Default is off — use your own button and call show / hide.

When label is empty, the plugin picks a locale string from type:

Positioned CTAs pin to that corner/side. anchor: 'window' mounts on document.body with position: fixed. anchor: 'element' keeps it in the host with position: absolute (the host is set to position: relative if it was static).

Custom host button (default)

<button type="button" id="my-search">Search wines</button>
<div id="sd-search"></div>

$('#sd-search').preferabliSearchDiscover({
  integration_id: '11610',
  collection_id: '794101',
  type: 'search',
  // cta_button defaults to false
});

$('#my-search').on('click', () => {
  $('#sd-search').preferabliSearchDiscover('show', { trigger: 'header_search' });
});

$('#my-close').on('click', () => {
  $('#sd-search').preferabliSearchDiscover('hide', { trigger: 'header_search' });
});

Injected Preferabli CTA

// Defaults to bottom-right on the window
$('#sd-search').preferabliSearchDiscover({
  integration_id: '11610',
  type: 'search',
  cta_button: { label: 'Find a wine' },
});

// Same as above — position/anchor are already the defaults
$('#sd-search').preferabliSearchDiscover({
  integration_id: '11610',
  type: 'search',
  cta_button: true,
});

// Custom HTML label + host classes
$('#sd-search').preferabliSearchDiscover({
  integration_id: '11610',
  type: 'search',
  cta_button: {
    label: '<img src="/icons/search.svg" alt="" /> <span>Find a wine</span>',
    className: ['my-site-cta', 'my-site-cta--search'],
  },
});

// Inline in the host element
$('#sd-search').preferabliSearchDiscover({
  integration_id: '11610',
  type: 'search',
  cta_button: { label: 'Find a wine', position: 'inline' },
});

// Absolute inside a sized host, center left
$('#sd-food-wrap').preferabliSearchDiscover({
  integration_id: '11610',
  type: 'search',
  cta_button: {
    label: 'Find a Wine',
    position: 'center-left',
    anchor: 'element',
  },
});

Style the injected CTA with --sdjs-brand-btn-bg / --sdjs-brand-btn-color, your className hooks, or .sdjs__launcher. Offset from the edge with --sdjs-launcher-inset (default 20px). See Styling.

label HTML is inserted as-is — only pass markup you trust. Mixpanel button_label is the plain-text version of label.

Payload includes type, foodpairing_target, merchant_variant_id, merchant_recipe_id, collection_id, channel_id, and lang.

opt_out_tracking

Type: Boolean
Default: false

When false, Disables tracking across the plugin, this can be integrated with cookie allowance.

onShow and onHide

Type: Function
Default: none

$('#sd-search').preferabliSearchDiscover({
  integration_id: '11610',
  type: 'search',
  onShow(options) {
    console.log('opened', options.type);
  },
  onHide() {
    console.log('closed');
  },
});

Commands

Call commands as a string method on the same jQuery selection.

$('#sd-search').preferabliSearchDiscover('show');
$('#sd-search').preferabliSearchDiscover('show', { trigger: 'header_search' });
$('#sd-search').preferabliSearchDiscover('hide');
$('#sd-search').preferabliSearchDiscover('changeLanguage', 'es');
$('#sd-search').preferabliSearchDiscover('optOutTracking', true);

Use show / hide with your own buttons when cta_button is false (the default). See cta_button.

$.fn.preferabliSD is the same method as $.fn.preferabliSearchDiscover.