Explore how to set up and manage product variants and SKUs when modeling data for your ecommerce search experiences. 

A shirt with three separate color variations

image1.png

image2.png

image3.png

Nine results, one for each size and color

image4.png

Variations shown as a single result, with color swatches

image5.png

Colors and sizes shown for in-stock items only

image6.png

ecommerce-sku-variant-thumbnail.png

How to create a document schema for product variants and SKUs for your ecommerce search experience

In the latest version of Search UI, version 1.10, we introduced a slew of new functionality, including being extended Elasticsearch features as well as Typescript support. Follow along with code samples to get started today.

search-ui-110.png

search-ui-110-2.png

illustration-search-results-1-608x420.png

Search UI 1.10 makes building search experiences for Elasticsearch even easier

app-search-blog-banner.png

app-search-blog-thumb.png

How to Build Great React Search Experiences Quickly

如何快速构建优异的 React 搜索体验

使用 Slack、Zapier 和 Elastic App Search 构建您自己专用的 Searchbot。无需编码！

robots_full.jpg

robots_thumb.jpg

Building a Searchbot using Slack, Zapier, and Elastic App Search

使用 Slack、Zapier 和 Elastic App Search 构建 Searchbot

响应速度和相关度是非常重要的。但搜索体验同样重要！Elastic App Search 和 React 可以协助您打造引人入胜的搜索体验。

当用户搜索某个内容时，他们希望获得相关的结果。但相关的结果只是赢得访客好感的一部分因素；为用户提供良好的搜索体验也很重要。搜索不仅要快速，积极响应用户输入，还要让用户感觉到智能和高效。
本教程将通过演示如何使用 React 和 <a href="https://github.com/swiftype/swiftype-app-search-javascript" target="_self">Elastic App Search JavaScript 客户端</a>打造流畅、强大的搜索体验，向您讲授应用程序搜索方面的知识。最后，您会得到一个外观好看、相关度高、基于 React 构建的应用程序；使用该应用程序，您可以按分面和作为 URI 一部分维护的状态进行排序，实时搜索各种 npm 包。
完整的代码可以在 <a href="https://github.com/swiftype/app-search-demo-react" target="_self">GitHub</a> 上找到。
<hr />
刚好！
我们新发布了一篇文章，其中介绍了如何使用 Search UI（Elastic 的一个开源库）更快地打造出色的搜索体验。
<a href="/cn/blog/how-to-build-great-react-search-experiences-quickly" target="_self">读一读吧</a>！
<hr />
<h2>要求</h2>
要开始操作，您需要具备以下内容：
<ol>
 <li>最新版本的 <a href="https://nodejs.org/en/" target="_self">Node.js</a>。</li>
 <li>最新版本的 <a href="https://www.npmjs.com/" target="_self">npm</a>。</li>
 <li>Elastic App Search Service 账号或有效的 <a href="https://info.elastic.co/app-search-trial.html?elektra=blog" target="_self">14 天免费试用版</a>。</li>
 <li>大约 30 分钟的时间。</li>
</ol>
<h2>App Search 简介</h2>
应用程序是围绕数据构建的。Facebook 以一种有趣的方式呈现“朋友”数据，迅速占据了我们的社交圈。eBay 最初是寻找和购买二手商品的最便捷方式。维基百科让读者可以更轻松地了解万事万物！
应用程序的存在是为了解决数据问题。在这方面，搜索是必不可少的伙伴。如果是主流的应用程序，搜索将是它所提供服务中的关键部分：查找朋友、产品、对话或文章。数据集越大、越有趣，应用程序就会越受欢迎，尤其是在搜索相关性高且可获得回报的情况下。
<a href="/cn/cloud/app-search-service" target="_self">Elastic App Search</a> 是在 <a href="https://github.com/elastic/elasticsearch" target="_self">Elasticsearch</a> 的基础上构建的，Elasticsearch 是一个开源的分布式 RESTful 风格搜索引擎。使用 Elastic App Search，开发人员可以访问一组性能稳健的 API 终端，这些终端经过优化，可以处理高级应用程序搜索用例。
<h2>开始构建引擎</h2>
首先，在 App Search 中创建一个引擎。
引擎会采集用于编制索引的对象。您的数据就是对象；它可以是朋友的资料、产品或维基页面。将数据采集到 App Search 中之后，就会根据灵活的模式为数据建立索引，并针对搜索进行优化。这样，我们可以利用不同的客户端库来打造愉快的搜索体验。
在本示例中，我们将调用 node-modules 引擎。
引擎创建完成后，我们需要<a href="https://app.swiftype.com/as/credentials" target="_self">凭据</a>页面中的三个信息:
<ol>
 <li>主机标识符，前缀为 host-</li>
 <li>专用 API 密钥，前缀为 private-</li>
 <li>公共搜索密钥，前缀为 search-</li>
