Landing web component¶

The landing web component <ds-landing> shows the events of your Infocenter View as cards, with free text search, facet filters, a date range filter and paging.

Load the scripts¶

Load the scripts once per page, in this order. Load them at the end of <body> or with defer.

<script src="https://cdn.discover.swiss/webcomponents/general/ng-polyfills.js"></script>
<script src="https://cdn.discover.swiss/webcomponents/general/ng-runtime.js"></script>
<script src="https://cdn.discover.swiss/webcomponents/general/wc-landing-1.js"></script>

For the test environment, use https://cdn-test.discover.swiss/webcomponents/general/ instead.

Info

If your page is itself an Angular application, it already loads zone.js. Don't load ng-polyfills.js in that case.

Versions

The major version is part of the file name (wc-landing-1.js). Updates within a major version are backwards compatible and are applied to the file automatically. A breaking change is released under a new file name (wc-landing-2.js), so you decide when to switch.

Add the element¶

<ds-landing
    language="en"
    schedule-filter="true"
    config='{
        "infocenterUrl": "https://api.discover.swiss/info/v2",
        "subscriptionKey": "YOUR_SUBSCRIPTION_KEY",
        "projects": ["YOUR_PROJECT"],
        "viewId": "YOUR_VIEW_ID"
    }'>
</ds-landing>

The component takes the full width and height of its parent element. Objects can be passed as a JSON string attribute, as above, or as a JavaScript property:

const landing = document.querySelector('ds-landing');
landing.config = {
    infocenterUrl: 'https://api.discover.swiss/info/v2',
    subscriptionKey: 'YOUR_SUBSCRIPTION_KEY',
    projects: ['YOUR_PROJECT'],
    viewId: 'YOUR_VIEW_ID',
};

Show your view¶

Set viewId in config to the ViewID of your Infocenter View, e.g. "viewId": "ds-f7c2599". The component sends it with every search. The Infocenter applies the filters, facets and sort order of the view, and the visitor's selection on top of it.

Set projects to the project of your view. If the view has no project, projects defines which events are searched.

Warning

projects defaults to ["demo-web"], the discover.swiss demo project. Always set your own project.

You can also use the component without a view. Then define the content with filterByTypes, facets and the other options below. A view is recommended: you maintain the content in the Partner Portal without changing your website, and the same view can be used on several websites.

Configuration¶

Attributes¶

Attribute	Type	Description
`config`	JSON / object	Component configuration, see Config. Required.
`language`	`en` \| `de`	Language of the component and of the data. Without it, the browser language is used if it is English or German, otherwise German.
`schedule-filter`	boolean	Shows the date range filter. Takes precedence over `showScheduleFilter` in `config`.
`styles`	JSON / object	CSS variable overrides, see Styles.
`view-height`	number (px)	Fixed height. By default the component takes the height of its parent element.
`view-width`	number (px)	Fixed width. By default the component takes the width of its parent element.
`loading`	boolean	Shows the loading state from outside, e.g. while your page prepares data.
`additional-actions-config`	JSON / object	Extra action buttons on the cards of specific items, see Additional actions.

Config¶

Property	Type	Default	Description
`infocenterUrl`	string	-	Base URL of the Infocenter API, see Environments. Required.
`subscriptionKey`	string	-	Your API subscription key. Required.
`projects`	string[]	`["demo-web"]`	Infocenter projects to search in.
`viewId`	string	-	ViewID of your Infocenter View.
`resultsPerPage`	number	`12`	Events per page.
`filterByTypes`	string[]	all types	Only show items of these types, e.g. `["Event"]`.
`filterByCombinedTypeTree`	string[]	-	Fixed `combinedTypeTree` filter. It overrides what the visitor selects in the type filter.
`facets`	Facet[]	`[]`	Additional facets to request and show as filters, see Facets.
`showSearchBar`	boolean	`true`	Show the free text search field.
`showFilters`	boolean	`true`	Show the filter panel.
`showScheduleFilter`	boolean	`false`	Show the date range filter, see Date range filter.
`detailView`	object	-	Open events in the event detail web component, see Event detail.
`linkPriority`	LinkPriorityRule[]	see Card links	Which of an event's links a card opens.
`clickEventMapping`	object	see Events	Which item property is sent as `itemId` in the `dsItemClicked` event.
`fontFamily`	string	-	Name of a custom font. Only applied together with `fontUrl`.
`fontUrl`	string	-	URL of a `woff2` font file for `fontFamily`.

Event filters¶

The visitor can combine all of the following filters. They always narrow down the result of the view.

Date range filter¶

With showScheduleFilter: true or the schedule-filter="true" attribute, the filter panel shows a Start Date and an End Date field. The component sends the dates as scheduleStart and scheduleEnd to the search. Either date can be left empty for an open range.

While a date range is selected:

only events with a date in the range are shown, past dates are ignored,
the events are sorted by their next date in the range,
the result count is hidden, and a Load More button appends the next events instead of page numbers.

The Infocenter filters the dates after loading the events, so it can't calculate an exact count. See Filtering by schedule for details. Dates are in Swiss time.

