«FitPhoto» Integration

Size: px

Start display at page:

Download "«FitPhoto» Integration"

Ethelbert Cameron
5 years ago
Views:

1 «FitPhoto» Integration Version 4.3 EN Date 21/08/2012 Company FittingBox 2010 FittingBox Reserved 1 / 20

2 Table of contents 1. Basic Setup Loading FitPhoto Synchronous integration (Recommended) Asynchronous integration (most frequently used) JavaScript API FitPhoto creation: FitPhoto.create Try frames: FitPhoto.tryOn Check frames availability: FitPhoto.checkIfExists Open Change Picture popup : FitPhoto.changePicture Get user infos: FitPhoto.getContext Generate tryon images: FitPhoto.getImageURL Remove: FitPhoto.remove Clear user cookie : FitPhoto.clearCookie Events Examples Product page sample Catalog page sample TRY button sample Catalog Scroll Follow sample Popup Integration sample Frames SKU Number Locale chains Google Analytics Tracking Notice FittingBox Reserved 2 / 20

1. Basic Setup 1. Include JavaScript Library <script src="http://libs.us.youarethemodel.com/js/fitphoto/fbx.fitphoto.js.php?

3 1. Basic Setup 1. Include JavaScript Library <script src=" type="text/javascript"> cid : your customerid provided by FittingBox Don t know what your customerid is? Please contact your account manager. 2. Setup HTML container <div id="fitphotocontainer"> <a href= >Please install latest version of Flash Player</a> </div> You may use any id for the container. Any content of the FitPhoto container will be replaced if the module loads successfully. *As FitPhoto requires Flash Player 10, it is a good practice to place a link to update Flash Player inside this container. 3. Create FitPhoto <script language="javascript"> FitPhoto.create ('FitPhotoContainer', {width: 321, glassid: ' ' ); The glassid parameter is optionnal, but we recommend to set the sku of the first visible frames on your web page. Corresponding frames will load automatically. If not set, a message will inform the user there is no available frames to try on. Where to go next : Javascript Library loading : Loading FitPhoto Create method : FitPhoto creation: FitPhoto.create Detailed JavaScript API : JavaScript API Frames sku details : Frames SKU Number 2010 FittingBox Reserved 3 / 20

4 2. Loading FitPhoto The JavaScript library can be integrated in different ways, described below : Asynchronous integration Synchronous integration Pros Does not block the rest of the webpage. Might display the module faster. Cons Might delay the display of the module. Might delay the rest of the webpage Synchronous integration (Recommended) Standard (script in the <head> tag) <script src=" type="text/javascript"> </head> 2.2. Asynchronous integration (most frequently used) Method 1 : without specific JavaScript library (script in the <head> tag) <script type="text/javascript"> var scripttag = document.createelement('script'); scripttag.type = 'text/javascript'; scripttag.src = ' ; headelement = document.getelementsbytagname('head')[0]; headelement.appendchild(scripttag); </head> * Do not work on safari 2+ Method 2 : with JQuery library (script in the <head> tag) <script type="text/javascript"> $.getscript( ); </head> * Do not work on safari 2+ Method 3 : standard (script in the end of <body> tag) <script src=" type="text/javascript"> </body> 2010 FittingBox Reserved 4 / 20

5 3. JavaScript API The JavaScript library exposes an API to perform actions on the module: - check frames availability - try frames - open the change picture popup - get user picture ID, etc. * Do not use methods not described in this document FitPhoto creation: FitPhoto.create JavaScript : FitPhoto.create(containerID, configuration); Parameters : - container id : string id of the HTML container - configuration : object o width (required) : integer wanted width of the module (height is proportionnaly adapted) Dimensions o Maximum : 327 (Width) x 515 (Height) pixels o Minimum : 228 (Width) x 355 (Height) pixels Only the width is specified. The height is automatically calculated from the width, so that the module ratio stays proportional : height = ((width-19)* )+19 * Do not set the size outside the ranges specified above. o glassid : string frames sku number to try on at startup more infos : Frames SKU Number o localechain : string the locale chain is in the form : country_region (en_us, nb_no, etc.) this option is only available for multilingual skins more infos : Locale chains o gender : char (M/F) default model gender to show to user useful if you have men and women catalog filters o clearcookie : Boolean optionally set this to true to clear user session cookie 2010 FittingBox Reserved 5 / 20

