Product Details JS Plugin - Getting Started

What is required to implement:

A synced inventory collection ID (provided by Preferabli)
An integration ID (provided by Preferabli)
Ability to add/edit your theme
Ability to grab product ID/SKU from your e-commerce platform
Website whitelisted for use, please reach out to [email protected] for CORS whitelisting

How to implement:

Include the following within the head of your website:

jQuery: https://pd.preferabli.com/jquery.preferabli.pd.js
Plugin stylesheet: https://pd.preferabli.com/preferabli.pd.style.css

<script type="text/javascript" src="https://pd.preferabli.com/jquery.preferabli.pd.js"></script>
<link rel="stylesheet" href="https://pd.preferabli.com/preferabli.pd.style.css"/>

Create an empty div with id=product-pd for Preferabli Product Details app to render:
```
<div id="product-pd"></div>
```

Add the following snippet of code at bottom of website or below the div. Be sure to update variables with your custom ids:

<script type="text/javascript">
	// jQuery Version 
	(function() {
				
  			// Shows All Product Information
      	jQuery('#product-pd').preferabliPD({
          integration_id: %INTEGRATION_ID%,
          product_id: `%PRODUCT_ID%`,
        });
				
  			// Shows Select Product Information, comma seperated, or array
        jQuery('#product-pd').preferabliPD('all|profile,characteristics,flavor,foodpairing',{
          integration_id: %INTEGRATION_ID%,
          product_id: `%PRODUCT_ID%`,
        });

    })(jQuery);

		// Vanilla JS Version

    var _pd = new PreferabliPD('#product-pd', {
      integration_id: %INTEGRATION_ID%,
      product_id: `%PRODUCT_ID%`,
      types: ['all', 'profile','characteristics','flavor','foodpairing'] //Input for showing select product detail information,
    });
		_pd.displayDetails(); // Renders product details
		
</script>

jQuery is our preferred method of implementation for Product Details plugin.

Product Detail Blocks

You have the ability to display all, multiple or single product informational block to the user. If you dont set the type of block(s), by default the application will render all production informational blocks (profile, characteristics, and flavor profile, and food pairing).

Profile

Profile will display the product's region, primary grape, type based on product's category.

Characteristics

Characteristics will display the how the product taste, based on product's category there are different levels of taste from sweetness to oak to body of product.

Flavor

Flavor Profile will display the product's overall primary taste profile, like vanilla, smoke, and earthy.

Food Pairings

Food Pairings will display the what food(s) will pair well with.