Skip to main content

Integrate Partner Favorite Product Personalization on your Landing Page

This document describes the methods on how to integrate Partner Favorite Product Personalization on your landing page. There are two methods you can use to do this.

Sample Favorite Product Box:

Available Methods:

Setting up an HTML container

One of the methods is setting up an HTML container that the customization script can insert the product form to. In this method, the customization script will insert the Favorite Product box dynamically if the partner has selected a favorite product on their Customize your Landing Page settings. The code below should be shown hidden by default.

 

<section class="section buy-box-section">
  <div class="page-width">
    <div id="FAVORITE_PRODUCT_FORM" style="display: none;">
      <div class="product product--small product--thumbnail grid grid--1-col grid--2-col-tablet">
        <div class="grid__item product__media-wrapper">
          <div id="FAVORITE_IMAGE"></div>
        </div>
        <div class="product__info-wrapper grid__item">
          <div class="product__info-container product__info-container--sticky">
            <div class="product__title">
              <h2 class="h1"><span id="FAVORITE_NAME"></span></h2>
            </div>
            <div class="no-js-hidden" role="status">
              <div class="price price--large price--show-badge">
                <div class="price__container">
                  <div class="price__regular">
                    <span class="visually-hidden visually-hidden--inline">Regular price</span>
                    <span class="price-item price-item--regular"><span id="FAVORITE_PRICE"></span></span>
                  </div>
                  <div class="price__sale">
                    <span class="visually-hidden visually-hidden--inline">Regular price</span>
                    <span>
                      <s class="price-item price-item--regular"></s>
                    </span>
                    <span class="visually-hidden visually-hidden--inline">Sale price</span>
                    <span class="price-item price-item--sale price-item--last"><span id="FAVORITE_COMPAREPRICE"></span></span>
                  </div>
                  <small class="unit-price caption hidden">
                    <span class="visually-hidden">Unit price</span>
                    <span class="price-item price-item--last">
                      <span></span>
                      <span aria-hidden="true">/</span>
                      <span class="visually-hidden">&nbsp;per&nbsp;</span>
                      <span></span>
                    </span>
                  </small>
                </div>
                <span class="badge price__badge-sale color-accent-2"> Sale </span>
                <span class="badge price__badge-sold-out color-inverse"> Sold out </span>
              </div>
            </div>
            <div>
              <form method="post" action="/cart/add" accept-charset="UTF-8" class="installment caption-large" enctype="multipart/form-data">
                <input type="hidden" name="form_type" value="product">
                <input type="hidden" name="utf8" value="✓">
                <div id="FAVORITE_VARIANTID"></div>
              </form>
            </div>
            <div class="product-form__input product-form__quantity">
              <label class="form__label" for="Quantity-template--14587319615531__main"> Quantity </label>
              <quantity-input class="quantity">
                <button class="quantity__button no-js-hidden" name="minus" type="button">
                  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" role="presentation" class="icon icon-minus" fill="none" viewBox="0 0 10 2">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M.5 1C.5.7.7.5 1 .5h8a.5.5 0 110 1H1A.5.5 0 01.5 1z" fill="currentColor">
                  </path></svg>
                </button>
                <input class="quantity__input" type="number" name="quantity" min="1" value="1">
                <button class="quantity__button no-js-hidden" name="plus" type="button">
                  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" role="presentation" class="icon icon-plus" fill="none" viewBox="0 0 10 10">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M1 4.51a.5.5 0 000 1h3.5l.01 3.5a.5.5 0 001-.01V5.5l3.5-.01a.5.5 0 00-.01-1H5.5L5.49.99a.5.5 0 00-1 .01v3.5l-3.5.01H1z" fill="currentColor"></path>
                  </svg>
                </button>
              </quantity-input>
            </div>
            <div>
              <div class="product-form">
                <form method="post" action="/cart/add" accept-charset="UTF-8" class="form" enctype="multipart/form-data" novalidate="novalidate" data-type="add-to-cart-form">
                  <input type="hidden" name="form_type" value="product">
                  <input type="hidden" name="utf8" value="✓">
                  <div id="FAVORITE_VARIANTID"></div>
                  <div class="product-form__buttons">
                    <button type="submit" name="add" class="product-form__submit button button--full-width button--secondary">
                      <span>Add to cart </span>
                    </button>
                  </div>
                </form>
              </div>
            </div>
            <div class="product__description rte quick-add-hidden">
              <div id="FAVORITE_DESCRIPTION"></div>
            </div>
            <div id="FAVORITE_PDPURL"></div>
          </div>
        </div>
      </div>  
    </div>
  </div>
</section>

 

Here are the list of available variables for Favorite Product:

 