</ol>
有了这些信息，我们就可以克隆项目，进入目录，签出 starter 分支，然后运行 npm install：<pre class="prettyprint" style="font-size: 12.6px;">$ git clone https://github.com/swiftype/app-search-demo-react.git $ cd react-tutorial &amp;&amp; git checkout starter &amp;&amp; npm install </pre>
太好了，我们已经准备好应用程序。但搜索需要数据...
<h2>采集 ~</h2>
在大多数情况下，您的对象将存放在数据库或后端 API 中。在本示例中，我们将使用静态 .json 文件。存储库包含两个脚本：init-data.js 和 index-data.js。init-data.js 是一个抓取器，用于从 npm 获取格式良好的 node-module 数据。数据存在于 node-modules.json 文件中。index-data.js 是一个索引器，它会将数据采集到 App Search 引擎中，为其建立索引。
为了运行索引器脚本，我们需要同时传递主机标识符和专用 API 密钥。<pre class="prettyprint" style="font-size: 12.6px;">$ REACT_APP_HOST_IDENTIFIER={Your Host Identifier} \ REACT_APP_API_KEY={Your Private API Key} \ npm run index-data </pre>
对象以 100 个为一批快速发送到我们的 App Search 引擎，然后构建索引。
现在，我们应该为新创建的<a href="https://app.swiftype.com/as/engines/node-modules" target="_self">引擎</a>创建一个仪表板，其中有大约 9,500 个 npm 包被索引为文档。浏览一下这些数据，熟悉其中的内容，可能会有所帮助。
<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/bltb780390565978c73/5c304feb5a7621286e3e90af/app_search_engine_overview.png" data-sys-asset-uid="bltb780390565978c73" alt="app_search_engine_overview.png" style="margin-top: auto;margin-right: auto;margin-bottom: auto;margin-left: auto;display: block;" />
<h2>响应能力</h2>
引擎填充了数据并准备好之后，我们就可以开始构建核心应用程序了。<pre class="prettyprint" style="font-size: 12.6px;">$ npm start </pre>
从项目目录中启动 npm 将打开 React 样板文件。它从 App.cs 中提取样式，让我们可以更好地根据自身需求进行定制。
之后，我们将需要一个搜索框，在其中输入搜索查询。用户会寻找这些有用的矩形，因为搜索引擎和浏览器已经让用户形成习惯：在这里输入，找到想要的内容！<pre class="prettyprint" style="font-size: 12.6px;">//App.css ... .App-search-box { height:40px; width:500px; font-size:1em; margin-top:10px; } </pre>
我们还需要将 App Search 的访问凭据放在一个安全的地方，比如 .env 文件中。
在项目根目录下创建一个 .env 文件并进行填充，如下所示：<pre class="prettyprint" style="font-size: 12.6px;">//.env REACT_APP_HOST_IDENTIFIER={your host identifier, prefixed with host-} REACT_APP_SEARCH_KEY={your public search key, prefixed with search-} </pre>
将变量安全地隐藏起来后，我们就可以开始编写搜索逻辑了。
<h2>开始搜索</h2>
App.js 文件中存放了核心逻辑。这个文件和其他大多数启动文件都是由 <a href="https://github.com/facebook/create-react-app" target="_self">create-react-app</a> 创建的；create-react-app 是一个无需任何配置即可引导 React 应用程序启动的工具。在编写一些逻辑来测试搜索之前，我们需要安装 Swiftype App Search JavaScript 客户端库：<pre class="prettyprint" style="font-size: 12.6px;">$ npm install --save swiftype-app-search-javascript </pre>
将以下代码放入 App.js 中。它将执行基本搜索。
我们将把 foo 硬编码为我们的示例搜索词：<pre class="prettyprint" style="font-size: 12.6px;">import * as SwiftypeAppSearch from "swiftype-app-search-javascript"; const client = SwiftypeAppSearch.createClient({ hostIdentifier: process.env.REACT_APP_HOST_IDENTIFIER, apiKey: process.env.REACT_APP_SEARCH_KEY, engineName: "node-modules" }); //我们可以查询任何内容，以 foo 为例。 const query = "foo"; const options = {}; client.search(query, options) .then(resultList =&gt; console.log(resultList)) .catch(error =&gt; console.log(error)) </pre>
浏览器将刷新，并通过 console.log 创建一个 resultList 数组。要查看这个数组，我们可以打开浏览器的开发人员控制台。我们可以用另一个字符串替换 foo 查询，这样可以尝试更多的查询。更改了查询并刷新页面后，可以看到调整后的结果集。
太棒了！这样我们就已经在 node-module 中进行搜索了。
<h2>结果良好</h2>
我们用一个简单的模式进行搜索，但是隐藏在 console.log 中的结果没有什么用处。我们将删除基本的 React 样式和之前的代码，然后进行扩展。
我们将创建以下内容：
<ol>
 <li>一个状态变量，它将包含一个响应属性。</li>
 <li>一个 performQuery 方法，它将使用 client.search 来查询 App Search。它将查询结果存储在响应属性中。</li>
 <li>一个 componentDidMount 生命周期挂钩，它将在应用程序加载时运行一次。我们将再次查询 foo，但可以使用任何想要的查询。</li>
 <li>结构化 HTML，用于保存结果数据输出和结果总数。</li>
