Initial commit: is_searchbar out of the box. v3.0.1

is_searchbar/_theme_dev/src/index.php

@@ -0,0 +1,11 @@
+<?php
+
+header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
+header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . ' GMT');
+
+header('Cache-Control: no-store, no-cache, must-revalidate');
+header('Cache-Control: post-check=0, pre-check=0', false);
+header('Pragma: no-cache');
+
+header('Location: ../');
+exit;

is_searchbar/_theme_dev/src/js/index.php

@@ -0,0 +1,11 @@
+<?php
+
+header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
+header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . ' GMT');
+
+header('Cache-Control: no-store, no-cache, must-revalidate');
+header('Cache-Control: post-check=0, pre-check=0', false);
+header('Pragma: no-cache');
+
+header('Location: ../');
+exit;

is_searchbar/_theme_dev/src/js/theme/components/SearchInput.js

@@ -0,0 +1,128 @@
+function SearchInput({
+  searchUrl,
+  input,
+  onType,
+  onResult,
+  beforeSend,
+  onRemoveResult,
+  perPage,
+  appendTo,
+  min,
+  timeout,
+}) {
+  this.searchUrl = searchUrl;
+  this.input = input;
+  this.appendTo = document.querySelector(appendTo);
+  this.onType = onType || (() => {});
+  this.onResult = onResult || (() => {});
+  this.onRemoveResult = onRemoveResult || (() => {});
+  this.beforeSend = beforeSend || (() => {});
+  this.min = min || 3;
+  this.perPage = perPage || 10;
+  this.timeout = timeout || 300;
+  this.resultBox = null;
+
+  const cache = {};
+
+  let typeTimeout = null;
+  const resultBoxClass = 'js-search-result';
+
+  const getInputString = () => this.input.value;
+
+  const handleResultIfStringMatchMinLength = (str) => str.length >= this.min;
+
+  const resetResultIfExits = () => {
+    if (this.resultBox) {
+      this.onRemoveResult();
+      this.resultBox.remove();
+    }
+  };
+
+  const displayResult = (data, str) => {
+    resetResultIfExits();
+
+    const element = document.createElement('div');
+    element.classList.add(resultBoxClass);
+    element.innerHTML = data.content;
+
+    this.appendTo.appendChild(element);
+    this.resultBox = document.querySelector(`.${resultBoxClass}`);
+
+    this.onResult({
+      input: this.input,
+      appendTo: this.appendTo,
+      s: str,
+      data,
+    });
+  };
+
+  const handleAjax = (str) => {
+    this.beforeSend({
+      input: this.input,
+      appendTo: this.appendTo,
+      s: str,
+    });
+
+    if (typeof cache[str] !== 'undefined') {
+      displayResult(cache[str], str);
+
+      return;
+    }
+
+    let data = {
+      s: str,
+      perPage: this.perPage,
+      ajax: 1,
+    };
+
+    data = Object.keys(data).map((key) => `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`).join('&');
+
+    fetch(this.searchUrl, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+      },
+      body: data,
+    })
+    /// ISSUE WITH RESPONSE.JSON() AND HTML CONTENT INSIDE JSON
+      .then((response) => response.text())
+      .then((responseData) => {
+        responseData = JSON.parse(responseData);
+        cache[str] = responseData;
+
+        displayResult(responseData, str);
+      })
+      .catch((err) => console.error(err)); // eslint-disable-line
+  };
+
+  this.removeResults = () => {
+    resetResultIfExits();
+  };
+
+  this.input.addEventListener('keyup', () => {
+    if (typeTimeout) {
+      clearTimeout(typeTimeout);
+    }
+
+    const str = getInputString();
+
+    this.onType({
+      input: this.input,
+      appendTo: this.appendTo,
+      s: str,
+    });
+
+    if (!handleResultIfStringMatchMinLength(str)) {
+      resetResultIfExits();
+      return;
+    }
+
+    typeTimeout = setTimeout(() => {
+      handleAjax(str);
+    }, this.timeout);
+  });
+
+  return this;
+}
+
+export default SearchInput;

is_searchbar/_theme_dev/src/js/theme/components/index.php

@@ -0,0 +1,11 @@
+<?php
+
+header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
+header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . ' GMT');
+
+header('Cache-Control: no-store, no-cache, must-revalidate');
+header('Cache-Control: post-check=0, pre-check=0', false);
+header('Pragma: no-cache');
+
+header('Location: ../');
+exit;

is_searchbar/_theme_dev/src/js/theme/index.js

@@ -0,0 +1,50 @@
+import SearchInput from './components/SearchInput';
+
+const init = () => {
+  const searchInput = document.querySelector('.js-search-input');
+
+  if (!searchInput) {
+    return;
+  }
+
+  const getAjaxUrlFromElement = (el) => (el && el.length ? el.getAttribute('data-search-controller-url') : null);
+  const ajaxUrl = getAjaxUrlFromElement(document.querySelector('[data-search-controller-url]'));
+  const body = document.querySelector('body');
+  const inputForm = searchInput.closest('.js-search-form');
+  const backdrop = document.createElement('div');
+  backdrop.classList.add('search-backdrop');
+  body.appendChild(backdrop);
+
+  if (!ajaxUrl) {
+    return;
+  }
+
+  const Search = new SearchInput({
+    searchUrl: ajaxUrl,
+    input: searchInput,
+    appendTo: '.js-search-form',
+    perPage: 6,
+    onResult: () => {
+      body.classList.add('search-result-open');
+      prestashop.pageLazyLoad.update();
+    },
+    onRemoveResult: () => {
+      body.classList.remove('search-result-open');
+    },
+    beforeSend: () => {
+      // console.log('BEFORE SEND ' + e);
+    },
+    onType: () => {
+      // console.log('ON TYPE ' + e);
+    },
+  });
+
+  body.addEventListener('click', ({ target }) => {
+    if (body.classList.contains('search-result-open') && target !== inputForm && !target.closest('.js-search-form')) {
+      body.classList.remove('search-result-open');
+      Search.removeResults();
+    }
+  });
+};
+
+document.addEventListener('DOMContentLoaded', init);

is_searchbar/_theme_dev/src/js/theme/index.php

@@ -0,0 +1,11 @@
+<?php
+
+header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
+header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . ' GMT');
+
+header('Cache-Control: no-store, no-cache, must-revalidate');
+header('Cache-Control: post-check=0, pre-check=0', false);
+header('Pragma: no-cache');
+
+header('Location: ../');
+exit;