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. They will be provided by your Customer Experience (CX) Manager during the onboarding process.

<aside> 💡

While this document focuses on PDP implementation, the widget may be placed on other places on your site, like Product Listing Pages (PLP), Category Pages, or the Homepage.

</aside>

There are two primary steps in a PDP Widget implementation:

  1. Adding the required <script> tag to the head of your PDP’s HTML page
  2. Adding the <findmine-widget> web component to your PDP's HTML wherever you want FindMine's UI to render

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

1. Add the required <script> tag to the head of your PDP’s HTML

This is a boilerplate example of the script to be included in your HTML and will return a generic widget. Your implementation may require a custom widget, and the actual script URL will be provided by your CX Manager:

<script
  type="module"
  src="<https://jsv4.fmv3.findmine.com/_base/module.js>" // This may vary
></script>

2. Add the <findmine-widget> web component to your PDP's HTML

The target web component specifies the location on the PDP where the FindMine Widget will render. The web component will be inserted in your HTML like this:

<findmine-widget
    application="{INSERT_YOUR_APP_ID}"    // Provided by your CX manager
    product_id="{INSERT_PRODUCT_ID}"
    product_color_id="{INSERT_PRODUCT_COLOR_ID}"
    product_in_stock="{INSERT_PRODUCT_IN_STOCK}"
    product_on_sale="{INSERT_PRODUCT_ON_SALE}"
    region="{INSERT_REGION}"
    language="{INSERT_LANGUAGE}"
>
</findmine-widget>

Make sure to include both the opening tag (<findmine-widget>) and the closing tag (</findmine-widget> ). A self-closing tag (<findmine-widget />) is invalid:

<!-- Invalid -->
<findmine-widget
    application="{INSERT_YOUR_APP_ID}"
    product_id="{INSERT_PRODUCT_ID}"
/>

<!-- Valid -->
<findmine-widget
    application="{INSERT_YOUR_APP_ID}"
    product_id="{INSERT_PRODUCT_ID}"
></findmine-widget>