Can we use Reflow product data to search product in Search bar of website

I am building an e-commerece website while using bootstrap studio and reflow integration. I have added some products in reflow and all necessary data for these products. Now I have made a search bar in the website for users of the website to search different products. Is it possible that when I enter a key word related to a product, its data emerge as a result of the search as all the related data I have already entered in reflow while adding product?

Right now there isn’t an easy way to build a search box with your products. You can use the Reflow APIs to do this, but it can get complicated.

We have a Product Search component planned, which will do what you need. It will be several weeks before we start working on it though.

1 Like

Thanks Martin, For your kind reply. Can you advise some easier way available now, please.

Try this:

 code removed - see update below

then get your search form to run the search function


I see you pretty actively helping here other ppl, you should get special badge on the forum, lmao

1 Like

Hi Richard, Forgive my ignorance:

I have added the search bar and opted to edit the code. these are the scenes are my computer:

and the bootstrap looks this way:

Please forgive my ignorance I am new to the thing…

@tescaenterprises I will take a look tomorrow for you and see if I can work out an easy solution.

@dickykreedz It beats doing ‘proper’ work, and I like a challege on my downtime :slight_smile:

1 Like

@richards Many Thanks in anticipation

Ok… here goes :slight_smile:

Step One:

Create a page called search.html

In your design you need a div with the ID of searchResults

Then create a new javascript file (call it search.js)

Paste the following into search.js

async function search(ss) {
  let resultcount = 0;
  let searchstring = ss;
  let products = await fetch(
  ).then((r) => r.json()); (product) {
    const cts = JSON.stringify(product).toLowerCase(); //cts convert to string

    let result = cts.includes(searchstring.toLowerCase());
     if (result) {
      let div = document.createElement("div");
      let h = document.createElement("h1");
      div.append(, h);

      var sr = document.createElement("div");

      var searchOutput =
        '<div class="card h-100 mb-3">' +
        '<div class="card-body">' +
        '<h4 class="card-title">' + +
        "</h4>" +
        '<p class="card-text">' +
        product.excerpt +
        "</p>" +
        "</div>" +
        '<div class="card-footer text-end">' +
        '<a href="product.html?id=' + +
        '">View Item</a>' +
        "</div>" +

      sr.innerHTML = searchOutput;


  if (resultcount < 1) {
      .append("No results for: " + searchstring);
  } else {
      .append("You have " + resultcount + " result(s) for " + searchstring);

const params = new Proxy(new URLSearchParams(, {
  get: (searchParams, prop) => searchParams.get(prop),
let searchphrase =;
if (searchphrase.length < 2) {
    .append("Please enter a longer search phrase");
} else {

Now set the visability of search.js to be only on search.html

To do this rightclick on the file and select visability

Step Two:

This will be on all pages you want a search form

You need to create a form like this:

 <form method="get" action="search.html"><input class="form-control" type="search" name="search" placeholder="Search"></form>


And that should be it


Nice script @richards, it test it and IT WORKS!
Btw, how to make the keyword not case sensitive?

Thank you.

I have just updated the script to make it not case sensitive by adding .toLowerCase() to line 9 and 12

const cts = JSON.stringify(product).toLowerCase();

let result = cts.includes(searchstring.toLowerCase());

It is working perfectly well. A lot of thanks

1 Like

Here is what i did with your script :")

The content in this page is managed with Reflow (for e-commerce content) and Strapi for general site, including the blog.

Thanks @richards


Very good… @raniaamina can you please share the search related code, where pictures of search result items also show up?

I just modify this part and translate some parts into bahasa and make some part suitable with my entire site code.

            var pname =
            if (pname.length < 25 ) {
                var name = pname
            } else {
                var name = pname.slice(0, 25) + ' ...'
            var price = product.priceFormatted.replace('.00','').replace(',','.')

            var sr = document.createElement("div");
            sr.setAttribute('class', 'reflow-product-list ref-cards col-12 col-sm-6 col-md-4 col-lg-3"')

            var searchOutput = `     
            <div class="ref-products d-flex">
                <a class="ref-product" href="/product.html?data=`+ + `">
                    <img class="ref-image"
                        loading="lazy" height="155px"/>
                    <div class="ref-product-data ms-0 ps-0">
                    <p class="ref-price mb-2"><b>`+ price + `</b></p>
                        <div class="ref-product-info">
                            <h5 class="ref-name mb-0"><strong>`+ name + `</strong></h5>
                            <p class="ref-excerpt">`+ product.excerpt.slice(0, 50) + ' ...' + `</p>

            sr.innerHTML = searchOutput;

add class=row to the container (the div that has id searchResults)


Hi Richards, there is problem with this code, it only includes items in

the search result, whereas old items added earlier which have now shifted to page=2 onward gets omitted from the search.

Looking at the Reflow API documentation it only shows the latest 20 products.

You should be able to change it by using this:

with the perPage=xx on the end, but this doesn’t seem to make any difference

Maybe @martin can help on this one.

I think I have worked it out, try ?perpage=99

the documentation says perPage, but looking at the toolkit.js it is all lowercase so perpage

But if the total products are more than 99?

That, I can’t help you with