Custom Heading

customHeading
Object default: null Ability to change text headings on Product Details.

$(%DIV_ELEMENT%).preferabliPD({
    ...configuration_settings,
    customHeading:{
  			block: STRING,
        profile: STRING,
  			characteristics: STRING,
  			flavor: STRING,
				foodpairing: STRING
    },
});
// As String
$(%DIV_ELEMENT%).preferabliPD({
    ...configuration_settings,
    customHeading:{
        profile: 'NEW PROFILE HEADING',
    },
});

Display Block Headings

show_block_headings
Boolean default: true Enable/Disable showing each block heading of the product profile

$(%DIV_ELEMENT%).preferabliPD({
  ...configuration_settings,
    show_block_headings: false,
});

Language Support

lang
String default: en Supported languages.

English (en)
Spanish (es)
French (fr)
German (de)
Italian (it)
Korean (ko)
Portuguese (pt)

$(%DIV_ELEMENT%).preferabliPD({
  ...configuration_settings,
    lang: 'es',
});

Characteristics Customization

characteristics
String | Object default: text Customization of the display of the Characteristics display.

$(%DIV_ELEMENT%).preferabliPD({
  ...configuration_settings,
    characteristics: STRING | OBJ,
});

// As String
$(%DIV_ELEMENT%).preferabliPD({
  ...configuration_settings,
    characteristics: 'scale',
});

// As Object
$(%DIV_ELEMENT%).preferabliPD({
  ...configuration_settings,
  characteristics: {
 		display:'scale',
		bgFill: '#000', // Valid Hex Color
  },
});

Scale switches the quantitative characteristics to a set of bars instead of words. For example:

Height and Width can be added to the characteristics object to set the dimensions in pixels (px). For example:

characteristics:{
display: 'scale',
bgFill: '#464356',
height: '20px',
width: '100px',
}

Flavor/Food Pairing Customization

flavor | foodpairing
Object default: null Customization of the display of the Flavor Profile or Food Pairing display and icons.

$(%DIV_ELEMENT%).preferabliPD({
  ...configuration_settings,
  flavor|foodpairing:{
    display: 'row', // options: row | column
    gap: 'xl', // options: sm | md | lg | xl
    item:{
        display:'column', // options: row | column
        class: '%CUSTOM_CLASSES%',
        spacing: %PX%,
    },
    icon: {
        class: '%CUSTOM_CLASSES%',
        fill: '#000',
    }
},
});

Logo Customization

Use Preferabli Logo

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

$(%DIV_ELEMENT%).preferabliPD({
    ...configuration_settings,
    display: {
      ...displaySettigs,
    	use_preferabli_logo: true,
    }
});

Logo Placement

logo_placement
String default: bottom-right Position of the logo displayed when plugin is fully rendered.

$(%DIV_ELEMENT%).preferabliPD({
  ...configuration_settings,
  logo_placement: 'top-left'|'top-right'|'top-center'|'bottom-left'|'bottom-right'|'bottom-center',
});

Logo Inline Style

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

$(%DIV_ELEMENT%).preferabliPD({
  ...configuration_settings,
  logo_inline_style: '%STYLE%',
});

Logo Class

logo_class
String *default: null * Additional CSS Classes for logo.

$(%DIV_ELEMENT%).preferabliPD({
  ...configuration_settings,
  logo_class: '%CSS_CLASS%',
});

Logo Content Before|After

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

$(%DIV_ELEMENT%).preferabliPD({
  ...configuration_settings,
  logo_before|logo_after: '<HTML></HTML> | Similar Tasting Products',
});