AdvanCloud

Template Development
Version: 1.0.23
Date: 7th July 2017
Author: Keonn Technologies S.L.
Change Document record
Date revision Author Changes

12th May 2014 1.0 Vaquerizo Initial version of the document.

6th June 2014 1.0.1 Vaquerizo Minor corrections

1st September 2014 1.0.2 Vaquerizo “gotoproduct” class

30th September 2014 1.0.3 Vaquerizo “fullscreen” tag

8th October 2014 1.0.4 Vaquerizo “updatetemplateko” for “templateproduct” and

“touchbubble”

3rd November 2014 1.0.5 Vaquerizo Added “prioritychoose”

3rd December 2014 1.0.6 Selva Minor update

20rd February 2015 1.0.7 Vaquerizo Added “kscroll”

28rd July 2015 1.0.8 Almendros Watermark removed

5th August 2015 1.0.9 Vaquerizo Added “sessioncodes”

28th October 2015 1.0.10 Vaquerizo Added JavaScript klookapi

02nd February 2016 1.0.11 Vaquerizo Klookapi email and share

08th February 2016 1.0.12 Vaquerizo “ksessionstatus”, “underscoreattribute”

16th February 2016 1.0.13 Vaquerizo Asynchronous API functions

17th March 2016 1.0.14 Vaquerizo “user-data-dir” for new Chrome

4th April 2016 1.0.15 Vaquerizo “assistantinfo” API

29th April 2016 1.0.16 Vaquerizo Developer tab

17th May 2016 1.0.17 Vaquerizo “klookread” in api

31th May 2016 1.0.18 Vaquerizo “getInformationFromEpc” in api

14th October 2016 1.0.19 Vaquerizo “klookitemstatus” event

17th October 2016 1.0.20 Vaquerizo shareAnyData

18th October 2016 1.0.21 Vaquerizo Api privatefiles

8th February 2017 1.0.22 Vaquerizo “commitLogJsonData” in api

7th July 2017 1.0.23 Vaquerizo getResourceAssetUrl

AdvanCloud Templates Page 2 of 60

Content table
1-AdvanCloud templates....................................................................................7
1.1-Introduction...........................................................................................................7
2-Installation of the development environment......................................................8
2.1-Starting the template development environment.........................................................8
2.2-Starting a sensor emulator.....................................................................................11
3-Template Structure.......................................................................................14
3.1-Handlebars...........................................................................................................14
3.1.1-AdvanLook Helpers...........................................................................................15
3.1.1.1-“x” expression...............................................................................................15
3.1.1.2-“xif” expression.............................................................................................15
3.1.1.3-“formatimageurl” imageurl maxsize..................................................................15
3.1.1.4-“formaturl” url...............................................................................................15
3.1.1.5-“resourcedata” resourceurl resourcetype operation maxsize................................15
3.1.1.6-“resourcethumbnail” resourceurl maxsize..........................................................15
3.1.1.7-“markdown” text............................................................................................15
3.1.1.8-“formatcolor” color formattype.........................................................................15
3.1.1.9-“mapasdata” key data....................................................................................16
3.1.1.10-“prioritychoose” configurationkey defaultattribute.............................................16
3.1.1.11-“underscoreattribute” attribute underscorefield................................................16
3.1.2-Additional Variables...........................................................................................16
“config__”................................................................................................................17
3.1.3-Update prevention............................................................................................17
3.2-Brandings.............................................................................................................17
3.3-Multilanguage.......................................................................................................17
3.3.1-data-ld............................................................................................................18
3.3.2-html.lang_*.....................................................................................................18
4-Declarative template components...................................................................19
5-List of Products............................................................................................20
5.1-productlist............................................................................................................20
Attributes.................................................................................................................21
Example...................................................................................................................21
5.2-productlistitem......................................................................................................21
Attributes.................................................................................................................22
Example...................................................................................................................22
5.3-productlistclear.....................................................................................................22
Example...................................................................................................................22
6-Product view................................................................................................23
6.1-productimage.......................................................................................................24
Example...................................................................................................................24
6.2-productthumbnail..................................................................................................24
Attributes.................................................................................................................25
Example...................................................................................................................25
6.3-productdetails.......................................................................................................25
Attributes.................................................................................................................25

AdvanCloud Templates Page 3 of 60

 Example...................................................................................................................25
6.4-requeststatus.......................................................................................................25
Attributes.................................................................................................................25
Example...................................................................................................................26
6.5-productrecommendationshow.................................................................................26
Attributes.................................................................................................................26
Example...................................................................................................................26
6.6-productback.........................................................................................................26
Example...................................................................................................................27
6.7-productattribute....................................................................................................27
Example...................................................................................................................27
6.8-productrequest.....................................................................................................28
Example...................................................................................................................28
6.9-productshare........................................................................................................28
Example...................................................................................................................28
6.10-productemail.......................................................................................................28
Example...................................................................................................................28
6.11-assistancerequest................................................................................................29
Example...................................................................................................................29
6.12-productpropertiesclose.........................................................................................29
Example...................................................................................................................29
7-Basket items................................................................................................30
7.1-basketitemslist......................................................................................................30
Variables..................................................................................................................30
Attributes.................................................................................................................30
Example...................................................................................................................30
7.2-basketitemadd......................................................................................................30
Example...................................................................................................................30
7.3-basketitemselect...................................................................................................30
Attributes.................................................................................................................31
Example...................................................................................................................31
7.4-basketitemremove.................................................................................................31
Attributes.................................................................................................................31
Example...................................................................................................................31
7.5-basketitemsrequest...............................................................................................31
Example...................................................................................................................32
7.6-basketitemsshare..................................................................................................32
Example...................................................................................................................32
7.7-basketitemsemail..................................................................................................32
Example...................................................................................................................32
8-Utilities.......................................................................................................33
8.1-templateproduct...................................................................................................33
Attributes.................................................................................................................33
Example...................................................................................................................33
8.2-kslider.................................................................................................................33
Attributes.................................................................................................................34
Parts........................................................................................................................34
Example...................................................................................................................35
8.3-kscroll..................................................................................................................35
Attributes.................................................................................................................36

AdvanCloud Templates Page 4 of 60

 Example...................................................................................................................36
