Algolia and Masonry

正在关注this issue。我想知道现在是否通过Algolia的即时搜索库支持Masonry？Algolia and Masonry

这是目前未能加载砌体属性。

感谢

编辑 - 完整的脚本

<script> 

    var hitTemplate = document.querySelector('#hit-template').textContent; 

    const search = instantsearch({ 
     appId: '{{ craft.searchPlus.getAlgoliaApplicationId }}', 
     apiKey: '{{ craft.searchPlus.getAlgoliaSearchApiKey }}', 
     indexName: 'products', 
     urlSync: true 
    }); 

    search.addWidget(
     instantsearch.widgets.infiniteHits({ 
     container: '#infinite-hits-container', 
     templates: { 
      empty: 'No results', 
      item: hitTemplate 
     }, 
     showMoreLabel: 'Load More Deals', 
     hitsPerPage: 80 
     }) 
    ); 

    search.addWidget(
     instantsearch.widgets.menu({ 
     container: '#womensCategories', 
     attributeName: 'womensCategory.title', 
     limit: 50, 
     templates: { 
      header: 'Womens' 
     } 
     }) 
    ); 

    search.addWidget(
     instantsearch.widgets.menu({ 
     container: '#mensCategories', 
     attributeName: 'mensCategory.title', 
     limit: 50, 
     templates: { 
      header: 'Mens' 
     } 
     }) 
    ); 


    search.addWidget(
     instantsearch.widgets.refinementList({ 
     container: '#stores', 
     attributeName: 'retailer', 
     operator: 'or', 
     limit: 10, 
     templates: { 
      header: 'Store' 
     } 
     }) 
    ); 

    search.addWidget(
     instantsearch.widgets.refinementList({ 
     container: '#gender', 
     attributeName: 'gender', 
     operator: 'or', 
     limit: 2, 
     templates: { 
      header: 'Gender' 
     } 
     }) 
    ); 

    search.addWidget(
     instantsearch.widgets.refinementList({ 
     container: '#size', 
     attributeName: 'size.sizing', 
     operator: 'or', 
     limit: 20, 
     templates: { 
      header: 'Sizing' 
     } 
     }) 
    ); 


    search.addWidget(
     instantsearch.widgets.numericRefinementList({ 
     container: '#price', 
     attributeName: 'salePrice', 
     options: [ 
      {name: 'All'}, 
      {end: 20, name: 'less than 20'}, 
      {end: 50, name: 'less than 50'}, 
      {start: 50, end: 100, name: 'between 50 and 100'}, 
      {start: 100, end: 300, name: 'Expensive'}, 
      {start: 300, name: 'Very Expensive'} 
     ], 
     templates: { 
      header: 'Price' 
     } 
     }) 
    ); 


    search.start(); 

</script>

我已经编辑上面的代码，包括我的完整剧本，我希望这是足以增添了答案。它只需使用1个容器在页面上初始化。

来源

2017-07-15 user3082823

您可以使用InstantSearch中的新连接器执行此操作，您将使用connectInfiniteHits来制作一个内部使用砌体的小部件，您可以在其中完全控制DOM。

了解更多：

来源

2017-07-17 07:25:54

Haroen嗨，我将如何落实到我目前的解决方案呢？（我是新来的algolia和文档相当深入）。我已经将我的无限命中容器代码添加到问题:) – user3082823

您可以添加更多信息，您如何初始化所有内容？ –

嘿Haroen - 我已经添加了代码的问题。 – user3082823

Algolia and Masonry

回答

相关问题