HTML5 Viewer SDK API Documentation 

Namespaces

Class Index

Classes in s7sdk.set

Class s7sdk.set.CallToAction

The CallToAction component is used to render the list of swatches that are associated with interactive actions, the close button and the optional title.

The following modifiers are supported:

ModifierSyntaxDescriptionDefault
serverurlisRootPathThe Image Serving root path. If no domain is specified, the domain from which the page is served is applied instead. Standard URI path resolution applies./is/image/
iscommandvalueThe Image Serving command string that is applied to all thumbnails. If specified in the URL, all occurrences of '&' and '=' must be HTTP-encoded as %26 and %3D, respectively.""
maxloadradius-1|0|preloadnbrSpecifies the component preload behavior. When set to -1, all thumbnails are loaded simultaneously when the component is initialized or the asset has changed. When set to 0, only visible thumbnails are loaded. Set preloadnbr to define how many invisible rows and columns are preloaded around the visible area.1
directionauto|left|rightSpecifies the way thumbnails fill in the view. Set left so that the view is filled in a left-to-right order. Set right to reverse the order so that the view is filled in from a right-to-left, top-to-bottom direction. Set auto so the component applies right mode when locale is set to "ja". Otherwise, left is used.auto
textposbottom|top|left|right|none|tooltipSpecifies where the label is drawn relative to the thumbnail image. That is, the label is centered at the specified location relative to the thumbnail. When tooltip is specified, no label is drawn.bottom
fmtjpg|jpeg|png|png-alpha|gif|gif-alphaSpecifies the image format that the component uses for loading images from Image Server. Use any image format value that is supported by Image Server and the client browser. If the image format ends with "-alpha", the component renders images as transparent. For all other image format values, the component treats images as opaque.jpeg
alignleft|center|rightSpecifies the internal horizontal alignment--or anchoring--of the thumbnails container within the component area. In CallToAction, the internal thumbnail container is sized so that only a whole number of thumbnails is shown. As a result, there is some padding between the internal container and the external component bounds. This modifier specifies how the internal thumbnails container is positioned horizontally inside the component.center
enabledragging0|1[,overdragvalue]Enables or disables the ability for a user to scroll the thumbnails using a mouse or using touch gestures. Set overdragvalue to set a percent value for movement in the wrong direction of the actual speed. The range is 0 - 1. If set to 1, it moves with the mouse. If set to 0 it does not let you move in the wrong direction at all.1,0.5
scrollbar0|1Enable the use of the scroll bar.1

Defining the Appearance using CSS

You can define the appearance of the CallToAction component using CSS rules. All HTML5 Viewer SDK components use class selectors for styling. You can style the body of the CallToAction component by using the .s7calltoaction class selector. The styles that are associated with this class selector are applied to all instances of the CallToAction component. You can style particular instances by prefixing the class rule with the instance #id. For example, styling rules for #myComp.s7calltoaction are applied only to the particular CallToAction instance.

The styling of the sub-elements using class selectors like .s7thumb for example, must be specified in the form of the descendant class selectors, that is, they must follow the main class selector separated by a space, such as .s7calltoaction .s7thumb. For more information on component styling see the HTML5 Viewer SDK User Guide and the default styles section.

