Getting Started

Search Discover is a Javascript plugin that allows a user to search for a product, whether or not it is in stock, and receive relevant information such as similar tasting products and taste profiles. This plugin is very useful for when a shopper knows a particular product that is not stocked and is looking for a good taste alternative that is in stock.

Requirements

• jQuery 3 or later (loaded before the plugin script)
• A Preferabli integration_id
• The compiled plugin script and stylesheet

Add the plugin

Load jQuery, then the plugin script and stylesheet. Place empty host elements where the launcher buttons should appear.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://sd.preferabli.com/preferabli.searchdiscover.js"></script>
<link rel="stylesheet" href="https://sd.preferabli.com/preferabli.searchdiscover.style.css" />

<div id="sd-search"></div>

integration_id is required. Every other option has a default. See Configuration for the full list.

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

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

cta_button defaults to false (no injected Preferabli CTA). Set cta_button: true or cta_button: { label: '…' } to inject one — positioned bottom-right on the window by default. Override with position / anchor, or use position: 'inline' for flow layout. See Configuration.

Button types

type sets the first view when the pane opens.

Commands

$('#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);

With the default cta_button: false, call show / hide from your own click handlers. Pass trigger so Mixpanel can attribute the open to that control. See Configuration.

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