Wix store search bar! using wix code

Check this link - https://salman2301.wixsite.com/wix-store-search

Four elements used to create a simple search bar 1. Input element Input element property Id is "inSearch"

Uncheck "Enabled by default" on the properties panel 2. Text to display the status Text property Id is "textResult" Check "collapsed on load" on the properties panel

3. Vector Image to close the searched results Vector Image property Id is "vectorImageClose"

Check "collapsed on load" on the properties panel

4. Repeater to display the searched result Repeater property id is "repeater1" Container property id is "container1" Check "collapsed on load" on the properties panel Inside repeater there are four element (ie. For each container there are four element) i). Image to display the product Image property name is "imagePro" ii). Text to display the property name Text property name is "textProName" iii). Text to display the description Text property name is "textProDetail" Check "collapsed on load" on the properties panel (The max character to show is 40, so if the character is more than 40 the the text will be cut and add "..." dots at the end)

iv). Vector Image to shows arrow

Vector Image property name is "vectorImg" Paste the code in the "site" page Attach the input element on the header And rest of the elements just below the input element not on the header Right click the element and select to "show on All pages" to display it on all page

import wixData from 'wix-data';
import wixLocation from 'wix-location';
//Salman2301
//Limit controls the maximum number of searched result to show
let limit = 10;
//maximum character the can be displayed for the search details
let maxChara = 40;
$w.onReady(function () {
    wixData.query('Stores/Products')
        .ascending('name')
        .limit(limit)
        .find()
        .then(res => {
            $w('#inSearch').enable();
            $w('#repeater1').data = res.items;
            $w('#inSearch').onFocus(() => {
                $w('#repeater1').expand();
                $w('#vectorImageClose').expand()
            });
            $w('#inSearch').onMouseIn(() => {
                $w('#repeater1').expand();
                $w('#vectorImageClose').expand();
            });
            $w('#vectorImageClose').onClick(() => {
                $w('#repeater1').collapse();
                $w('#vectorImageClose').collapse();
            });
            $w('#repeater1').onMouseOut(() => {
 //  $w('#repeater1').collapse();
            });
        });

    $w('#repeater1').onItemReady(($item, itemData, i) => {
 // console.log(itemData)
        $item('#textProName').text = itemData.name;
        $item('#imagePro').src = itemData.mediaItems[0].src;
 let des = itemData.description;
 if (des.length > maxChara) {
            des = des.slice(0, maxChara) + '...';
        }
        $item('#textProDetail').text = des;
        $item('#container1').onClick(() => {
            wixLocation.to(itemData.productPageUrl);
            $w('#repeater1').collapse();
        });
        $item('#container1').onMouseIn(() => {
            $item('#textProDetail').expand();
            $item('#vectorImg').show()
        });
        $item('#container1').onMouseOut(() => {
            $item('#textProDetail').collapse();
            $item('#vectorImg').hide();
        });
    });

 let query;

    $w('#inSearch').onKeyPress(async () => {
        setTimeout(async () => {
 let search = $w('#inSearch').value;
            console.log(search)
 if (search) {
                $w('#textResult').text = 'Searching for ' + search + ' ...';
                $w('#textResult').expand();
 let res = await wixData.query('Stores/Products').ascending('name').contains('name', search).or(wixData.query('Stores/Products').contains('description', search)).limit(limit).find()
                $w('#textResult').text = res.items.length + ' result has found!';
                console.log(res.items.length)
                $w('#repeater1').data = res.items;
                $w('#vectorImageClose').expand();
 if (res.length === 0) {
                    $w('#textResult').text = 'No result found for ' + search;
                    $w('#textResult').expand();
                    $w('#vectorImageClose').collapse();
                }
            } else {
                console.log('No value')
            }
        }, 200)

    });
});

Property names

Check this link - https://salman2301.wixsite.com/wix-store-search

There are bugs we can fix it if you updated the code let me know in the comment section.