Rapport de recherche sur l'état de la recherche sur site dans l'enseignement supérieur avec The Chronicle of Higher Education | Télécharger le rapport
Annexe A Démo
Rapport de recherche sur l'état de la recherche sur site dans l'enseignement supérieur avec The Chronicle of Higher Education | Télécharger le rapport
Barre de menu
Fermer

9 janvier 2024

Kevin Montgomery

|

6 min de lecture

Comment utiliser les composants de l'interface utilisateur de recherche de site SearchStax avec Sitecore JSS

SearchStax Site Search inclut désormais des fonctionnalités pré-construites bibliothèques de composants de recherche de site pour React, Vue, Angulaire, et autres Front-ends optimisés par JSCes composants facilitent la création, le style, le test et le déploiement de votre expérience de recherche sur votre front-end sans tête ou sur votre moteur de rendu basé sur Node. Composants de l'interface utilisateur de recherche SearchStax peuvent être utilisés tout au long de votre flux de rendu Sitecore XP, mais ils fonctionneront généralement mieux lorsqu'ils seront utilisés côté client pour une demande et une réponse plus rapides (par opposition à l'utilisation de SSR et à l'appel des API SearchStax pendant ce processus).

Ce dont vous aurez besoin pour commencer

Une fois votre instance Sitecore et votre compte SearchStax configurés, vous pouvez commencer à créer des expériences de recherche personnalisées. Connectez votre instance Sitecore à votre compte SearchStax via notre Connecteur Sitecore. Une fois votre contenu et vos schémas mis à jour et indexés, vous pouvez configurer votre application de recherche de site SearchStax et configurer les champs de recherche, pertinence, facettes et autres améliorations de recherche.

Sitecore connecté, intégré et sans tête

Sitecore propose plusieurs méthodes différentes pour rendu de page découplé ou complètement sans têteEn règle générale, Sitecore rendait une page entière à partir de modèles et de composants avant d'envoyer le code HTML complet à un utilisateur pour visualisation. Désormais, Sitecore fournit une intégration directe avec des frameworks tels que React, NextJS ou Node pour le client et rendu côté serveur des pages Sitecore via les SDK JSS ainsi que API REST et GraphQL pour consommer du contenu Sitecore et des fonctionnalités à partir d'un front-end entièrement sans tête.

Dans cet exemple, nous allons créer un front-end entièrement sans tête qui peut consommer du contenu et d'autres fonctionnalités à partir du API Sitecore tout en récupérant également les résultats de recherche de SearchStax Site Search à l'aide de Rechercher des composants d'interface utilisateur et API sous-jacentes.

Expérience de recherche

L’un des principaux avantages du développement de votre propre expérience de recherche à l’aide de nos packages d’interface utilisateur de recherche SearchStax est la personnalisation complète des fonctionnalités de recherche et de l’interface, ainsi que l’ajout ou l’intégration de la recherche sur l’ensemble de votre site et dans des modèles ou composants spécifiques.

Dans cet exemple, nous allons ajouter un champ de recherche à l'échelle du site afin que les visiteurs puissent lancer une recherche depuis n'importe quelle page ou expérience actuellement consultée. Nous ajouterons également un composant de recherche personnalisé pour afficher les résultats et proposer des fonctionnalités de facettage, de filtrage, de recherche par mots-clés associés et d'autres améliorations.

Configuration de SearchStax Site Search avec Sitecore

Avant de commencer à créer votre interface de recherche, vous devez connecter votre instance Sitecore à SearchStax Site Search via notre connecteur Sitecore et configurer votre application de recherche. Une application SearchStax Site Search inclut la modélisation de la pertinence, le mappage du contenu aux champs de recherche, des options de facettes et de filtrage, ainsi que d'autres options de personnalisation de la recherche.

  1. Ajout du connecteur
  2. Configuration du schéma et des champs, puis indexation des données
  3. Configurer les fonctionnalités de recherche

Une fois votre contenu indexé et consultable, vous pouvez commencer à demander et à consommer des résultats de recherche via les packages et API des composants de l'interface utilisateur de recherche.

Créer une application JSS

Les SDK de rendu JavaScript Sitecore (JSS) peuvent créer un frontal standard application qui se connecte à votre instance Sitecore. Généralement, les applications standard ont une AppRoute.js composant qui gère les requêtes URL via routeur-react-dom et récupère le contenu de Sitecore.
				
					npx create-sitecore-jss
