Language selection

Search

Search template - Meta information

Published: March 2019

Working Example

Prototype:

Test pages

Backlog

Their is not GCWeb corresponding template yet

Usability Research

Version history

Search template roadmap

Last updated:

Template component

Note: visual example with styles applied: https://gc-proto.github.io/student-loans/scenarioA/services/search-results-visual.html

Wireframe

wireframe showing the placement of each template section

See the image on github

Template

The CSS class page-type-search must be added to the body element to every search result pages.

Implementer need to properly configure forms and inputs.

<h1 property="name">Search results</h1>
<!-- Search bar (mendatory) -->
<!-- Search filter (optional) -->
<!-- Search result (mendatory) -->
<!-- Advanced search link (optional) -->

Search bar


<form>
	<label class="wb-inv" for="sch-inp">Search Government of Canada websites</label>
	<div class="input-group mrgn-tp-lg">
		<input spellcheck="false" autocomplete="off" id="sch-inp" class="form-control" type="search" />
		<span class="input-group-btn">
			<button type="submit" class="btn btn-primary"> <span class="glyphicon-search glyphicon"></span><span class="wb-inv">Search</span></button>
		</span>
	</div>
</form>

Search bar contextual


<div class="well">
	<form class="mrgn-tp-sm">
		<label class="wb-inv" for="sch-inp">Search Government of Canada websites</label>
		<input class="form-control full-width" spellcheck="false" autocomplete="off" dir="ltr" id="sch-inp" name="q" type="search">
		<div class="mrgn-tp-md">
			<p class="wb-inv">See results from:</p>
			<ul class="radio-inline list-inline mrgn-lft-sm">
				<li><input type="radio" name="resultsfrom" id="opt-allresults" value="allresults" /> <label for="opt-allresults">All Government of Canada websites</label></li>
				<li class="mrgn-lft-lg current" aria-current="location"><input type="radio" name="resultsfrom" id="opt-context" value="context" checked="checked" /> <label for="opt-context">Context label</label></li>
			</ul>
			<div class="pull-right">
				<button type="submit" class="btn btn-primary" name="wb-srch-sub"> <span class="glyphicon-search glyphicon"></span> Search</button>
			</div>
			<div class="clearfix"></div>
		</div>
	</form>
</div>

Notes:

Potential concern

Alternate "See result from:" template

This template leverage link instead of radio button


<p class="wb-inv">See results from:</p>
<ul class="inline">
	<li><a href="[Link to all result search page]">All Government of Canada websites</a></li>
	<li><a class="mrgn-lft-lg current" aria-current="location" href="[Link ot contextual search page]">[context label]</a></li>
</ul>

Notes:

Alternate "Search bar" with the alternate "See result from:" template

The "All Governement of..." is the current location in that example.


<div class="well">
	<form class="mrgn-tp-sm">
		<label class="wb-inv" for="sch-inp">Search Government of Canada websites</label>
		<input class="form-control full-width" spellcheck="false" autocomplete="off" dir="ltr" id="sch-inp" name="q" type="search">
		<div class="mrgn-tp-md">
			<p class="wb-inv">See results from:</p>
			<ul class="list-inline mrgn-lft-sm pull-left">
				<li class="current" aria-current="location"><a href="[Link to all result search page]">All Government of Canada websites</a></li>
				<li class="mrgn-lft-lg"><a href="[Link ot contextual search page]">Context label</a></li>
			</ul>
			<div class="pull-right">
				<button type="submit" class="btn btn-primary" name="wb-srch-sub"> <span class="glyphicon-search glyphicon"></span> Search</button>
			</div>
			<div class="clearfix"></div>
		</div>
	</form>
</div>

Search result


<section>
	<h2 class="wb-inv">Search results</h2>
	<p class="result-count">[number] search results for "[search term]"</p>

	<!-- Search result item (Repeat block - max 10 times) -->

	<!-- Search result pagination -->
</section>

Search result contextual


<section>
	<h2 class="wb-inv">Search results</h2>
	<p class="result-count">[number] search results for "[search term]"</p>
	<p class="gc-byline"><strong>From [Institution name]</strong></p>

	<!-- Search result item (Repeat block - max 10 times) -->

	<!-- Search result pagination -->
</section>

Notes:

Search result item (with page breadcrumb)


