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.
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
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
Ok… here goes
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
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
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
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
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)
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