アルゴリアと石積み

次のとおりです。this issue。 Algoliaのインスタント検索ライブラリでMasonryがサポートされているのだろうか？アルゴリアと石積み

現在のところ、石積みのプロパティを読み込めません。

おかげ

EDIT - 全スクリプト

<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の新しいコネクタでこれを行うことができます.を使用して、DOMを完全に制御できる内部的に石積みを使用するウィジェットを作成します。

続きを読む：

出典

2017-07-17 07:25:54

こんにちはHaroen、どのように私は私の現在のソリューションにこれを実装するのでしょうか？（私は藻類に慣れていないし、文書もかなり深い）。私は質問に無限のヒットコンテナコードを追加しました:) – user3082823

あなたは何を初期化しているのですか？ –

ちょっとHaroen - 私は質問にコードを追加しました。 – user3082823

答えて

関連する問題