6 Events : - onload : when the module is loaded and ready - onchangepicture : when user adds a new picture, or adjust his current picture More infos : JavaScript API : Events The FitPhoto.create method call can be placed anywhere. It can be placed in the head of the document using different methods, like wrapped in a window.onload method, or with the use of a third party library like jquery. It can also be placed in another function call, for example if you want the FitPhoto module to appear in a html popup. (ColorBox, FancyBox, etc.) window.onload sample code : <script language="javascript"> window.onload = function () { FitPhoto.create ( 'FitPhotoContainer', { width: 321, glassid: ' ' ); ; </head> Jquery sample code : <script language="javascript"> $(function () { FitPhoto.create ( 'FitPhotoContainer', { width: 321, glassid: ' ' ); ); </head> Colorbox sample code : (displaying an external html page) <script language="javascript"> $(function () { $(". virtual-try-on ").colorbox(); ); </head> <body> <a class="virtual-try-on" title="virtual try-on" href="../fitphoto.html">virtual try-on</a> 2010 FittingBox Reserved 6 / 20

7 3.2. Try frames: FitPhoto.tryOn JavaScript : FitPhoto.tryOn (sku, callback); FitPhoto module will try to load and display specified frames. If «sku» does not correspond to available frames, a message will inform the user. sku callback Required parameter Optionnal Corresponds to SKU Number of the frames to display Function called on success arguments : - Sku : sku number // the module loads the pair of glasses SKU1: FitPhoto.tryOn('SKU1'); // the module loads the pair of glasses SKU2: FitPhoto.tryOn('SKU2', function (sku) { alert ( tryon success : + sku); ); // implementation on a HTML button click : <input type="button" onclick="fitphoto.tryon ('SKU1');" value="try" /> 3.3. Check frames availability: FitPhoto.checkIfExists On call to this method, an ajax request will call a webservice on our server to check the availability of specified frames. There is no need for the FitPhoto module to be loaded, as it is a JavaScript AJAX method. So it can be used before the FitPhoto.create method call. JavaScript : FitPhoto.checkIfExists (sku, callback); Method to check availability of the specified frames Sku callback Required parameter Required parameter SKU Number of the frames Function called on result with two arguments : - response : Boolean (true if frames exist) - sku : sku number <script language="javascript"> FitPhoto.checkIfExists ( 'someskunumber', function (response, sku) { alert ("Frames " + sku + " available to try on : " + response); ); See TRY button sample 2010 FittingBox Reserved 7 / 20

8 3.4. Open Change Picture popup : FitPhoto.changePicture JavaScript : FitPhoto.changePicture (); The module opens the change picture popup 3.5. Get user infos: FitPhoto.getContext JavaScript : FitPhoto.getContext (); Returns user informations as a JSON object : - picturetype (null, model, photo, webcam, or facebook) 3.6. Generate tryon images: FitPhoto.getImageURL JavaScript : FitPhoto.getImageURL (sku); Returns : - false if user has no picture selected - url to generate tryon image Sku Optionnal SKU Number of the frames * Your domain or IP must be authorized to access the generated tryon url The returned url will generate a tryon image on our server. As the domain or IP address requesting this url must be authorized, this url can not be shared publicly. Therefore we recommend to store the generated image on your server. Sku parameter is optionnal, allowing to get an url to generate tryon images for any valid sku, like in this example : <script language="javascript"> var url = FitPhoto.getImageURL (); if (url == false) { alert ('user has no picture!'); else { $('<img />').attr('src', url + 'someskunumber').append('tryons'); $('<img />').attr('src', url + 'anotherskunumber').append('tryons'); 3.7. Remove: FitPhoto.remove JavaScript : FitPhoto.remove (); Destroys FitPhoto instance and dom elements See Popup Integration sample 2010 FittingBox Reserved 8 / 20

9 3.8. Clear user cookie : FitPhoto.clearCookie JavaScript : FitPhoto.clearCookie (); Clear user data saved in FlashPlayer cookie After a call to this method, the next time the FitPhoto module loads, it will not load previously saved pictures. User will be considered as new user. More infos on FlashPlayer cookies : You may also use the clearcookie parameter of the FitPhoto.create method to force the FitPhoto module to clear user cookie at start. This is useful in case of a Kiosk application, where we do not want users to retrieve previous user session. Combined with an inactivity timer, the FitPhoto.clearCookie method and FitPhoto.create clearcookie parameter allow this. See FitPhoto.create parameters 3.9. Events Event Parameters When onload None FitPhoto is loaded and ready onchangepicture pictureid picturetype null if user has deleted all his pictures pictureid is a MD5 hash, unique for a user picture with adjust values. So when a user adjusts a picture, this id will change likely. - User choosed a model - User added a new picture - User adjusted his current picture onpopupopen None Any FitPhoto popup opened (Zoom, ChangePicture, Adjust, ) onpopupclose None Any FitPhoto popup closed (Zoom, ChangePicture, Adjust, ) Events allows you to execute JavaScript functions when certain key actions occur in the FitPhoto module. FitPhoto.create method allows to set callback functions on events: 2010 FittingBox Reserved 9 / 20

10 <script language="javascript"> FitPhoto.create ( 'FitPhotoContainer', { width: 321, onload:function() { // FitPhoto is ready, onchangepicture: function(pictureid, picturetype) { // user changed his picture ; The events can also be registered outside FitPhoto.create method: <script language="javascript"> FitPhoto.events.onLoad = function () { // FitPhoto is ready Instead of using inline functions, you may also use predefined functions: <script language="javascript"> function onfitphotochangepicture (id, type) { alert (id + " - " + type); FitPhoto.events.onChangePicture = onfitphotochangepicture; See Popup Integration sample 2010 FittingBox Reserved 10 / 20

4. Examples 4.1. Product page sample Demonstration URL: http://demo.fittingbox.

11 4. Examples 4.1. Product page sample Demonstration URL: Rayban_4098 sku is available to try on, so when users select a picture, the module will automatically load the frames. <html xmlns=" lang="en" xml:lang="en"> <head> <title>product page sample</title> <script src=" type="text/javascript"> </head> <body> <div id="mymodule"></div> <script type="text/javascript"> window.onload = function () { FitPhoto.create ( mymodule, { width: 321, glassid: Rayban_4098 ); </body> </html> 2010 FittingBox Reserved 11 / 20

4.2. Catalog page sample Demonstration URL: http://demo.fittingbox.com/our-catalog?

12 4.2. Catalog page sample Demonstration URL: The same module shows different frames without reloading Buttons anywhere on the page allow to change the frames displayed in FitPhoto Users open a catalog page which integrates a module displaying several frames: The module launches automatically with the page with frames Rayban_4098. If the user clicks on a button called TRY, the module will change the frames to Dior_4108. <html xmlns=" lang="en" xml:lang="en"> <head> <title>catalog page sample</title> <script src=" type="text/javascript"> </head> <body> <div id="mymodule"></div> <input type="button" id= trybutton onclick="fitphoto.tryon( Dior_4108 );" value="try" /> <script type="text/javascript"> window.onload = function () { FitPhoto.create ( mymodule, { width: 321, glassid: Rayban_4098 ); </body> </html> 2010 FittingBox Reserved 12 / 20

4.3. TRY button sample not available Frames available The following sample automatically hides TRY buttons corresponding to unavailable frames.

13 4.3. TRY button sample not available Frames available The following sample automatically hides TRY buttons corresponding to unavailable frames. <input type= button id= trybutton_rayban_2140 value= TRY /> <input type= button id= trybutton_pepejeans_ value= TRY /> <script type="text/javascript"> window.onload = function () { var skus = new Array ('RAYBAN_2140', 'PEPEJEANS_3036-3'); for (i=0; i<skus.length; i++) { FitPhoto.checkIfExists (skus[i], function (response, sku) { if (!response) { var button = document.getelementbyid ('trybutton_' + sku); if (button) button.style.display = "none"; ); 2010 FittingBox Reserved 13 / 20

14 4.4. Catalog Scroll Follow sample This sample demonstrates how to integrate FitPhoto module in a scrolling catalog page, so that the module follows page scroll to stay visible. See for a live sample. Requires jquery.scrollfollow.js library <head>  <script type="text/javascript" src=" <script type="text/javascript" src=" <script type="text/javascript" src="jquery.scrollfollow.js"> <script type="text/javascript"> $(function(){ FitPhoto.create ("FitPhotoContainer", {width:300, glassid:" "); $('#FitPhotoScrollFollow').scrollFollow ({container:"catalog", offset:20); ); </head> <body> <div id="main" style="width:960px;position:relative;">  <div id="catalog" style="float:left;width:600px;height:1200px;"> <h3>catalog</h3> <a href="#" alt="tryon" onclick="fitphoto.tryon(' ');">try </a><br /><br /> <a href="#" alt="tryon" onclick="fitphoto.tryon(' ');">try </a> </div>  <div id="right" style="float:left;width:300px;">  <div><h3>this content is fixed</h3></div>  <div id="fitphotoscrollfollow" style="position:absolute;"> <div id="fitphotocontainer"><a href=" install latest version of Flash Player</a></div> </div> </div> <div style="clear:both;"></div> </div> </body> 2010 FittingBox Reserved 14 / 20

15 4.5. Popup Integration sample The following sample demonstrate FitPhoto integration in a javascript dynamic popup. As FitPhoto module also make use of popups on some user interaction (zoom, picture change, adjust, ), this sample uses onpopupopen and onpopupclose events to prevent unwanted stacked popups visual effect. 1. HTML Header : FitPhoto / JQuery libraries integration, and popup CSS <head>  <script type="text/javascript" src=" <script type="text/javascript" src=" <style> #popup-overlay { background:none repeat scroll 0 0 black; opacity:0.7; width:100%; height:100%; margin:0; padding:0; position:absolute; left:0; top:0; #popup { background-color:white; width:310px;height:520px; margin:0 auto; padding:10px; position:relative; top:100px; </style> </head> 2010 FittingBox Reserved 15 / 20

16 2. HTML BODY : html elements and javascript code <body> <input type="button" value="open Popup" id="button" /> <div id="popup-overlay"> <div id="popup"> <h3>fitphoto Dynamic Popup</h3> </div> </div> <script type="text/javascript"> $(function() { $('#button').click (showhidepopup); hideoverlay (); ); function showhidepopup(event) { if ($('#fitphotocontainer').length == 0) { showoverlay (); $('#popup').append('<div id="fitphotocontainer"></div>'); $('#fitphotocontainer').append('<div id="fitphoto"></div>'); $('#popup').show(function() { FitPhoto.create ('fitphoto', { width: 321, glassid: Rayban_4098, onpopupopen: hideoverlay, onpopupclose: showoverlay ); ); else { hideoverlay (); FitPhoto.remove(); $('#fitphotocontainer').remove(); function hideoverlay () { $('#popup-overlay').css ({'visibility':'hidden'); $('#popup-overlay').off ('click'); function showoverlay () { $('#popup-overlay').css ({'visibility':'visible'); $('#popup-overlay').click (showhidepopup); </body> 2010 FittingBox Reserved 16 / 20

It tracks each frames from the digitization to their display on the module. One reference corresponds to one model of frames with a unique color.

17 5. Frames SKU Number sku Definition Unique reference for the specific frames. This reference is defined by the customer. description Corresponds to SKU Number noted in your order package for digitalization. This reference is used to identify the different glasses on your website. It tracks each frames from the digitization to their display on the module. One reference corresponds to one model of frames with a unique color. If 2 frames of the same style are in 2 different colors, there are 2 different SKU Numbers. SKU Number catalogue linked to order package 1 FittingBox 2 Virtual try-on of the called frames STOCK Unique SKU numbers enable you to track correctly the adequate frames Shipment of the physical frames (with SKU Number) 4 3 Purchase of the frames (linked to SKU Number) USER Fig.1 Interaction with the SKU Number Unique SKU Numbers Fig.2 Example: Order package 2010 FittingBox Reserved 17 / 20

18 6. Locale chains The standard FitPhoto skins are delivered in 10 languages to choose from. In case of a custom multilingual skin, you can also specify the locale chain parameter. Locale chain is in the form : country_region The supported values are listed below : Locale Chain en_us English / American fr_fr French de_de German es_es Spanish sv_se Swedish da_dk Danish fi_fi Finnish nb_no Norvegian nl_nl Neederland pt_br Portuguese Brazil If you need another language localization, please contact us FittingBox Reserved 18 / 20

19 7. Google Analytics Tracking To better integrate the FitPhoto module in your website tracking goals and conversions, we recommend to add a page track call along with the FitPhoto.tryOn method call. We focus here on the use of Google Analytics Tracking solution, but you can easily do the same with any tracking solution. Assuming you use Google Analytics and correctly added the library to your website (see for details), here is a sample that add a page track for any user tryon interaction with the FitPhoto module. <input type="button" onclick="starttryon() " value="try" /> <script type="text/javascript"> function starttryon() { pagetracker._trackpageview( /fitphototryon ) ; FitPhoto.tryOn ('SKU1'); 2010 FittingBox Reserved 19 / 20

20 8. Notice Please respect the integration methods described in this documentation. We always try to do our best to help our customers successfully integrate the FitPhoto module in their website, but we may not be able to provide support if the following guidelines are not followed. * Respect the minimum and maximum sizes See FitPhoto creation: FitPhoto.create * Only use methods described in this document * Do not modify the DOM elements related to the FitPhoto * Do not modify the CSS styles used by FitPhoto DOM elements Place a container on top of the main FitPhoto container if you need. <div id="fitphotocontainer"> <div id= FBX > <a href= >Please install latest version of Flash Player</a> </div> </div> you may modify the css of <div id= FitPhotoContainer >, but not <div id= FBX > * Use of Timer with FitPhoto JavaScript API is not recommended, use events instead. See Events 2010 FittingBox Reserved 20 / 20

Schenker AB. Interface documentation Map integration

Schenker AB. Interface documentation Map integration Schenker AB Interface documentation Map integration Index 1 General information... 1 1.1 Getting started...1 1.2 Authentication...1 2 Website Map... 2 2.1 Information...2 2.2 Methods...2 2.3 Parameters...2