{FAVORITE_NAME} The name of the product.
{FAVORITE_PRODUCT_ID} The ID of the product. For Shopify stores, this would be the Variant ID of the product. More information here.
{FAVORITE_IMAGE_COUNT} The count of all the product images.
{FAVORITE_HANDLE} The slug for the product. In Shopify stores, this would be the handle object of the product. More information here.
{FAVORITE_PRICE} The current price of the product.
{FAVORITE_COMPAREPRICE} The original price of the product. If the original price is on sale, this can be used for comparison.
{FAVORITE_DESCRIPTION} The description of the product. This includes HTML that was set.
{FAVORITE_PDPURL} The full URL of the product.
{FAVORITE_IMAGE_1} to {FAVORITE_IMAGE_N} where N = the count The URL to the product image. If the product count is 3, {FAVORITE_IMAGE_1}, {FAVORITE_IMAGE_2} and {FAVORITE_IMAGE_3} can be used to get the URL of product images.



Setting up Product Box via Javascript Event

Another method one can use is by listening to a Javascript Event which fires when a partner has selected a favorite product in their Landing Page settings. The event name is and “inflektion-product-favorite” and passes along the product data along with the event.

 

<script>
window.addEventListener("inflektion-product-favorite", function(event) {
  let product = event.detail.product;
  // The event.detail.product object contains the product data
  // Here is an example of the product object structure
  /*
  {
    "product_name": "Sample Product",
    "product_id": 1001,
    "product_image_count": 3,
    "product_images": [
        "https://example.com/products/sample-product/image1.jpg",
        "https://example.com/products/sample-product/image2.jpg",
        "https://example.com/products/sample-product/image3.jpg"
    ],
    "product_handle": "sample-product",
    "product_price": "$200.00 USD",
    "product_compare_price": "$249.99 USD",
    "product_description": "<h2>Lorem ipsum</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus feugiat, molestie ipsum et, consequat nibh. Etiam non elit dui. Nullam vel eros sit amet arcu vestibulum accumsan in in leo. Sed nec euismod nisi. Nam varius orci ac felis tincidunt, a ultrices mi tempus</p><p>Aliquam et neque feugiat, molestie nisi a, ornare metus. Vestibulum lacinia imperdiet neque, convallis porta turpis sodales sit amet. Suspendisse nec cursus nibh, et dictum mauris. In eget augue libero.</p>",
    "product_url": "https://example.com/products/sample-product"
  }
  */
}, false);
</script>

 

The product data can be accessed via the event.detail.product property. Here is an example usage that creates a Shopify add to cart form. Note that the example below is designed to generate an Add to Cart form for Shopify stores. This can be used as a reference for creating similar forms on other e-commerce sites. 

 

The example below will append the product box form from the “buildShopifyForm” function into the “favorite-product-box” div where you added on the page. 

 

<div id="favorite-product-box"></div>
<script>
(function(){
var buildShopifyForm = function(product) {
  let divBox = document.createElement('div');
  let divBoxHtml = `
<section class="section shopify-section">
  <div class="page-width">
    <div>
      <div class="product product--small product--thumbnail grid grid--1-col grid--2-col-tablet">
        <div class="grid__item product__media-wrapper">
          <div><img src="${product.product_images[0]}" style="width:100%;height:auto;" /></div>
        </div>
        <div class="product__info-wrapper grid__item">
          <div class="product__info-container product__info-container--sticky">
            <div class="product__title">
              <h2 class="h1"><span>${product.product_name}</span></h2>
            </div>
            <div class="no-js-hidden" role="status">
              <div class="price price--large price--show-badge">
                <div class="price__container">
                  <div class="price__regular">
                    <span class="visually-hidden visually-hidden--inline">Regular price</span>
                    <span class="price-item price-item--regular"><span>${product.product_price}</span></span>
                  </div>
                  <div class="price__sale">
                    <span class="visually-hidden visually-hidden--inline">Regular price</span>
                    <span>
                      <span class="price-item price-item--regular">${product.product_price}</span>
                    </span>
                    <span class="visually-hidden visually-hidden--inline">Sale price</span>
                    <span class="price-item price-item--sale price-item--last"><span>${product.product_compare_price}</span></span>
                  </div>
                </div>
              </div>
            </div>
            <div class="product-form__input product-form__quantity">
              <label class="form__label"> Quantity </label>
              <quantity-input class="quantity">
                <input class="quantity__input" type="number" name="quantity" min="1" value="1">
              </quantity-input>
            </div>
            <div>
              <div class="product-form">
                <form method="post" action="/cart/add" accept-charset="UTF-8" class="form" enctype="multipart/form-data" novalidate="novalidate" data-type="add-to-cart-form">
                  <input type="hidden" name="form_type" value="product">
                  <input type="hidden" name="utf8" value="✓">
                  <div><input name="id" type="hidden" value="${product.product_id}" /></div>
                  <div class="product-form__buttons">
                    <button type="submit" name="add" class="product-form__submit button button--full-width button--secondary">
                      <span>Add to cart </span>
                    </button>
                  </div>
                </form>
              </div>
            </div>
            <div class="product__description rte quick-add-hidden">
              <div>${product.product_description}</div>
            </div>
            <div><a href="${product.product_url}">View Full Details</a></div>
          </div>
        </div>
      </div>  
    </div>
  </div>
</section>`;
  divBox.innerHTML = divBoxHtml;
  return divBox;
};
window.addEventListener("inflektion-product-favorite", function(event) {
  let product = event.detail.product;
  const form = buildShopifyForm(product);
  document.getElementById('favorite-product-box').insertAdjacentHTML('afterBegin', form.outerHTML);
}, false);
})(window);

 

