Shopify 中使用 Algolia 的自定义命中模板

Question

在 Shopify 中安装 Algolia 插件时，他们添加了一个文件 algolia_instant_search.js.liquid，在该文件中，有一个代码部分；

  // Hits


instant.search.addWidgets([
    hits({
      container: '.ais-hits-container',
      templates: {
        empty: instant.templates.empty,
        item: instant.templates.product,
      },
      cssClasses: {
        list: 'row',
        item: 'col-6 col-sm-6 col-lg-3 col-md-4 col-sm-6 mb-45'
      },
      transformItems: function(products) {
        return products.map(function(product) {
          return algolia.assign({}, product, {
            _distinct: instant.distinct,
            can_order:
              product.inventory_management !== 'shopify' ||
              product.inventory_policy === 'continue' ||
              product.inventory_quantity > 0,
            translations: algolia.translations,
            queryID: product.__queryID,
            productPosition: product.__position,
            index: instant.search.mainIndex.getIndexName(),
          });
        });
      },
    }),
  ]);

我想更改命中模板，所以通常我会添加一些这样的 HTML；

// Hits
  instant.search.addWidgets([
    hits({
      container: '.ais-hits-container',
      templates: {
        empty: instant.templates.empty,
        item: `
    <div class="single-product">
        <div class="single-product__image"><!-- Product Image Lazyload with Retina  -->
          <a class="image-wrap" href="/collections/all/products/grey-tool">
              <img class="responsive-image__image popup_cart_image" src="https://cdn.shopify.com/s/files/1/0559/2632/5423/products/2_540x.jpg?v=1617194828">
          </a>
          <div class="single-product__floating-badges">
              <span class="soldout-title">Soldout</span>
          </div>
          <div class="single-product__content ">
            <div class="title"><h3 class="popup_cart_title">  <a href="/collections/all/products/grey-tool">1. Side Ottoman</a></h3>
                <div class="product-cart-action">
                  <button class="cart-disable">
                    <span class="cart-text">Soldout</span>
                  </button>
                </div>
            </div>
          </div>
          <div class="price">
            <span id="product_current_price" class="discounted-price">€110,00</span>
            <span class="main-price discounted ">€130,00</span>
          </div>
       </div>
    </div>
`,
      },
      cssClasses: {
        list: 'row',
        item: 'col-6 col-sm-6 col-lg-3 col-md-4 col-sm-6 mb-45'
      },
      transformItems: function(products) {
        return products.map(function(product) {
          return algolia.assign({}, product, {
            _distinct: instant.distinct,
            can_order:
              product.inventory_management !== 'shopify' ||
              product.inventory_policy === 'continue' ||
              product.inventory_quantity > 0,
            translations: algolia.translations,
            queryID: product.__queryID,
            productPosition: product.__position,
            index: instant.search.mainIndex.getIndexName(),
          });
        });
      },
    }),
  ]);

但是因为它是一个 .liquid 文件，所以我无法添加像 {{ product_image }} 这样的 Algolia JS 标签，有关如何执行此操作的任何帮助，也许有人可以告诉我在哪里可以找到最初放置的模板在instant.templates.product

Answer 1

您在 HTML 中使用 tic (`)。你试过用单引号 (') 代替吗？