Sélectionnez le modèle approprié (Angular, NextJS, Node.js pour le rendu côté serveur, React ou Vue) et saisissez votre nom d'hôte Sitecore et vos points de terminaison d'API pour créer l'application initiale. Une fois l'installation terminée, exécutez `jss start` pour exécuter l'application et vous connecter à votre instance Sitecore.
 

Ajout du package d'interface utilisateur de recherche

Commencez par ajouter le package de composants d'interface utilisateur de recherche approprié à votre application via NPM. Dans cet exemple, nous utiliserons React et commencerons avec l'application Headless Demo de Sitecore.

				
					cd ~/votre-application-react/ npm i @searchstax-inc/searchstudio-ux-react

Le package d'interface utilisateur de recherche utilise un composant SearchStaxWrapper qui se connecte aux API SearchStax Site Search pour gérer les requêtes des utilisateurs et afficher des résultats pertinents. Les composants de recherche individuels (tels que la zone de saisie, les facettes et les résultats de recherche individuels) doivent être encapsulés dans un composant SearchStaxWrapper. Cela vous permet d'utiliser des fonctionnalités individuelles (par exemple, l'affichage d'un champ de recherche dans la navigation) sans avoir à inclure toutes les autres parties de la page de recherche.

Création de la page de recherche

Généralement, la recherche sur un site comprend une page de résultats autonome avec une barre de saisie, des résultats de recherche individuels et d'autres fonctionnalités d'affinement de la recherche telles que les facettes, le filtrage et la pagination. Grâce aux composants d'interface utilisateur SearchStax, vous pouvez créer une page de résultats de recherche autonome ou intégrer des fonctionnalités et une expérience de recherche à des composants ou à d'autres fonctionnalités de conception ou d'expérience utilisateur telles que les superpositions, les résultats de recherche intégrés, etc.

Dans cet exemple, nous allons ajouter un champ de recherche global incluant la saisie semi-automatique, ainsi qu'une page de recherche autonome. La recherche sur le site étant une expérience dynamique, il est plus judicieux de gérer les requêtes et l'affichage des résultats côté client. Vous pouvez créer une expérience client spécifique à la recherche dans Sitecore en intégration de l'application JSS spécifique à la recherche, utiliser la méthode `isServer` pour les applications qui sont sauvegardées avec un rendu côté serveur, ou ajoutez les fonctionnalités de recherche dynamique en dehors de l'intégration de Sitecore Layout dans l'application frontale.

Mise à jour de Layout.js