Every facet in the search response is shown as a filter: trees for categoryTree and combinedTypeTree, lists for the other facets. containedInPlace/id is shown as a tree of regions and municipalities if your project has an administrative area hierarchy. Define the facets in your view, with display names per language. Use the facets property only for facets the view doesn't contain.

"facets": [
    {"name": "categoryTree", "scope": "all", "count": 1000},
    {"name": "address/addressLocality", "scope": "all", "count": 1000}
]

Facets useful for events: categoryTree, tag, containedInPlace/id, address/addressLocality, address/postalCode, sourcePartner and type. All supported facets: combinedTypeTree, categoryTree, address/addressLocality, address/postalCode, campaignTag, combinedType, containedInPlace/id, elevation/ascent, elevation/descent, elevation/minAltitude, elevation/maxAltitude, rating/condition, rating/difficulty, season, sourcePartner, tag, time, type and leafType. See Facets for the facet options.

Selected filter values are shown as chips above the list and can be removed one by one. On screens narrower than 992 px, the filters open from a Filters button.

Preselect places by url¶

A containedInPlace parameter in the page url preselects places in the place filter, e.g. https://www.example.com/events?containedInPlace=place-id-1,place-id-2. Use it to link to the calendar of a specific region.

Search text¶

The search field searches in the name, description and address of the events.

Event dates on cards¶

Each card shows the date of the event on its image:

Event schedule	Shown on the card
One date	The date, or the next date if the first one is in the past, e.g. `OCT 15, 2026`
Recurring on weekdays	The weekdays and the last date, e.g. `Mo, We, Fr` and `UNTIL NOV 22, 2026`
Several dates	The next date and the last date, e.g. `NEXT DATE OCT 25, 2026` and `UNTIL NOV 22, 2026`

Card links¶

Without a detail view, a click on a card opens one of the event's links in a new tab. By default the component prefers the link types WebBooking, WebHomepage and WebDetail, in this order, and otherwise uses the event's first link. Cards without a link aren't clickable.

linkPriority changes the order. A card opens the first link that matches a rule, in rule order. A rule matches when all the properties it defines match. type is the link type (* matches any type). urlContains is a part of the url, or a list of alternatives. If no rule matches, the default order applies.

"linkPriority": [
    {"urlContains": ["guidle.com", "myfarm.ch"]},
    {"type": "WebDetail"}
]

Events¶

The component dispatches these events on the <ds-landing> element:

Event	`event.detail`
`dsItemClicked`	`{itemId}` when a card is clicked, `{itemId, ...action}` when an additional action is clicked
`searchResultEvent`	the Infocenter search response
`searchErrorEvent`	`{status, message}` when a search failed, see Errors

document.querySelector('ds-landing').addEventListener('dsItemClicked', (event) => {
    console.log(event.detail.itemId);
});

itemId is the event's identifier. clickEventMapping sets a different item property:

"clickEventMapping": {
    "search": {"itemIdProperty": "id"}
}

Errors¶

If a search fails, e.g. because of a network error or an invalid subscription key, the component shows the message "The results could not be loaded." with a Try again button instead of the list, and dispatches searchErrorEvent. status is the HTTP status of the failed request, or 0 for network errors.

Styles¶

Adjust the look to your website with CSS variables. Pass them without the leading -- in the styles attribute:

<ds-landing
    styles='{"main-font": "\"Source Sans 3\", sans-serif", "accent-100": "#0057b8", "card-width": "300px"}'
    ...>
</ds-landing>

All CSS variables and their defaults

// font
main-font: 'HK Grotesk', serif;

// colors
primary-100: #212121;
primary-90: #373737;
primary-80: #4D4D4D;
primary-70: #646464;
primary-60: #707070;
primary-50: #909090;
primary-40: #A6A6A6;
primary-30: #BCBCBC;
primary-20: #D3D3D3;
primary-10: #DDDDDD;
primary-5: #F0F0F0;
primary-0: #FFFFFF;
accent-dark: #B12527;
accent-100: #D02C2E;
accent-70: #DB6A6F;
accent-60: #E38082;
accent-30: #E9A8AC;

// cards
cards-column-gap: 20px;
cards-row-gap: 28px;
card-width: 340px;
card-border-radius: 4px;
card-image-height: 200px;

// filters
search-margin: 0 0 25px 0;
filter-width: 280px;
filter-title-height: 60px;
filter-icon-size: 20px;

// checkbox
checkbox-size: 20px;
checkbox-border-radius: 3px;
checkbox-border-width: 1px;

// paginator
paginator-margin: 60px 0 20px 0;

// animation
animation-duration: 150ms;

To use a web font that isn't loaded on your page, set fontFamily and fontUrl in config.

Additional actions¶

Additional actions add buttons to the cards of specific items, e.g. "Reserve table". An action is shown on the card of every item whose identifier equals the action's areaServed. A click dispatches dsItemClicked with the action's properties.

<ds-landing
    additional-actions-config='{
        "filterByAdditionalActions": false,
        "additionalActions": [
            {"areaServed": "ITEM_IDENTIFIER", "actionId": "reserveTable", "displayName": "Reserve table", "payload": {}}
        ]
    }'
    ...>
</ds-landing>

With filterByAdditionalActions: true, the list only shows items that have at least one action.