CSS ClassAttribute SelectorDescription
.s7calltoactionstate=[visible|hidden]Represents the main body of the CallToAction component; it is possible to define size, position and outer borders. The state attribute selector changes when component is made visible by calling showPanel() or is hidden by calling hidePanel() or by clicking a close button.
.s7header(None)Defines the appearance of the header of CallToAction panel.
.s7title(None)Defines the appearance of the title in the header of CallToAction panel.
.s7closebuttonstate=[up|over|down|disabled]Define the appearance of the close button in the top right corner for each state.
.s7thumbcell(None)Defines thumbnail spacing using margin CSS property.
.s7thumbstate=[default|selected|over]Defines the appearance of the thumbnail. The height and width properties will define the dimensions of the thumb. It is possible to apply different borders for different values of state attribute to implement "active" highlight. default value of state attribute corresponds to "up" state, selected means that the thumbnail is currently selected and over state turns on when user rolls over unselected thumbnail.
.s7label(None)Defines the appearance of the thumbnail labels.
.s7tooltip(None)A global class selector that defines appearance for the tooltips. To disable tooltips set the display style to none.
.s7scrollbar(None)Defines the size and appearance of the scrollbar. The width is controlled by the width property. The height by default is the same as CallToAction height, however it is possible to it using top, bottom or height properties. Adjusting horizontal scrollbar position within CallToAction using left or right properties is not supported.
.s7scrollthumbstate=[up|over|down]Defines the appearance of the scrollbars thumb. Thumb size is controlled with width and height properties. Horizontal alignment can be adjusted using left property, which sets thumb position within scroll bar container. Any value set for top property will be ignored and overridden by the scroll bar logic
.s7scrolltrack(None)Defines the appearance of the scrollbars track. It is possible to set the width and horizontal offset inside scroll bar area. The height of scroll track is automatically set to fill the space between top and bottom scroll buttons, setting custom scroll track height is not supported.
.s7scrollupbuttonstate=[up|over|down|disabled]Defines the appearance of the scroll bar "up" button. Button can be styled just like any other SDK button. It is possible to set horizontal and/or vertical offset within scroll bar area using left, right or top properties.
.s7scrolldownbuttonstate=[up|over|down|disabled]Defines the appearance of the scroll bar "down" button. Button can be styled just like any other SDK button. It is possible to set horizontal and/or vertical offset within scroll bar area using left, right or top properties.

Localizable Symbols

CallToAction also have a number of text symbols that you can localize either in a preset or in the viewer page though the mechanisms provided by the ParameterManager. For more information on localization consult the ParameterManager API documentation and HTML5 Viewers SDK User Guide.

SymbolDescription
ScrollUpButton.TOOLTIPDefine a localized tooltip of ScrollUpButton
ScrollDownButton.TOOLTIPDefine a localized tooltip of ScrollDownButton
CloseButton.TOOLTIPDefine a localized tooltip of CloseButton

Class Summary
Constructor Attributes Constructor Name and Description
 
s7sdk.set.CallToAction(container, settings, compId)
Method Summary
Method Attributes Method Name and Description
 
addEventListener(type, handler, useCapture)
Adds an event listener to the instance of the CallToAction component.
 
dispose()
Dispose is used to remove itself and all sub-elements from the DOM
 
getHeight()
Returns the current inner height of the component.
 
getInteractiveData()
Returns currently displayed list of interactive swatches.
 
getInteractiveDataProperties()
Get the global properties of the interactive data associated with the currently displayed list of interactive swatches.
 
getVisibility()
Returns currently visible state of component.
 
getWidth()
Returns the current inner width of the component.
 
hidePanel()
Hide the CallToAction and dispatch the PopupEvent.POPUP_CLOSED to notify handlers
 
resize(w, h)
Resize the component.
 
setCSS(classname, property, value)
Sets a particular CSS class and property on a component
 
setInteractiveData(interactiveData, properties)
Changes the currently displayed list of interactive swatches by providing an array of interactive data.
 
setModifier(modObj)
Sets 1-N # of modifiers for the component.
 
showPanel()
Show the CallToAction
Class Detail
s7sdk.set.CallToAction(container, settings, compId) 
Example Code	 
The code below does the following:

    

  1. The Scene7 HTML5 SDK is linked to the page and the required s7sdk components are included in the document head.
    2. 

  2. CSS Styles are defined in the document head to control the appearance of the SDK components.
    3. 

  3. The s7sdk.Util.init() method is called to initialize the SDK.
    4. 

  4. A ParameterManager object is created to handle component modifiers for the viewer.
    5. 

  5. An initViewer() function is defined. This function initializes a couple of modifiers (hard coded for example purposes),
