在产品视图中显示 Algolia 结果
Posted
技术标签:
【中文标题】在产品视图中显示 Algolia 结果【英文标题】:Display Algolia results on product view 【发布时间】:2018-01-31 10:51:04 【问题描述】:我是 Ror 的新手, 我想在我的 products.search 页面上显示我所有可用的产品卡,并添加一个 algolia 搜索栏过滤和显示结果卡,而不是此页面上的所有产品。 我知道这并不难,但我没有成功让它发挥作用。 自从我在 Algolia 网站上获得所有产品以来,我的 algolia 索引工作正常。 实际上,我没有找到放入控制器的好方法和放入视图的好代码...:-(
感谢您的帮助。 这是我的代码:
app.js:
//= require algolia/v3/algoliasearch.min
ProductsController.rb:
def search
@products = Product.where(active: true)
???????
end
产品.rb:
include AlgoliaSearch
algoliasearch if: :active? do
attribute :name, :brand, :category, :color, :size, :price
end
产品/search.html.erb:
<!-- Algolia searchbar -->
<!-- HTML Markup -->
<div class="aa-input-container" id="aa-input-container">
<input type="search" id="aa-search-input" class="aa-input-search" placeholder="Trouver un article..." name="search" autocomplete="off" />
<svg class="aa-input-icon" viewBox="XXXXXXXX">
<path d="XXXXXXXXXX" />
</svg>
</div>
<!-- Include AlgoliaSearch JS Client and autocomplete.js library -->
<script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
<script src="https://cdn.jsdelivr.net/autocomplete.js/0/autocomplete.min.js"></script>
<!-- Initialize autocomplete menu -->
<script>
var client = algoliasearch('XXXXX', 'XXXXXXXXXX');
var index = client.initIndex('Product');
//initialize autocomplete on search input (ID selector must match)
autocomplete('#aa-search-input',
hint: false ,
source: autocomplete.sources.hits(index, hitsPerPage: 5),
//value to be displayed in input control after user's suggestion selection
displayKey: 'name',
//hash of templates used when rendering dataset
templates:
//'suggestion' templating function used to render a single suggestion
suggestion: function(suggestion)
return '<span>' +
suggestion._highlightResult.name.value + '</span><span>' +
suggestion._highlightResult.category.value + '</span>';
);
</script>
<div class="col-xs-12 col-md-9">
<% @products.each do |product| %>
<% if product.active? %>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="panel panel-default">
<div class="panel-heading preview">
</div>
<div class="panel-body">
<strong><%= link_to product.name, product %></strong>
<strong><%= product.price %> euros</strong>
</div>
</div>
</div>
<% end %>
<% end %>
</div>
【问题讨论】:
【参考方案1】:要在当前视图上显示 Algolia,您可以只依赖前端搜索,因此您可以删除控制器中的 @products = Product.where(active: true)
行和视图中的循环。
也就是说,您的代码似乎是正确的。您的 Algolia 索引中有任何记录吗?如果没有,您可以使用Product.reindex!
强制重新索引。
【讨论】:
谢谢吉安卢卡!但仍然无法正常工作..:-(我从控制器中删除了我的方法并在视图中删除了循环...我的 Algolia 索引中有 20 条记录。并且做了重新索引!然后我在我的控制器中尝试:'def search ( at)results = Product.search('', hitsPerPage: 10) end' 并且在我看来 '' 但仍然无法正常工作... :-(以上是关于在产品视图中显示 Algolia 结果的主要内容,如果未能解决你的问题,请参考以下文章