This method can also be used for WooCommerce site using the product details coming from “inflektion-product-favorite” event. The example below will append the product box form from the “buildWooCommerceForm” function into the “favorite-product-box” div where you added on the page. 

 

<div id="favorite-product-box"></div>
<script>
(function(){
var buildWooCommerceForm = function(product) {
  let divBox = document.createElement('div');
  let divBoxHtml = `
<section class="section shopify-section">
  <div class="page-width">
    <div>
      <div class="product product--small product--thumbnail grid grid--1-col grid--2-col-tablet">
        <div class="grid__item product__media-wrapper">
          <div><img src="${product.product_images[0]}" style="width:100%;height:auto;" /></div>
        </div>
        <div class="product__info-wrapper grid__item">
          <div class="product__info-container product__info-container--sticky">
            <div class="product__title">
              <h2 class="h1"><span>${product.product_name}</span></h2>
            </div>
            <div class="no-js-hidden" role="status">
              <div class="price price--large price--show-badge">
                <div class="price__container">
                  <div class="price__regular">
                    <span class="visually-hidden visually-hidden--inline">Regular price</span>
                    <span class="price-item price-item--regular"><span>${product.product_price}</span></span>
                  </div>
                  <div class="price__sale">
                    <span class="visually-hidden visually-hidden--inline">Regular price</span>
                    <span>
                      <span class="price-item price-item--regular">${product.product_price}</span>
                    </span>
                    <span class="visually-hidden visually-hidden--inline">Sale price</span>
                    <span class="price-item price-item--sale price-item--last"><span>${product.product_compare_price}</span></span>
                  </div>
                </div>
              </div>
            </div>
            <div class="product-form__input product-form__quantity">
              <label class="form__label"> Quantity </label>
              <quantity-input class="quantity">
                <input class="quantity__input" type="number" name="quantity" min="1" value="1">
              </quantity-input>
            </div>
            <div>
              <div class="product-form">
                <form class="cart" action="${product.product_url}" method="post" enctype="multipart/form-data">
                  <div class="quantity">
                    <input type="number" class="input-text qty text" name="quantity" value="1" title="Qty" size="4" min="1" max="" step="1" placeholder="" inputmode="numeric" autocomplete="off">
                  </div>
                  <button type="submit" name="add-to-cart" value="${product.product_id}" class="single_add_to_cart_button button alt wp-element-button">Add to cart</button>
                </form>
              </div>
            </div>
            <div class="product__description rte quick-add-hidden">
              <div>${product.product_description}</div>
            </div>
            <div><a href="${product.product_url}">View Full Details</a></div>
          </div>
        </div>
      </div>  
    </div>
  </div>
</section>`;
  divBox.innerHTML = divBoxHtml;
  return divBox;
};

window.addEventListener("inflektion-product-favorite", function(event) {
  let product = event.detail.product;
  const form = buildWooCommerceForm(product);
  document.getElementById('favorite-product-box').insertAdjacentHTML('afterBegin', form.outerHTML);
}, false);
})(window);

Another method for Shopify stores is to use Shopify’s Ajax Product API to get the product details. This method will use the product_handle property returned by the “inflektion-product-favorite” event. More information can be found here. Here is an example for this method:

 

