Question Hey Editor X Community! I could really use some help in building a dynamic leaderboard system. Anyone have experience with this in Editor X?
Product
I’m developing this feature for my Fitness YouTube channel, where I want to engage my audience more effectively.
What Are You Trying to Achieve Users scans a QR code to land on a dynamic page. They see a card displaying their current points with an “Add Point(s)” button. Clicking the button updates points in the CMS/database, along with the date, time, and reason for earning the point(s). System calculates monthly, yearly, and lifetime points automatically.
What I’ve Already Tried
I’ve tried to implement this using Editor X’s Automations, but I’ve found that it doesn’t support adding new entries to the CMS.
Additional Information
The idea is to link each member’s points so that they can see their individual progress and rankings. And they will be shown on the public leaderboard.
I’m open to alternative solutions as well!
Any guidance would be incredibly appreciated.
Thanks in advance!
So, to be more precise, each URL linked from a QR code will contain a unique ID, something like URL?736gefi6egfr37r9. This ID will correspond to a specific “points card” in a central database.
How it Works: When a user scans the QR code, it directs them to a dynamic page that pulls up the specific points card linked to that unique ID. From there, the user has the option to add those points to their personal score on the leaderboard.
Goal: This allows me to distribute multiple QR codes with different point values across videos, and users can individually add them to their own totals in a central leaderboard.
Hope this clears things up! Looking forward to any insights or suggestions!
1:So you got programs that help you generate a QR Code that you is linked to the Dynamic page ULR you can find in the CMS. I have the same thing done on my website. But i choose to display the URL as well on my pages for people to use so they can share the QR if needed (you need it to be displayed dynamic/automated as well per dynamic page?
2:you got the card auto generated or you got a picture and you want to insert/overlay these values so you you can automate this as well?
3: you need to write code for this to add it to the CMS.
4: why monthly (just wondering)? Again to do so you need to write code, but it would be easier to just calculate it straight away because you need to store the value’s somewhere.
Thank you! I’ve just, after 18 hours, or so got it all up and running with my best friend chatGPT… I think it works quite well now… I will ask ChatGPT for a nice explainer how I’ve done it and why… Will post this underneath…
Hey everyone! Super excited to share that I’ve successfully implemented the dynamic leaderboard system I was seeking help with. Big shoutout to this amazing community for the support and guidance!
Here’s a rundown of how it all came together:
Tools Used:
Editor X: Used for the website and dynamic page design.
Velo by Wix: For backend functions and database operations.
Wix Data: To manage databases for point cards, user statistics, and point transactions.
Workflow:
Dynamic QR Codes: Each QR code contains a unique ID that links to a specific “points card” in our central database.
Dynamic Pages: When a user scans the QR code, they are directed to a dynamic page that fetches the specific points card associated with that unique ID.
Member Identification: The system identifies the current user through their Wix member ID.
Fetching Data: Utilized Velo to pull the relevant data from the Wix Data collections for display.
Point Addition: An “Add Points” button allows the user to add the points from the card to their total points.
Database Update: On click, Velo updates both the user’s total points in their profile and logs the transaction in a separate ‘pointTransactions’ database.
Button Disablement: The “Add Points” button is disabled for cards that the user has already claimed to prevent double-counting.
Leaderboard: The leaderboard is dynamically updated based on the total points of each user.
Challenges and Pivots:
Initial Idea: Initially had one large leaderboard with individual point entries for each user.
Performance Optimization: Realized this would not scale well, so pivoted to keeping a running total of points for each user for better performance and faster queries.
Advanced Routing:
Router Pages: One of the key features we utilized in Editor X was Router Pages. This allowed us to create a single template page that could generate multiple dynamic pages based on the data from our central “Points Cards” database.
Router Data: By using Wix’s Velo APIs, we were able to fetch router data to identify the unique ID of each point card. This data then informed which specific card details to display on the dynamic page.
URL Structure: The URL of each dynamic page contained a unique ID (e.g., URL/redeemcard/74bc4792…), which corresponded to a specific “points card” in our database. This unique ID was embedded in each QR code.
Flexibility: Router Pages gave us the flexibility to handle different scenarios and display conditions. For example, we could show an error message if the points card was not found, or disable the “Add Points” button for cards that the user had already claimed.
Did you thought about paging (when you request data)…
So Wix by default does not allow more then 50 items being pulled from a dataset. This means (i had this problem). if you have more then 50 members for example. the queury wll always go from top to bottom. it will stop after 50 items. And if your member is #51 it will never find it.
So you need to work with .pagesize and adjust your code to “flip” the page to get your new 50 items (51 to 61). etc here is some documentation:
pagesize
you can change it to 1000 but thats bad practice.
Oh, that’s a great tip. Will definitely check that out! But I’m thinking about not posting the leaderboard as a page but as a live stream on youtube to get more engagement So then I properly show only the first 50… or I have to create some timed animation…
You take page literally, so if you got let’s say you got more then 50 items or people in your database you wil never get #51 so if you want to update this database where you have more then 50 items you need to work with pagesize or change the limit. But again explaining in my other comment that is bad practice.
So if you have a database more then 50 items you need paging.
So if you look at your code and you see
(DatasetName).query this will call only the first 50 items. No Mather what you do