时间戳

首页 > 解决方案 > 使用通配符的 HTML 搜索功能 - shopify

html - 使用通配符的 HTML 搜索功能 - shopify

问题描述

我是 HTML 的超级初学者，但是，我正在尝试解决我的网站的问题。我正在尝试将通配符（*）连接到消费者尝试搜索的任何内容的末尾，以便它选择类似标记的项目，但是，我无法弄清楚在哪里添加所述代码......我们当前的搜索查询在以下情况下运行良好根据部分关键字提取项目，但是当点击“输入”按钮时，它会说它找不到任何产品。

附加说明：这是一个 Shopify 网站，其主题来自 halothemes，因此大部分内容都是由它们编码的。

{% assign grid_results = true %}

<div class="search-page collection-template" data-search-page>
 <div class="container">
  {% if search.performed %}

{% comment %}
Avoid accessing search.results before the opening paginate tag.
If you do, the pagination of results will be broken.
{% endcomment %}

{% paginate search.results by 15 %}

{% comment %}
We don't have any results to show. Feel free to show off featured products
or suggested searches here.
{% endcomment %}

{% if search.results_count == 0 %}
<header class="page-header">
  <h2>
    {% render 'multilang' with settings.search_1 %}
    <strong> &nbsp;"{{ search.terms }}"&nbsp; </strong>
    {% render 'multilang' with settings.search_2 %}
  </h2>
</header>

{% else %}

<header class="page-header">
  <h2>
    {% render 'multilang' with settings.search_3 %}
    <strong> &nbsp;"{{ search.terms }}"&nbsp; </strong>
    {% render 'multilang' with settings.search_4 %}
  </h2>
</header>

{% comment %}
Each result template, based on the grid_layout variable above
{% endcomment %}

<div class="block-row col-main">
  {% if grid_results == false %}
  <div class="product-collection products-list product-search row">
    {% for product in search.results %}
    <div class="grid-item col-12{% if settings.product_image_border%} grid-item-border{% endif %}">
      {% render 'search-result' with product as product %}
    </div>
    {% endfor %}
  </div>

  {% else %}

  <div class="products-grid product-search row product-collection">
    {% for product in search.results %}
    <div class="grid-item col-6 col-md-4{% unless settings.layout_style == 'layout_style_1170' %} col5 col-lg-3{% endunless %}{% if settings.product_image_border%} grid-item-border{% endif %}">
      {% if settings.style_product_grid == 'style_product_grid_2' %}
        {% render 'product-grid-item-style-2' with product as product %}
      {% else %}
        {% render 'product-grid-item' with product as product %}
      {% endif %}
    </div>
    {% endfor %}
  </div>
  {% endif %}
</div>
{% endif %}

{% if paginate.pages > 1 %}
<div class="padding">
  {% render 'pagination-page' paginate: paginate %}
</div>
{% endif %}
{% endpaginate %}

{% else %}

{% comment %}
If search.performed is false, someone either accessed the page without
the q parameter, or it was blank.
Be sure to show a search form here, along with anything else you want to showcase.
{% endcomment %}

<header class="page-header">
  <h2 style="text-align:center" {% if settings.enable_multilang %}data-translate="general.search.title"{%endif%}>{{ 'general.search.title' | t }}</h2>
  <div class="header-search__form">
      <form action="/search" method="get" class="search-bar" role="search">
          <input type="hidden" name="type" value="product">

          <input type="search" name="q"
              {% if settings.enable_multilang %} data-translate="general.search.placeholder" translate-item="placeholder"{% endif %}
              placeholder="{{ 'general.search.placeholder' | t }}"
              class="input-group-field" aria-label="Search Site" autocomplete="off">

          <button type="submit" class="btn icon-search">
              {% render 'icon-search' %}
          </button>
      </form>
  </div>
</header>
{% endif %}

如果你们需要任何其他信息，请告诉我！谢谢！

标签： htmlshopifyshopify-template

解决方案

您可以使用一个简单的脚本在提交表单时向搜索查询添加通配符，例如：

var searchForm = document.querySelector(".search-bar");
searchForm.addEventListener("submit", function(e) {
  var searchInput = searchForm.querySelector("[name=q]");
  var q = searchInput.value;
  if (!q.match(/\*$/)) {
    e.preventDefault();
    searchInput.value = q + "*";
    searchForm.submit();
  }
});

推荐阅读