Le composant Layout.js crée la mise en page de base, y compris la navigation globale et le contenu Sitecore. Nous pouvons commencer par ajouter un champ de recherche dans la navigation globale en modifiant la fonction Navigation.
				
					  <div classname="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom">
	<h5 classname="my-0 me-md-auto fw-normal">
  	<navlink to="/" classname="text-dark">
    	<img src="{logo}" alt="Sitecore" />
  	</navlink>
	</h5>
	<nav classname="my-2 my-md-0 me-md-3">
  	<a
    	classname="p-2 text-dark"
    	href="https://jss.sitecore.com"
    	target="_blank"
    	rel="noopener noreferrer"
  	>
    	{t(&#039;Documentation&#039;)}
  	</a>
  	<navlink to="/styleguide" classname="p-2 text-dark">
    	{t(&#039;Guide de style&#039;)}
  	</navlink>
  	<navlink to="/graphql" classname="p-2 text-dark">
    	{t(&#039;GraphQL&#039;)}
  	</navlink>
  	<navlink to="/search" classname="p-2 text-dark">
    	{t(&#039;Recherche&#039;)}
  	</navlink>
	<searchstaxwrapper>
		<inputwidget />
	</searchstaxwrapper>
	</nav>
  </div>
);

Mise à jour de AppRoot.js

Nous intercepterons tout /recherche Les requêtes d'URL dans le composant AppRoot.js utilisent un composant SearchPage.js pour afficher les résultats de recherche. Toutes les autres requêtes d'URL seront transmises à Sitecore pour récupération et affichage.
				
					classe AppRoot étend React.Component { render() { const { chemin, Routeur, graphQLClient } = this.props; return ( <ApolloProvider client={graphQLClient}> <SitecoreContext componentFactory={componentFactory} layoutData={this.props.ssrState}> <Router location={path} context={{}}> <Routes> <Route path="/search" element={<SearchPage />} /> <Route path="*" element={<JssRoute isSSR={!!this.props.ssrState} />} /> </Routes> </Router> </SitecoreContext> </ApolloProvider> ); } }

Création du composant SearchPage.js

La page de résultats de recherche est une interface entièrement dynamique qui doit être entièrement gérée côté client. Les composants d'interface utilisateur SearchStax gèrent automatiquement l'intégration et les requêtes API, de sorte que les recherches des utilisateurs sont envoyées directement à l'application de recherche de votre site, sans délai d'affichage côté serveur.

Il peut y avoir cas où le rendu côté serveur des résultats de recherche sont requis – dans ce cas, les composants de l'interface utilisateur de recherche SearchStax devront être implémentés dans votre flux de rendu de serveur Node.

SearchStax Site Search – Exemples d'interface de recherche

Nous avons créé plusieurs expériences de recherche de démonstration à l'aide des composants de l'interface utilisateur de recherche pour Réagir, Angular, Vue et autres frameworks JS. Notre composant SearchPage utilisera notre Exemple de recherche de site React SearchStax qui comprend une barre de recherche avec saisie semi-automatique, des facettes, des filtres, une pagination et des résultats de recherche associés.
				
					retour (
	<>
  	<searchstaxwrapper
    	searchurl="{config.searchURL}"    	suggesterurl="{config.suggesterURL}"    	trackapikey="{config.trackApiKey}"    	searchauth="{config.searchAuth}"    	initialized="{initialized}"    	beforesearch="{beforeSearch}"    	aftersearch="{afterSearch}"    	authtype="{config.authType}"    	router="{{" enabled: true }}
	language="{config.language}"  	>
    	<div classname="searchstax-page-layout-container">
      	<inputwidget />

      	<div classname="search-details-container">
        	<overviewwidget />
        	<sortingwidget />
      	</div>

      	<div classname="searchstax-page-layout-facet-result-container">
        	<div classname="searchstax-page-layout-facet-container">
          	<facetswidget />
        	</div>

        	<div classname="searchstax-page-layout-result-container">
        	<resultwidget />
          	<externalpromotionswidget />
          	<relatedsearcheswidget />
          	<paginationwidget />
        	</div>
      	</div>
    	</div>
  	</searchstaxwrapper>
	</>
);
Ces composants peuvent être entièrement personnalisés, réutilisés et étendus dans toute votre application afin que la recherche sur site puisse devenir une fonctionnalité intégrale de votre site.

Prochaines étapes

La recherche sur le site devient beaucoup plus engageante et accessible fonctionnalité lorsqu'elle est correctement intégrée à l'interface utilisateur et au design de votre site. Nos composants d'interface de recherche et Connecteur Sitecore facilitez grandement l'intégration et la personnalisation de la recherche sur le site tout en utilisant votre pile technologique, vos flux de travail et vos pratiques d'expérience utilisateur préférés.

En savoir plus sur configurations CMS sans tête et voyez comment SearchStax Site Search peut améliorer votre expérience Sitecoref.

Pourquoi devrais-je afficher les résultats de recherche côté client ?

SearchStax Studio prend en charge les composants d'interface utilisateur et les API qui interagissent directement avec les instances de recherche de votre site afin qu'ils puissent rapidement récupérer et réafficher les résultats de recherche sans réafficher la page entière.

Que sont les composants de l’interface utilisateur de recherche ?

Rechercher des composants d'interface utilisateur sont des packages front-end pour les frameworks JavaScript, dont React. Les composants d'interface utilisateur de recherche vous permettent de créer des interfaces de recherche et des pages de résultats personnalisées pour votre application SearchStax Studio.

Puis-je utiliser les composants de l’interface utilisateur de recherche dans mon processus de rendu côté serveur ?

Oui, vous pouvez inclure des composants d'interface de recherche dans n'importe quel framework JavaScript, notamment React, NextJS, Node, etc. Le rendu côté serveur peut être utile si le contenu des résultats de recherche doit être diffusé de manière statique.

Par Kevin Montgomery

Ingénieur marketing produit

« ...Nos composants d'interface utilisateur de recherche et notre connecteur Sitecore facilitent grandement l'intégration et la personnalisation de la recherche sur site tout en utilisant votre pile technologique, vos flux de travail et vos pratiques d'expérience utilisateur préférés... »

Recevez notre newsletter

The Stack est livré tous les deux mois avec des tendances du secteur, des informations, des produits et plus encore

Vous aimerez peut-être aussi :

La société d'expérience de recherche
G2 Enterprise Search Reviews for SearchStax

Produits

Tarification

Ressources

Services

Ressources

Tarification

Entreprise

Planifier une démonstration
© 2025 SearchStax, Inc. Tous droits réservés. Conditions d'utilisation | politique de confidentialité
fr_CAFrançais du Canada
en_USEnglish fr_CAFrançais du Canada