SimpleTrain Search Form Web Component

Live Example

Summary

This web component offers a search form for the SimpleTrain ticket shop. It can be used on any website and includes both logic and styling.

Once the user clicks the search button, they are redirect to the ticket shop with the search parameters appended as query parameters.

Getting started

Include the following snippet wherever you want to display the ticket search form.

    <link
        rel="stylesheet"
        type="text/css"
        href="https://search.{TICKET-SHOP}/styles.css" />
    <script
        src="https://search.{TICKET-SHOP}/search.js">
    </script>
    <ticket-search
        ticket-shop-domain="{TICKET-SHOP}">
    </ticket-search>

where {TICKET-SHOP} is the domain of the ticket shop. In the development environment, this is simpletrain.dev

Configuration

The following attributes can be set on the <ticket-search> element:

`ticket-shop-domain`

The main domain of the ticket shop, without protocol. For the development environment, this is simpletrain.dev

`autofocus`

Add the autofocus attribute (without value) to automatically focus the first input element of the search form when the page loads.

Restrictions

The backend server - where e.g. list of stations is requested from - only accepts requests from a list of known origins (CORS). If you'd like to add the web component to a website on a new (sub-)domain, please contact us to add the domain to the list of known origins.