</ol><pre class="prettyprint" style="font-size: 12.6px;">//App.js // ...已截断！ class App extends Component { state = { 	// 一个新的状态属性，用于保存最近的查询响应 	response: null }; componentDidMount() { 	/*在 componentDidMount 中调用此方法可以确保结果 	在应用首次加载时显示在屏幕上*/ 	this.performQuery("foo"); } // 用于执行查询并存储响应的方法 performQuery = queryString =&gt; { 	client.search(queryString, {}).then( 	response =&gt; { 	// 现在添加此行可以检查完整的响应 	console.log(response); 	this.setState({ response }); 	}, 	error =&gt; { 	console.log(`error: ${error}`); 	} 	); }; render() { 	const {response} = this.state; 	if (!response) return null; 	return ( &lt;div classname="App"&gt;&lt;br&gt; 	&lt;header classname="App-header"&gt;&lt;br&gt; 	&lt;h1 classname="App-title"&gt;Node Module Search&lt;/h1&gt;&lt;br&gt; 	&lt;/header&gt;&lt;br&gt; 	{/*显示此查询的结果总数*/}&lt;br&gt; 	&lt;h2&gt;{response.info.meta.page.total_results} Results&lt;/h2&gt;&lt;br&gt; 	{/*遍历结果，并显示它们的 Name 和 Description*/}&lt;br&gt; 	{response.results.map(result =&amp;gt; (&lt;br&gt; 	&lt;div key="{result.getRaw(&amp;quot;id&amp;quot;)}"&gt;&lt;br&gt; 	&lt;p&gt;Name: {result.getRaw("name")}&lt;/p&gt;&lt;br&gt; 	&lt;p&gt;Description: {result.getRaw("description")}&lt;/p&gt;&lt;br&gt; 	&lt;/div&gt;&lt;br&gt; 	))}&lt;br&gt; 	&lt;/div&gt; 	); } } // ...已截断！ </pre>
我们点击保存的那一刻，结果将出现在 http://localhost:3000 中，共有 27 条结果，还有一些看起来很美观的模块。如果出现问题，我们可以检查控制台，因为我们在代码中嵌套了两个 console.logs。
<h2>出色的搜索框填充</h2>
我们一直将 foo 硬编码到查询中。搜索的最大价值在于它始于自由的表达。当您开发出了出色的搜索体验后，就能针对更常用的表达进行优化，从而创建出相关度最高的结果集。这一切都始于一个空白的画板：搜索框。
为了打造一个强大的搜索框，我们将向 state 添加一个名为 queryString 的属性。为了用新字符串更新 queryString，我们将创建一个 updateQuery 方法；利用 onChange 句柄来更新 queryString，并在每次用户更改搜索框中的文本时触发新的搜索。
我们完整的 App 类现在如下所示：<pre class="prettyprint" style="font-size: 12.6px;">//src/App.js // ...已截断！ class App extends Component { state = { 	// 一个新的状态属性，用于跟踪搜索框中的值 	queryString: "", 	response: null }; componentDidMount() { 	// 删除“node”的硬编码搜索 	this.performQuery(this.state.queryString); } // 每次用户在搜索框中输入时，处理 onChange 事件。 updateQuery = e =&gt; { 	const queryString = e.target.value; 	this.setState( 	{ 	queryString // 保存用户输入的查询字符串 	}, 	() =&gt; { 	this.performQuery(queryString); // 触发新的搜索 	} 	); }; performQuery = queryString =&gt; { 	client.search(queryString, {}).then( 	response =&gt; { 	this.setState({ 	response 	}); 	}, 	error =&gt; { 	console.log(`error: ${error}`); 	} 	); }; render() { 	const {response, queryString} = this.state; 	if (!response) return null; 	return ( &lt;div classname="App"&gt;&lt;br&gt; 	&lt;header classname="App-header"&gt;&lt;br&gt; 	&lt;h1 classname="App-title"&gt;Node Module Search&lt;/h1&gt;&lt;br&gt; 	&lt;/header&gt;&lt;br&gt; 	{/*一个搜索框，连接到我们的查询字符串 value 和 onChange&lt;br&gt; 	句柄*/}&lt;br&gt; 	&lt;input&lt;br&gt; 	className="App-search-box"&lt;br&gt; 	type="text"&lt;br&gt; 	placeholder="Enter a search term here"&lt;br&gt; 	value={queryString}&lt;br&gt; 	onChange={this.updateQuery}&lt;br&gt; 	/&amp;gt;&lt;br&gt; 	&lt;h2&gt;{response.info.meta.page.total_results} Results&lt;/h2&gt;&lt;br&gt; 	{response.results.map(result =&amp;gt; (&lt;br&gt; 	&lt;div key="{result.getRaw(&amp;quot;id&amp;quot;)}"&gt;&lt;br&gt; 	&lt;p&gt;Name: {result.getRaw("name")}&lt;/p&gt;&lt;br&gt; 	&lt;p&gt;Description: {result.getRaw("description")}&lt;/p&gt;&lt;br&gt; 	&lt;/div&gt;&lt;br&gt; 	))}&lt;br&gt; 	&lt;/input&lt;br&gt;&lt;/div&gt; 	); } } // ...已截断！ </pre>
<h2>Debounce 方法！</h2>
在这个迭代中，每次在搜索框中检测到更改时都会进行搜索，这种操作对我们的系统来说可能过于密集。为了解决这个问题，我们将应用一个由 <a href="https://lodash.com/" target="_self">Lodash</a> 提供的 _debounce_ 函数。<pre class="prettyprint" style="font-size: 12.6px;">$ npm install --save lodash </pre>
Debounce 是一种基于定义的毫秒数对入站请求数量进行速率限制的方法。可能遇到这样的情况：用户正在考虑如何表达他们的查询，输入了错别字，或者打字非常快，等等，因此，我们不需要对每个检测到的更改都进行查询。
通过将 performQuery 方法封装在 Lodash 的 debounce 函数中，我们可以指定 200 毫秒的速率限制，即在下一次搜索查询开始之前，必须有 200 毫秒没有任何输入：<pre class="prettyprint" style="font-size: 12.6px;">//App.js // ...已截断！ import { debounce } from "lodash"; // Import debounce // ...已截断！ performQuery = debounce(queryString =&gt; { client.search(queryString, {}).then( 	response =&gt; { 	this.setState({ 	response 	}); 	}, 	error =&gt; { 	console.log(`error: ${error}`); 	} ); }, 200); // 200 毫秒。 // ...已截断！ </pre>
限制速率除了让我们的服务器可以休息一下，还能帮助用户顺利地进行查询。这将大有帮助！毕竟用户感受十分重要。
<h2>后续操作</h2>
这是基于 React 构建高质量搜索体验的开始。往后，我们还可以添加很多出色的功能。我们可以添加样式或实现动态 App Search 功能，比如<a href="https://swiftype.com/documentation/app-search/guides/facets" target="_self">分面搜索</a>、<a href="https://swiftype.com/documentation/app-search/guides/curations" target="_self">结果管理</a>或<a href="https://swiftype.com/documentation/app-search/guides/search-customizations#relevance-tuning" target="_self">相关度调整</a>。或者，我们还可以探索<a href="/cn/blog/introducing-the-analytics-api-suite-in-elastic-app-search" target="_self">分析 API 套件</a>，发掘有关用户搜索活动的有价值的见解。
如果我们想真正地深入了解，可以参阅主分支中的 <a href="https://github.com/swiftype/app-search-demo-react/blob/master/README.md" target="_self">README</a>，它对教程内容进行了扩展，创建了基于 URI 的状态管理，添加了巧妙的样式、分页、筛选和分面搜索。通过一些样式方面的定制，可以将它作为高质量搜索体验的基础。
<h2>总结</h2>
过去，构建相关度高且有价值的应用程序搜索是非常复杂的。通过 Elastic App Search 这种方便又可控的方法，您可以在 Web 应用程序中编写有价值、可微调的搜索引擎。最值得一提的是，不论是工程师还是不太懂技术的利益相关者，都可以在一个精巧而直观的仪表板中管理关键功能。您可以直接进入 App Search，<a href="https://info.elastic.co/app-search-trial-v9.html?ultron=how-to-build-application-search-with-react-and-elastic-app-search&blade=blog&hulk=cpc" target="_self">免费试用 14 天</a>，无需提供信用卡信息。

