Whole shop and your own pages

Blocks take buyers from the event list to the event, the checkout and the confirmation. There are three ways to arrange this on your website.

The whole shop in one tag

The quickest way: one page, one tag.

<ts-storefront></ts-storefront>

This puts the event list, event pages, checkout, confirmation, vouchers, My tickets and the legal texts on this one page. Visitors move between them without the page reloading. The address shows where they are, so the back button and shared links work too:

Address	Page
/tickets	Event list
/tickets?ts_event=summer-fest	Event
/tickets?ts_order=…	Checkout and order
/tickets?ts_page=vouchers	Vouchers
/tickets?ts_page=account	My tickets
/tickets?ts_page=imprint	Legal text (also terms, privacy, withdrawal)

Your own layout on one page

With <ts-route> you build the same page yourself. The content only appears on the pages you name in match, and loads nothing before that:

<ts-route match="events">
  <ts-event-filter></ts-event-filter>
  <ts-event-list></ts-event-list>
</ts-route>

<ts-route match="event">
  <ts-event>
    <h1><ts-event-title></ts-event-title></h1>
    <ts-event-cover></ts-event-cover>
    <ts-event-description></ts-event-description>
    <ts-ticket-selector></ts-ticket-selector>
  </ts-event>
</ts-route>

<ts-route match="order"><ts-checkout></ts-checkout></ts-route>

The pages are called events, event, order, vouchers, account and legal.

Your own pages

If your website has its own pages for events or its own checkout, give the script their addresses. {slug}, {id} and {page} are filled in:

<script
  src="https://embed.tickysmart.io/elements/v1.js"
  data-key="ts_pk_live_…"
  data-url-events="/programme"
  data-url-event="/programme/{slug}"
  data-url-order="/checkout?ts_order={id}"
  data-url-vouchers="/vouchers"
  data-url-account="/my-tickets"
  data-url-legal="/legal/{page}"
  defer
></script>

How the event page knows which event to show:

On the page	Where the event comes from
<ts-event slug="summer-fest">	Set directly, good for one page per event
<ts-event slug-from-path>	Last part of the address, so /programme/summer-fest
<ts-event>	From ?ts_event=summer-fest

The checkout needs the order from the address, so ?ts_order={id} as in the example above.

Common questions

Can I show several workspaces on one page?

Yes. Put just one key on the script and place the second workspace's blocks in <ts-shop workspace="short-name">. Both workspaces must have allowed the website.

How do search engines find my event pages?

Put ts-event-seo on the page and search engines get the event's structured data, as in the shop. The page title and description in search results come from your website.