Skip to content

Common integration process notes

TomShenhav edited this page Dec 5, 2018 · 2 revisions

1. Initializing the widget

During the app startup of the WebView instance, create a WebView (or WKWebView), and initialize a FITAWebWidget instance with it by calling the constructor. The WebView is supposed to keep running in the background, including the widget instance.

Initiate the widget container page load (loading HTML+JS parts in WebView) by calling FITAWebWidget::load and wait for FITAWebWidgetHandler::onWebWidgetReady. Then create the widget (that's inside the WebView) by FITAWebWidget::create(...) and wait for the FITAWebWidgetHandler::onWebWidgetInit callback. At that point the widget is initialized and ready for use.

2. Loading the product info

When a user arrives at a PDP (Product Detail Page), collect the required product information (product serial, available sizes, etc.) and use it to reconfigure the widget. Call FITAWebWidget::reconfigure(productSerial, options) and wait for FITAWebWidgetHandler::onWebWidgetProductLoad (success - the product is supported by FitAnalytics) or FITAWebWidgetHandler::onWebWidgetProductLoadError (failure - the product is not supported by FitAnalytics)

3. Initial (immediate) recommendation

Once we know that the product is supported, we can request an initial size recommendation. Call the FITAWebWidget::recommend(productSerial?, options?) and wait for the FITAWebWidgetHandler::onWebWidgetRecommend(widget, productSerial, size, details) callback. If the product configuration has not changed, we can call the plain recommend() function without any arguments, as the widget remembers its configuration. In any case, deciding to pass the same options again should not have any negative effect. In the meantime, you can also show or activate a Fit Finder button/link on your PDP. The button depends on the design of the PDP.

4. Opening the widget

When a user taps the Fit Finder link, we call the FITAWebWidget::open(...) (again no arguments are needed if the product configuration has not changed). Currently, the widget will request another recommendation and then possibly load some more required assets. Once everything is in place and the widget interface is completely visible, it will trigger the FITAWebWidgetHandler::onWebWidgetOpen(widget, productSerial). You can show some "busy" animation in the meantime and when the onWebWidgetOpen callback is called, display the WebView placed on top of the rest of the UI.

5. Closing (and re-opening) the widget

When a user finishes interacting with the widget (by tapping the close button and/or add-to-cart button), the call FITAWebWidgetHandler::onWebWidgetOpen(widget, productSerial, size, details) is triggered and the WebView can be hidden again. If the user received a valid recommendation during the interaction with the widget, the recommendation will be passed as a part callback arguments (size+details).

It is not necessary to completely destroy and re-initialize the WebView that contains the widget during a single session of a user navigating across various PDPs. The widget loads assets once and caches them and further actions should only trigger requests for product info and for recommendations or sometimes when, for example, the product category changes, it loads additional UI modules. While that may sometimes make opening times a bit longer, aggressive caching is in place, and thus the open operation will be quick. Generally speaking, it should be safe to presume that once the onWebWidgetOpen callback is called everything is in place and we can display the WebView immediately.

6. Loading another product and requesting an immediate recommendation

When a user navigates to another PDP we can request the widget to load the product info for that PDP's product by calling FITAWebWidget::reconfigure(productSerial, options). Once we receive information about the state of support, we can call FITAWebWidget::recommend() in order to received an immediate recommendation for the new product and display the Fit Finder button.