8.4-languageselect......................................................................................................36
Attributes.................................................................................................................36
Example...................................................................................................................36
8.5-popupurl..............................................................................................................36
Attributes.................................................................................................................37
Example...................................................................................................................37
8.6-fullscreen.............................................................................................................37
Attributes.................................................................................................................38
Example...................................................................................................................38
8.7-fullscreenvideo (deprecated)...................................................................................38
Attributes.................................................................................................................38
Example...................................................................................................................39
8.8-parenttoggle.........................................................................................................39
Attributes.................................................................................................................39
Example...................................................................................................................39
8.9-parentremove.......................................................................................................39
Attributes.................................................................................................................39
Example...................................................................................................................40
8.10-touchbubble (deprecated).....................................................................................40
Attributes.................................................................................................................40
Example...................................................................................................................40
8.11-addsessioncode...................................................................................................41
Attributes.................................................................................................................41
Example...................................................................................................................41
8.12-removesessioncode..............................................................................................41
Attributes.................................................................................................................41
Example...................................................................................................................41
8.13-removesessioncodes............................................................................................41
Attributes.................................................................................................................42
Example...................................................................................................................42
9-Javascript API..............................................................................................43
9.1-Integrating Javascript libraries................................................................................43
9.2-Lower level Javascript API......................................................................................43
9.2.1-Product space and coordinates...........................................................................45
9.2.2-“klookstatus” event...........................................................................................45
9.2.2.1-Parameters....................................................................................................45
9.2.3-“ksessionstatus” event......................................................................................46
9.2.3.1-Parameters....................................................................................................46
9.2.4-“klookitemstatus” event.....................................................................................46
9.2.4.1-Parameters....................................................................................................46
9.2.5-“klookread” event.............................................................................................47
9.2.5.1-Parameters....................................................................................................47
9.2.6-“PluginLook” type.............................................................................................47
9.2.6.1-List of Functions.............................................................................................47
“setStartUI(enableUI)”...............................................................................................47
“setProcessSensor(processSensor)”.............................................................................48
“getLookItemIds()”....................................................................................................49
“getLookItemInfo(itemid)”..........................................................................................49
“removeItem(itemid)”................................................................................................49

AdvanCloud Templates Page 5 of 60

 “removeAllItems()”....................................................................................................49
“getProductKeyForCode(code)”...................................................................................49
“getProductVariationVariables(productcode)”................................................................49
“getProductRenderProperties(productcode,customerdata)”.............................................51
“requestAssistance()”................................................................................................52
“requestProduct(productcode, customerdata)”..............................................................52
“sendEmailProducts(productkeys, email)”.....................................................................52
“shareProducts(productkeys)”.....................................................................................53
“shareAnyData(data)”................................................................................................53
“getResourceImageUrl(imageresource,maxsize)”...........................................................54
“getResourceVideoUrl(videoresource)”.........................................................................54
“getConfigurationEntry(configurationkey)”....................................................................54
“getLDString(lang,ldkey,parameters)”..........................................................................55
“getInformationFromEpc(epc)”....................................................................................55
“uploadBlobToPrivateFiles(blob)”.................................................................................55
“getPrivateFilesUrl(filename)”.....................................................................................56
“commitLogJsonData(logtype,logdata,logextra)”...........................................................56
9.2.7-“PluginLookItem” type.......................................................................................56
9.2.7.1-List of Functions.............................................................................................56
“getId()”..................................................................................................................56
“getType()”...............................................................................................................56
“getStatus()”............................................................................................................56
“getProductCode()”....................................................................................................57
“getCustomerData()”.................................................................................................57
“getEpcs()”...............................................................................................................57
10-Template deployment..................................................................................58

Captures
Capture 1: Initial browser..............................................................................................8
Capture 2: WYSIWYG browser........................................................................................9
Capture 3: RFID emulator............................................................................................10
Capture 4: Receiving a product from the emulated RFID..................................................11

AdvanCloud Templates Page 6 of 60

1- AdvanCloud templates
1.1- Introduction
AdvanCloud templates are implemented in HTML5. The technologies used in these
templates are:

• HTML

• CSS

• JavaScript

Theoratically any browser that supports the latest revisions of HTML and HTML5
technologies can be used to develop and view these templates but at the moment
Google Chrome is the browser we always use in the actual AdvanLook hardware so it is
the only recommended development browser.

Additional basic technologies used by AdvanLook templates are:

• JQuery

• JQuery Mobile

This two libraries allow higher level JavaScript document manipulation and provide
components that adapt to the touchscreen environments.

AdvanCloud Templates Page 7 of 60

2- Installation of the development environment
To install the template development environment you just need:

• the latest version of Google Chrome

• Internet connection

Just decompress the Template development anywhere on your disk. You will find a batch
file in the root of the created directory. The batch file contains a command similar to this:

"%ProgramFiles(x86)%\Google\Chrome\Application\chrome.exe" --disable-web-security
--user-data-dir="%CD%/userdata" "file://%CD%/demo/index.html?
device=com.keonn.demo.shop02.001.fittingroom&branding=demo&token=demo&protocol=https
&host=demonew.keonn.com"

where:

• "%ProgramFiles(x86)%\Google\Chrome\Application\chrome.exe" is the full path to

the Chrome browser in your system. If Google Chrome is installed in another
location in your system you should modify it here accordingly.

• “file://%CD%/demo/index.html” should be the complete path to the main HTML

file of the template you want to edit. The actual path will ultimately depend on the
directory you decompressed your files to. You will need to edit this file path to
make it match the actual file name in your file system.

• Device - is the name of the device you want to emulate (refer to the AdvanCloud
infrastructure documentation). To do tests you can leave it as it is.

• Branding – branding to apply if any. To do tests you can leave it as it is.

• Token – the identifier of the server application this template . To do tests you
should leave it as it is.

2.1- Starting the template development environment

Very important: Before starting you must make sure no other instance of Google Chrome
is already running in your system. For the emulation system to work we need to start
google Chrome with the “–disable-web-security” enabled. If another instance of Google
Chrome is already opened without this flag it will get reused so this flag will not become
active and it will fail to connect with the server so it will not work.

Warning: Google Chrome browsers opened with the “–disable-web-security” flag should

AdvanCloud Templates Page 8 of 60

not be used for normal Internet browsing as that poses a security risk. “–disable-web-
security” disables security checks in the browser and allows Web pages to execute
operations that normally are not allowed (like accessing the hard drive, for example). You
should only activate this flag when developing templates for AdvanCloud and make sure
you disable it for normal Internet browsing (just close all the Chrome instances and start
again without the flag). If you need to browse the Internet while developing AdvanCloud
templates you can use an instance of another browser (Firefox or Internet Explorer, for
example, will do just fine). You cannot use new windows of Chrome because they will also
inherit the “–disable-web-security” flag.

The “--user-data-dir="%CD%/userdata"” is also required for the newer versions of

Chrome to allow access to external resources. This creates a new browser configuration in
a user supplied directory.

Once you got the batch file correctly modified (corrected paths to both Google Chrome
and the template) and we made sure no other instance of Chrome is open we can double
click on the batch file. A window of Chrome like this will appear:

Capture 1: Initial browser

Depending on the configuration of the cloud you might not already see the template and
see an error message instead (“no connection”). In this case you will need to open
another Chrome window or tab and log to the cloud server by using your username and
password and then choose the Templates/Developer tab:

AdvanCloud Templates Page 9 of 60

Once you get a green checkbox means you have correctly enabled the developer options
and you will need to reload the rest of windows. The template should now appear
correctly. Access is allowed while the green checkbox is present, you should no close this
green-checkbox screen and leave it in the background while developing, this will maintain
your development session alive.

Two remarks:

• yellow line at the top of the browser warning you about the disabled web security
flag. You can click on the cross to close it.

• the template has been designed for a resoultion of 1080x1920 and we are viewing
it in a window that is much smaller, so the rendered HTML comes through kind of
distorted. You can use the Chrome developer tools to force a emulation resolution
to view what will actually get rendered on the AdvanLook screen.

Once these two small details have been corrected we get the final AdvanLook screen
emulation:

AdvanCloud Templates Page 10 of 60

 Capture 2: WYSIWYG browser

2.2- Starting a sensor emulator

