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

2 Likes

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(
    "https://api.reflowhq.com/v1/stores/YOURSTOREID/products/"
  ).then((r) => r.json());

  products.data.forEach(function (product) {
    const cts = JSON.stringify(product).toLowerCase(); //cts convert to string

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

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

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

      sr.innerHTML = searchOutput;

      document.getElementById("searchResults").append(sr);
    }
  });

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

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

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

To do this rightclick on the file and select visability
image


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>

image

And that should be it

3 Likes

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());
2 Likes

It is working perfectly well. A lot of thanks

1 Like

Perfect!
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

3 Likes

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 = product.name
            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=`+ product.id + `">
                    <img class="ref-image"
                        src="`+product.media[0].src.md+`"
                        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>
                        </div>
                    </div>
                </a>
            </div>
            `

            sr.innerHTML = searchOutput;
.....

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

2 Likes

Hi Richards, there is problem with this code, it only includes items in
https://api.reflowhq.com/v1/stores/1736447397/products?page=1

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:

https://api.reflowhq.com/v1/stores/1736447397/products/?perPage=50

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