Vorbly Code | WIX REPEATER WITH SEARCH BAR

Vorbly <Code>

CODING MADE EASY WITH VORBLY

WIX REPEATER WITH SEARCH BAR

Starting an eCommerce business? This tutorial will show you how to create a search bar for your online store using Wix Repeaters. Help your customers find specific products and improve conversion rates. We will provide you with the webpage elements and sample codes required to implement this feature.

THE DEMO

1/2

THE ELEMENTS

The Page

Repeater: #repeater1​​

User Input: #searchbar

Image Element: #searchicon​

The Database

Create a database: Products (dataset1)

Recommended fields:

  • Product Name Field: product

  • Product Description Field: description

  • Price Field: price

  • Product Type Field: producttype (for filtering)

Then link fields to your repeater.

THE CODE

Page Code

import wixData from 'wix-data';

 

let debounceTimer;

export function searchbar_keyPress(event, $w) {

    if (debounceTimer) {

        clearTimeout(debounceTimer);

        debounceTimer = undefined;

    }

    debounceTimer = setTimeout(() => {

        filter($w("#searchbar").value);

    }, 200);

 

}

 

let lastFilterSearch;

 

function filter(search) {

    if (lastFilterSearch !== search) {

        $w("#dataset1").setFilter(wixData.filter().contains('producttype', search));

        lastFilterSearch = search;

    }

 

}

COMMENTS

I'm a paragraph. Click here to add your own text and edit me. It's easy.

No comments. Be the first to leave a comment.

I can't get this to work, do you have a more detailed description

alex

Jul 17, 2019

0

Hi Alex, Please let us know what issues you are facing with the code and would you be able to paste your current code here? Thank you.

Andrew (Vorbly)

Jul 21, 2019

1

hey how to make search result display on new page for Example
A client searches the produt and after hitting enter it should display result on new page
and also if can help me in adding review section under products website then it will be great
thanks for code.

Magamey

Oct 19, 2019

0

Hi Magamey,

There are several ways of approaching this question, depending on what product variables users are searching for (e.g. product name) and how your database is structured.

If users are searching for product categories (e.g. handbags) and if your database is structured with product categories, then you can direct users to a dynamic page (e.g. yourwebsite.com/handbags). The dynamic page can display a repeater with all products in that category (e.g. handbags).

If users are searching for a product name, you can add the repeater on a separate strip on the same page. Expand the strip with the repeater when the user clicks the "Search" button and collapse the strip with the search bar. Alternatively, if you want to display the results on a separate page, you can use wix-storage > session to store the search term and filter it in the results page. https://www.wix.com/corvid/reference/wix-storage.html#session

I hope this was helpful. Thanks.

Andrew (Vorbly)

Nov 02, 2019

0

WEB DESIGN & DEVELOPMENT SOLUTIONS

GET PROFESSIONAL HELP