Preferabli WebsiteSupport
Documentation
Start typing to search…

Guided Rec Options

Many visual aspects of Guided Recommendations can be customized to better fit your website and needs. Customizations can be split into two types: functional overrides and CSS overrides. Functional overides must be added to the results page and any additional pages that have modal butrons, and the overrides may be different on each page.

Custom Text

customText
Object default: null

Ability to change certain text on the Guided Recommendations modal and results displays.

var preferabliGR = $(%DIV_ELEMENT%).preferabliGR({
    ...configuration_settings,
    customText:{
        questionnaireHeading // Text at the top of the questionnaire modal: default: Instant Recommendations
        resultsHeading // Text at the top of the results: default: Instant Recommendation Results
        resultsLoader // Text for the loader display on the Results page, default: Loading
        modifySelectionsBtn // Button in the results sidebar: default: Modify Search
        getRecsBtn // Button displayed at the bottom of the questionnaire on last question, default: Get Recs
        wineCategories // display custom text for wine categories
    },
});

Language Support

lang
String default: en Supported languages

  • English (en)
  • Spanish (es)
  • French (fr)
  • German (de)
  • Italian (it)
  • Korean (ko)
  • Portuguese (pt)
  • Portuguese - Brazil (pt_BR)
  • Portuguese - Portugal (pt_PT)
  • Spanish - Guatemala (es_GT)
var preferabliGR = $(%DIV_ELEMENT%).preferabliGR({
  ...configuration_settings,
    lang: 'es',
});

Results Page Redirect URL

resultsRedirect
String Either full http url or relative path to Results page

var preferabliGR = $(%DIV_ELEMENT%).preferabliGR({
  ...configuration_settings,
    resultsRedirect: '%HTTPS% | %RELATIVE_PATH%',
});

Display Result Per Page

resultsPerPage
Number default: 6 Number of results display per type per page. Value between 1 - 6.

var preferabliGR = $(%DIV_ELEMENT%).preferabliGR({
  ...configuration_settings,
    resultsPerPage: '4',
});

Open Product in New Tab

openNewTab
Boolean default: false Option to open the product pages in a new tab with Preferabli cards

var preferabliGR = $(%DIV_ELEMENT%).preferabliGR({
  ...configuration_settings,
    openNewTab: 'true',
});

Show Question Numbers

showQuestionNumbers
Boolean default: true

var preferabliGR = $(%DIV_ELEMENT%).preferabliGR({
  ...configuration_settings,
    showQuestionNumbers:false,
});

Show Types Plural

typesPlural
Boolean default: false Converts types to plural format.

var preferabliGR = $(%DIV_ELEMENT%).preferabliGR({
  ...configuration_settings,
    typesPlural:true,
});

Developer Mode

devMode
Boolean default: false Will hide the results from displaying on desired page with display:none appended to outer element

var preferabliGR = $(%DIV_ELEMENT%).preferabliGR({
  ...configuration_settings,
    devMode:true,
});

Result Side Menu Top Position

sidemenuStickyTop
String | Number default: 50px Ability to set the top position of the sidemenu when page is scrolled.

var preferabliGR = $(%DIV_ELEMENT%).preferabliGR({
  ...configuration_settings,
    sidemenuStickyTop:'100px',
});

Results Side Menu Position

sidemenuStatic
Boolean default: false

Note:
If your website has tranform: translate3d(0,0,0) property on any of the parent elements of Instant Rec, will disable fixed position of side menu.

var preferabliGR = $(%DIV_ELEMENT%).preferabliGR({
  ...configuration_settings,
    sidemenuStatic:true,
});

Logo Placement

logo_placement
String : results | sidebar default: results Ability to set the where you would like the Preferabli logo to be placed on results screen

Results Layout

layout
String : row | column default: row Ability to set the layout of results.

Show Decimal Places

showDecimalPlaces
Boolean default: true Will turn on/off the decimals on price display

var preferabliGR = $(%DIV_ELEMENT%).preferabliGR({
    ...configuration_settings,
    showDecimalPlaces: true,
});

Number of Decimal Places

numDecimalPlaces
Number default: 2 Number of decimals to show on price display when using Preferabli product cards

var preferabliGR = $(%DIV_ELEMENT%).preferabliGR({
    ...configuration_settings,
    numDecimalPlaces: 2,
});

Default Modal Question

modifyQuestionShow
Number default: Price Range Question number that will be displayed when the Questionnaire modal is opened on the results page, default: Price

var preferabliGR = $(%DIV_ELEMENT%).preferabliGR({
    ...configuration_settings,
    modifyQuestionShow: 4,
});

Custom Styling

customStyling
Object default: null

