需求背景

网站的搜索框是用户和网站交互的一种途径。用户使用搜索框的时候往往是带有目的性的。比如想买春天的裙子，比如想买带花纹的上衣。这种带有明确目的的流量是十分珍贵的。如果加以正确的引流，往往可能会带来转化。除此之外，这里还是站长对网站进行营销的另外一个入口。比如现在网站想强烈推荐某个风格或者季节的衣服，那么直接可以在这里开入口，将站内的引流灵活运用。至于行业热搜词等，因站而异。可以参考竞品网站或者从google trending里面去找。

现存的原生的shopify搜索框比较素，功能也比较单一如何能够将上面的想法融入到我们的shopify网站是当下应该考虑的问题。

1. 代码更新

由于不同主题的搜索框实现原理都不一样，重口难调。所以博主这边只对原生的Dawn主题进行优化，大家自行去进行改版即可。原理就是，在加载搜索数据的地方给它塞进去我们设定好的关键热搜词。

predictive-search.js

  1. class PredictiveSearch extends HTMLElement {
  2.   constructor() {
  3.     super();
  4.     this.cachedResults = {};
  5.     this.input = this.querySelector('input[type="search"]');
  6.     this.predictiveSearchResults = this.querySelector('[data-predictive-search]');
  7.     this.isOpen = false;
  9.     this.setupEventListeners();
  10.   }
  12.   setupEventListeners() {
  13.     const form = this.querySelector('form.search');
  14.     form.addEventListener('submit', this.onFormSubmit.bind(this));
  16.     this.input.addEventListener('input', debounce((event) => {
  17.       this.onChange(event);
  18.     }, 300).bind(this));
  19.     this.input.addEventListener('focus', this.onFocus.bind(this));
  20.     this.addEventListener('focusout', this.onFocusOut.bind(this));
  21.     this.addEventListener('keyup', this.onKeyup.bind(this));
  22.     this.addEventListener('keydown', this.onKeydown.bind(this));
  23.   }
  25.   getQuery() {
  26.     return this.input.value.trim();
  27.   }
  29.   onChange() {
  30.     const searchTerm = this.getQuery();
  32.     if (!searchTerm.length) {
  33.       this.close(true);
  34.       return;
  35.     }
  37.     this.getSearchResults(searchTerm);
  38.   }
  40.   onFormSubmit(event) {
  41.     if (!this.getQuery().length || this.querySelector('[aria-selected="true"] a')) event.preventDefault();
  42.   }
  44.   onFocus() {
  45.     const searchTerm = this.getQuery();
  46.     this.open();
  47.     if (!searchTerm.length) return;
  49.     if (this.getAttribute('results') === 'true') {
  50.       this.open();
  51.     } else {
  52.       this.getSearchResults(searchTerm);
  53.     }
  54.   }
  56.   onFocusOut() {
  57.     setTimeout(() => {
  58.       if (!this.contains(document.activeElement)) this.close();
  59.     })
  60.   }
  62.   onKeyup(event) {
  63.     if (!this.getQuery().length) this.close(true);
  64.     event.preventDefault();
  66.     switch (event.code) {
  67.       case 'ArrowUp':
  68.         this.switchOption('up')
  69.         break;
  70.       case 'ArrowDown':
  71.         this.switchOption('down');
  72.         break;
  73.       case 'Enter':
  74.         this.selectOption();
  75.         break;
  76.     }
  77.   }
  79.   onKeydown(event) {
  80.     // Prevent the cursor from moving in the input when using the up and down arrow keys
  81.     if (
  82.       event.code === 'ArrowUp' ||
  83.       event.code === 'ArrowDown'
  84.     ) {
  85.       event.preventDefault();
  86.     }
  87.   }
  89.   switchOption(direction) {
  90.     if (!this.getAttribute('open')) return;
  92.     const moveUp = direction === 'up';
  93.     const selectedElement = this.querySelector('[aria-selected="true"]');
  94.     const allElements = this.querySelectorAll('li');
  95.     let activeElement = this.querySelector('li');
  97.     if (moveUp && !selectedElement) return;
  99.     this.statusElement.textContent = '';
  101.     if (!moveUp && selectedElement) {
  102.       activeElement = selectedElement.nextElementSibling || allElements[0];
  103.     } else if (moveUp) {
  104.       activeElement = selectedElement.previousElementSibling || allElements[allElements.length - 1];
  105.     }
  107.     if (activeElement === selectedElement) return;
  109.     activeElement.setAttribute('aria-selected', true);
  110.     if (selectedElement) selectedElement.setAttribute('aria-selected', false);
  112.     this.setLiveRegionText(activeElement.textContent);
  113.     this.input.setAttribute('aria-activedescendant', activeElement.id);
  114.   }
  116.   selectOption() {
  117.     const selectedProduct = this.querySelector('[aria-selected="true"] a, [aria-selected="true"] button');
  119.     if (selectedProduct) selectedProduct.click();
  120.   }
  122.   getSearchResults(searchTerm) {
  123.     const queryKey = searchTerm.replace(" ", "-").toLowerCase();
  124.     this.setLiveRegionLoadingState();
  126.     if (this.cachedResults[queryKey]) {
  127.       this.renderSearchResults(this.cachedResults[queryKey]);
  128.       return;
  129.     }
  131.     fetch(`${routes.predictive_search_url}?q=${encodeURIComponent(searchTerm)}&${encodeURIComponent('resources[type]')}=product&${encodeURIComponent('resources[limit]')}=4&section_id=predictive-search`)
  132.       .then((response) => {
  133.         if (!response.ok) {
  134.           var error = new Error(response.status);
  135.           this.close();
  136.           throw error;
  137.         }
  139.         return response.text();
  140.       })
  141.       .then((text) => {
  142.         const resultsMarkup = new DOMParser().parseFromString(text, 'text/html').querySelector('#shopify-section-predictive-search').innerHTML;
  143.         this.cachedResults[queryKey] = resultsMarkup;
  144.         this.renderSearchResults(resultsMarkup);
  145.       })
  146.       .catch((error) => {
  147.         this.close();
  148.         throw error;
  149.       });
  150.   }
  152.   setLiveRegionLoadingState() {
  153.     this.statusElement = this.statusElement || this.querySelector('.predictive-search-status');
  154.     this.loadingText = this.loadingText || this.getAttribute('data-loading-text');
  156.     this.setLiveRegionText(this.loadingText);
  157.     this.setAttribute('loading', true);
  158.   }
  160.   setLiveRegionText(statusText) {
  161.     this.statusElement.setAttribute('aria-hidden', 'false');
  162.     this.statusElement.textContent = statusText;
  164.     setTimeout(() => {
  165.       this.statusElement.setAttribute('aria-hidden', 'true');
  166.     }, 1000);
  167.   }
  169.   renderSearchResults(resultsMarkup) {
  170.     this.predictiveSearchResults.querySelector('.predictive-search__keywords').classList.add('hide');
  171.     this.predictiveSearchResults.querySelector('.predictive-search__results').innerHTML = resultsMarkup;
  172.     this.setAttribute('results', true);
  174.     this.setLiveRegionResults();
  175.     this.open();
  176.   }
  178.   setLiveRegionResults() {
  179.     this.removeAttribute('loading');
  180.     this.setLiveRegionText(this.querySelector('[data-predictive-search-live-region-count-value]').textContent);
  181.   }
  183.   getResultsMaxHeight() {
  184.     this.resultsMaxHeight = window.innerHeight - document.getElementById('shopify-section-header').getBoundingClientRect().bottom;
  185.     return this.resultsMaxHeight;
  186.   }
  188.   open() {
  189.     this.predictiveSearchResults.style.maxHeight = this.resultsMaxHeight || `${this.getResultsMaxHeight()}px`;
  190.     this.setAttribute('open', true);
  191.     this.input.setAttribute('aria-expanded', true);
  192.     this.isOpen = true;
  193.   }
  195.   close(clearSearchTerm = false) {
  196.     if (clearSearchTerm) {
  197.       this.input.value = '';
  198.       this.removeAttribute('results');
  199.     }
  201.     const selected = this.querySelector('[aria-selected="true"]');
  203.     if (selected) selected.setAttribute('aria-selected', false);
  205.     this.input.setAttribute('aria-activedescendant', '');
  206.     this.removeAttribute('open');
  207.     this.input.setAttribute('aria-expanded', false);
  208.     this.resultsMaxHeight = false
  209.     this.predictiveSearchResults.removeAttribute('style');
  211.     this.isOpen = false;
  212.   }
  213. }
  215. customElements.define('predictive-search', PredictiveSearch);