<div id="favorite-product-box"></div>
<script>
(function(){
  (function(){
var buildShopifyForm = function(product) {
  let divBox = document.createElement('div');
  let divBoxHtml = `
<section class="section shopify-section">
  <div class="page-width">
    <div>
      <div class="product product--small product--thumbnail grid grid--1-col grid--2-col-tablet">
        <div class="grid__item product__media-wrapper">
          <div><img src="${product.product_images[0]}" style="width:100%;height:auto;" /></div>
        </div>
        <div class="product__info-wrapper grid__item">
          <div class="product__info-container product__info-container--sticky">
            <div class="product__title">
              <h2 class="h1"><span>${product.product_name}</span></h2>
            </div>
            <div class="no-js-hidden" role="status">
              <div class="price price--large price--show-badge">
                <div class="price__container">
                  <div class="price__regular">
                    <span class="visually-hidden visually-hidden--inline">Regular price</span>
                    <span class="price-item price-item--regular"><span>${product.product_price}</span></span>
                  </div>
                  <div class="price__sale">
                    <span class="visually-hidden visually-hidden--inline">Regular price</span>
                    <span>
                      <span class="price-item price-item--regular">${product.product_price}</span>
                    </span>
                    <span class="visually-hidden visually-hidden--inline">Sale price</span>
                    <span class="price-item price-item--sale price-item--last"><span>${product.product_compare_price}</span></span>
                  </div>
                </div>
              </div>
            </div>
            <div class="product-form__input product-form__quantity">
              <label class="form__label"> Quantity </label>
              <quantity-input class="quantity">
                <input class="quantity__input" type="number" name="quantity" min="1" value="1">
              </quantity-input>
            </div>
            <div>
              <div class="product-form">
                <form method="post" action="/cart/add" accept-charset="UTF-8" class="form" enctype="multipart/form-data" novalidate="novalidate" data-type="add-to-cart-form">
                  <input type="hidden" name="form_type" value="product">
                  <input type="hidden" name="utf8" value="✓">
                  <div><input name="id" type="hidden" value="${product.product_id}" /></div>
                  <div class="product-form__buttons">
                    <button type="submit" name="add" class="product-form__submit button button--full-width button--secondary">
                      <span>Add to cart </span>
                    </button>
                  </div>
                </form>
              </div>
            </div>
            <div class="product__description rte quick-add-hidden">
              <div>${product.product_description}</div>
            </div>
            <div><a href="${product.product_url}">View Full Details</a></div>
          </div>
        </div>
      </div>  
    </div>
  </div>
</section>`;
  divBox.innerHTML = divBoxHtml;
  return divBox;
};

window.addEventListener("inflektion-product-favorite", function(event) {
  let product = event.detail.product;
  let product_handle = product.product_handle;
  fetch(window.Shopify.routes.root + `products/${product_handle}.js`)
    .then(response => response.json())
    .then(product => {
      const form = buildShopifyForm(product);
      document.getElementById('favorite-product-box').insertAdjacentHTML('afterBegin', form.outerHTML);
    });
}, false);
})(window);
)();
</script>

 

Enabling Favorite Products for Influencers to Choose

To enable favorite products for influencers, we need to import products from your store to Inflektion. There are two methods to use in order to achieve this. One is by adding the “Inflektion Favorite” tag to the products on shopify stores and another one is to send a copy of the products to import in CSV format.

Shopify Stores

To add a tag the shopify products, simply follow the steps below:

  1. Go to Shopify Admin
  2. Click Products
  3. Click the name of the product to edit or create a new one
  4. In the Product Organization section, add or select a Tag called “Inflektion Favorite” (must be spelled exactly like this for Inflektion to enable this)
  5. Click Save

More information about Shopify Tags can be found here.

 

Inflektion will periodically update the list of favorite products based on those tagged as “Inflektion Favorite”.

Non-Shopify Stores

For Non-Shopify stores, the favorite products to be imported should be in a CSV and should follow the format below. An example of the CSV file can be found here. Send the CSV file to be imported to support@inflektion.ai.

 

Product ID,Product Name,Product Image Count,Product Images,Product Handle,Product Price,Product Compare Price,Product Description,Product URL

1001,Sample Product,3,"https://example.com/products/sample-product/image1.jpg,https://example.com/products/sample-product/image2.jpg,https://example.com/products/sample-product/image3.jpg",sample-product,$200.00 USD,$249.99 USD,"<h2>Lorem ipsum</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus feugiat, molestie ipsum et, consequat nibh. Etiam non elit dui. Nullam vel eros sit amet arcu vestibulum accumsan in in leo. Sed nec euismod nisi. Nam varius orci ac felis tincidunt, a ultrices mi tempus</p><p>Aliquam et neque feugiat, molestie nisi a, ornare metus. Vestibulum lacinia imperdiet neque, convallis porta turpis sodales sit amet. Suspendisse nec cursus nibh, et dictum mauris. In eget augue libero.</p>",https://example.com/products/sample-product

 

Related to

Was this article helpful?