Similar Tasting Products Options

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.

 var stp = $(%DIV_ELEMENT%).preferabliSTP({
    ...configuration_settings,
		renderProductCards: (lookups) => {
        // You can replace the function below with Promise function to allow for fetching a card
        // Static HTML Template or run HTTP request to grab template
        const fetchWineCardLocal = new Promise((resolve, reject) => {
            resolve([...lookups.map((lookup) => {
                var tempString = `%_YOUR_CARD_TEMPLATE_%`;
                return tempString;
            })]);
        });
        return fetchProductCardLocal.then((htmlString) => (htmlString)).catch((error) => (error));
    }
 });

Products Container

productCardsContainer
_Object default: null Allows the change from our standard implementation to one that fits your site, so if you are on WooCommerce, youll add from the example below.

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

var stp = $(%DIV_ELEMENT%).preferabliSTP({
    ...configuration_settings,
    productCardsContainer: {
        element: 'ul',
        class: 'products'
        id: 'container_id',
    },
    });

On Render Complete

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

var stp = $(%DIV_ELEMENT%).preferabliSTP({
    ...configuration_settings,
    renderProductCards: (lookups) => {
        // You can replace the function below with Promise function to allow for fetching a card
        // Static HTML Template or run HTTP request to grab 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
    }
});

Developer Mode

devMode
Boolean default: false For websites that must be styled "live", an optional parameter can be added the getProducts function to hide STP using simple display:none styling.

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

When devMode is enabled, the STP is called on the front-end, but hidden. To show the results, use your browser's inspector to remove the display:none from the stp__container div.

Open Product Page in New Tab

openNewTab
Boolean default: false Option to open the product page in a new tab when using Preferabli STP product cards.

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

Show Decimal Places

showDecimalPlaces
Boolean default: true Enable decimals to be shown on product price display when using Preferabli STP product cards.

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

Number of Decimal Places

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

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

Hide Heading

hideHeading
Boolean default: false To enable/disable showing heading on plugin

var stp = $(%DIV_ELEMENT%).preferabliSTP({
    ...configuration_settings,
    hideHeading: true,
});

Custom Heading Text

customText
Object default: null Custom heading text for single or multiple product recommendation return.

var stp = $(%DIV_ELEMENT%).preferabliSTP({
    ...configuration_settings,
    customText: {
        single: 'YOUR STRING HERE',
        multiple: 'YOUR STRING HERE',
    }
});

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 stp = $(%DIV_ELEMENT%).preferabliSTP({
    ...configuration_settings,
    lang: 'es'
});

Use Preferabli Logo

use_preferabli_logo
Boolean default: false Preferabli logo will be displayed versus the Powered By Preferabli logo.

var stp = $(%DIV_ELEMENT%).preferabliSTP({
    ...configuration_settings,
    display: {
      ...displaySettigs,
    	use_preferabli_logo: true,
    }
});

Logo Position

logo_placement
String default: top Position of the logo displayed when plugin is fully rendered.

var stp = $(%DIV_ELEMENT%).preferabliSTP({
    ...configuration_settings,
    display: {
      ...displaySettigs,
    	logo_placment: 'bottom',
    }
});

Powered By Preferabli & Preferabli Logo Options

logo_option
Numeric default: 1 Options for the Powered By Preferabli logo displayed in the app (options 1-8 listed below). See all of the choices at https://brand.preferabli.com/

Powered By Wordmark
1. Two Tone Color - Green Powered By/Blue Preferabli
2. Two Tone Color - Green Powered By/White Preferabli
3. Single Color - Blue Powered By/Preferabli
4. Single Color - White Powered By/Preferabli

Powered By Logomark
5. Two Tone Color - Green Powered By/Blue P
6. Two Tone Color - Green Powered By/White P
7. Single Color - Blue
8. Single Color - White

Preferabli Wordmark
1. Two Tone Color - Green Colon/Blue Preferabli
2. Two Tone Color - White Colon/Blue Preferabli
3. Single Color - Blue Preferabli
4. Single Color - White Preferabli

Preferabli Logomark
5. Two Tone Color - Green Colon/Blue P/Preferabli text
6. Two Tone Color - Green Colon/White P/Preferabli text
7. Single Color - Blue
8. Single Color - White

var stp = $(%DIV_ELEMENT%).preferabliSTP({
    ...configuration_settings,
    display: {
      ...displaySettigs,
    	logo_option: '2',
    }
});

Logo Before|After

logo_before|after
String default: null Display text or HTML before or after Preferabli branding.

var stp = $(%DIV_ELEMENT%).preferabliSTP({
    ...configuration_settings,
    display: {
      ...displaySettigs,
    	logo_before|logo_after: '<HTML></HTML> | Similar Tasting Products',
    }
});

Logo Inline Style

logo_inline_style
String default: null Additional CSS styling for Powered by Preferabli or Preferabli Logo.

var stp = $(%DIV_ELEMENT%).preferabliSTP({
    ...configuration_settings,
    display: {
      ...displaySettigs,
    	logo_inline_style: '%CSS STYLES',
    }
});

Logo Class

logo_class
String default: null Additional CSS Classes for logo.

var stp = $(%DIV_ELEMENT%).preferabliSTP({
    ...configuration_settings,
    display: {
      ...displaySettigs,
    	logo_class: '%CSS CLASSES%',
    }
});

Separator

separator
Object default: null Display additional horizontal separator.

var stp = $(%DIV_ELEMENT%).preferabliSTP({
    ...configuration_settings,
    display: {
      ...displaySettigs,
    	separator: {
      	show: 'both | top | bottom',
				style: {
          border_width,
          border_color,
          border_style,
          spacing_top,
					spacing_bottom
       // ----- if you want to do individual styling for each separator ---
       		top: {
            border_width,
            border_color,
            border_style,
            spacing_top,
            spacing_bottom
          },
          bottom: {
            border_width,
            border_color,
            border_style,
            spacing_top,
            spacing_bottom
          }
        },
      },
    }
});