header.liquid

  1. 在style里面添加样式

    1. ul.keywords_list {
    2. list-style: none;
    3. display: inline-table;
    4. padding: 0 20px;
    5. width: 100%;
    6. }
    7. ul.keywords_list a {
    8. text-decoration: none;
    9. }
    10. ul.keywords_list .keywords_item {
    11. float: left;
    12. width: 50%;
    13. margin: 5px 0;
    14. }

  2. 搜索 predictive-search predictive-search—header 将div标签内的内容更新为

    2. <div class="predictive-search predictive-search--header" tabindex="-1" data-predictive-search>
    3.  <div class="predictive-search__keywords">
    4.    <h2 class="predictive-search__heading text-body caption-with-letter-spacing">
    5.      HOT SEARCH
    6.      <svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
    7.        <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
    8.      </svg>
    9.    </h2>
    10.    <ul class="keywords_list">
    11.    {%- for block in section.blocks -%}
    12.      <li class="keywords_item">
    13.        <a href="{{ block.settings.collection.url }}">
    14.          <span style="color: {{ block.settings.keyword_color }};">{{ block.settings.keyword }}</span>
    15.        </a>
    16.      </li>
    17.    {%- endfor -%}
    18.  </ul>
    19.  </div>
    20.  <div class="predictive-search__results">
    21.    <div class="predictive-search__loading-state">
    22.      <svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
    23.        <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
    24.      </svg>
    25.    </div>
    26.  </div>
    27. </div>

  3. 在schema中添加block配置

    1. "blocks": [
    2. {
    3.  "type": "keyword",
    4.  "name": "关键词配置",
    5.  "settings": [
    6.    {
    7.      "type": "header",
    8.      "content": "关键词配置项"
    9.    },
    10.    {
    11.      "type": "collection",
    12.      "id": "collection",
    13.      "label": "关键词collection链接"
    14.    },
    15.    {
    16.      "type": "text",
    17.      "id": "keyword",
    18.      "label": "显示的关键词"
    19.    },
    20.    {
    21.      "type": "color",
    22.      "id": "keyword_color",
    23.      "label": "关键词颜色"
    24.    }
    25.  ]
    26. }
    27. ]

    3. 效果展示

    店铺地址： https://asen-practice.myshopify.com/ 密码：test

点击查看【bilibili】

Tips: 如有引用请标注源文章地址

关注我的【小红书】，第一时间掌握更新动态

你的鼓励就是我创作的动力！
zanshang.png