时间戳

首页 > 解决方案 > Algolia 搜索结果覆盖了 css 格式

javascript - Algolia 搜索结果覆盖了 css 格式

问题描述

我正在使用 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 的回答之后，它在渲染时部分工作并产生了奇怪的重叠，但如果窗口的宽度或高度减小，重叠会消失并返回到全尺寸。

这是重叠的样子 在此处输入图像描述

标签： javascripthtmlcssalgolia

解决方案

问题

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

Aloglia 的文档给出了这个例子：

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>

推荐阅读