"好的艺术家会复制，伟大的艺术家会偷窃"。- 史蒂夫-乔布斯

灵感来自于 pimoroni.com 我想在我们的网店上实现一个类似的搜索。 buyzero.de buyzero.de目前是由Shopify提供的。

搜索在你输入时显示结果--在主页上，动态地取代先前显示的内容。非常酷，非常有用--而且非常、非常快（谢谢 Algolia!)

由于我对Algolia的现有文件感到困惑，而且他们的入职服务也不是很有帮助，所以我不得不自己想办法，并通过大量的谷歌搜索来解决这些问题。

这是我实施Algolia的经验总结。我是在一天之内完成的，单次编码时间约为12-14小时。

建议的准备工作：将开发代码注入你的页面中

我建议使用谷歌浏览器的扩展程序 谭家驹 用于在开发时从你的本地硬盘注入CSS和Javascript。

要做到这一点，你必须为Tampermonkey启用文件访问。打开。

chrome://extensions

单击 "详细信息"，并将 "允许访问文件URL "切换为 "允许"。

在Tampermonkey中创建以下新的用户脚本。

// ==UserScript==
// @名称Algolia-Inject
// @namespace https://pi3g.com/
// @版本 0.5
// @description 注入本地文件来测试Algolia!
// @作者 Maximilian Batz
// @grant GM_getResourceText
// @授予GM_addStyle
// @noframes
// @include https://buyzero.de/*
// @resource YOUR_CSS file://D:\algolia_jr.css
// @require file:/D:\algolia_jr.js

// ==/UserScript==

var my_css = GM_getResourceText（"YOUR_CSS"）。
GM_addStyle(my_css);

解释一下。

• 你必须授予getResourceText和addStyle，以便能够访问和注入CSS文件。
• noframes是指在Shopify明显加载的框架中不执行第二次，这也符合域名的要求。
• include -> 将在buyzero.de上匹配。你可能想改变这一行
• 用于导入CSS文件的资源。提供路径...在Linux中可能是 file:///home/whatever/whatever - 注意三条正斜杠
• require - 包括你的javascript文件
• userscript：这是用于添加CSS文件的用户脚本。

添加Algolia代码

随着 "如何发展 "这一点的结束。 这是我的代码，作为样本代码放在一个漂亮的小ZIP文件中。.

请不要从这个博客复制粘贴，因为我不确定，WordPress是否会破坏代码的格式......使用ZIP文件中的.js来复制。

请注意，Algolia的依赖性/JavaScript文件已经安装在我们的Shopify主题中 - 通过安装Algolia Shopify插件。我们的数据存储也已经设置好了，等等。Algolia过去（现在也是）已经在你输入搜索框的时候以下拉方式提供搜索结果。

我将带领你完成代码的重要部分。

一旦文档准备好，我们就启动aj_setup()，以注入我们的新搜索功能。

请注意，我在这个脚本中使用aj作为我的函数和id的前缀。你可以使用任何你喜欢的东西，这不是Algolia的要求。

容器

在aj_setup()中，我为搜索结果设置了一个新的容器（把它直接包含在你的主题文件中可能是更好的做法--对于开发来说，这更容易）。

这是搜索的HTML部分

$(".main-content").before('<div id="aj-search-container" class="aj-main-content full-width"><div class="background"><div class="pattern"><div class="container"><div class="row"><div class="col-md-12"><div class="row"><div class="col-md-12 center-column content-without-background">'+
                         "
"+
                           "<h1>这类结果是毛利。 <span id='sc-query'></span></h1>" +
                           "
"+
                             "
"+
                             "
"+
                             "
"+
                             "
"+
                           "
"+
                           "
"+
                               "
"+
                               "
"+
                               "
"+
                           "</DIV" +
                       "
"+
                       '</div></div></div></div></div></div></div></div>'
                       );

