问题

Question

我正在使用algolia搜索进行搜索。一切正常，但不是以列形式显示搜索结果，而是以列表格式显示

这是正常html代码中的显示但是当使用algolia搜索结果使用下面的代码填充容器时，这就是显示的内容

我有这个html文件

    <div class="row isotope-grid" id="hits" >
        <!-- Load more -->
        <div class="flex-c-m flex-w w-full p-t-45">
            <a href="#" class="flex-c-m stext-101 cl5 size-103 bg2 bor1 hov-btn1 p-lr-15 trans-04">
                Load More
            </a>
        </div>
    </div>

这是JS格式

         var search = instantsearch({
          // Replace with your own values
                appId: 'E525782525525',
                apiKey: 'xxxxxxxxx, 
                indexName: 'Listing',
                urlSync: true,
                searchParameters: {
                  query: "2",
                  // hitsPerPage: 10
                }
              });


         search.addWidget(
           instantsearch.widgets.hits({
            container: '#hits',
            templates: {
              empty: 'No results',
              item: `

                            <div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item ">
                <!-- Block2 -->
                <div class="block2">
                    <div class="block2-pic hov-img0">
                        <img src="images/product-03.jpg" alt="IMG-PRODUCT">
                        <a href="#" class="block2-btn flex-c-m stext-103 cl2 size-102 bg0 bor2 hov-btn1 p-lr-15 trans-04 js-show-modal1">
                            Quick View
                        </a>
                    </div>

                    <div class="block2-txt flex-w flex-t p-t-14">
                        <div class="block2-txt-child1 flex-col-l ">
                            <a href="product-detail.html" class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6">
                                Only Check Trouser
                            </a>

                            <span class="stext-105 cl3">
                                $25.50
                            </span>
                        </div>

                        <div class="block2-txt-child2 flex-r p-t-3">
                            <a href="#" class="btn-addwish-b2 dis-block pos-relative js-addwish-b2">
                                <img class="icon-heart1 dis-block trans-04" src="images/icons/icon-heart-01.png" alt="ICON">
                                <img class="icon-heart2 dis-block trans-04 ab-t-l" src="images/icons/icon-heart-02.png" alt="ICON">
                            </a>
                        </div>
                    </div>
                </div>
            </div>

              `
              ,

               }
              })
            );
          search.start();

我已经排除了CSS，并发现ALgolia覆盖了显示。如何修改代码以显示列的自定义显示，而不是默认的Algolia列表显示？

在执行Dipen Shah的答案之后，它在渲染时会部分工作并产生重叠的重叠，但是如果窗口的宽度或高度减小，则重叠会消失，并返回到完整尺寸。

这是重叠的样子

Answer 1

问题

我认为您没有使用正确的模板方法。

Aloglia的文档给出了this example：

JavaScript ：

search.addWidget(
  instantsearch.widgets.hits({
    container: '#hits',
    templates: {
      item: document.getElementById('hit-template').innerHTML,
      empty: "We didn't find any results for the search <em>\"{{query}}\"</em>"
    }
  })
);

HTML ：

<!-- Add this to your HTML document -->
<script type="text/html" id="hit-template">
  <div class="hit">
    <div class="hit-image">
      <img src="{{image}}" alt="{{name}}">
    </div>
    <div class="hit-content">
      <h3 class="hit-price">${{price}}</h3>
      <h2 class="hit-name">{{{_highlightResult.name.value}}}</h2>
      <p class="hit-description">{{{_highlightResult.description.value}}}</p>
    </div>
  </div>
</script>

解决方案

这意味着您需要这样的东西：（相应地替换占位符）

Javascript：

// Replace with your own values
appId: 'E525782525525',
  apiKey: 'xxxxxxxxx, 
indexName: 'Listing',
  urlSync: true,
  searchParameters: {
    query: "2",
    // hitsPerPage: 10
  }
});


search.addWidget(
  instantsearch.widgets.hits({
    container: '#hits',
    templates: {
      empty: 'No results',
      item: document.getElementById('hit-template').innerHTML,

    }
  })
);
search.start();

HTML：

<!-- Add this to your HTML document -->
<script type="text/html" id="hit-template">
  <div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item ">
    <!-- Block2 -->
    <div class="block2">
      <div class="block2-pic hov-img0">
        <img src="{{image}}" alt="{{name}}">
        <a href="#" class="block2-btn flex-c-m stext-103 cl2 size-102 bg0 bor2 hov-btn1 p-lr-15 trans-04 js-show-modal1">Quick View</a>
      </div>

      <div class="block2-txt flex-w flex-t p-t-14">
        <div class="block2-txt-child1 flex-col-l ">
          <a href="product-detail.html" class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6">${{product_name}}</a>

          <span class="stext-105 cl3">${{price}}</span>
        </div>

        <div class="block2-txt-child2 flex-r p-t-3">
          <a href="#" class="btn-addwish-b2 dis-block pos-relative js-addwish-b2">
            <img class="icon-heart1 dis-block trans-04" src="images/icons/icon-heart-01.png" alt="ICON">
            <img class="icon-heart2 dis-block trans-04 ab-t-l" src="images/icons/icon-heart-02.png" alt="ICON">
          </a>
        </div>
      </div>
    </div>
  </div>

</script>

Answer 2

您的代码缺少非常关键的函数调用，这就是为什么搜索结果无法正确呈现的原因。

从this@bar移除foo类

isotope-grid

呈现搜索结果后，用同位素网格初始化div#hits div。

<!-- Load more -->
<div class="row" id="hits">
  <div class="flex-c-m flex-w w-full p-t-45">
    <a href="#" class="flex-c-m stext-101 cl5 size-103 bg2 bor1 hov-btn1 p-lr-15 trans-04">
      Load More
    </a>
  </div>
</div>

更改后，搜索结果将正确呈现。

说明：

在原始主题文件中，页面加载事件脚本调用在调用之后初始化网格。

hits

当algolia小部件呈现搜索结果时，您的模板设置了正确的CSS类，但是您仍然需要为搜索结果容器初始化search.on('render', function(){ $grid = $("#hits"); $grid.isotope('destroy'); $grid.isotope({ itemSelector: '.isotope-item', layoutMode: 'fitRows', percentPosition: true, animationEngine : 'best-available', masonry: { columnWidth: '.isotope-item' } }); });网格。我的代码通过拦截小部件的$(window).on('load', function () { var $grid = $topeContainer.each(function () { $(this).isotope({ itemSelector: '.isotope-item', layoutMode: 'fitRows', percentPosition: true, animationEngine : 'best-available', masonry: { columnWidth: '.isotope-item' } }); }); });事件来实现此目的。

阿尔及利亚搜索结果覆盖了CSS格式

2 个答案:

问题

解决方案