Hi Ryan,
Server script
(function() {
data.category_id = $sp.getParameter("sys_id");
if (options && options.sys_id)
data.category_id = options.sys_id;
if (GlideStringUtil.nil(data.category_id)) {
data.error = gs.getMessage("No category specified");
return;
}
data.showPrices = $sp.showCatalogPrices();
data.sc_catalog_page = $sp.getDisplayValue("sc_catalog_page") || "sc_home";
// Does user have permission to see this category?
var categoryId = '' + data.category_id;
var categoryJS = new sn_sc.CatCategory(categoryId);
if (!categoryJS.canView()) {
data.error = gs.getMessage("You do not have permission to see this category");
return;
}
data.category = categoryJS.getTitle();
var catalog = $sp.getValue('sc_catalog') + '';
var scRecord = new sn_sc.CatalogSearch().search(catalog, categoryId, '', false, true);
scRecord.addQuery('sys_class_name', 'NOT IN', 'sc_cat_item_wizard');
scRecord.orderBy('order');
scRecord.orderBy('name');
scRecord.query();
var items = data.items = [];
var count = 1;
data.limit = 9;
if (input && input.new_limit)
data.limit = input.new_limit;
else if (options.limit_item)
data.limit = options.limit_item;
while (scRecord.next() && count <= data.limit) {
var catalogItemJS = new sn_sc.CatItem(scRecord.getUniqueValue());
if (!catalogItemJS.canView())
continue;
var catItemDetails = catalogItemJS.getItemSummary();
var item = {};
item.name = catItemDetails.name;
item.short_description = catItemDetails.short_description;
item.picture = catItemDetails.picture;
item.price = catItemDetails.price;
item.sys_id = catItemDetails.sys_id;
item.hasPrice = catItemDetails.show_price;
item.page = 'appstore_sc_cat_item';
item.type = catItemDetails.type;
item.order = catItemDetails.order;
item.sys_class_name = catItemDetails.sys_class_name;
if (item.type == 'order_guide') {
item.page = 'sc_cat_item_guide';
} else if (item.type == 'content_item') {
item.content_type = catItemDetails.content_type;
item.url = catItemDetails.url;
if (item.content_type == 'kb') {
item.kb_article = catItemDetails.kb_article;
item.page = 'kb_article';
item.sys_id = item.kb_article;
} else if (item.content_type == 'external') {
item.target = '_blank';
}
}
items.push(item);
count ++;
}
data.total_item = scRecord.getRowCount();
data.more_msg = gs.getMessage("{0} of {1}", [data.limit, data.total_item]);
})();
Client Script
function ($scope, spUtil, $rootScope, $location, $timeout) {
var bc = [{label: $scope.page.title, url: '?id=' + $scope.data.sc_catalog_page}];
if ($scope.data.category)
bc[bc.length] = {label: $scope.data.category, url: '#'};
$timeout(function() {
$rootScope.$broadcast('sp.update.breadcrumbs', bc);
});
spUtil.setSearchPage('sc');
/*=============== Begin link handling ===============*/
$scope.onClick = function($event, item) {
var lp = getLinkParts(item);
if (typeof lp == "string")
return; // can't intercept/redirect external content item
$event.stopPropagation();
$event.preventDefault();
var evt = {item: item, search: lp};
// This will let a wrapper widget intercept and redirect somewhere else
$scope.$emit($scope.options.click_event_name, evt);
};
function getLinkParts(item) {
if (item.sys_class_name == 'sc_cat_item_content' && item.content_type == 'external')
return item.url;
return {id: item.page, sys_id: item.sys_id};
}
$scope.getItemHREF = function(item) {
var lp = getLinkParts(item);
if (typeof lp == "string")
return lp;
return "?id=" + lp.id + "&sys_id=" + lp.sys_id;
}
var unregister = $rootScope.$on($scope.options.click_event_name, function($event, o) {
if ("url" in o)
$location.href = o.url;
else
$location.search(o.search);
});
$scope.loadMore = function() {
$scope.data.new_limit = $scope.data.limit + ($scope.options.limit_item || 9);
$scope.stopLoader = false;
$scope.server.update().then(function (){
$scope.data.limit = $scope.data.new_limit;
$scope.stopLoader = true;
})
}
$scope.startItemList = function() {
$scope.stopLoader = true;
}
$scope.$on("$destroy", function() {
unregister();
});
/*=============== End link handling ===============*/
}
HTML
<div>
<h4 ng-if="data.error">{{data.error}}</h4>
<div ng-init="spSearch.targetCatalog()">
<h1 class="h4 m-t-none" aria-label="{{data.category}} ${Category}">{{data.category}}</h1>
<div class="row">
<div class="col-sm-6 col-md-4" ng-if="!data.items.length && !data.error">
${No items in category}
</div>
<div class="col-sm-6 col-md-4" ng-repeat="item in data.items | orderBy: 'order' track by item.sys_id" ng-init="startItemList()">
<div class="panel panel-{{::options.color}} b">
<a target="{{::item.target}}" ng-href="{{::getItemHREF(item)}}" ng-click="onClick($event, item)" class="panel-body block">
<div class="overflow-100">
<h2 class="h4 m-t-none m-b-xs">{{::item.name}}<span ng-if="item.content_type == 'external'" aria-label="${External Link}"> ➚</span></h2>
<img ng-src="{{::item.picture}}" ng-if="item.picture" alt="{{::item.name}}" class="m-r-sm m-b-sm item-image pull-left" />
<div class="text-muted item-short-desc">{{::item.short_description}}</div>
</div>
</a>
<div aria-hidden="true" class="panel-footer">
<a aria-hidden="true" ng-if="item.sys_class_name != 'sc_cat_item_content' || item.content_type == 'kb' || item.content_type == 'literal'" ng-click="onClick($event, item)" ng-href="{{getItemHREF(item)}}" class="pull-left text-muted" tabindex="-1">${View Details}</a>
<a aria-hidden="true" ng-if="item.sys_class_name == 'sc_cat_item_content' && item.content_type == 'external'" ng-click="onClick($event, item)" ng-href="{{getItemHREF(item)}}" target="_blank" class="pull-left text-muted" tabindex="-1">${View Details}</a>
<span class="pull-right item-price font-bold">{{::item.price}}</span>
</div>
</div>
</div>
</div>
<div class="text-a-c" ng-if="!stopLoader && data.items.length > 0 && !data.error">
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
<span class="sr-only">${Loading...}</span>
</div>
<div ng-if="data.limit < data.total_item">
<div class="text-a-c">
{{data.more_msg}}
</div>
<button class="m-t-xs btn btn-default btn-loadmore" ng-click="loadMore()">
${Show More}
</button>
</div>
</div>
</div>