dazzling_full_bleed.jpg

dazzling_thumbnail.jpg

How to Build Application Search with React and Elastic App Search

如何使用 React 和 Elastic App Search 打造应用程序搜索体验

Start free trial

Blog Footer CTA

Sign up for Elastic Cloud free trial

Software Engineer

Jason Stoltzfus

By submitting you acknowledge that you've read and agree to our <a href="/legal/elastic-cloud-account-terms" target="_self">Terms of Service</a>, and you agree to receive the <a href="/legal/privacy-statement#how-we-use-the-information" target="_self">selected communications</a> at the contact details you provided above. See <a href="/legal/privacy-statement/" target="_self">Elastic’s Privacy Statement</a> for more details or to opt-out at any time.

Communication Preferences - ONLY for /communication-preferences

提交即表示您确认您已阅读并同意我们的<a href="/cn/legal/elastic-cloud-account-terms" target="_self">服务条款</a>，并且您同意通过您提供的上述联系方式接收<a href="/cn/legal/privacy-statement#how-we-use-the-information" target="_self">所选的通信</a>。如需了解更多信息，或想随时取消订阅，请参阅 <a href="/cn/legal/privacy-statement/" target="_self">Elastic 的隐私声明</a>。

By submitting you acknowledge that you've read and agree to our <a href="/legal/serverless-preview-terms" target="_blank">Terms of Service</a>, and that Elastic may <a href="/legal/privacy-statement#how-we-use-the-information" target="_blank">contact you</a> about our related products and services, using the details you provide above. See <a href="/legal/privacy-statement/" target="_blank">Elastic’s Privacy Statement</a> for more details or to opt-out at any time.