then creates the component objects required for this simple example. The initViewer() function also adds event listeners
that designate functions to handle relevant component events (which might be dispatched by the components as a result of
user interactions, changes in a component's state, etc.).
    6. 

  6. Handler functions are defined to respond to the component event listeners added in the initViewer() function.
    7. 

  7. An event listener is added to the ParameterManager object that designates the initViewer() function as the handler
to call when the Scene7 SDK is loaded and ready.
    8. 

  8. Finally, the init() method is called on the ParameterManager object to start the viewer.
    9. 


<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />		
        <!-- removed height=device-height, -->
        <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
        <!-- Hiding the Safari on iPhone OS UI components -->
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="apple-touch-fullscreen" content="YES" />
        <!-- Specifying a per-page Home screen icon -->
        <link rel="apple-touch-icon" href=""/>
        <link rel="apple-touch-startup-image" href="" />

        <title>CallToAction Example</title>
        <!--
        To run this example locally you need to replace this with an absolute SDK path.
        For more information check the HTML5 Viewers SDK User Guide or the examples
        included in the package.
        -->		
		<script language="javascript" type="text/javascript" 
				src="../js/s7sdk/utils/Utils.js"></script>
        <script language="javascript" type="text/javascript">
            s7sdk.Util.lib.include('s7sdk.event.Event');
            s7sdk.Util.lib.include('s7sdk.set.CallToAction');
        </script>
        <style>
            html, body {
                padding:0px;
                margin:0px;
            }
            .s7calltoaction {
				position: relative;
                left: 0px;
                width: 500px;
                height: 300px;
            }
        </style>
    </head>
    <body>

        <div id="container"></div> 
        <script language="JavaScript" type="text/javascript">
            var params, container, 
            callToAction, interactiveData = null, enableInteractiveData = false;

            // Initialize the SDK
            s7sdk.Util.init();

            // Create ParameterManager instance to handles modifiers		
            params = new s7sdk.ParameterManager();


            // Define the function that initializes the viewer
            function initViewer(){
                // Set hardcoded modifiers (not required when values are specified on the url)
                params.push("serverurl", "http://mobiletest.scene7.com/is/image/");

                callToAction = new s7sdk.set.CallToAction("container", params,"s7interactive");
                callToAction.addEventListener(s7sdk.event.InteractiveSwatchesEvent.SWATCH_QUICKVIEW_ACTIVATED, interactiveSwatchActivateHandler, false);
                callToAction.addEventListener(s7sdk.event.InteractiveSwatchesEvent.SWATCH_URL_ACTIVATED, interactiveSwatchActivateHandler, false);

				var interactiveDataObj = {
				"interactiveData":
					[{
						"swatches": {
							"n":"robindallas/marksandspencer",
							"item": [{
								"s": {
									"n": "robindallas/marksandspencer_1",
									"l": "Yellow Purse",
									"href":"quickview:sku=1&url1=1",
									"target":""
									}
							},{
								"s": {
									"n": "robindallas/marksandspencer_2",
									"l": "Black Purse",
									"href":"quickview:sku=2&url1=2",
									"target":""
									}
							}]
						}
						},
						{"swatches": {
							"n":"robindallas/Adobe_QBP-AVS",
							"item": [{
								"s": {
									"n": "robindallas/thumb-quickview-1-05",
									"l": "qv gothlady1",
									"href":"quickview:sku=gothLady1&value1=robindallas&value2=company name"
									}
								},{
								"s": {
									"n": "robindallas/thumb-quickview-1-06",
									"l": "qv gothlady2",
									"href":"quickview:sku=gothLady2&value1=robindallas&value2=company name"
									}
								},{
								"s": {
									"n": "robindallas/thumb-quickview-1-07",
									"l": "qv bad SKU",
									"href":"quickview:sku=badsku&value1=robindallas&value2=company name"
									}
								},{
								"s": {
									"n": "robindallas/thumb-quickview-1-08",
									"l": "qv bad value1",
									"href":"quickview:sku=gothLady4&value1=badValue1&value2=company name"
									}
							}]
						}},
						{
							"swatches": {
								"n":"robindallas/marksandspencer",
								"item": [{
									"s": {
										"n": "robindallas/marksandspencer_13",
										"l": "Print Underpants",
										"href":"http://s7d1.scene7.com/is/image/robindallas/marksandspencer_13",
										"target":"_blank"
										}
								},{
									"s": {
										"n": "robindallas/marksandspencer_14",
										"l": "Lace Bras",
										"href":"http://s7d1.scene7.com/is/image/robindallas/marksandspencer_14",
										"target":"_blank"
										}
								}]
							}
						},
						{
							"swatches": {
								"n":"robindallas/marksandspencer",
								"item": [{
									"s": {
										"n": "robindallas/marksandspencer_15",
										"l": "Pink Umbrella",
										"href":"http://s7d1.scene7.com/is/image/robindallas/marksandspencer_15",
										"target":""
										}
								},{
									"s": {
										"n": "robindallas/marksandspencer_16",
										"l": "Paisley Shell Top",
										"href":"http://s7d1.scene7.com/is/image/robindallas/marksandspencer_16",
										"target":""
										}
								}]
							}
						},
						{
							"swatches": {
								"n":"robindallas/marksandspencer",
								"item": [{
									"s": {
										"n": "robindallas/marksandspencer_17",
										"l": "Shift Dress",
										"href":"http://s7d1.scene7.com/is/image/robindallas/marksandspencer_17",
										"target":""
										}
								},{
									"s": {
										"n": "robindallas/marksandspencer_18",
										"l": "Red Flare Dress",
										"href":"http://s7d1.scene7.com/is/image/robindallas/marksandspencer_18",
										"target":""
										}
								}]
							}
						},
						{
							"swatches": {
								"n":"robindallas/marksandspencer",
								"item": [{
									"s": {
										"n": "robindallas/marksandspencer_3",
										"l": "Print T-shirt",
										"href":"quickview:sku=3&url1=3",
										"target":""
										}
								},{
									"s": {
										"n": "robindallas/marksandspencer_4",
										"l": "Shell Top",
										"href":"quickview:sku=4&url1=4",
										"target":""
										}
								}]
							}
						}
					],
					"properties":{
						"title":"test title"
					}
				}
				callToAction.setInteractiveData(interactiveDataObj.interactiveData, interactiveDataObj.properties);
            }
              
            function onInteractiveData(event) {
				var data = event.s7event.data;
				var interactiveDataProperties = data ? data.properties : null;
				interactiveData = data ? data.interactiveData : null;
				callToAction.setInteractiveData(interactiveData, interactiveDataProperties);				
            }

            function interactiveSwatchActivateHandler(event) {
                if (event.type == s7sdk.event.InteractiveSwatchesEvent.SWATCH_QUICKVIEW_ACTIVATED) {
                    if(event.s7event.data) {
						console.log("sku="+event.s7event.data.sku+"; url1="+event.s7event.data.url1);
                        s7sdk.Logger.log(s7sdk.Logger.DEBUG, "QuickView event can be implemented here");
                    }
                }
            }
			function disposeComp() {
				callToAction.removeEventListener(s7sdk.event.InteractiveSwatchesEvent.SWATCH_QUICKVIEW_ACTIVATED, interactiveSwatchActivateHandler, false);
                callToAction.removeEventListener(s7sdk.event.InteractiveSwatchesEvent.SWATCH_URL_ACTIVATED, interactiveSwatchActivateHandler, false);			
				callToAction.dispose()
				callToAction = null;
				params.dispose()
				params = null;
			}
            params.addEventListener(s7sdk.Event.SDK_READY, initViewer, false);
            params.init();
        </script>
    </body>
</html>
Default styles for CallToAction:

.s7calltoaction {
	background-color:rgba(100, 100, 100, 0.2);
	position:absolute;
	user-select:none;
	-ms-user-select:none;
	-moz-user-select:-moz-none;
	-webkit-user-select:none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	width:500px;
	height:250px;
 }
.s7calltoaction[state='visible']{
	visibility:inherit;
}
.s7calltoaction[state='hidden']{
	visibility:hidden;
}
.s7calltoaction .s7header {		
	position:absolute;
	width:100%;
	height:30px;
	left:0px;
	top:0px;
}
.s7calltoaction .s7title {
	font-family:Helvetica, sans-serif;
	font-size:25px;
	text-align:left;
	padding-left:36px;
	line-height:30px;
	overflow:hidden;
}
.s7calltoaction .s7closebutton {
	position:absolute;
	display:block;
	width:25px;
	height:25px;
	top:2px;
	right:2px;
}
.s7calltoaction .s7thumbcell {
	margin:5px;
 }
.s7calltoaction .s7thumb {
	border:1px solid transparent;
	width:75px;
	height:75px;
 }
.s7calltoaction .s7thumb[state='selected'] {
	border:1px solid #FFFFFF;
 }
.s7calltoaction .s7label {
	font-family:Helvetica, sans-serif;
	font-size:12px;
 }
.s7calltoaction .s7scrollbar {
	background-color:rgba(100, 100, 100, 0.2);
	position:absolute;
	top:0px;
	bottom:0px;
	right:0px;
	width:22px;
 }
.s7calltoaction .s7scrollbar .s7scrollthumb {
	position:absolute;
	backgroundRepeat:no-repeat;
	backgroundPosition:center;
	height:30px;
 }
.s7calltoaction .s7scrollbar .s7scrollthumb[state='up'] {
	background-image:url(images/sdk/scrollbar_thumb_up.png);
 }
.s7calltoaction .s7scrollbar .s7scrollthumb[state='over'] {
	background-image:url(images/sdk/scrollbar_thumb_over.png);
 }
.s7calltoaction .s7scrollbar .s7scrollthumb[state='down'] {
	background-image:url(images/sdk/scrollbar_thumb_down.png);
 }
.s7calltoaction .s7scrollbar .s7scrollthumb[state='disabled'] {
	background-image:url(images/sdk/scrollbar_thumb_disabled.png);
 }
.s7calltoaction .s7scrollbar .s7scrolltrack {
	width:20px;
	background-color:#cbcbcb;
 }
.s7calltoaction .s7scrollbar .s7scrollupbutton {
	display:block;
	width:20px;
	height:20px;
 }
.s7calltoaction .s7scrollbar .s7scrollupbutton[state='up'] {
	background-image:url(images/sdk/scroll_up_up.png);
 }
.s7calltoaction .s7scrollbar .s7scrollupbutton[state='over'] {
	background-image:url(images/sdk/scroll_up_over.png);
 }
.s7calltoaction .s7scrollbar .s7scrollupbutton[state='down'] {
	background-image:url(images/sdk/scroll_up_down.png);
 }
.s7calltoaction .s7scrollbar .s7scrollupbutton[state='disabled'] {
	background-image:url(images/sdk/scroll_up_disabled.png);
 }
.s7calltoaction .s7scrollbar .s7scrolldownbutton {
	display:block;
	width:20px;
	height:20px;
 }
.s7calltoaction .s7scrollbar .s7scrolldownbutton[state='up'] {
	background-image:url(images/sdk/scroll_down_up.png);
 }
.s7calltoaction .s7scrollbar .s7scrolldownbutton[state='over'] {
	background-image:url(images/sdk/scroll_down_over.png);
 }
.s7calltoaction .s7scrollbar .s7scrolldownbutton[state='down'] {
	background-image:url(images/sdk/scroll_down_down.png);
 }
.s7calltoaction .s7scrollbar .s7scrolldownbutton[state='disabled'] {
	background-image:url(images/sdk/scroll_down_disabled.png);
 }
.s7tooltip {
	position:absolute;
	padding:5px;
	line-height:100%;
	text-align:center;
	background-color:rgb(224, 224, 224);
	color:rgb(26,26,26);
	font-family:Helvetica, sans-serif;
	font-size:11px;
	z-index:10000;
	border:1px solid rgb(191,191,191);
 }
Parameters:
{String|Container} container
The reference to Container instance or the ID of the parent DOM element to which the component is added as a child
{s7sdk.ParameterManager} settings
A parameter manager instance that represents the desired configuration.
{String} compId
An optional parameter that specifies the ID of the component DOM element.
See:
s7sdk.SwatchDesc
s7sdk.ParameterManager
Method Detail
addEventListener(type, handler, useCapture)
Adds an event listener to the instance of the CallToAction component. The handler function receives a DOM event object of type Event. The object contains a property s7event, which references the associated custom event object, for example s7sdk.event.InteractiveSwatchesEvent.

The events supported by the component are:

  • s7sdk.event.InteractiveSwatchesEvent.SWATCH_QUICKVIEW_ACTIVATED - Dispatched when a swatch associated with a QuickView href is selected. s7sdk.event.InteractiveSwatchesEvent
  • s7sdk.event.InteractiveSwatchesEvent.SWATCH_URL_ACTIVATED - Dispatched when a swatch associated with a URL href is selected. This event is dispatched before navigating to the URL.s7sdk.event.InteractiveSwatchesEvent
  • s7sdk.event.StatusEvent.NOTF_ASSET_METADATA_READY - Dispatched when component receives asset metadata. If the component is initialized with setMediaSet() it dispatches instantly inside that API call. Otherwise if the component loads req=set on its own, this event is sent when component has received and parsed req=set. s7sdk.event.StatusEvent
  • s7sdk.event.StatusEvent.NOTF_VIEW_READY - Dispatched when component loads all images for swatches currently visible on the screen. It is sent both during the initial load and during consequent scroll or resize operations. s7sdk.event.StatusEvent
  • s7sdk.event.StatusEvent.NOTF_PRELOAD_START - Dispatched when swatch images download begins according to maxloadradius modifier. The event may be sent multiple times during component's life cycle as user actions may trigger new preloading step. s7sdk.event.StatusEvent
  • s7sdk.event.StatusEvent.NOTF_PRELOAD_COMPLETE - Dispatched when all swatch images according to maxloadradius modifier are downloaded. The event may be sent multiple times during component's life cycle as user actions may trigger new preloading step. s7sdk.event.StatusEvent
  • s7sdk.event.PopupEvent.POPUP_CLOSED - Dispatched when CallToAction hides. The event is sent when calling method hidePanel(). s7sdk.event.PopupEvent.POPUP_CLOSED
    • Parameters:
    {String} type
    Event name, for example s7sdk.event.InteractiveSwatchesEvent.SWATCH_URL_ACTIVATED.
    {Function} handler
    Function to be called when the event gets dispatched.
    {Boolean} useCapture
    Register capture phase.
    See:
    s7sdk.event.InteractiveSwatchesEvent
    s7sdk.event.StatusEvent
    dispose()
    Dispose is used to remove itself and all sub-elements from the DOM
    {Number} getHeight()
    Returns the current inner height of the component.
    Returns:
    {Number} the inner height of the component.
    {Array} getInteractiveData()
    Returns currently displayed list of interactive swatches.
    Returns:
    {Array} Array of JSON objects specifying the swatches asset and corresponding actions.
    {Object} getInteractiveDataProperties()
    Get the global properties of the interactive data associated with the currently displayed list of interactive swatches.
    Returns:
    {Object} JSON objects with name:value pairs.
    {Boolean} getVisibility()
    Returns currently visible state of component.
    Returns:
    {Boolean} True if component are shown, false otherwise.
    {Number} getWidth()
    Returns the current inner width of the component.
    Returns:
    {Number} the inner width of the component.
    hidePanel()
    Hide the CallToAction and dispatch the PopupEvent.POPUP_CLOSED to notify handlers
    See:
    s7sdk.event.PopupEvent.POPUP_CLOSED
    resize(w, h)
    Resize the component.
    Parameters:
    {Number} w
    width in pixels.
    {Number} h
    height in pixels.
    setCSS(classname, property, value)
    Sets a particular CSS class and property on a component
    Parameters:
    {String} classname
    The CSS classname to use for this style. i.e. .s7calltoaction
    {String} property
    The CSS property that is being set. i.e. background-color
    {String} value
    The CSS property value being set. i.e. #FF0000
    setInteractiveData(interactiveData, properties)
    Changes the currently displayed list of interactive swatches by providing an array of interactive data.
    Parameters:
    {Array} interactiveData
    Array of JSON objects specifying the swatches asset and the corresponding actions.
    {Object} properties
    Optional JSON object specifying global interactive data properties
    setModifier(modObj)
    Sets 1-N # of modifiers for the component.
    Parameters:
    {Object} modObj
    A simple JSON object with name:value pairs of valid modifiers for a particular component
    showPanel()
    Show the CallToAction
    Documentation generated by JsDoc Toolkit 2.4.0 on Thu Oct 15 2020 11:59:13 GMT-0000 (UTC)