在产品视图中显示 Algolia 结果

Question

我是 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>

Answer 1

要在当前视图上显示 Algolia，您可以只依赖前端搜索，因此您可以删除控制器中的 @products = Product.where(active: true) 行和视图中的循环。

也就是说，您的代码似乎是正确的。您的 Algolia 索引中有任何记录吗？如果没有，您可以使用Product.reindex! 强制重新索引。