https://www.motionpro.com/assets/controllers/search/results-d4aa92…1adfa73f1f683bf16bbe51e8b8734b2d4c3af92f.js

1import 'instantsearch.js';
2
3class Results {
4  constructor(results) {
5    this.results = results;
6    this.resultItemsHtml = '';
7  }
8
9  filter(uidPattern) {
10    const regex = RegExp(uidPattern);
11    this.filteredResults = this.results.filter(item => regex.test(item.uid));
12    return this;
13  }
14
15  renderItems() {
16    this.resultItemsHtml = this.limitedResults.map(item => this.resultAsHtml(item)).join('');
17    return this;
18  }
19
20  renderProducts() {
21    this.resultItemsHtml = this.limitedResults.map(item => this.productResultAsHtml(item)).join('');
22    return this;
23  }
24
25  renderVehicles() {
26    this.resultItemsHtml = this.limitedResults.map(item => this.vehicleResultAsHtml(item)).join('');
27    return this;
28  }
29
30  wrapItems() {
31    this.html = `<div><div class="ais-Hits"><ol class="ais-Hits-list">${this.resultItemsHtml}</ol></div></div>`;
32    return this;
33  }
34
35  insertInto(id=''){
36    document.getElementById(id).innerHTML = this.html;
37  }
38
39  limit(count=8) {
40    this.limitedResults = this.filteredResults.slice(0, count);
41    return this;
42  }
43
44  resultAsHtml(item) {
45    return `
46      <li class="ais-Hits-item">
47        <article>
48          <div class="media-left">
49              ${this.linkedImage(item)}
50          </div>
51          <div class="media-body">
52            ${this.linkedName(item)}
53            <div>
54              ${instantsearch.snippet({ attribute: 'body', hit: item })}
55              ${this.additionalLink(item)}
56            </div>
57          </div>
58        </article>
59      </li>
60    `;
61  }
62
63  productResultAsHtml(item) {
64    return `
65      <li class="ais-Hits-item">
66        <article>
67          <div class="media-left">
68              ${this.linkedImage(item)}
69          </div>
70          <div class="media-body">
71            ${this.linkedName(item)}
72            <span>${this.linkedPartNumber(item)}</span>
73            <div>
74              ${instantsearch.snippet({ attribute: 'body', hit: item })}
75              ${this.additionalLink(item)}
76            </div>
77          </div>
78        </article>
79      </li>
80    `;
81  }
82
83
84  vehicleResultAsHtml(item) {
85    return `
86      <li class="ais-Hits-item">
87        <article>for ${this.linkedName(item)}</article>
88      </li>
89    `;
90  }
91
92  linkedImage(item) {
93    if (item.image) {
94      const imageEl = `<img class="img-responsive" src="${item.image}" onerror="missingImage(this);" alt="">`;
95      if (item.link) {
96        return `<a href="${item.link}" data-name="${item.link}" data-action="click->header#relaySearchResultClick">
97            ${imageEl}
98          </a>`;
99      } else {
100        return imageEl;
101      }
102    } else {
103      return `<img class="img-responsive" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="">`;
104    }
105  }
106
107  linkedName(item) {
108    if (item.name) {
109      const nameEl = `<big>${instantsearch.highlight({ attribute: 'name', hit: item })}</big>`;
110      if (item.link) {
111        return `<a href="${item.link}" data-name="${item.link}" data-action="click->header#relaySearchResultClick">
112            ${nameEl}
113          </a>`;
114      } else {
115        return nameEl;
116      }
117    } else {
118      return ``;
119    }
120  }
121
122  linkedPartNumber(item) {
123    if (item.uid) {
124      return item.uid;
125    } else {
126      return ``;
127    }
128  }
129
130  additionalLink(item) {
131    if (item.uid) {
132      const additional = document.getElementById('instant-search-results');
133      const aLink = additional.getAttribute('data-additional-link');
134      const aName = additional.getAttribute('data-additional-name');
135      const aClass = additional.getAttribute('data-additional-class');
136      if (!!aLink && !!aName) {
137        return `<a class="${aClass}" href="${aLink}${item.uid}">
138            ${aName}
139          </a>`;
140      } else {
141        return ``;
142      }
143    } else {
144      return ``;
145    }
146
147  }
148
149}
150
151export default Results;