Algolia 搜索结果覆盖 css 格式

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">
                                .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 的回答后，它部分起作用并在渲染时产生奇怪的重叠，但如果 window 宽度或高度减小并且 return 恢复到完整尺寸，重叠就会消失。

这是重叠的样子

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

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

从 div#hits

isotope-grid

<!-- 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 div。

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'
            }
        });
    });
});

当 algolia 小部件呈现搜索结果时，您的模板设置正确 css classes 但您仍然需要为搜索结果容器初始化 isotope 网格。我的代码通过拦截小部件的 render 事件来实现这一点。

Algolia 搜索结果覆盖 css 格式

Algolia search result is overidding css format

html

javascript

css

algolia

问题

解决方案