<section>
	<h3><a href="#">[Search result page title (not including '- Canada.ca' or other institutional suffix)]</a></h3>
	<ul class="label">
		<li>[institution name]</li>
		<li>[institution name]</li>
		<li>[institution name]</li>
	</ul>
	<ol class="breadcrumb">
		<li>[domain name of search result]</li>
		<li>[parent breadcrumb of page]</li>
	</ol>
	<p class="search-description"><time datetime="2018-01-01" class="search-result-date">[MMM DD, YYYY]</time> - [description/highlight of search result. Search terms in strong]</p>
</section>

Notes:

Shemas information block:

Search result item (with no breadcrumb)

Same info as the preceding section


<h3><a href="#">[Search result page title (not including '- Canada.ca' or other institutional suffix)]</a></h3>
<ul class="label">
	<li>[institution name]</li>
	<li>[institution name]</li>
	<li>[institution name]</li>
</ul>
<p><cite><a href="#">[url of the search result]</a></cite></p>
<p class="search-description"><time datetime="2018-01-01" class="search-result-date">[MMM DD, YYYY]</time> - [description/highlight of search result. Search terms in strong]</p>

Search result pagination

Rules

Test pagination scenario

  1. Scenario 1 - The first page is current and there is more than 50 results page
  2. Scenario 2 - The second page is current and there is more than 50 results page
  3. Scenario 3 - The fifth page is current and there is more than 50 results page
  4. Scenario 4 - The twelfth page is current and there is more than 50 results page
  5. Scenario 5 - The forthy-eighth page is current and there is more than 50 results page
  6. Scenario 6 - The last page is current and there is more than 50 results page
  7. Scenario 7 - The third page is current and there is 6 results page

Source code for all search pagination scenario


<!-- This is code sample from Scenario 2 -->

<div class="text-center">
	<p class="wb-inv">Search results pages</p>
	<ul class="pagination">
		<li>
			<a rel="prev" href="#">Previous<span class="wb-inv"> page of search results</span></a>
		</li>
		<li>
			<a href="#">1<span class="wb-inv">: Page 1 of search results</span></a>
		</li>
		<li class="active" aria-current="page">
			<a href="#">2<span class="wb-inv">: Page 2 of search results</span></a>
		</li>
		<li>
			<a href="#">3<span class="wb-inv">: Page 3 of search results</span></a>
		</li>
		<li class="hidden-xs hidden-sm">
			<a href="#">4<span class="wb-inv">: Page 4 of search results</span></a>
		</li>
		<li class="hidden-xs hidden-sm">
			<a href="#">5<span class="wb-inv">: Page 5 of search results</span></a>
		</li>
		<li class="hidden-xs hidden-sm hidden-md">
			<a href="#">6<span class="wb-inv">: Page 6 of search results</span></a>
		</li>
		<li class="hidden-xs hidden-sm hidden-md">
			<a href="#">7<span class="wb-inv">: Page 7 of search results</span></a>
		</li>
		<li class="hidden-xs hidden-sm hidden-md">
			<a href="#">8<span class="wb-inv">: Page 8 of search results</span></a>
		</li>
		<li class="hidden-xs hidden-sm hidden-md">
			<a href="#">9<span class="wb-inv">: Page 9 of search results</span></a>
		</li>
		<li class="hidden-xs hidden-sm hidden-md">
			<a href="#">10<span class="wb-inv">: Page 10 of search results</span></a>
		</li>
		<li>
			<a rel="next" href="#">Next<span class="wb-inv"> page of search results</span></a>
		</li>
	</ul>
</div>

Advanced Search Link (optional)

Advanced search link below the pagination tab will allow users to enhance the search result.


<p class="text-center"><small><a href="[URL of the advance search page]">Perform an advanced search</a></small></p>

Search filter (optional)

Applying the require to wrap the search result into a columns, as described after the filter block code sample


<section>
	<h2 class="wb-inv">Filters</h2>
	<div class="text-right">
		<button class="btn btn-link">Clear all</button>
	</div>
	<details open>
		<summary>By department</summary>
		<ul class="list-unstyled">
			<li><a href="#">Health Canada (471<span class="wb-inv"> results</span>)</a></li>
			<li><span class="glyphicon glyphicon-ok"></span><span class="wb-inv">Remove active filter:</span> <a href="#">Global Affairs Canada (403<span class="wb-inv"> results</span>)</a></li>
			<li><a href="#">Employment and Social Development Canada (130<span class="wb-inv"> results</span>)</a></li>
			<li><a href="#">Environment and Climate Change Canada (43<span class="wb-inv"> results</span>)</a></li>
			<li><a href="#">Canadian Heritage (29<span class="wb-inv"> results</span>)</a></li>
		</ul>
		<button class="btn btn-link small">Show more <span class="glyphicon glyphicon-chevron-down small"></span></button>
	</details>
