<div data-react="search-result-page" data-props="{"contentLink":{"id":87941,"workId":0,"guidValue":"19511fe1-7465-40ce-b312-5f7f2b66f367","providerName":null,"url":"https://int.swegon.com/search-results/","expanded":null},"name":"Search results","language":{"link":"https://int.swegon.com/search-results/","displayName":"English","name":"sv"},"existingLanguages":[{"link":"https://int.swegon.com/search-results/","displayName":"English","name":"en"},{"link":"https://int.swegon.com/sv/sokresultat/","displayName":"Swedish","name":"sv"}],"masterLanguage":null,"contentType":["Page","SearchPage"],"parentLink":{"id":9,"workId":0,"guidValue":"597d63f8-4e11-4e42-81b5-4fd00afb09cb","providerName":null,"url":"https://int.swegon.com/","expanded":null},"routeSegment":"search-results","url":"https://int.swegon.com/search-results/","changed":"2025-09-30T12:53:27Z","created":"2025-09-30T12:53:19Z","startPublish":"2025-09-30T12:53:27Z","stopPublish":null,"saved":"2025-10-31T14:11:05Z","status":"Published","category":[],"metaTitle":"","metaDescription":"","ogTitle":"","ogDescription":"","ogImage":null,"ogType":0,"themeForThisSection":-1,"heading":"Search results","menuHeader":"","noIndex":null,"hideSubPagesInMenu":null,"mainContentArea":null,"endpoint":"https://int.swegon.com","searchPlaceholderText":null,"productSearchGroupName":"Products","documentSearchGroupName":"Documents","informationSearchGroupName":"Information","contactSearchGroupName":"Contacts","productSearchHitName":"Product","categorySearchHitName":"Category","articleSearchHitName":"Article","articlesSearchHitName":"Articles","informationSearchHitName":"Information","contactSearchHitName":"Contact","energyCalculatorSearchHitName":"Footprint","hubspotPostSearchHitName":"Blog post","noResultsMessage":"No result","downloadTableDocument":"Document","downloadTableArticle":"Article","downloadTableType":"Document type","downloadTableDownload":"Download","downloadTableSize":"Size","downloadTableFormat":"Format","showMoreLabel":"Show more","showLessLabel":"Show less","resultsForSearchTermSingular":"result for the search term","resultsForSearchTermPlural":"results for the search term","sortByLabel":"Sort by:","searchDocumentsHeading":"Looking efter något annat?","searchDocumentsPreamble":"<p>This is the preamble for the document search results.</p>","noResultsHeading":"No documents found","noResultsPreamble":"<p>Try <em>adjusting</em> your search or filter to find what you are looking for.</p>","screenReaderDescendingText":"Aktuell sortering är fallande","screenReaderAscendingText":"Aktuell sortering är stigande","screenReaderNoSortText":"Ingen sortering tillämpad","searchHideContactsTab":false,"searchWidget":{"endpoint":"https://int.swegon.com/api/search/autosuggest","searchQueryKey":"q","language":"en","searchPageUrl":"/search-results/","placeholderText":"Placeholder text used for product search","minQueryLength":2,"categoriesLabel":"Search in","categories":[{"key":"all","value":"All"},{"key":"products","value":"Products"},{"key":"documents","value":"Documents"},{"key":"content","value":"Information"},{"key":"contacts","value":"Contacts"}],"suggestionsLabel":"Popular searches:","suggestions":[{"label":"GOLD","type":"products"},{"label":"Eagle","type":"products"},{"label":"Martin","type":"contacts"},{"label":"Footprint","type":"content"},{"label":"CASA","type":"documents"}],"form":{"method":"GET"},"className":"search-field--big search-field--with-clear-button","closeLabel":"Close"},"sortOptions":[{"sortOrder":"score","displayName":"Relevance"},{"sortOrder":"az","displayName":"A-Z"},{"sortOrder":"za","displayName":"Z-A"}]}" class="search-result-page"></div>
<div data-react="search-result-page" data-props="{{jsonEncode props}}" class="search-result-page"></div>
{
"props": {
"contentLink": {
"id": 87941,
"workId": 0,
"guidValue": "19511fe1-7465-40ce-b312-5f7f2b66f367",
"providerName": null,
"url": "https://int.swegon.com/search-results/",
"expanded": null
},
"name": "Search results",
"language": {
"link": "https://int.swegon.com/search-results/",
"displayName": "English",
"name": "sv"
},
"existingLanguages": [
{
"link": "https://int.swegon.com/search-results/",
"displayName": "English",
"name": "en"
},
{
"link": "https://int.swegon.com/sv/sokresultat/",
"displayName": "Swedish",
"name": "sv"
}
],
"masterLanguage": null,
"contentType": [
"Page",
"SearchPage"
],
"parentLink": {
"id": 9,
"workId": 0,
"guidValue": "597d63f8-4e11-4e42-81b5-4fd00afb09cb",
"providerName": null,
"url": "https://int.swegon.com/",
"expanded": null
},
"routeSegment": "search-results",
"url": "https://int.swegon.com/search-results/",
"changed": "2025-09-30T12:53:27Z",
"created": "2025-09-30T12:53:19Z",
"startPublish": "2025-09-30T12:53:27Z",
"stopPublish": null,
"saved": "2025-10-31T14:11:05Z",
"status": "Published",
"category": [],
"metaTitle": "",
"metaDescription": "",
"ogTitle": "",
"ogDescription": "",
"ogImage": null,
"ogType": 0,
"themeForThisSection": -1,
"heading": "Search results",
"menuHeader": "",
"noIndex": null,
"hideSubPagesInMenu": null,
"mainContentArea": null,
"endpoint": "https://int.swegon.com",
"searchPlaceholderText": null,
"productSearchGroupName": "Products",
"documentSearchGroupName": "Documents",
"informationSearchGroupName": "Information",
"contactSearchGroupName": "Contacts",
"productSearchHitName": "Product",
"categorySearchHitName": "Category",
"articleSearchHitName": "Article",
"articlesSearchHitName": "Articles",
"informationSearchHitName": "Information",
"contactSearchHitName": "Contact",
"energyCalculatorSearchHitName": "Footprint",
"hubspotPostSearchHitName": "Blog post",
"noResultsMessage": "No result",
"downloadTableDocument": "Document",
"downloadTableArticle": "Article",
"downloadTableType": "Document type",
"downloadTableDownload": "Download",
"downloadTableSize": "Size",
"downloadTableFormat": "Format",
"showMoreLabel": "Show more",
"showLessLabel": "Show less",
"resultsForSearchTermSingular": "result for the search term",
"resultsForSearchTermPlural": "results for the search term",
"sortByLabel": "Sort by:",
"searchDocumentsHeading": "Looking efter något annat?",
"searchDocumentsPreamble": "<p>This is the preamble for the document search results.</p>",
"noResultsHeading": "No documents found",
"noResultsPreamble": "<p>Try <em>adjusting</em> your search or filter to find what you are looking for.</p>",
"screenReaderDescendingText": "Aktuell sortering är fallande",
"screenReaderAscendingText": "Aktuell sortering är stigande",
"screenReaderNoSortText": "Ingen sortering tillämpad",
"searchHideContactsTab": false,
"searchWidget": {
"endpoint": "https://int.swegon.com/api/search/autosuggest",
"searchQueryKey": "q",
"language": "en",
"searchPageUrl": "/search-results/",
"placeholderText": "Placeholder text used for product search",
"minQueryLength": 2,
"categoriesLabel": "Search in",
"categories": [
{
"key": "all",
"value": "All"
},
{
"key": "products",
"value": "Products"
},
{
"key": "documents",
"value": "Documents"
},
{
"key": "content",
"value": "Information"
},
{
"key": "contacts",
"value": "Contacts"
}
],
"suggestionsLabel": "Popular searches:",
"suggestions": [
{
"label": "GOLD",
"type": "products"
},
{
"label": "Eagle",
"type": "products"
},
{
"label": "Martin",
"type": "contacts"
},
{
"label": "Footprint",
"type": "content"
},
{
"label": "CASA",
"type": "documents"
}
],
"form": {
"method": "GET"
},
"className": "search-field--big search-field--with-clear-button",
"closeLabel": "Close"
},
"sortOptions": [
{
"sortOrder": "score",
"displayName": "Relevance"
},
{
"sortOrder": "az",
"displayName": "A-Z"
},
{
"sortOrder": "za",
"displayName": "Z-A"
}
]
}
}
import React from 'react';
import SearchResultPageClient from './SearchResultPageClient';
import SearchResultProvider from './context/SearchResultContext';
const SearchResultPage = (props) => {
return (
<>
<SearchResultProvider>
<SearchResultPageClient {...props} />
</SearchResultProvider>
</>
);
};
export default SearchResultPage;
import React from 'react';
import SearchWidget from '../search-widget/SearchWidget';
import Commerce from './components/Commerce';
import Contacts from './components/Contacts';
import Documents from './components/Documents';
import Content from './components/Content';
import Spinner from '../spinner';
import { SearchResultContext } from './context/SearchResultContext';
import { PaginationBlockDesktop } from './components/PaginationBlock/PaginationBlockDesktop';
import { PaginationBlockMobile } from './components/PaginationBlock/PaginationBlockMobile';
const SearchResultPageClient = (props) => {
const { results, activeCategory, setActiveCategory, metaData, setResults, setEndpoint, setPage, setLanguage, query } = React.useContext(SearchResultContext);
const sortOptions = [props.sortByRelevance, props.sortByAccending, props.sortByDescending];
const renderActiveComponent = () => {
switch (activeCategory) {
case 'commerce':
return <Commerce sortOptions={sortOptions} query={query} {...props} />;
case 'documents':
return <Documents query={query} {...props} />;
case 'content':
return <Content sortOptions={sortOptions} query={query} {...props} />;
case 'contacts':
return <Contacts sortOptions={sortOptions} query={query} {...props} />;
default:
return null;
}
};
const handleClick = (category) => {
setActiveCategory(category);
setResults(null);
const params = new URLSearchParams(window.location.search);
params.set('activeTab', category);
params.set('q', params.get('q'));
setPage(1);
const newUrl = `${window.location.pathname}?${params.toString()}`;
window.history.replaceState({}, '', newUrl);
};
const categoryPill = (category, label, results) => {
return (
<button role='tab' aria-selected={activeCategory === category} aria-controls={`panel-${category}`} id={`tab-${category}`} onClick={() => {
if (activeCategory !== category) handleClick(category);
}} className={`button button--rounded ${activeCategory !== category ? 'button--ghost' : ''}`}>{label} ({results || 0})</button>
);
};
React.useEffect(() => {
if (props.endpoint)
setEndpoint(props.endpoint);
if (props.language && props.language.name)
setLanguage(props.language.name);
}, [props.endpoint, props.language]);
return (
<section className='search-result-page-wrapper'>
<div className='search-result-page-hero'>
<div className='search-result-page-hero__heading'>
<h1>{props.heading}</h1>
{metaData && (
<p>{metaData.totalItems} {metaData.totalItems === 1 ? props.resultsForSearchTermSingular : props.resultsForSearchTermPlural} "{metaData.query}"</p>
)}
</div>
<div className='search-result-page-hero__search-field' >
<SearchWidget {...props.searchWidget} categories={null} suggestions={null} closeLabel={null} inputValue={query} />
</div>
<div role='tablist' className='search-result-page-hero__category-pills'>
{categoryPill('commerce', props.productSearchGroupName, metaData && metaData.productResults)}
{categoryPill('documents', props.documentSearchGroupName, metaData && metaData.documentResults)}
{categoryPill('content', props.informationSearchGroupName, metaData && metaData.contentResults)}
{!props.searchHideContactsTab && categoryPill('contacts', props.contactSearchGroupName, metaData && metaData.contactResults)}
</div>
</div>
{!query
? <></>
: results
? <div id='search-result-page-client'>
{renderActiveComponent()}
<PaginationBlockDesktop />
<PaginationBlockMobile />
</div>
: <div className='search-result__spinner'>
<Spinner size={100} />
</div>
}
</section>
);
};
export default SearchResultPageClient;
.pagination-block {
display: flex;
flex-direction: column;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.pagination-block-wrapper,
.pagination-block-wrapper-mobile {
max-width: 336px;
column-gap: 2px;
justify-content: center;
margin-left: auto;
margin-right: auto;
}
.pagination-block-wrapper {
display: none;
@include breakpoint($m) {
display: flex;
margin-bottom: 96px;
}
}
.pagination-block-wrapper-mobile {
display: flex;
@include breakpoint($m) {
display: none;
}
}
.pagination-icon-wrapper {
display: flex;
margin-left: auto;
margin-right: auto;
width: 32px;
height: -webkit-fill-available;
}
.paginaition-icon {
margin: auto;
}
.pagination-button-label {
margin: auto;
text-align: center;
}
.pagination-button-wrapper {
position: relative;
&::before {
content: "";
display: block;
padding-top: 100%;
position: absolute;
left: 0;
top: 0;
}
}
.button-base-style {
width: 32px;
height: 40px;
}
.pagination-div {
display: flex;
}
.active-button {
& p {
color: $color-green-dark;
}
}
.pagination-button {
display: flex;
cursor: pointer;
&:hover {
background-color: $color-green-pale;
}
}
.pagination-button-wrapper:has(.active-button) {
border-bottom: $color-green-dark 2px solid;
}
.search-result-page {
width: 100%;
max-width: 1440px;
margin-left: auto;
margin-right: auto;
background-color: #fff;
padding: size(3);
}
.search-result-page-hero {
margin: 8px auto;
display: flex;
flex-direction: column;
@include breakpoint($m) {
margin: 58px auto;
}
&__heading {
text-align: center;
margin-bottom: 16px !important;
& h1 {
margin-bottom: 8px;
}
}
&>div {
max-width: 766px;
width: 100%;
margin: auto;
}
&__category-pills {
justify-content: center;
display: flex;
column-gap: 8px;
flex-wrap: wrap;
& button {
min-height: 0px;
font-size: 12px;
padding: 8px 24px;
}
& button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
}
}
.search-result-page-commerce-wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.search-content__body {
padding: size(2) size(3);
a {
text-decoration: none;
&:hover {
text-decoration: none;
h3 {
text-decoration: underline;
}
}
}
}
.search-content__body:nth-child(odd) {
background-color: $color-gray-1;
}
.search-content__category {
position: relative;
margin-top: size(2);
min-height: size(3);
h3 {
margin-bottom: size(1);
color: $color-black;
}
}
.search-content-hit-type-name {
font-size: size(1.5);
margin-bottom: size(2);
padding-bottom: size(1);
border-bottom: 1px rgba(0, 0, 0, 0.3) solid;
@include breakpoint($m) {
font-size: size(1.75);
}
}
.search-content-link {
position: absolute;
margin-top: size(-.75);
top: 0;
right: size(2);
display: flex;
width: size(4);
height: size(4);
padding: size(0.75);
border-radius: 50%;
background-color: $color-gray-2;
fill: $color-gray-4;
transition: transform .2s cubic-bezier(0.4, 0.0, 0.2, 1);
svg {
width: 100%;
height: 100%;
}
}
.search-content-description {
font-size: size(1.75);
@include breakpoint($m) {
font-size: size(2);
}
}
.search-result-contact {
display: grid;
grid-template-columns: 1fr;
column-gap: 24px;
row-gap: 24px;
padding-top: 24px;
padding-bottom: 24px;
position: relative;
&__img-wrapper {
display: none;
}
@include breakpoint($m) {
column-gap: 24px;
grid-template-columns: 50% 50%;
&__img-wrapper {
grid-row: 1/-1;
grid-column: 2;
display: block;
position: relative;
width: 100%;
overflow: hidden;
& img {
position: absolute;
object-fit: cover;
height: 100%;
width: 100%;
}
}
}
@include breakpoint($l) {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}
.search-result-content {
max-width: 878px;
width: 100%;
}
.search-result__spinner {
width: 100%;
justify-content: center;
display: flex;
}
.search-result-block {
border-top: 1px solid $color-gray-3;
padding-top: size(2);
}
.search-result-documents-heading,
.search-result-documents-heading-no-results {
width: 100%;
display: flex;
flex-direction: column;
row-gap: size(1);
margin-bottom: size(3);
align-items: center;
padding-top: 24px;
max-width: 1440px;
}
.search-result-documents-heading {
border-top: 1px solid $color-gray-2;
}
.search-result-no-results {
text-align: center;
padding: size(4) 0;
padding-top: 24px;
border-top: 1px solid $color-gray-2;
}
No notes defined.