I am still learning Webflow and I’m trying to figure out if it can do what I need it to do.
What I want is to have a button on a page and when a user clicks that button, a random item from a Collections appears.
First, I want to avoid page loads at all costs here. This must be instant, so no directing to a different Collections page. This also means that custom Javascript is the only option. I am quite familiar with Javascript, so as long as I can use ‘Embed Code’, this should work fine.
My only hurdle at this point is that I do not know how to get the data from the Collections. My first thought was to google around and I found the CMS API documentation. The issue here is that the CMS API requires keys and appears to be meant for backend to backend integrations rather than user interactions. ( I don’t want to give users keys to insert or delete data from my collections )
An alternative approach could be to have the Collection data be inserted into a tag as a JSON and reference that within the javascript code. I’m completely fine with users being able to view the entire list, I just don’t want them being able to change my data if they rip the api_key from the javascript in their browser.
The rules ask that I provide a link to the closest thing that accomplishes this. This is the closest thing that I could think of: http://www.fantasynamegenerators.com/english_names.php Please note how clicking “Neutral Names” does not refresh the page but is still able to display random results? That is what I am trying to accomplish.
Is this possible? Does anyone know how to do this?
EDIT: Before anyone mentions that I am not following the rules for the ‘Custom Code Help’ forums, let me please mention a few things. #1 I do not want to post a link to the read-only or the published site as it has sensitive content and is currently password protected. Plus it won’t be very helpful as nothing related to this issue is in place. #2 I am not trying to link to a 3rd party plugin, I’m trying to write custom code myself. #3 There is nothing to screenshot aside from a button and an empty div. #5 There are no errors, at least not yet.
When you add custom code inside of a custom code component, you can select a part of your script and replace it with a dynamic variable from a collection by clicking on the +Add Field purple link at the top right of the custom code box.
This link is only visible when:
the component is inside of a Collection List on any page
@vincent That’s pretty cool. However, like I said in my example above, I don’t want the data from a single item in a collection, but instead I need the entire collection. Each item in the collection has multiple data fields, for simplicity let’s just say it has the textfield Name, a separate number ID, and a color field Color. With this example, how would I be able to make this:
var data = {
[ID1]: {
'name': [NAME1],
'color': [COLOR1]
},
[ID2]: {
'name': [NAME2],
'color': [COLOR2]
},
........
}
Is something like this possible? This is necessary because I will be selecting an item from the collection at random.
Also, I hate to complicate things further but I realized that the collection that I plan to use has a foreign key to another collection. Could I also get the data from that related collection as well?
Sadly, I used a hack around for this. Since my data rarely changes, and there is a lot of it with links between tables, I decided to turn it into a JSON file (Using Google Sheets plus a few custom export tools) in order to make a js file. I use this js file on the site in order to load the data I want.
Sadly, whenever the collections changes I have to change the data along with it
You may consider an approach where a hosted Node instance (example) is configured to fetch and store the data you need, via the Webflow API, then use AJAX on your Webflow site to pull the stored data from the Node endpoint. That way you can control the refresh rate on the app (60 seconds max) and your API key stays secure. You could restrict access to the app to your site pretty easily.
There is a somewhat inconvenient, but functioning solution: create an unfiltered Collection List and insert custom code into the items analog vincents reply. only on difference: the custom code aggregates the items to a collection
<script>
var data = data || {}; //creates new data-collection if not exists
data["[SLUG]"] = {
name: "[NAME]",
color: "[COLOR]"
};
</script>
the fields [XXX] are the respective “+Add Field” areas from the editor, the quotation marks around them are important (if you need a number write Number("[XXX]")).
After rendering the collection list there is an object “data” with all items as in Steven_Rogers request.
BTW: For multiple selections you need a nested Collection List and have to collect the values for the parent items in it.
Another option would be to fetch all data by Integromat, convert it to JSON and save it somewhere where frontend JS can access it - S3, FTP or some one-item Webflow CMS collection.