</section>

Notes:

Layout adjusted with the filter component


<h1 property="name">Search results</h1>
<!-- Search bar (mandatory) -->
<div class="row">
	<div class="col-md-4 mrgn-tp-md">
		<!-- Search filter (optional) -->
	</div>
	<div class="col-md-8">
		<!-- Search result (mandatory) -->
	</div>
</div>

Schema (Incomplete draft v2)

#
# Schema for the Search template
#

@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#> .
@prefix xsd: <http://www.w3.org/2001/XMLSchema#> .
@prefix dct: <http://purl.org/dc/terms/> .
@prefix skos: <http://www.w3.org/2004/02/skos/core#> .
@prefix wms: <http://vocab.canada.ca/wms> .
@prefix tmpl: <http://vocab.canada.ca/wms/template> .
@prefix comp: <http://vocab.canada.ca/wms/component> .

tmpl:Search
	dct:issued "2019-01-21"^^xsd:date ;
	a rdfs:Class, wms:Template ;
	wms:templateName "gc-srvinfo" ;
	rdfs:label "Search"@en ;
	rdfs:label "Recherche"@fr .

tmpl:SearchBar
	a rdfs:Class,  wms:Component ;
	rdfs:label "Search bar"@en .

tmpl:SearchResult
	a rdfs:Class,  wms:Component ;
	rdfs:label "Search result"@en .

tmpl:SearchResultItem
	a rdfs:Class,  wms:Component ;
	rdfs:label "Search result item"@en .

tmpl:searchResults
	a rdf:Property ;
	rdfs:domains tmpl:SearchResult ;
	rdfs:range tmpl:SearchResultItem .

tmpl:SearchFilters
	a rdfs:Class,  wms:Component ;
	rdfs:label "Search filters"@en .

tmpl:SearchPagination
	a rdfs:Class,  wms:Component ;
	rdfs:label "Search pagination"@en .

tmpl:searchContext
	a rdf:Property ;
	rdfs:domains tmpl:SearchBar ;
	rdfs:domains tmpl:SearchResult ;
	rdfs:range wms:Departements .

Shapes graphs

#
# Shape graph of the Search template
#

@prefix sh: <http://www.w3.org/ns/shacl#> .
@prefix dct: <http://purl.org/dc/terms/> .
@prefix foaf: <http://xmlns.com/foaf/0.1/> .
@prefix comp: <http://vocab.canada.ca/wms/component> .

tmpl:SearchShape
	a sh:NodeShape ;
	sh:targetClass tmpl:Search ;
	sh:and (
		[
			sh:in ( tmpl:SearchBar ) ;
			sh:maxCount 1 ;
			sh:severity sh:Violation ;
		]
		[
			sh:in ( tmpl:SearchResult );
			sh:maxCount 1 ;
			sh:severity sh:Violation ;
		]
	)
	sh:property [
		sh:path tmpl:SearchFilters ;
		sh:maxCount 1 ;
	] .

tmpl:SearchBarShape
	a sh:NodeShape ;
	sh:targetClass tmpl:SearchBar ;
	sh:property [
		sh:path tmpl:searchContext ;
		sh:in wms:Departements
	] .


tmpl:SearchResultShape
	a sh:NodeShape ;
	sh:targetClass tmpl:SearchResult ;
	sh:and (
		[
			sh:path tmpl:searchResults ;
			sh:maxCount 1 ;
		]
		[
			sh:in ( tmpl:SearchPagination )
			sh:maxCount 1 ;
		]
	)
	sh:property [
		sh:path tmpl:searchContext ;
		sh:in wms:Departements
	] .

tmpl:SearchResultItemShape
	a sh:NodeShape ;
	sh:targetClass tmpl:SearchResultItem ;
	sh:and (
		[
			sh:path dct:title ;
			sh:uniqueLang true ;
			sh:minCount 1 ;
		]
		[
			sh:path foaf:page ;
		]
		# Context labels
		# Breadcrumb text

	)
	#
	.


# TODO: tmpl:SearchFiltersShape
Report a problem on this page
Please select all that apply:

Thank you for your help!

You will not receive a reply. For enquiries, please contact us.

Date modified: