Issue with "Random CMS Collection Page Button"
Following up from this comment I posted on the YouTube vid (https://www.youtube.com/watch?v=qyTrZuTgxLI)
"Thanks for the tutorial! I'm fairly certain I've set everything up correctly... but the event listener doesn't seem to be listening? Any tips for troubleshooting this? Listening to your walkthrough of the code, everything makes sense, but it seems like my button is failing to build the URL. It just shows up as a link to the current page."
Some additional info: this is my first time delving into CMS, so not sure if there's something I could have messed up there... But it seems simple enough that someone who's more educated than me in the world of web design shouldn't have trouble seeing my mistake ๐
Read Only Link:
https://preview.webflow.com/preview/east-coast-van-builds?utm_medium=preview_link&utm_source=designer&utm_content=east-coast-van-builds&preview=b7a278ef0706897f06b47b81435cf81b&pageId=63b3011dabde4c5419bb1131&workflow=preview
Live Page:
https://www.eastcoastvanbuilds.com/models/model-test
Thanks again!
Web Bae
YouTube
Random CMS Collection Page Button in Webflow
Quick tutorial on how to write some code that: When a button is clicked, send the user to a random CMS Collection Template Page. Great little guide to get familiar with custom code in Webflow including the window.location property, querySelector, and Math.random()
// RESOURCES
๐ถ Code Boost:
// FREE STUFF
๐ช My ULTIMATE Webflow Resource Librar...
5 Replies
Hi @dylan.bush so right off the bat I'm noticing that you're not actually targeting the Random Button.
You said
const randomButton = document.querySelector("#random-button");
You're selecting a button with the ID of "random-button" but your button doesn't have that ID. However, it DOES have the class name of "random-button" so for your code to work, you'll need to change it to
const randomButton = document.querySelector(".random-button");
Now you're selecting the Class Name.
Also, in your collection list, you need to give your embed the classname of "slug" so that the javascript code can collect all the slugs. (Check out the screenshot)
Bingo! Can't believe I missed those things ๐คฆโโ๏ธ . Thanks so much!
Awesome! I'm glad to help๐
@Kudz thanks for helping out here ๐
All good! @Web Bae ๐