• 我给它的ID aj-search-container。 能够显示/隐藏整个搜索容器的结果
• 大部分部门的人，包括 容器 是与我们目前的主题兼容的造型所必需的--根据需要使用
• sc-query 用于反映用户当前输入的搜索，以显示系统代表他动态地更新结果（有代码可以做到这一点--继续阅读）。
• aj-right-container 包含过滤器以获得搜索的 "面"。用户可以选择一个或几个品牌来显示，产品类别，我们还包括一个价格过滤器。
• aj-clear-all 将包含一个清除分面的链接--以返回所有符合用户查询的结果
• aj-left-container 包含搜索结果。aj-stats将包含关于搜索的统计数据（搜索结果+搜索时间），aj-search-results将包含结果，aj-search-pagination将包含分页。

命题模板

同样，这可能会直接进入你的页面，而不是通过Javascript注入。

    $(".main-content").before('+')
       '+

'          <div class="aj-hit">'+

'            <div class="aj-hit-image">'+

'              <a href="/zh/{{product_link}}/"><img src="{{image}}" alt="{{title}}"></a>'+

'            </div>'+

'            <div class="aj-hit-content">'+

'              <div class="aj-hit-title"><a href="/zh/{{product_link}}/">{{_highlightResult.title.value}}{{variant_title}}。</a></div>'+
               '<p class="aj-hit-description">{{_highlightResult.body_html_safe.value}}。 &nbsp; <a href="/zh/{{product_link}}/">"mehr</a></p>'+
               '<p class="aj-hit-sku"><a href="/zh/{{product_link}}/">{{sku}}</a></p>'+

'              <div class="aj-hit-bottominfos">' +

'                <div class="aj-hit-price">{pos(190,5)}}价格€</div>' +

'                <div class="aj-hit-stock">{{inventory_quantity}}auf Lager </div>'+


'                <div  class="aj-hit-link"><a href="/zh/{{product_link}}/">产品介绍</a></div>'+

'             </div>'+
             '</div>'+
             '
' +
           '</div>'+
         ''+
     '');

这个模板是作为 "脚本 "插入的。这是Algolia文档中推荐的方式。

它用于呈现一个搜索结果，或命中。

在这里，在里面 aj-hit 我们有。

• aj-hit-image，使用{{product_link}}和{{image}}作为占位符，以便以后插入正确的值。
• aj-hit-title，使用{{_highlightResult.title.value}}--我还在{{variant_title}}中链接，为变体提供完整的标题。
• aj-hit-description，以呈现产品描述 - {{_highlightResult.body_html_safe.value}}。
• aj-hit-price 为{{价格}}。- 不要忘记添加你的货币（或者通过修改传递给模板的变量来添加）。
• aj-hit-stock，以显示我们有多少{{库存_数量}}的数量。
• aj-hit-link - 最后，产品页面的链接。{{产品_链接}}。

所有这些都被我的CSS文件很好地（IMHO）样式化了。样式设计不在本博文的范围内，请参考 buyzero.de 以获得一些灵感，然后编写你自己的代码。

更多关于{{_highlightResult.title.value}}的信息

使用三个大括号显示的变量将不会被Algolia for HTML转义。这里使用的是这种方法，以允许高亮显示。

Algolia将自动为你在标题等被匹配的部分周围加上标签。 _highlightResult 变量。你可以在输出中使用，向用户展示为什么认为该搜索结果与他们的搜索相关。

	
var search = instantsearch({
	  appId: 'YOUR_APP_ID',
	  apiKey: 'YOUR_API_KEY', // search only API key, no ADMIN key
	  indexName: 'shopify_buyzero_de_products',
	  urlSync: true,
	  searchParameters: {
		hitsPerPage: 10
	  },
	  searchFunction(my_helper){
		  point_both.ihelper = my_helper;
		  //search.helper.setQuery('Pi 3'); //sic!
		  //my_helper.search(); //sic!
		  
		  if(my_helper.state.query === '') {	
				return;
			}
		  my_helper.search();
	  } //end searchFunction
	});//end instantsearch setup