Overview

FindMine's Product Detail Page (PDP) Widgets are lightweight JavaScript scripts capable of consuming a PDP's product information and rendering the resulting looks returned by FindMine's Complete the Look API in an intuitive UI on the page. This implementation guide will provide the steps required for a successful PDP Widget integration.

Please note that the Application ID mentioned in this guide is a prerequisite identifier used throughout the integration. It will be provided by your Customer Experience Manager during the onboarding process.

There are three primary steps in a PDP Widget implementation:

  1. Add the target DOM container with a predetermined ID to your PDP's HTML wherever you want FindMine's UI to render
  2. Create an object containing the required product information parameters and pass it into the PDP Widget via the window.FindMine.match({/* parameters */}) method
  3. Wrap the window.FindMine.match({/* parameters */}) method in a MutationObserver interface

We'll expand on each of these steps in the following sections.

1. Add the target DOM container to your PDP’s HTML

The target DOM container specifies where on the PDP the FindMine Widget will render. The Widget identifies the target container using a specific ID on the HTML element in the DOM. This ID is determined early in the onboarding process, and its default value is findmine-app-container.

The target container will be inserted as a <div> in your HTML like this:

<**div** id="findmine-app-container" />

2. Gather required product information parameters used to call the window.FindMine.match({/* parameters */}) method

There are two types of required product parameters:

  1. Unique product identifiers specific to your FindMine implementation
  2. Generic product parameters used by the FindMine Widget

Unique Product Identifiers