在产品视图中显示 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 结果的主要内容,如果未能解决你的问题,请参考以下文章

algolia 即时搜索显示几个项目并使用分页

VuePress - Algolia 增加结果

为 Algolia 搜索结果正确使用 Facets

Xcode 12 和 Algolia 搜索客户端?

如何在 django 中显示来自 ajax 搜索结果的产品?

仅当搜索框不为空时才显示项目匹配内容