Serverless GDPR Text

提交即表示您确认您已阅读并同意我们的<a href="/cn/legal/serverless-preview-terms" target="_self">服务条款</a>，并且 Elastic 可以使用您提供的上述详细信息与您联系，以向您介绍我们相关的<a href="/cn/legal/privacy-statement#how-we-use-the-information" target="_self">产品和服务</a>。如需了解更多信息，或想随时取消订阅，请参阅 <a href="/cn/legal/privacy-statement/" target="_self">Elastic 的隐私声明</a>。

By submitting you agree to <a href="/agreements/global/cloud-services-monthly" rel="nofollow">Elastic Cloud Terms of Service</a>. Your personal data will be processed in accordance with <a href="/legal/privacy-statement">Elastic's Privacy Statement</a>.

Cloud Trial GDPR Text

提交即表示您同意 <a href="/cn/agreements/global/cloud-services-monthly" rel="nofollow">Elastic Cloud 服务条款</a>。我们将会按照 <a href="/cn/legal/privacy-statement">Elastic 的隐私声明</a>处理您的个人数据。

By submitting you acknowledge that you've read and agree to our <a href="/legal/terms-of-use" target="_blank">Terms of Service</a>, and that Elastic may <a href="/legal/privacy-statement#how-we-use-the-information" target="_blank">contact you</a> about our related products and services, using the details you provide above. See <a href="/legal/privacy-statement/" target="_blank">Elastic’s Privacy Statement</a> for more details or to opt-out at any time.

