Opening times

Notes for developers

In order to ensure JavaScript is working for this component, include data-module="m-opening-times" within the container.

Schema should be included to help define the content for search engines - please carefully check the code examples below to ensure the correct properties are being placed on the correct elements. If in doubt, please refer to the schema.org website for reference and use Google's Structured data testing tool to check usage application.

An example to show the schema required for the opening hours content:

<dl class="a-list-opening-times">
	<dt class="a-list-opening-times__days">Monday</dt>
	<dd class="a-list-opening-times__hours" itemtype="https://schema.org/OpeningHoursSpecification">
		8:00am - 6:00pm
		<meta itemprop="dayOfWeek" content="Monday" />
		<meta itemprop="opens" content="8:00am" />
		<meta itemprop="closes" content="6:00pm" />
	</dd>
	<dt class="a-list-opening-times__days">Tuesday</dt>
	<dd class="a-list-opening-times__hours" itemtype="https://schema.org/OpeningHoursSpecification">
		8:00am - 5:00pm
		<meta itemprop="dayOfWeek" content="Tuesday" />
		<meta itemprop="opens" content="8:00am" />
		<meta itemprop="closes" content="5:00pm" />
	</dd>
<dl>

An example to show the schema required for the grouped days opening hours content:

<dl class="a-list-opening-times">
	<dt class="a-list-opening-times__days">Monday - Friday</dt>
	<dd class="a-list-opening-times__hours" itemtype="https://schema.org/OpeningHoursSpecification">
		8:00am - 6:00pm
		<meta itemprop="dayOfWeek" content="Monday, Tuesday, Wednesday, Thursday, Friday" />
		<meta itemprop="opens" content="8:00am" />
		<meta itemprop="closes" content="6:00pm" />
	</dd>
	<dt class="a-list-opening-times__days">Saturday - Sunday</dt>
	<dd class="a-list-opening-times__hours" itemtype="https://schema.org/OpeningHoursSpecification">
		8:00am - 5:00pm
		<meta itemprop="dayOfWeek" content="Saturday, Sunday" />
		<meta itemprop="opens" content="8:00am" />
		<meta itemprop="closes" content="5:00pm" />
	</dd>
<dl>

No schema is required for a time zone. To achieve this in to your list simply add the text into a-list-opening-times__hours for example:

<dl class="a-list-opening-times">
	<dt class="a-list-opening-times__days">Monday</dt>
	<dd class="a-list-opening-times__hours" itemtype="https://schema.org/OpeningHoursSpecification">
		8:00am - 6:00pm GMT
		<meta itemprop="dayOfWeek" content="Monday" />
		<meta itemprop="opens" content="8:00am" />
		<meta itemprop="closes" content="6:00pm" />
	</dd>
<dl>

Controling opening times programatically

Opening times can now be closed programatically. The following method is available for use:

For example:

document.addEventListener( 'frameworkready', function () {
	FRAMEWORK.require([ 'blocks/m-opening-times' ], function ( mOpeningTimesModule ) {
		var mOpeningTimesEl = document.querySelector( '#openingTimesId' ),
			mOpeningTimesInstance = mOpeningTimesModule.initInstance( mOpeningTimesEl );		mOpeningTimesInstance.close();
	});
});

Extension component

This component forms part of the 'additional-help' extension and so requires an additional stylesheet to be loaded in order to be used; include the following code in the header of your page to attach the relevant additional stylesheet:

<link media="all" href="./assets/[ theme type ]/[ release version ]/[ organisation ]/[ theme name ]/css/additional-help.css" rel="stylesheet" />

---

Notes for testers

When Javascript is disabled the component will display as an open list with no show/hide function.

---

Classes overview

The following table gives you a quick overview of the CSS classes that can be applied.

---

Keyboard operations

TAB

When tabbing to the opening times link, it should show as selected by the underline turning blue.

Using the enter key when the link is highlighted should open the list.