Service catalog page templates
Service catalog page templates
Service catalog page templates are optional. They become available after enabling service catalog in your account.
The service catalog has two page templates:
- the service list page
- the service page
Both expose exactly the same methods.
The service list page is rendered when a user navigates to https://{yoursubdomain}.zendesk.com/hc/{locale}/services/.
The service page is rendered when a user navigates to https://{yoursubdomain}.zendesk.com/hc/{locale}/services/{service_id}.
Service catalog pages are only rendered in help centers that have service catalog enabled. You may have multiple help centers and multiple brands, but only one with service catalog enabled.
Service catalog items
To display a list of available services, you can call the service catalog list API or the service catalog search API using JavaScript in your theme code.
Each service catalog item has a form_id, which relates the item to a ticket form.
Viewing a ticket form displays a list of associated ticket field ids. Ticket fields can be used when creating or updating a service catalog item, to be displayed in the item's request form.
Submitting a service catalog item request will create a ticket request.
Available properties
The following properties can be used in both the service list page template and the service page template.
| Name | Type | Description |
|---|---|---|
| brand | object | A brand object representing the current brand |
| help_center | object | A help_center object that holds information and settings about the current help center |
| settings | object | A settings object with custom settings for the current theme |
| signed_in | boolean | Whether the user is logged in or not |
| user | object | A user object representing the current user |
Available helpers
You can use the following helpers for the service list and service page templates. You can also use any built-in helpers, global helpers, or global advanced helpers.
| Name | Description |
|---|---|
| breadcrumbs | Breadcrumbs for the current page. See breadcrumbs helper |
Example
<div class="container"><div class="sub-nav">{{breadcrumbs}}</div><div id="main-content"><div id="service-catalog-item"></div></div></div>