Newsletter GDPR Text

提交即表示您确认您已阅读并同意我们的<a href="/cn/legal/terms-of-use" target="_self">服务条款</a>，并且 Elastic 可以使用您提供的上述详细信息与您联系，以向您介绍我们相关的<a href="/cn/legal/privacy-statement#how-we-use-the-information" target="_self">产品和服务</a>。如需了解更多信息，或想随时取消订阅，请参阅 <a href="/cn/legal/privacy-statement/" target="_self">Elastic 的隐私声明</a>。

Explore similar demos

Overview

Speakers

Close

See more insights

The content on this page is not available in the selected language. As Elastic grows globally, we continue to support content in multiple languages.

The content on this page is not available in the selected language.

本页内容尚不支持所选语言。Elastic 正在不断努力，以实现对多种语言内容的支持。感谢您在此期间给予的耐心与陪伴！

Author

Articles by

Learn more

Watch now (no PT)

Watch now

See all top stories

All (no PT translation)

Contact information

Press Release

Share on Reddit

Share this story

Share by Email

Thank you for your interest!

Contact Info

Follow us on Youtube

Load More

Share on LinkedIn

Follow us on LinkedIn

Search Integrations

All Solutions

Video for

Follow us on Twitter

See when this webinar starts in my time zone

查看本次网络研讨会在我的时区的开始时间

Register to Watch

Register now

See All Posts

Can't make it? Register and we'll send you the recording. You'll also receive an email with related content

无法实时参加？注册后我们会给您发送录像。您还将收到相关内容的电子邮件。

Author

Articles by Jason Stoltzfus

Software Engineer, Elastic

How to create a document schema for product variants and SKUs for your ecommerce search experience

Search UI 1.10 makes building search experiences for Elasticsearch even easier

如何快速构建优异的 React 搜索体验

使用 Slack、Zapier 和 Elastic App Search 构建 Searchbot

如何使用 React 和 Elastic App Search 打造应用程序搜索体验