- Add an input within the page let’s call it “Search Input”.
- Add an ID Attribute “search-box-id” or any other ID Attribute you want.
- Add the Typesense Plugin’s Single Search Connector “Ts-SS-Connector” to the page and let’s name it “Ts-SS-Products”, and make its width 100px and height 100px with a background of any visible color
This has nothing to do with the connector’s code, it is just useful for following steps
- Go to “Ts-SS-Products” and add the following:
4.a- Value type: text
4.b-Collection Name: Your Products Collection’s Name.
Can be found in your Typesense Cluster, Select the Collection from the dropdown, go to Collection Settings, and then from there get the exact name of your Collection
4.c-Search Only API Key, You can either use your Master Admin API Key “NOT RECOMMENDED”, Or Create a Search Only API Key for that specific Collection.
To create a New Search Only API Key, Go to API Keys, And Use the following:
{
"description": "SearchProductsKey",
"actions": [
"documents:search"
],
"collections": [
"Products"
]
}
And Make sure to Save that Search Only API Key somewhere secure, or within your bubble’s DB.
4.d-Add your Node (Host), to find it go to Overview, Then select the part until …typesense.net
4.e- Nodes (Port): 443
4.f- Nodes (Protocol): https
4.g- Search Input Value, Can be left empty if you will use the “Search Input”, or ( “*” ), or even a Dynamic Value, But for now let’s leave it empty.
4.h- Query By: Let’s Use Product’s Name for Naow and later you can use other fields to query by (i.e. Product Name, Category, Seller Name )
4.i- infix: Let’s make it as “always” for now, but when you use multiple Query By in the future, you must add their infix status too (i.e. Product Name, Category, Seller Name === always, off, off )
4.j- sortBy: Let’s assume that you have a rating for each Product which was identified within your collection’s schema, so it will be : Product Rating:desc )
4.k- Items Per page: I recommend not using more than 30, and the max is 250 per page, and later I will show you how to add pagination.
4.L- Prefix: yes
4.m- Filter By can be left empty for Now, but later you can create your own custom filters and use dynamic values in this input.
- n- Now for the Search Widget Code use the following:
search.addWidgets([
customSearchBox({
container: “#search-box-id”,
}),
pagination({
container: ‘#pagination’,
cssClasses: {
root: 'MyCustomPagination',
list: [
'MyCustomPaginationList',
'MyCustomPaginationList--subclass',
],
},
}),
]
);
-
Now add a Group Element and Call it “Ts-SS-Pagination” for example, and give it an ID Attribute of “pagination”, remember it is just a Group Element that acts as a Div, don’t use Repeating Group"
-
Now Preview this Page in debug Mode, and Click on “Inspect” Button on the right bottom corner.
- Now Click On the “Ts-SS-Connector”, then the Documents schema will appear below as shown in the following screenshot:
- Now Select the JSON Text of that Document from {" to…"} , remember to select the whole Document text nothing more and nothing less.
- Open a Note document and Just Save that Document’s text to it, we will need it in a second:
- Now Go to your Plugin’s Tab, then Go to your “API Connector” Plugin
I assume you has it installed, if not you will need to install it
- Now Let’s Add another API that will contain all your Typesense Documents’ structure and let’s call it “Marketplace”, and let’s also add an API Call ( GET/DATA/JSON) and let’s call it “Ts-Products”, and Click on Manually enter API response…
…
12.a- Now remember that Document schema we saved on the Note’s document?.. copy that and Past it in the “Manually enter API response” Popup
If the Save Button is Not activated, that means that the returned value is incorrect, in this case, we recommend using the Most Complete document from the returned documents that were inspected earlier using the bubble’s inspector, it is common to have incomplete documents in your Collection, but for the sake of creating the Document structure Now, we need a complete Document that all it’s fields are NOT empty within the Typesense’s collection.
- Now search for the Complete Document and Grab its schema as shown before, and add it to the “Manually enter API response” Popup and it will look like this:
- Now Just press Save, Make sure all Data Types are as you need them to be “Specially Dates”, and hit Save, Now You have a virtual Data Type in your app that can identify the Typesense Documents returned from your collection.
- Now Copy the Name of the newly added data type “Ts-Products” and go back to the Same page you were working on, Click on the “Ts-SS-Connector”, and change the “Value Type” from text to “Ts-Products”
- Now Insert a Repeating Group within your page, and Make its Type of content as “Ts-Products” , and the Data Sources to be " Ts-SS-Connector’s value list "
And that’s it, now you can display every document’s field from Your Typesense’s Collection
Hope that was helpful, let me know if you need any further assistance, I will do my best to assist as soon as possible.