Left Menu Right Menu
February 15, 2017

Implementing WorldCat button for zero-result searches

Created by: Jeremy McWilliams, Lewis & Clark College

Description: This customization enables you to add a button to the new Primo UI that will send the user’s search to Worldcat if their Primo search returns zero results.

System components: Package Manager/PBO, Javascript

Skill set requirements: PBO, Javascript

Implementation steps:

This can be accomplished two ways: in a Primo Back Office code table, or using the Package Manager.

Primo Back Office Code table method

  1. Navigate to FE Code Table-> Front End -> Error Message->default.nui.noresults.description
  2. In the description field, place the following code, replacing your Worldcat URL with the bolded text below:

    There are no results matching your search "{{term}}". <a href="https://watzek.on.worldcat.org/search?queryString={{term}}" onmouseover='this.style.textDecoration="none"'> <button class="md-raised md-button md-primoExplore-theme md-ink-ripple" type="button" ng-transclude="" aria-label="Search WorldCat" style='margin-left:0;margin-right:0;'> <img src="custom/LCC_NEWUI/img/worldcat-logo.png" width="22" height="22" alt="worldcat-logo" style="vertical-align:middle;"> Search WorldCat</button> </a>

  3. Save the entry, and then deploy the code table

Package Manager method

  1. Open custom.js in your local package
  2. Insert the following code, replacing the link in quotes with your custom WorldCat instance (e.g. https://watzek.on.worldcat.org) and the sentence in quotes with the text you’d like to appear when the button is shown (all code below is also available to copy/paste here). Note: in custom.js, this must be pasted after the following line:
    var app = angular.module('viewCustom', ['angularLoad']);

    function addWorldcatButton(opts){
     app.component('prmSearchResultListAfter', {
     require: {
     prmSearchCtrl: '^prmSearch' },
     controller: 'worldcatButtonController',
     template: `<md-card class="default-card _md zero-margin md-primoExplore-theme" ng-hide="getZeroResults()"> <md-card-title>` + opts.title + `</md-card-title> <md-card-content> <md-button class="md-raised" ng-click="searchWorldCat()"> <img src="https://cdn.rawgit.com/Alliance-PCJWG/primo-explore-worldcat-button/7ee112df/img/worldcat-logo.png" width="22" height="22" alt="worldcat-logo" style="vertical-align:middle;"> Search WorldCat </md-button> </md-card-content> </md-card>` })

    .controller('worldcatButtonController', ['$scope', '$mdDialog',
    function($scope, $mdDialog) {
     var vm = this;
     vm.$onInit = function() {
     $scope.wcBase = opts.link;
     $scope.$prmSearchCtrl = vm.prmSearchCtrl;
     $scope.getZeroResults = function() {
     if ($scope.$prmSearchCtrl.searchService.searchDone && $scope.$prmSearchCtrl.searchService.searchStateService.resultObject.info) { $scope.searchTerm = $scope.$prmSearchCtrl.searchService.searchFieldsService.mainSearch; return ($scope.$prmSearchCtrl.searchService.searchStateService.resultObject.info.total !== 0); } }; $scope.searchWorldCat = function() { window.open(($scope.wcBase + "search?databaseList=&queryString=" + $scope.searchTerm), '_blank'); }; }; }]); }

     title: 'Your search returned zero results, but more might be available by searching WorldCat.',
    link: 'https://yourworldcaturl.worldcat.org/'

  3. Zip and load your local package to the Primo Back Office
  4. Deploy your view
Related customizations
Back to Blog
Comments (0)
Reply To Article