All of the options for customization for Guided Recommendations.
Listed below are the available options to change with your custom classes. Custom Styling supports a multiple classes per option.

customStyling: {

questionnaire:{
    heading
    container
    selector
    selectorLabel
    rangeTrack
    rangeTrackActive
    rangeDrag
},

results:{
    heading
    container
    productCard
    productCardBtn
    rowEl, // Only used when renderProductCards is use
    rowClass, // Only used when renderProductCards is use
},

sidemenu: {
    item
    itemActive
    modifySearchBtn
    backToTopBtn
}

basicButton // default button class for all buttons
loadingColor // HEX Color Code

}

Custom Product Cards

renderProductCards
Function default: null Allows for rendering of their own product cards. This is a callback function that supplies an array of lookup objects. Youll need to return a promise with array of HTML strings for each product card. If a product has multiple formats, this will display each format as individual cards.

For styling, please ensure that your cards are responsive for mobile as well.

preferabliGR.preferabliGR('show', {
    type: 'results',
    element: $('#guidedrec'),
    renderProductCards: (lookups) => {
        // You can replace the function below with Promise function to allow for fetching a card
        // Static HTML Template
        const fetchWineCardLocal = new Promise((resolve, reject) => {
            resolve([...lookups.map((lookup) => {
                var tempString = `%_YOUR_CARD_TEMPLATE_%`;
                return tempString;
            })]);
        });
        return fetchWineCardLocal.then((htmlString) => (htmlString)).catch((error) => (error));
    }
    });

If you need have specific class that wraps the display of products that can be added using customStyling option or if you need to change the 'div' to another element you can, as shown below.

preferabliGR.preferabliGR('show', {
    type: 'results',
    element: $('#guidedrec'),
    renderProductCards: (lookups) => { ... },
    customStyling:{
        results:{
            rowTagEl: 'ul',  /// Change DIV element to another DOM Element for ROW
            rowClass: 'products', /// Class is added on to the row classes
        }
    },
});

On Render Complete

onRenderComplete
Function default: null | renderProductCards option is required Allows for running of function on completion of render.

preferabliGR.preferabliGR('show', {
    type: 'results',
    element: $('#guidedrec'),
    renderProductCards: (lookups) => {
        // You can replace the function below with Promise function to allow for fetching a card
        // Static HTML Template
        const fetchWineCardLocal = new Promise((resolve, reject) => {
            resolve([...lookups.map((lookup) => {
                var tempString = `%_YOUR_CARD_TEMPLATE_%`;
                return tempString;
            })]);
        });
        return fetchWineCardLocal.then((htmlString) => (htmlString)).catch((error) => (error));
    },
    onRenderComplete: function (){
        // Function will run on render completion
    }
    });

Sorting

enable_sort
Boolean default: false Allow sorting on the recommendations page by recommendation, price ascending/descending

var preferabliGR = $(%DIV_ELEMENT%).preferabliGR({
    ...configuration_settings,
    enable_sort: true,
});

Placeholder

placeholder
Object default: null Allows customization of the placeholder template, if response from API times out or errors, has no results, or default.

text : Allowed as plain text string or html string
textSize : Required if text is plain text string, Allowed to be string or numeric value, ie: 36 | '36' | '36px'
redirectButton: {
    text : Plain text String,
    url : Full URL or relative path,
},
instantRecButton:{
    text: // Plain string text that replaces `Update Your Selections`
},
timeout: numeric value of number seconds, default: null, minimum: 10 | maximum: 30
{
  ...config,
  placeholder:{
		defaults:{
			text:'Try our quiz to get your recommendations.',
			instantRecButton:{
        text:'Find Your Recommendation'
      },
    },
		noresults: {
      text: '<h1>Copy That Displays on NoResults Placeholder</h1>',
      instantRecButton:{
          text: 'Update That Button Text'
      },
    },
    error: {
        text: '<h1>Copy That Displays on Error Placeholder</h1>',
        redirectButton:{
            text: 'Return Home',
            url: 'https://www.YOUR_WEBSITE_DOMAIN.com',
        }
        timeout: 20,
    }
  }
}

Default Copy for Placeholder based on type

// Default Headings
Main Heading: Get Personalized Recommendations, Instantly.
Sub Heading: Find what you're looking for within seconds. Simply indicate your type of wine. Add geography and grape if you like. Guided Recommendations will then present your choices, all within your price range.
// No Results Headings
Main Heading: We were unable to find any recommendations based on your selections.
Sub Heading: Let's try some different selections.
// Error Headings
Main Heading: We are unable to process your recommendation at this time.
Sub Heading: Please try adjusting your selections.

Updated 9 months ago