Favorite button functionality in Xano

David Richardson

There is a third party add on Jetboost that works with Webflow and Memberstack that allows a user to mark an item as "favorite" and also display all the items that have been marked as "favorite."  It only works with the Webflow CMS.  I'd like to do the same with Xano still working with the Webflow front end.

Prakash explored the favorite button in WMX • Part 2 but stopped short of the functionality of toggling it on and off.  The model was to use the Webflow form [button] to trigger a form submission calling the API to set it as favorite. Typically there is an icon that changes display properties via JavaScript.[heart selected.png]and [heart not selected.png]Wondering if anyone has explored that functionality in Xano.

Michael Udinski

In terms of the Xano side of things, I would have a Favorite database table. This table would have a table reference to the item being favorited (item_id) and the user favoriting it (user_id).

Each time a user favorites something, you would create a new record in the favorites table with the user and the item. 

Michael Udinski

To elaborate, the favorite button in the app would trigger a POST API call creating the record. 

David Richardson

Thanks Michael.  I'd gotten that far.  But the toggling thing got me wondering whether to keep posting with a "1" value and then edit a response with a "0" value on the SAME record.  Or [POST]ing a 1 or 0 or TRUE or FALSE and the value would be that last table record value.

Seems to my NOOBIE mind that once created, edit the same record and not keep creating new records.  IDK if there is a computational overhead with either strategy that favors one over the other.  

There would be item A and item B and the user and then the value TRUE or FALSE for the favorited item.  So two tables with similar schemas for A and B.  The table schema includes a user table reference and the item table reference and the favorite value Boolean.  There is also the record ID and the timestamp of course.

When queried by a user, the list of favorites would be queried as add-ons  to the member, and then pull the records referenced with the associated item(s) to display.  

So whether queried from "favorites by user" or "favorites by item" (a tally is how popular the item is) the tables readily offer that information.

The challenging part of this (I think) is the Webflow / Xano interaction.  Since Webflow has only the single form submission webhook, the favorite "button" (or SUBMIT button) has to include (as hidden values) the item ID, the member ID, the form name (to direct the JSON data packet to the appropriate stack function) and the current favorite value (Boolean) with a default value of false.

The JavaScript on the page has to toggle the visibility of the appropriate favorite icon (true or false) when the button is clicked.  Back in Xano, when the data packet arrives, find the right function, and in the function stack, check whether a record exists and create it (if it doesn't exist) or change the value (if a record does exist).

I think that is the right way to approach this.

On a related note, on an "office hours" visit a few months ago I asked about addressing the single form submission webhook Webflow offers and how to work around that limitation. Prakash notes in WMX Part 2  using a conditional to discern between submitting a favorite or a comment.  Seems like most websites would have way more than two form submissions. which could be really challenging.

On one of your videos you noted that it's possible to create a custom function in the function stack to enable using logic f(x) in multiple locations.  You also mentioned in that video that Xano can convert an API into a function.  That seems to be a pretty powerful capability that enables creating and debugging an API.  Then, just convert it into a function to address the Webflow webhook limitation.

Writing an API to receive all Webflow form submissions is straight forward.  Sequential conditionals sort out which function to trigger and then put the converted API -> custom function where it belongs.  Seems a lot less cumbersome and easier to manage than filling the function stack with all the logic for every form in the one form submission API.

David Richardson

 I have an update on this project that I think would be useful to others.  The WMX video series Prakash made offered a way to "like" an item - book, ball, car or yacht - the challenge is really how to identify WHICH item is liked if the "like" button is included in the "sample-card".  They would all be the same...or not.  How to tell which item was clicked without a crazy number of event handlers.   I didn't see immediately how to identify each item and pass the ID to the "click" event handler with JavaScript. The video link below explains how to do that pretty easily.

There is a framework identified in the video demonstrating a way to put multiple items on a page (e.g. in Webflow in a grid) and with JavaScript create a unique JSON string that could be passed to the Xano API with a fetch and promise when an item is clicked.


The fetch POST method is necessary to post the change of state ("like" / "unliked") and that method is pretty straightforward.
Hope this helps someone