.png%3Falt%3Dmedia%26token%3D6deff902-b475-4b95-bffc-b313f43260b5)
.png%3Falt%3Dmedia%26token%3D6deff902-b475-4b95-bffc-b313f43260b5)
Introduction to Customizing the Widgets
Sometimes it’s easier for you, as a developer, to investigate Custom JavaScript issues by viewing the widgets through the Debugging Mode in your browser. Our developers add debugging logs for almost all methods that widgets execute. You can view these logs in your Developer Console using the following methods.
You can enable it by simply adding ?debug=1 as an extra URL parameter.
Or you can enable it by adding the following JavaScript global variable. You must place it before widget embed code.
<script>window.Visual UGC = {debug: true};</script>
You can use the Code Editor to modify both your Custom CSS and JavaScript. The CSS editor supports LESS CSS pre-processor. That means you can use both traditional CSS syntax or the better LESS syntax.
You can now also click the fork link at the top-right corner of each editor pane. This brings the boilerplate code from the Visual UGC codebase so that you don't need to write from scratch or copy & paste from our Developer Portal.
All inline tiles reside in an Iframe with the widgetapp.stackla.com URL. You can't just write JavaScript on your website to access it because of browser security restriction. The only way to access it is via our Code Editor.
To quickly get started with Custom Expanded Tile JavaScript, you can fork or copy & paste the following code into the editor.
$.extend(Callbacks.prototype, {
onCompleteJsonToHtml: function (tileObject, t) {
return tileObject;
},
onCompleteRenderImage: function(img) {
},
// tiles is an jquery array object, use tiles.each when traversing
onCompleteAddingToDom: function (tiles) {
},
// call first, before render/window resize
onBeforeRenderIsotope: function (containerWidth, maxTileWidth, margin, numColumns, currentTileWidth) {
//Can be used to handle break-points for responsiveness, example:
/*
if (containerWidth > 900) {
var columns = 6;
return {
tileWidth: Math.floor(((containerWidth - margin) / columns) - margin);
numColumns: columns
}
} else {
var columns = 3;
return {
tileWidth: Math.floor(((containerWidth - margin) / columns) - margin);
numColumns: columns
}
}
*/
// return tile width, isotope will be init as tile width + margin
return {
tileWidth: currentTileWidth,
numColumns: numColumns
}
},
// call second, before each tile width and height is set
getTileWidth: function (tile, tileWidth, margin, numColumns) {
// return tile width
return tileWidth;
},
// call third, after tile width and height is set
onCalculateDimensions: function (tile) {
},
// After filter being changed
onCompleteChangeFilter: function (tiles, prevFilterId, nextFilterId) {
},
// Before more tiles being rendered
onBeforeRenderTiles: function (addedIds, addedData) {
},
// After more tiles being rendered
onCompleteRenderTiles: function ($addedTiles, addedData) {
},
// Triggers when it's the end of the scrolling
onScrollLoad: function (tiles, jsLoading) {
},
// Triggers when it's the end of the scrolling
onScrollEnd: function (tiles, jsLoading) {
},
// Triggers when parent page triggers a customised postMessage
onMessage: function (type, data) {
}
});
//======================
// Customisable Strings
//======================
Strings.load_more = 'Load more content';
Strings.scroll_load = 'Loading...';
Strings.scroll_end = 'There is no more content to be displayed.';
- jQuery: You can access it by using
$global variable. The current version is 1.7.1. - lodash: You can access it by using
_global variable. The current version is 3.10.1. - Mustache.js: You can access it by using
Mustacheglobal variable. The current version is 0.8.1. - CryptoJS: You can access it by using
CryptoJSglobal variable. The current version is 3.1.2.
We would recommend the use of our Expanded Tile Code Editor when customising your Expanded Tiles. However, as the Widget Expanded Tiles are rendered in their parent page, you can also customize them by adding JavaScript to your parent page html.
To quickly get started with Custom Expanded Tile JavaScript, you can fork or copy and paste the following code into the editor.
// Events
Stackla.WidgetManager
.on('tileExpand', function (e, data) {
console.log(e.type, data.expandType, data.tileData, data.widgetId);
})
.on('beforeExpandedTileOpen', function (e, data) {
console.log(e.type, data.el, data.tileData, data.widgetId);
})
.on('expandedTileImageLoad', function (e, data) {
console.log(e.type, data.el, data.tileEl, data.widgetId);
})
.on('beforeExpandedTileImageResize', function (e, data) {
console.log(e.type, data.sizes, data.el, data.tileEl, data.widgetId);
})
.on('expandedTileOpen', function (e, data) {
console.log(e.type, data.el, data.tileData, data.widgetId);
})
.on('expandedTileImageResize', function (e, data) {
console.log(e.type, data.sizes, data.el, data.tileEl, data.widgetId);
})
.on('userClick', function (e, data) {
console.log(e.type, data.tileData, data.widgetId);
})
.on('shareClick', function (e, data) {
console.log(e.type, data.shareNetwork, data.tileData, data.widgetId);
})
.on('moreLoad', function (e, data) {
console.log(e.type, data.page, data.widgetId);
})
.on('shopspotFlyoutShow', function (e, data) {
console.log(e.type, data.productTag, data.tileData, data.widgetId);
})
.on('shopspotActionClick', function (e, data) {
console.log(e.type, data.productTag, data.tileData, data.widgetId);
});
// Callbacks
var widgetId = '-1'; // TODO - Change to your widget ID.
window.StacklaFluidWidgetProperties = {};
window.StacklaFluidWidgetProperties[widgetId] = {
callbacks: {
'onAfterWidgetLoaded': function () {
console.log('onAfterWidgetLoaded');
},
'onBeforeExpandedTileOpen': function (tile, data) {
console.log('onBeforeExpandedTileOpen');
return tile;
},
'onAfterExpandedTileOpen': function () {
console.log('onAfterExpandedTileOpen');
},
'onBeforeExpandedTileImageResize': function () {
console.log('onBeforeExpandedTileImageResize');
},
'onAfterExpandedTileImageResize': function () {
console.log('onAfterExpandedTileImageResize');
},
'onAfterExpandedTileImageLoad': function () {
console.log('onAfterExpandedTileImageLoad');
}
}
};
// Methods
// Stackla.WidgetManager.postMessage(typeName, data, [widgetId])
// Stackla.WidgetManager.sync();
// Stackla.WidgetManager.search(widgetId, keyword);
// Stackla.WidgetManager.changeFilter(widgetId, filterId);
For more information, please check the Widget Expanded Tile JavaScript API and How to use "Filter and search" in a Widget documentations.
- jQuery: You can access it by using the
$tacklaglobal variable. The version is 1.10.2.
We provide a Blank Canvas widget so that you can can build your own widget when you find that the current Visual UGC Widgets don't fit your customisation needs.
To quickly get started with the Blank Canvas widget customisations, you can copy and paste the following code into the Custom Code Editor in Stackla.
<div class="track">
<div class="container">
{{#tiles}}
{{>tpl-tile}}
{{/tiles}}
</div>
</div>
<div class="tile">
<div class="hd">#{{id}}</div>
<div class="bd">{{message}}</div>
{{#image}}
<div class="ft">
<img src="{{image}}" width="120"/>
</div>
{{/image}}
</div>
// Load tiles data from selected filter
Stackla.loadTilesByFilter(function (tiles) {
// Render the layout template
Stackla.render({tiles: tiles});
});
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body {
background: #ccc;
padding: 10px 0 0 10px;
font-family: 'Open Sans', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.tile {
background: #fff;
border: solid 1px #ccc;
color: #666;
font-size: 13px;
padding: 10px;
margin-right: 10px;
margin-bottom: 10px;
.hd {
margin-bottom: 10px;
}
.bd {
color: #333;
font-size: 16px;
}
}
Last modified 14d ago