We already have a virtual AdvanLook running in our PC with access to the template, the
styles, etc... To be able to emulate and customize the interaction process we need to open
another browser pointing to an emulation template.

Open another browser with the following URL:

https://demonew.keonn.com/advancloud/publish/template/demo/emusensor/?
device=com.keonn.demo.shop02.001.sensor

AdvanCloud Templates Page 11 of 60

This should open a window like this:

Capture 3: RFID emulator

This additional window allows us to emulate the RFID detecting hardware.

Type one valid EPC code or EAN into the “Own EPCs” box and press the “Post Read Code”
button, the product should then appear in the virtual AdvanLook running in our computer.

AdvanCloud Templates Page 12 of 60

 Capture 4: Receiving a product from the emulated RFID

You can use the mouse button to emulate the AdvanLook touch interactions.

AdvanCloud Templates Page 13 of 60

3- Template Structure
A template has the following structure:

• index.html – main file

• prodcutproperties.html – product details page

• js – contains the AdvanLook client javascript application

• js/ld/*.json – contain the default literals for the three languages

• img – contains default AdvanLook images

• css – contains default AdvanLook CSS styles

• branding – directory containing one or more brandings – demo in this case

• branding/demo/config/config.json – configuration overrides for the branding,

contains configuration values specific to this branding

• branding/demo/css/*.css – CSS rules for the branding, contain rules overriding

default AdvanLook rules or specific to this branding

• branding/demo/img/ – contain images specific to this branding

• branding/demo/ld/*.json – contain literals overriding default literals for this

branding

Please note that except for the HTML files containing the templates you should only be
doing changes in the “branding” directories. Directories you should not touch are
marked with red.

3.1- Handlebars
At the moment, template definitions are still implemented inside the HTML files. The
template system we use is Handlebars.

Handlebars is a template mechanism that allows formatting of data structures into HTML
markup. You can find more information about this templating system in the following URL:

http://handlebarsjs.com/

There is more information in the given URL, but basically you can reference attributes
from the formated data structure by using the double curly braces syntax:
<p class="title">{{name}}</p>

Each template is contained in a script tag outside of the document body and given an it is
given an id that is used to reference it and also a handlebars type:
<script id="detailscolumnview" type="text/x-handlebars-template">

AdvanCloud Templates Page 14 of 60

...
</script>

All standard Handlebar operators can be used and AdvanLook also provides with a list of
additional helpers.

3.1.1- AdvanLook Helpers

3.1.1.1- “x” expression

Renders the value of a Javascript expression

3.1.1.2- “xif” expression

Renders the given block if the given JavaScript expression is evaluated to trueish

Example: {{#xif "this.colors.length < 8"}}

3.1.1.3- “formatimageurl” imageurl maxsize

Generates a final image URL for the given image resouce url. The maxsize parameter
indicates the maximum size of the image (either maximum width or height, depending on
the aspect ratio). Requesting images in the actual size they are going to be presented with
maximizes image quality and bandwidth efficiency.

3.1.1.4- “formaturl” url

Generates a final URL from the given (relative/absolute/virtual) URL. This is done so to
guarantee that URLs are correctly generated in all the different environments (local PC
emulation, final server deployment, etc...)

3.1.1.5- “resourcedata” resourceurl resourcetype operation maxsize

Resourcetype can be either “image” or “video”. Operation can be either “thumbnail” or

“url”.

3.1.1.6- “resourcethumbnail” resourceurl maxsize

Generates a thumbnail for the given resource URL, either an image or a video.

3.1.1.7- “markdown” text

Formats the given markdown-coded text as HTML. The Github Markdown dialect is used.

3.1.1.8- “formatcolor” color formattype

Color is a color specification stucture instance (with code, name, etc...) or value coding a
color. Several “formattypes” are implemented:

AdvanCloud Templates Page 15 of 60

 • “color” – returns the code if available (“transaparent” if not)

• “text” – returns the name if available (empty string if not)

• “value” – returns a text usable as a value in forms

• “sample” – returns some HTML that can be used to present a color. If only the
name is known, the name. If a code exists you will get a small square filled with
the actual color.

3.1.1.9- “mapasdata” key data

Creates HTML generating data attributes for all the data properties. Data attributes will
have the data-key_property names.

3.1.1.10- “prioritychoose” configurationkey defaultattribute

Presents the first value from a list of attributes that is not blank or empty. If none of the
values is not empty then the “defaultattribute” attribute is shown. The list is specified as a
configuration value. For example, if we define this configuration entry:
• "pricePath": "price,rangePrice"

We can then use this configuration entry like this:

Example: {{prioritychoose "pricePath" "price"}}

This means that if the “price” attribute exists, it will get used, but if it does not exist then
“rangePrice” will be tried.

The fact that the path is specified as a configuration parameter makes it more flexible
because it can be modified without editing the template.

3.1.1.11- “underscoreattribute” attribute underscorefield

Utility function to retrieve a property from the context based on an optional

“underscorefield”.

For example {{underscoreattribute "price" config__.country}}

If the “country” configuration variable has been defined for the shop or app as “nl”, the
function will try the following keys:

• price_nl

• price

and it will retrieve the first that has been specified (even if it's value is '').

3.1.2- Additional Variables

AdvanCloud Templates Page 16 of 60

Several virtual variables are also always included in the formatted data. These virtual
variables have names with two trailing underscores.

– “config__”

Gives access to the configuration values. For example config__.branding would contain the
current branding value.

3.1.3- Update prevention

You can prevent the overwriting of generated template content by using the data-
updatechangeexp. When the template is formatted the given expression is also calculated
and if it matches the already existing value, the template content is left as it is.

By using this mechanism you can prevent unnecessary flickering and also let the user
maintain the state unless something really changes.

<script id="imageview" type="text/x-handlebars-template" data-

updatechangeexp="resourceshash">

3.2- Brandings
Given a basic template, a branding is a “Look and Feel” customization on top of it
(changing the logo, styles, some literals, etc...). Most of the components of the basic
templates (like the JavaScript, CSS files, images, litearals, etc...) are identic in all the
versions of the AdvanLook templates. Normally template developers should favor adding
modifications to the given branding over directly modifying the basic files. Doing so allows
generating new versions of the base files and updating it in all the templates with greater
ease.

As a convention, CSS rules, images, language literals should ALWAYS be modified

in the relevant branding files and the main default template files should NEVER be
modified.

At the moment HTML and Handlebars templates can only be updated in the main template
files. This will probably change in a newer version.

3.3- Multilanguage
Advanlook supports developing multilanguage applications. We have several language files
with literal definitions in JSON format for each language. These files should be edited
using a UTF8 editor. Exotic language code pages are also supported.

AdvanCloud Templates Page 17 of 60

3.3.1- data-ld
Each language literal has name (or key) and a given value. We use the “data-ld” attribute
to associate a language literal key to a certain HTML tag. The content of that tag will be
replaced with the actual literal translation in the currently active language.

<p class="title" data-ld="keonn.fittingroom.sizes">Tallas</p>

Language substitution is done in real-time whenever new content is presented.

3.3.2- html.lang_*
Language subsystem sets a class attribute with the form “lang_*” (where * is to be
replaced with the current active language extension) on the html DOM node that indicates
the currently active language.

This makes possible writing CSS rules that rely on the currently active language.

AdvanCloud Templates Page 18 of 60

4- Declarative template components
AdvanLook templates are built including declarative tags that add dynamic behaviour to
the static HTML. By using this mechanism you can create dynamic applications with all the
AdvanLook functionalities without having to write JavaScript code.

All declarative components use a custom “data-krole” attribute. This “data-krole”

attribute specifies what type of behaviour is to be exhibited by the enclosing tag.

AdvanCloud Templates Page 19 of 60

5- List of Products

5.1- productlist
Whenever a new product is scanned a new item is appended to components with role
“productlist”. The actual HTML that will get added is specified by the given template and
can be customized by modifying it.

AdvanCloud Templates Page 20 of 60

If items are removed from the list their HTML is automatically removed too. The markup
for the items is also automatically updated whenever the status of a requested item gets
updated.

The data provided when rendering the template is the product data retrieved from the
server plus some additional attributes:

• “cid” - unique id for each item. This item is also required when using the
“productlistitem” krole and should be added as a data-cid on the root of the
template generated HTML to enable the manipulation.

• “statustext” - status for this list item (“pending”, ...)

– Attributes

• updatetemplate (required) – The template that is used to format the newly added
item.

– Example
<ul id="itemsList"
data-krole="productlist" data-updatetemplate="productlinetemplate">
</ul>

<script id="productlinetemplate" type="text/x-handlebars-template">

<li class="gallery-item" data-krole="productlistitem" data-cid="{{cid}}">
<h3>{{name}}</h3>
</li>
</script>

5.2- productlistitem

AdvanCloud Templates Page 21 of 60

Typically used inside the “productlist” component, when clicking on these items the
application will open the product properties page. A “data-cid” attribute is required, this
attribute is the code that identifies the product inside the “productlist” and was passed in
the rendering process.

– Attributes

• cid (required) – a product session identifier (unique identifier)

– Example
<li class="gallery-item" data-krole="productlistitem" data-cid="{{cid}}"></li>

5.3- productlistclear
When tapped this item will remove all the items from the product list.

– Example
<a data-krole="productlistclear" data-inline="true" data-role="button">

Clear List

</a>

AdvanCloud Templates Page 22 of 60

6- Product view

AdvanCloud Templates Page 23 of 60

6.1- productimage
Components of this role are used to present the big images of the products when clicking
on the “productthumbnail” components. Videos are also reproduced on them.

Whenever a resource gets shown on them the following attributes are added to the tag:

• thumbnailresourcetype – the type of the resource (image, video, etc...)

• thumburl – the url of the resource

– Example
<div id="productbigimageCellImage" data-krole="productimage"></div>

6.2- productthumbnail
When tapped these items show the referenced resource in the “productimage” viewer.
Resource can be an image or a video. When initially loaded the image shown in the big
viewer is set from the first productthumbnail found in the document.
“productthumbnailselected” class is automatically added to the thumbnail that is currently
being shown in the big image view.

AdvanCloud Templates Page 24 of 60

– Attributes

• thumbnailresourcetype (required) – can be “image” or video

• thumburl (required) – the resource URL

– Example
<div class="thumbimage"
data-krole="productthumbnail"
data-thumbnailresourcetype="{{this.resourcetype}}"
data-thumburl="{{this.url}}"
style=" background-image: url('{{resourcethumbnail this 220}}');}">
<img src="img/video-play.png" class="thumbmainimagearrow"/>
</div>

6.3- productdetails
Components of this type should be used to present data about the product. They are
recalculated whenever new updated product data is available, for example when the users
changes the size or the color or a new product has been selected.

– Attributes

• updatetemplate (required) – template used to render this component whenever

new product data has to be presented

– Example
<div id="lookbookdiv"

data-krole="productdetails"

data-updatetemplate="lookbooktemplate">

</div>

6.4- requeststatus
Presents a request status. Status can be related to the currently selected product or can
be an assistant request status. Component can be specified to be shown when the status
is on or off. If the status does not match, the component is hidden. If it matches it uses
the given template to replace the contained markup.

– Attributes

AdvanCloud Templates Page 25 of 60

 • requestname (required) – Can have two values:

◦ cid – we want to present the status regarding this currently chosen product

◦ assistance- we want to present the status regarding the assistance request

• requesttype (required) – Can have two values:

◦ on – component is visible whenever there is a request going on

◦ off – component is visible whenever there is no request of the given type going
on

• requesttemplate (required) – The template to use to modify the markup of this

component whenever relevant status updates happen.

– Example
<div class="productdatacenteredbutton" data-krole="requeststatus"
data-requestname="assistance" data-requesttype="off">
<button data-krole="assistancerequest" data-role="button" >Assistance</button>
</div>

6.5- productrecommendationshow
Clicking on these components makes the referenced product be shown as the main
product (navigation to original product is available through the “productback” component).

Recursively traverses the DOM tree up looking for a node with class “gotoproduct” and
looks for the “data-productcode” attribute in it.

– Attributes

• productcode (required) – the code of the recommended product

• class gotoproduct specifies the DOM node that contains the productcode data
attribute

– Example
<img src="{{formatimageurl thumbimg 200}}"

data-krole="productrecommendationshow" data-productcode="{{code}}">

6.6- productback
When tapped these items bring back the originally selected product. When formatting the
product data two additional parameters are provided:

• recommendedbacktocid - “true” or “false”

• recommendedbacktociddata – data associate with originally selected product. Can

AdvanCloud Templates Page 26 of 60

 be used to, for example, to render a thumbnail

– Example
<h4 data-ld="keonn.fittingroom.backtoproduct" data-krole="productback">
Back to product
</h4>

6.7- productattribute
“change” events triggered in these components force the revaluation of product attributes
and the update of relevant parts of the page.

– Example
<div id="product_productcolorschoose"
data-krole="productattribute" data-selectiontype="buttons">
{{#each colors}}
<div class="btn colorouter">
<div>{{formatcolor this 'color'}}</div>
<input class="hide" type="radio"
name="product_color" value="{{formatcolor this 'value'}}">

AdvanCloud Templates Page 27 of 60

 </div>
{{/each}}
</div>

6.8- productrequest
Requests the assistant to bring the currently viewed product.

– Example
<div data-krole="productrequest" > Pedir talla </div>

6.9- productshare
Shares the currently viewed product. It typically will open a popup that will let the users
access an online app with their smartphone that allows them to post to Facebook and
Twitter.

– Example
<button data-krole="productshare" data-role="button">

Share this product

</button>

6.10- productemail
Emails the currently viewed product. Opens a popup that allows the user to enter an email
address. An email is sent to that address.

– Example

AdvanCloud Templates Page 28 of 60

<button data-krole="productemail" data-role="button">

Email this product

</button>

6.11- assistancerequest
Requests the presence of the assistant. An assistance request item will appear in the
device of the Assistant.

– Example
<button data-krole="assistancerequest" data-role="button" data-inline="true">

Request to Assistant

</button>

6.12- productpropertiesclose
Closes the product properties page.

– Example
<li class="back">
<a data-krole="productpropertiesclose"></a>
</li>

AdvanCloud Templates Page 29 of 60

7- Basket items
7.1- basketitemslist
Rendered whenever the list of items or their stati get updated. You must provide a
template to be used in the render process.

Variables present when rendering this template:

– Variables

• basketitems – The complete list of items in the basket

• defaultitems – The list of items pending to be processed

– Attributes

• updatetemplate (required) – The template that is used to format the list of basket
items

– Example
<div data-krole="basketitemslist" data-updatetemplate="tryonlisttemplate"></div>

7.2- basketitemadd
Adds the currently viewed item to the list of basket items.

– Example
<button data-role="button" data-krole="basketadd">

Add to try on

</button>

7.3- basketitemselect

AdvanCloud Templates Page 30 of 60

Selects one basket item as the main product.

– Attributes

• cid (required) – a product session identifier (unique identifier)

– Example
<div data-krole="basketitemselect" data-cid="{{cid}}">

...

</div>

7.4- basketitemremove
Removes the basket item.

– Attributes

• cid (required) – a product session identifier (unique identifier)

– Example
<div data-krole="basketitemselect" data-cid="{{cid}}">

<div class="close" data-krole="basketitemremove">

<img src="img/ico-close-button.png">

</div>

...

</div>

7.5- basketitemsrequest

AdvanCloud Templates Page 31 of 60

Requests the assitant to bring the basket items.

– Example
<button data-krole="basketitemsrequest"

data-ld="keonn.fittingroom.tryonlist.request" data-role="button">

Request

</button>

7.6- basketitemsshare
Shares the basket items. This typically will open a popup dialog with a QR that the user
can scan to access an AdvanCloud mobile sharing application.

– Example
<button data-krole="basketitemsshare"

data-role="button">

Share

</button>

7.7- basketitemsemail
Sends the basket items via email. This typically will open a popup dialog where the user
can enter her email address.

– Example
<button data-krole="basketitemsemail"

data-role="button">

Email

</button>

AdvanCloud Templates Page 32 of 60

8- Utilities
8.1- templateproduct
Executes an asynchronous request to the server and sets the content of the given tag with
the result of formatting the retrieved product data with the given template.

– Attributes

• productcode (required) – The product code whose data will be requested to the
server. This should be the EAN code as registered in AdvanCloud.

• updatetemplate (required) – The id of the template to use to format the retrieved

data

• updatetemplateko – When specified, the template to use when no information could

be retrieved for the product code. The passed object that is formatted contains the
“productcode” attribute that is the orginal product code that failed

– Example
<div class="recommendationitem" data-krole="templateproduct"

data-productcode="{{this}}" data-updatetemplate="recommendedtemplatefullpage"></div>

8.2- kslider
Creates a horizontal or vertical carrousel if a minimum number of child items exists.

AdvanCloud Templates Page 33 of 60

 Ilustración 1: kslider
example

This role requires additional attributes to be specified:

– Attributes

• kslider_minitems (required) - Specifies the minimum number of items for which the
slider will be shown. If less kslideritems exist, the markup will be left unchanged.

• kslider_mode (required) - Mode can be “vertical” or “horizontal”.

• kslider_slides (required)- The number of slides that will be presented.

• kslider_delayed – Delays the slider construction to the finalization of the render of

the children. When specified the slider construction will wait for all inner children
templates to be rendered. This might be necessary if children might get removed
after construction because of asynchronous connections with the server to render
the data (with stock validations, for example). Can be “true” or “false”. By default it
is “false”.

• kslider_autoplay – Automatically and uninterruptedly slides the slider. Set to “true”

to activate. By default is disabled.

• kslider_autoplaydelay – Number of milliseconds to wait between slides when

autoplay is enabled.

– Parts

The template designer must mark with classes several parts of the slider markup:

AdvanCloud Templates Page 34 of 60

 • kslider_uparrow – Up arrow. Whenever the user taps on them the slider will move
in one direction

• kslider_downarrow – Down arrow. Whenever the user taps on them the slider will
move in the other direction

• kslider_items – Should contains the items that will be managed by the slider.

• kslider_item – Should be used to mark every item. It will be used by the system to
count the number of items.

– Example
<div data-krole="kslider" data-kslider_minitems="3" data-kslider_mode="vertical" data-
kslider_slides="2">
<div class="kslider_uparrow"><img src="branding/clinique/img/uparrowsmall.png"></div>
<div class="kslider_downarrow"><img
src="branding/clinique/img/downarrowsmall.png"></div>
<div class="kslider_items">
{{#each recommendedcid}}
<div class="kslideritem">...</div>
{{/each}}
/div>
</div>

8.3- kscroll
Creates a horizontal or vertical scrolling area.

Kscroll container should contain a child that is absolutely positioned for it to work.

AdvanCloud Templates Page 35 of 60

This role accepts the following additional attributes:

– Attributes

• kscroll_mode - Specifies whether the scroll should be “vertical” or “horizontal”. By

default a vertical scroll is assumed.

• kscroll_goto – Specifies the item to go to when starting. By default it shows the

first item. Items shoukld be annotated with the data-krole="kscroll_item"
attribute.

– Example
<div id="horizontalimages" data-krole="kscroll"
data-kscroll_mode="horizontal" data-kscroll_goto="2">

<div id="horizontalimagescontainer">
{{#each resources}}
<div class="imagebighorizontal" data-krole="kscroll_item"
style="background-image: url('{{resourcethumbnail this 1520}}');}">
</div>
{{/each}}
</div>

</div>

8.4- languageselect
Allow changing the language when selected. You can specify the target language with an
additional “data-language” attribute.

Ilustración 2: languageselect

– Attributes

• language (required) - Specifies the language to change to

– Example
<li data-krole="languageselect" data-language="en"><a>ENG</a></li>
<li data-krole="languageselect" data-language="fr"><a>FR</a></li>
<li data-krole="languageselect" data-language="es"><a>ESP</a></li>

8.5- popupurl

AdvanCloud Templates Page 36 of 60

Allows the user of the application to access the given URL with its mobile device typically
by using a QR code.

– Attributes

• qrurl (required) – the url the user should be shown

– Example

<div data-krole="popupurl" data-qrurl="{{buyurl}}">SHOP NOW</div>

8.6- fullscreen
Shows the user of the application a resource in full screen format. Resources can be
images, videos, etc...

The tag checks its own attributes or goes up the DOM hierarchy until it finds a node that
has a data-thumbnailresourcetype and data-thumburl attributes.

A template is used to format the full screen view and should be present when this tag is
used. The id of the used template is resourcetype+fullscreentemplate, for example for
images it would be “imagefullscreentemplate” and for videos it would be
“videofullscreentemplate”.

AdvanCloud Templates Page 37 of 60

– Attributes

• thumbnailresourcetype (recursive, required) – the type of the resource (image,

video, etc...)

• thumburl (recursive, required) – the url of the resource

– Example
<div class="videoimage" data-krole="fullscreen" data-thumbnailresourcetype=”video”
data-thumburl="{{resourcedata this.resource 'video' 'url'}}"
style="background-image: url('{{resourcedata this.resource 'video' 'thumbnail'
438}}');}">
<img src="img/video-play.png" class="videoimagearrow"/>
</div>

8.7- fullscreenvideo (deprecated)

Shows the user of the application a video in full screen format. This tag has been
deprecated in favor of the “fullscreen” tag.

– Attributes

• videourl (required) – the url of the video

AdvanCloud Templates Page 38 of 60

– Example
<div class="videoimage" data-krole="fullscreenvideo"
data-videourl="{{resourcedata this.resource 'video' 'url'}}"
style="background-image: url('{{resourcedata this.resource 'video' 'thumbnail'
438}}');}">
<img src="img/video-play.png" class="videoimagearrow"/>
</div>

8.8- parenttoggle
Utility to toggle a class of parent DOM nodes. Toggling a class means removing it if it
exists and adding it if it doesn't.

– Attributes

• parentselector (required) – selector that will be used to match the parent DOM
nodes whose class will be toggled

• toggleparentclass (required) – class that will be toggled

– Example
<div class="openedcontainer">
<img
data-krole="parenttoggle"
data-toggleparentselector=".openedcontainer"
data-toggleparentclass="opened" src="img/rightarrowsmall.png"/>

</div>

8.9- parentremove
Utility to remove this node up to a certain parent node. The parent nodes are matched
against the selector given as an attribute.

– Attributes

AdvanCloud Templates Page 39 of 60

 • parentselector (required) – selector that will be used to match the parent DOM
nodes that will be removed

– Example
<div class="videofullscreen_stop" data-krole="parentremove"
data-parentselector=".removeparent">
<img src="img/ico-close-button-128.png">
</div>

8.10- touchbubble (deprecated)

When instances of this role are made visible on screen and the user touches the screen
(not necessarily directly on it) an attribute is added at the DOM html element.

The attribute used to store the codes is “sessioncodes”. These attributes are removed
when a new session starts.

Usually used to present animations that won't appear again once the user has already
seen them (this is easily implemented with CSS rules).

This tag has been deprecated in favor of the “addsessioncode” tag.

– Attributes

• sessioncode – the code that will get stored in the html “sessioncodes” attribute

– Example
<div id="chooseproductanimation" data-krole="touchbubble" data-sessioncode="cproduct">

AdvanCloud Templates Page 40 of 60

 <img src="branding/munich/img/cursor-pointer-2-icon.svg">
<div class="chooseproductanimationbubble animation_bounce leftbubble infobubble">
<span data-ld="keonn.fittingroom.bubble.selectproducts">Touch</span>
</div>
</div>

8.11- addsessioncode
Utility to attach a sessioncode to a certain scope (adds a class to a certain parent node
identified by the scope).

Sessioncodes are erases whenever the scope changes (the session is invalidated, the page
is closed, etc ...)

– Attributes

• data-scope (required) – specifies the scope to attach this sessioncode to. For
example “page”

• data-sessioncode (required) – the sessioncode to attach to the scope

– Example
<a data-krole="addsessioncode" data-scope="page" data-sessioncode="ksession-
popupreviews">

<div class="product-reviews-rating"><img src="images/stars.png"></div>

</a>

8.12- removesessioncode
Utility to remove a sessioncode from a certain scope (adds a class from a certain parent
node identified by the scope).

– Attributes

• data-scope (required) – specifies the scope to remove this sessioncode from. For
example “page”

• data-sessioncode (required) – the sessioncode to remove to the scope

– Example
<div class="popup-ok-button" data-krole="removesessioncode" data-scope="page" data-
sessioncode="ksession-popupdetails">OK</div>

8.13- removesessioncodes

AdvanCloud Templates Page 41 of 60

Utility to remove sessioncodes matching a specific pattern from a certain scope.

– Attributes

• data-scope (defaults to page) – specifies the scope to remove this sessioncode

from. For example “page”

• data-sessioncodematch (required) – the sessioncode is removed if this match is

found in its name

– Example
<a class="popup-size-ok-button" data-krole="removesessioncodes" data-
sessioncodematch="ksession-popup">OK</a>

AdvanCloud Templates Page 42 of 60

9- Javascript API
9.1- Integrating Javascript libraries
Although we recommend only using the declarative components, if you wish, you can also
add additional JavaScript libraries to create additional functionalities in your templates but
you must be very careful which libraries you choose and they are entirely your
responsability.

You must take into account that we are developing a Single-page application here
(http://en.wikipedia.org/wiki/Single-page_application). Whenever any Javascript
resources are initialized (window callbacks, timeouts, etc...) they must also be freed or
otherwise they will cause a memory leak that will, over time, degrade the performance
and ultimately end up killing the browser process.

We provide the following mechanisms to deal with template lifecycles, initialization and
release of Javascript resources:

Templates:

• “updateinitfunction” - it will get executed whenever a template has been rendered

on the screen. It can be useful to instantiate and initialize any Javascript
components you need to initialize in it. This function will get passed two
parameters:

◦ element – DOM element that is to be initialized

◦ data – the data as it was returned by the “updatedestroyfunction”, if any. This

could be used to maintain state between template updates, for example.

• “updatedestroyfunction” - it will get executed whenever a template is about to get

replaced by new content. It can be useful to free any Javascript resources that
would otherwise get retained. This function will only get passed one parameter:

◦ element – DOM element that is about to be rewritten

Elements:

• You can associate “data-knotify” attributes to elements whose removal from the
page you want to track down. These elements will trigger a 'kremoved' event when
removed from the DOM that you should use to free the related resources. You
should verify that you recognize the “knotify” attribute value of the received
element before processing it.

9.2- Lower level Javascript API

For expert users we support a lower level JavaScript API that enables developing a
JavaScript template without using the declarative templates.

AdvanCloud Templates Page 43 of 60

This Javascript API allows:

• receiving notifications whenever reads or item stati changes happen

• obtain product information from the server

• create requests (assistant and products)

This is how it works:

Browser

Cloud
AdvanLook Server
List of items and
requests

Low level App

PluginLook
Assistant

Assistant

A “Low Level App” subscribes to the service of the PluginLook while AdvanLook in the
background only manages the status of the list of items and requests. AdvanLook just
manages this list and the connection to the server and the rest of devices in the network
like the assistants without doing any kind of UI while the “Low Level App” is in charge of
the UI and can construct it however it wants with whatever tools it wants to.

An example template for sandbox testing this low level API is provided.

The Javascript interface uses Jquery events as the notification method. The events are
always triggered on the document level. To catch these events we just need to register:

$(document).on("klookstatus",function(ev,status,exdata){
console.log("received klookstatus "+status+" "+exdata);
}

AdvanCloud Templates Page 44 of 60

9.2.1- Product space and coordinates
Internally all AdvanLook products and skus are given a key the contains two fields:

• “productcode” - The product code, this is the code of the product that this sku
belongs to

• “customerdata” - These is an object containing the coordinates that allow us to

select the sku for this product. Typicallly in retail you will find attributes like “color”
or “size” that can be used to select the different variations of a product. This would
be the coordinates. For example, an exampel of “customerdata” could be:

“color”: “colorkey0102”,

“size”: “20”

You can obtain the different coordinate “axes” and possible values for a certain product by
using the “getProductVariationVariables” function from the “PluginLook” type.

9.2.2- “klookstatus” event

Sent whenever relevant changes to the status of the AdvanLook system happen like
starting the system, losing connection, connecting to assistants, etc...

9.2.2.1- Parameters

• Status – Specifies the new status. It can be any of the following:

◦ “start” – initialization of the AdvanLook System, second auxiliary parameter is

an instance of the “PluginLook” type. It is recommended that you store this
“PluginLook” instance for later use.

◦ “connected” – notifies Server connection events. The second parameter is a

boolean that will be true or false depending on if connection to the Server is
available

◦ “assistantstatus” - notifies Assistant connection events. The second parameter is

a boolean that will be true or false depending on if assistants are available or
not

◦ “assistantinfo” - When the assistant is session oriented it might send its

AdvanCloud Templates Page 45 of 60

 information to the managed AdvanLook. The second parameter will be an object
which might contain the following properties (or no properties if the assistant
has detached):

▪ device: the device identifier of the assistant

▪ code: the code entered by the assistant in the assistant application. In some
configurations this code can be used with the product API to obtain
additional information about the assistant like name and a photo.

• Auxiliary parameter- An auxiliary parameter that will be different depending on the

type of message (Status).

9.2.3- “ksessionstatus” event

Sent whenever the user session of the AdvanLook changes. For example, a new session is
started or the session is closed

9.2.3.1- Parameters

• Status – Specifies the new status. It can be any of the following:

◦ “start” – a new session has been created.

◦ “end” – the session just ended

• Auxiliary parameter- The auxiliary parameter will be the session identifier.

9.2.4- “klookitemstatus” event

Sent whenever there has been an update to the list of items and requests. Whenever an
item has been added, removed or its status has changed. You can retrieve all the item
data by calling “getLookItemInfo”.

9.2.4.1- Parameters

• itemid – Specifies the id of the item whose status has changed

• status – The new status of the item

For example:

$(document).on("klookitemstatus",function(ev,itemid,status){

var iteminfo = klookinst.getLookItemInfo(itemid);

if(iteminfo){

AdvanCloud Templates Page 46 of 60

 var itemtype=iteminfo.getType();

if(itemtype=='product')
{
...
}
else if(itemtype=='assistance'){
...
}
}
})

9.2.5- “klookread” event

Sent whenever the AdvanLook receives information about tags when they are read.

9.2.5.1- Parameters

• readdata – Data structure specifying the information that has been read. It will
contain the following fields:

◦ “value” – the identififer that has been read, typically the EPC of an RFID tag.

◦ “data” – (optional) additional data, examples of additional fields are:

▪ “antenna” - id of the antenna that generated the read event

9.2.6- “PluginLook” type

The PluginLook instance is main point of connection with the AdvanLook system. It
contains functions that

• allows us to retrieve the list of readings and requests and interact with them

• obtain product data

• additional utilities

9.2.6.1- List of Functions

– “setStartUI(enableUI)”

Allows the standard AdvanLook templating system to start.

Applications that want to control the User Interface should call this method with “false” in
the “klookstatus” “start” event. For example:

var klookinst;

AdvanCloud Templates Page 47 of 60

$(document).on("klookstatus",function(ev,status,exdata){

console.log("received klookstatus "+status+" "+exdata);

if(status=='start')
{
klookinst=exdata;
klookinst.setStartUI(false);
}
});

In this code we are preventing the standard AdvanLook Templating System to start (we
want to control the interface) by calling “setStartUI(false)” and we are storing the
“PluginLook” instance for later use.

– “setProcessSensor(processSensor)”

Allows disabling the processing of the read events by the Advanlook system. This makes
sense if the application is already processing the read events (e.g. subscribing to the
“klookread” event to process them).

Applications that want to disable the Advanlook processing the read events should call this
method with “false” in the “klookstatus” “start” event. For example:

var klookinst;

$(document).on("klookstatus",function(ev,status,exdata){

console.log("received klookstatus "+status+" "+exdata);

if(status=='start')
{
klookinst=exdata;
klookinst.setStartUI(false);
klookinst.setProcessSensor(false);
}
});

$(document).on("klookread",function(ev,readdata){

writeToDiv("received klookread "+(JSON.stringify(readdata)));

});

AdvanCloud Templates Page 48 of 60

In this code we are preventing AdvanLook from processing the read events by calling
“setProcessSensor(false)” and we are registering to process them.

– “getLookItemIds()”

Returns the list of current managed item ids (RFID readings and requests).

– “getLookItemInfo(itemid)”

Returns the stored information for the given itemid (can be a reading or a request).

The stored information is returned as an instance of type “PluginLookItem”

– “removeItem(itemid)”

Removes the item with the given identifier from the list.

– “removeAllItems()”

Removes all the existing Items (equivalent to the “Clear” button)

– “getProductKeyForCode(code)”

Retrieves the product coordinates for the given code (can be an EAN, epc or any other
code the Server can handle). To obtain this information a round-trip to the Server may be
required so this function is asynchronous and returns a Jquery promise. The retun value
will be an object with the product coordinates (productcode, cutomerdata). For example:
{
“productcode”: “P1235”,
“customerdata”: {
“color”: “colorkey0102”,
“size”: “20”
}
}

– “getProductVariationVariables(productcode)”

Retrieves coordinates information about a certain product. To obtain this information a

round-trip to the Server may be required so this function is asynchronous and returns a
Jquery promise. The return value is an array of variables, all of which containing

• “variable” - the coodinate identifier

AdvanCloud Templates Page 49 of 60

 • “options” - an array of available options, for each option the following fields are
given:

◦ “value” - the value to be used as the coordinate

◦ “data” - the complete coordinate data as specified in the import files (can be
used to show value specific colors or texts)

An example of the return value:

[{
"variable": "color",
"options": [{
"value": "color01",
"data": {
"name": "AZUL MARINO",
"code": "#363D5A"
}
},
{
"value": "color02",
"data": {
"name": "INDIGO",
"code": "#517bd5"
}
}]
},
{
"variable": "size",
"options": [{
"value": "40",
"data": "40"
},
{
"value": "42",
"data": "42"
},
{
"value": "44",
"data": "44"
}]
}]

Given these variables a valid customerdata could be like this:

{
“color”: "color02",

AdvanCloud Templates Page 50 of 60

 “size”: "42"
}

– “getProductRenderProperties(productcode,customerdata)”

Obtains the information for the given product and coordinates from the server. To obtain
this information a round-trip to the Server may be required so this function is
asynchronous and returns a Jquery promise.

All of the variables available on the Server are retrieved. For example you could call:

klookinst.getProductRenderProperties(productcodevalue,customerdata)
.then(function(result){

console.log(result);

});

and it could show in the console:

{
"productid": "5156889407",
"itemclass": 5787,
"code": "8433815088581",
"org": 515688940764,
"itemtype": "skucolor",
"stock": {
"shop01": {
"count": 0
},
"online": {
"count": 0
}
},
"lookbook": [
"RVpv14_M040",
"RVpv14_M003"],
"family": "PANTALONES",
"imageUrls": [
"515688940745_1.jpg",
"515688940745_2.jpg",
"515688940745_3.jpg",
"515688940745_4.jpg"],
"recommended": ["525684938760",
"586063943705",
"555731942205",
"525687939748"],

AdvanCloud Templates Page 51 of 60

 "imageUrlMain": "515688940745_1.jpg",
"imageResourceMain": "515688940745_1.jpg",
"colour": {
"name": "INDIGO",
"code": "#517bd5"
},
"image2": "515688940745_2.jpg",
"image1": "515688940745_1.jpg",
"imageUrlMainPart": "515688940745_2.jpg",
"image3": "515688940745_3.jpg",
"description_es": "Pantalón sport bolsillo francés color azul, con relojera,
doble pinza y dos bolsillos traseros de doble vivo. Slim Fit",
"description": "Blue slim fit sports pants with two darts and French, watch
and two double trimmed rear pockets . ",
"name": "Blue twill sports pants",
"name_es": "Pantalón azul sport sarga",
"skuid": "8433815088581",
"size": "40"
}

– “requestAssistance()”

Initiates a request assistance item if one does not already exist. The new assistance item
will appear on the list of items.

– “requestProduct(productcode, customerdata)”

Requests the given product. The request will not be created if a request for the same
product variation already exists.

– “sendEmailProducts(productkeys, email)”

Sends an email with the given list of products to the given email address.

“Productkeys” should be an array containing product keys composed by “productcode” and

customerdata attributes. For example:

[
{
“productcode”: “P1235”,
“customerdata”: {
“color”: “colorkey0102”,
“size”: “20”

AdvanCloud Templates Page 52 of 60

}
},
{
“productcode”: “P1234”,
“customerdata”: {
“color”: “colorkey80”,
“size”: “20”
}
}
]

The function returns a promise that will be called when the sending email process is
completed (either successfully or not).

klookinst.sendEmailProducts(arrproductkeys,email).then(
function(){
alert("Email sent");
},function(){
alert("Error sending");
}
);

– “shareProducts(productkeys)”

Obtains an URL (typically presented to the user as a QR) allowing her to share a list of
products using Social services (Twitter, Facebook, etc...) and her own mobile device.

The function returns a promise that will be called when the the URL has been obtained (or
not).

klookinst.shareProducts(arrproductkeys).then(
function(url){
alert("Share URL "+url);
},function(){
alert("Error sharing");
}
);

– “shareAnyData(data)”

Uploads a certain share data structure to the server and returns a URL to get presented to
the user.

AdvanCloud Templates Page 53 of 60

The data structure must be in one of the formats supported by the share application.

For the standard usage of sharing a list of products it is recommended to use

“shareProducts” instead.

– “getResourceImageUrl(imageresource,maxsize)”

From the retrieved JSON we can see that images (and resources in general) are provided
as realive resource identifiers:
...
"imageUrls": [
"515688940745_1.jpg",
"515688940745_2.jpg",
"515688940745_3.jpg",
"515688940745_4.jpg"],
...

To obtain an absolute URL for a given image we can use the “getResourceImageUrl”
function. This function also allows a second parameter that specifies the maximum size in
pixels (vertical or horizontal) that we want for the image.

For example we might call:

klookinst.getResourceImageUrl("515688940745_1.jpg");

and it would return (will obviously depend on the actual server used):

http://localhost:8080/advancloud/publish/file/showroom/515688940745_1.jpg

– “getResourceVideoUrl(videoresource)”

Exactly the same as “getResourceImageUrl” but to retrieve the video URLs. The only
difference is that resizing is not supported.

– “getResourceAssetUrl(resource)”

Retrieves the URL from an Asset uploaded to the SFTP server.

– “getConfigurationEntry(configurationkey)”

Taps into the AdvanLook configuration to retrieve the value for a configuration variable.

AdvanCloud Templates Page 54 of 60

This functionality is available but is obviously not required to be used, the application may
use any other configuration mechanisms.

The return value is the value for that configuration property in the System if defined.

– “getLDString(lang,ldkey,parameters)”

Taps into the AdvanLook “i18n” System to retrieve the value for a language token. This
functionality is available but is obviously not required to be used.

The parameters would be:

• “lang” – a language ISO code (e.g. “en”, “es”, “nl”, etc...)

• “ldkey” - the key to search for in the language files

• “parameters” (optional) – allows passing parameters to be sustituted in the final

language render. For example "Product {0} added to list" would get the “{0}”
substituted by the first parameter.

– “getInformationFromEpc(epc)”

Decomposes the given EPC (Electronic Product Code) and returns the data components it
contains. Several formats for EPC (for example “SGTIN96”) are supported.

The parameter is an EPC in hexadecimal form.

It returns an object whose properties contain the retrieved information. Possible data
components include:

• “ean” - EAN13 code

• “serial” - serial number that was encoded

• “eas” - whether the EPC had the EAS flag activated or not

– “uploadBlobToPrivateFiles(blob)”

Uploads a JavaScript “Blob” (https://developer.mozilla.org/en/docs/Web/API/Blob) to the

server. This can be used to upload private files that do not require content distribution
because they will not be presented to multiple users. For example user photos to be used
for sharing. This function returns a promise. If successful it returns an object definition
containing at least the following properties:

• “filename” - The filename of the blob in the server, this can be used to later retrieve
it

AdvanCloud Templates Page 55 of 60

For example:

klookinst.uploadBlobToPrivateFiles(blob).then(function(data){

alert('the generated blobid: '+data.filename);

});

– “getPrivateFilesUrl(filename)”

Retrieves an URL to download or present an uploaded blob. This can be used to for
example present a previously uploaded photo to the user.

The parameter is:

• “filename” – the filename obtained when the blob was uploaded

– “commitLogJsonData(logtype,logdata,logextra)”

Uploads and stores a JSON data log in the Cloud. Stored Logs can later be exported and
allow for Report generation on them.

The parameters are:

• “logtype” – the type of log as a string

• “logdata” - the main data for this log as a string

• “logextra” - a free JSON data structure given as a JavaScript object

9.2.7- “PluginLookItem” type

Contains the information stored in the System for a certain item.

9.2.7.1- List of Functions

– “getId()”

Returns the item identiifer.

– “getType()”

Returns the type of item. It can be one of the following:

AdvanCloud Templates Page 56 of 60

 • “product” - item corresponds to a product or a product request

• “assistance” - item corresponds to an assistance request

– “getStatus()”

Returns the status of the item. It can be any of the following:

• “default” - just created, no request started

• “pending” - requesting, still has not accepted by any assistant

• “actioned” - an assistant has accepted the request

• “served” - the request has been processed

• “nostock” - the assistant stated there is no stock

• “remove” - item has been removed, this status is temporary during notifications,
the item ir actually removed after the notifications

– “getProductCode()”

If this item is a product, it returns the product code.

– “getCustomerData()”

If this item is a product, it returns the customerdata coordinates.

– “getEpcs()”

Returns the list of epcs associated with this item.

AdvanCloud Templates Page 57 of 60

10- Template deployment
Once developed the template just needs to be packaged into a zip file and deployed to the
AdvanCloud server.

The index.html file must appear in the root of the zip file, you must be careful no to put
absolute or additional directories when generating the zip file.

AdvanCloud Templates Page 58 of 60

Once you go your zip file prepared you just need to go to AdvanCloud, login and upload
your template.

To login, go to https://demonew.keonn.com and enter your credentials:

And go to the App Template tab:

AdvanCloud Templates Page 59 of 60

To update the template you should click on the notepad edit icon. This should open
another screen that will let you upload a new version of the template.

Now we press the select file button and choose our template zip, press save and if we get
the “template updated” message, the template process has been successfully completed.

AdvanCloud Templates Page 60 of 60