This is a demo store for testing purposes — no orders shall be fulfilled. Dismiss
Skip to content
🔍
document.addEventListener( 'DOMContentLoaded', function () {
const searchComponents = document.querySelectorAll( '.vendit-live-search' );
searchComponents.forEach( function ( component ) {
const input = component.querySelector( '.vendit-search-input' );
const resultsBox = component.querySelector( '.vendit-search-results' );
const clearButton = component.querySelector( '.vendit-search-clear' );
let timer = null; let controller = null;
function closeResults() { resultsBox.classList.remove( 'is-open' ); }
function openResults() { resultsBox.classList.add( 'is-open' ); }
function escapeHTML( value ) {
const div = document.createElement( 'div' );
div.textContent = value || '';
return div.innerHTML; }
function searchProducts( query ) {
if ( controller ) { controller.abort(); }
controller = new AbortController();
resultsBox.innerHTML = '
';
openResults();
const url = 'https://vendit.store/wp-admin/admin-ajax.php' + '?action=vendit_product_search&q=' + encodeURIComponent( query );
fetch( url, { signal: controller.signal } ) .then( response => response.json() ) .then( response => {
if ( ! response.success || ! response.data.length ) {
resultsBox.innerHTML = '
';
return; }
let html = '';
response.data.forEach( product => {
html += '' +
'
' +
'
' +
'
' + '
' +
'
' +
''; } );
html += '' + 'See all results for “' + escapeHTML( query ) + '” →' + '';
resultsBox.innerHTML = html; } ) .catch( error => {
if ( error.name !== 'AbortError' ) {
resultsBox.innerHTML = '
'; } } ); }
input.addEventListener( 'input', function () {
const query = input.value.trim();
clearButton.style.display = query.length ? 'block' : 'none';
clearTimeout( timer );
if ( query.length < 2 ) { closeResults(); resultsBox.innerHTML = ''; return; } timer = setTimeout( function () { searchProducts( query ); }, 275 ); } ); clearButton.addEventListener( 'click', function () { input.value = ''; clearButton.style.display = 'none'; resultsBox.innerHTML = ''; closeResults(); input.focus(); } ); document.addEventListener( 'click', function ( event ) { if ( ! component.contains( event.target ) ) { closeResults(); } } ); input.addEventListener( 'focus', function () { if ( input.value.trim() .length >= 2 && resultsBox.innerHTML ) { openResults(); } } );
} ); } );
Leave a Reply