Patterns

Buy a ticket

What does it do?

Helps users to enter the ticket purchase journey straight from the homepage

When to use it?

On the homepage

How it works?

This pattern directs users to the ticket finder service, where they can continue with purchasing a relevant ticket based on the ticket options they have selected

HTML markup

<form class="wmnds-buy-a-ticket">
  <h2 class="wmnds-buy-a-ticket__title">Buy a ticket</h2>
  <div class="wmnds-m-b-md wmnds-p-b-xsm">
    <fieldset class="wmnds-buy-a-ticket__mode-checkboxes">
      <legend class="wmnds-buy-a-ticket__label">Which modes of transport will you use?</legend>
      <div class="wmnds-grid wmnds-grid--spacing-3-sm wmnds-grid--spacing-sm-3-md">
        <label class="wmnds-col-1-3">
          <input type="checkbox" class="wmnds-buy-a-ticket__mode-checkbox wmnds-screenreaders-only" name="useBus" value="allowBus">
          <div class="wmnds-btn wmnds-btn--mode wmnds-btn--block">
            <svg class="wmnds-btn__icon ">
              <use xlink:href="#wmnds-modes-isolated-bus" href="#wmnds-modes-isolated-bus"></use>
            </svg>
            Bus
          </div>
        </label>
        <label class="wmnds-col-1-3">
          <input type="checkbox" class="wmnds-buy-a-ticket__mode-checkbox wmnds-screenreaders-only" name="useTrain" value="allowTrain">
          <div class="wmnds-btn wmnds-btn--mode wmnds-btn--block">
            <svg class="wmnds-btn__icon ">
              <use xlink:href="#wmnds-modes-isolated-rail" href="#wmnds-modes-isolated-rail"></use>
            </svg>
            Train
          </div>
        </label>
        <label class="wmnds-col-1-3">
          <input type="checkbox" class="wmnds-buy-a-ticket__mode-checkbox wmnds-screenreaders-only" name="useTram" value="allowMetro">
          <div class="wmnds-btn wmnds-btn--mode wmnds-btn--block">
            <svg class="wmnds-btn__icon ">
              <use xlink:href="#wmnds-modes-isolated-metro" href="#wmnds-modes-isolated-metro"></use>
            </svg>
            Tram
          </div>
        </label>
      </div>
    </fieldset>
  </div>
  <div class="wmnds-fe-group wmnds-m-b-md wmnds-p-b-xsm ">
    <div class="wmnds-fe-dropdown">
      <label class="wmnds-fe-label wmnds-buy-a-ticket__label" for="buyATicketPassengerType">Who will be travelling?</label>
      <select class="wmnds-fe-dropdown__select wmnds-fe-dropdown__select--secondary" id="buyATicketPassengerType" name="passengerType">
        <option value="" selected="true" disabled="true">
          Select traveller
        </option>
        <option value="Adult">
          Adult
        </option>
        <option value="Child">
          Child
        </option>
        <option value="Student">
          Student
        </option>
        <option value="Family">
          Group / Family
        </option>
        <option value="Concessionary">
          Concession
        </option>
      </select>
    </div>
  </div>
  <div class="wmnds-fe-group wmnds-m-b-md wmnds-p-b-xsm ">
    <div class="wmnds-fe-dropdown">
      <label class="wmnds-fe-label wmnds-buy-a-ticket__label" for="buyATicketDuration">How long will the ticket last for?</label>
      <select class="wmnds-fe-dropdown__select wmnds-fe-dropdown__select--secondary" id="buyATicketDuration" name="timeBand">
        <option value="" selected="true" disabled="true">
          Select ticket length
        </option>
        <option value="Pay on day / 1 day">
          A day
        </option>
        <option value="Less than a month">
          Less than a month
        </option>
        <option value="About a month">
          About a month
        </option>
        <option value="Longer than a month">
          Longer than a month
        </option>
      </select>
    </div>
  </div>
  <button class="wmnds-btn wmnds-col-1 wmnds-col-sm-1-2 wmnds-btn--align-left" type="submit">
    Find tickets
    <svg class="wmnds-btn__icon wmnds-btn__icon--right ">
      <use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use>
    </svg>
  </button>
</form>

Nunjucks markup

{% from "wmnds/patterns/buy-a-ticket/_buy-a-ticket.njk" import wmndsBuyATicket %}

{{
  wmndsBuyATicket()
}}

Recommended javascript (browser compatible)

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var buyATicketJS = function buyATicketJS() {
  var onSubmitForm = function onSubmitForm(e) {
    e.preventDefault();
    var data = new FormData(e.target);
    var queryString = new URLSearchParams(data).toString();
    queryString = queryString.replace('useBus=', '');
    queryString = queryString.replace('useTrain=', '');
    queryString = queryString.replace('useTram=', '');
    window.location.href = "https://legacy.wmnetwork.co.uk/tickets/#/?".concat(queryString);
  };
  var buyATicketComponents = document.querySelectorAll('.wmnds-buy-a-ticket');
  buyATicketComponents.forEach(function(buyATicketComponent) {
    buyATicketComponent.addEventListener('submit', onSubmitForm);
  });
};
var _default = buyATicketJS;
exports["default"] = _default;

Recommended javascript (ES6)

const buyATicketJS = () => {
  const onSubmitForm = e => {
    e.preventDefault();
    const data = new FormData(e.target);
    let queryString = new URLSearchParams(data).toString();
    queryString = queryString.replace('useBus=', '');
    queryString = queryString.replace('useTrain=', '');
    queryString = queryString.replace('useTram=', '');
    window.location.href = `https://legacy.wmnetwork.co.uk/tickets/#/?${queryString}`;
  };

  const buyATicketComponents = document.querySelectorAll('.wmnds-buy-a-ticket');

  buyATicketComponents.forEach(buyATicketComponent => {
    buyATicketComponent.addEventListener('submit', onSubmitForm);
  });
};

export default buyATicketJS;