Service Catalog/ Product

Hello @miranda-a ,

This is not a perfect solution and we struggle as you do with preventing the ordering of individual service items without going through the bundle, but what we did to help was to hide the service categories where the individual service items reside. Then we created a service category that only contains the bundles and make those visible to requesters. This works from a UI perspective, but it does not remove the ability to order items individually as the requester can see the individual service items if they use “Search” to find them.

To hide the service items somewhat, you can do so in by adding a few lines of Javascript to prevent all items from loading into view. To hide the service categories it takes just a line of jQuery in the support portal page layout.

Here is a code snippet from our instance. Of course the item categories would be of different IDs for your use.

<!-- This script hides all items when the end user first clicks on Service Catalog. This is to ensure they do not directly request an individual piece of hardware. -->
<script type = "text/javascript">
  if (window.location.href.endsWith("support/catalog/items")) {
    jQuery("#catalog_items_container").hide();
    jQuery("<h3>Please select from one of the categories on the left.</h3>").insertAfter("#catalog_items_container");
    jQuery("#categories").click(function () {
      jQuery("#catalog_items_container").show();
      jQuery('h3:contains(Please select from one of the categories on the left.)').hide();
    });
    jQuery('#catalog_search').keypress(function (e) {
      if ((jQuery('#catalog_search').val().length > 0) && (e.which == 13)) {
        jQuery("#catalog_items_container").show();
        jQuery('h3:contains(Please select from one of the categories on the left.)').hide();
      }
    });
  } 
  </script>

<!-- This script hides the individual service item service category from users. -->
<script>
  jQuery("[data-id='"+13000064493+"']").hide();
  jQuery("[data-id='"+13000154048+"']").hide();
  jQuery("[data-id='"+13000152827+"']").hide();
  jQuery("[data-id='"+13000154178+"']").hide();
</script>

Hope this helps,

Zach