hippiebrad Posted June 15, 2023 Share Posted June 15, 2023 Hey, so I'm way in over my head! What I'm trying to do is have events filtered by categories on the Event Page. Shouldn't be that hard, but apparently it is. And I would rather not pay the $70 for the filter plugin if I don't have to. After trying lots of other things and scouring forums, I ended up asking Chat GPT to write some HTML for me to solve my problem. It's exactly what I'm looking for, but it doesn't seem like the 'categories' Chat GPT made are the same as the 'Categories' within Squarespace. I'm no coding expert, but I'm hoping someone can help me edit this script to link Squarespaces 'Categories (or Tags)' with this script. My goal is for this code is to remain more or less untouched unless I need to add an additional category, and when I create a new event, all I want to have to do is apply the Squarespace category to it and it will sort itself. Here is the weblink: https://www.brevacreative.com/classes-events# And here's the AI code: <!DOCTYPE html> <html> <head> <title>Events Page</title> <style> /* CSS styles for the events page */ /* Add your own styles here */ /* Styling for the category links */ .category-link { margin-right: 20px; text-decoration: none; color: #000; font-weight: bold; } /* Styling for the spacer bar */ .spacer-bar { margin-right: 10px; width: 2px; height: 20px; background-color: #000; display: inline-block; vertical-align: middle; } /* Styling for the events */ .event { margin-top: 10px; } </style> </head> <body> <h1>Events Page</h1> <div id="header"> <a href="#" class="category-link" data-category="all">All Categories</a> <span class="spacer-bar"></span> <a href="#" class="category-link" data-category="stained-glass">Stained Glass</a> <span class="spacer-bar"></span> <a href="#" class="category-link" data-category="woodshop">Woodshop</a> <span class="spacer-bar"></span> <a href="#" class="category-link" data-category="ceramics">Ceramics</a> </div> <div id="eventsContainer"> <!-- Events will be dynamically added here based on the selected category --> </div> <script> // JavaScript code for filtering events by category // Sample event data (replace with your own event data) const eventsData = [ { name: "Event 1", category: "stained-glass" }, { name: "Event 2", category: "woodshop" }, { name: "Event 3", category: "ceramics" }, { name: "Event 4", category: "stained-glass" }, { name: "Event 5", category: "woodshop" }, { name: "Event 6", category: "ceramics" } ]; const categoryLinks = document.getElementsByClassName("category-link"); const eventsContainer = document.getElementById("eventsContainer"); // Function to filter events based on the selected category function filterEvents(event) { event.preventDefault(); const selectedCategory = this.getAttribute("data-category"); // Remove active class from all category links Array.from(categoryLinks).forEach(link => { link.classList.remove("active"); }); // Add active class to the selected category link this.classList.add("active"); // Clear the events container eventsContainer.innerHTML = ""; // Filter events based on the selected category const filteredEvents = selectedCategory === "all" ? eventsData : eventsData.filter(event => event.category === selectedCategory); // Display the filtered events filteredEvents.forEach(event => { const eventElement = document.createElement("div"); eventElement.classList.add("event"); eventElement.textContent = event.name; document.body.appendChild(eventElement); }); } // Add event listeners to the category links Array.from(categoryLinks).forEach(link => { link.addEventListener("click", filterEvents); }); </script> </body> </html> Link to comment
hippiebrad Posted June 20, 2023 Author Share Posted June 20, 2023 Or, if someone knows a way to do this without a ton of code, I'm all ears. Link to comment
paul2009 Posted June 20, 2023 Share Posted June 20, 2023 On 6/15/2023 at 5:48 PM, hippiebrad said: What I'm trying to do is have events filtered by categories on the Event Page. Perhaps I've misunderstood what you want to do. If you need "simple" filtering - where you only filter by a single category like "Woodshop" - you should be able to add links that will filter the "classes-events" Events page by that category. For example, using the link "/classes-events?category=Woodshop" will filter the events by this category. However, if you need "complex" filtering, where you filter by multiple categories and/or tags, you will need a third party plugin, like the excellent Universal Filter that you mentioned. Did this help? Please give feedback by clicking an icon below ⬇️ About me: I'm Paul. A SQSP User for 18 yrs, I joined Circle when it launched in 2016 and have been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL, providing expertise and extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work. Book paid help with a Squarespace Domain Link to comment
hippiebrad Posted June 21, 2023 Author Share Posted June 21, 2023 So yeah, it is simple filtering that I need, but instead of a separate button/link like you mentioned above, I would love to filter the events on the events page instead of a new page if possible. So, when someone clicks the 'Woodshop' category, it stays on the same page and just filters the results on-page. Similar to Youtube, when you click a category on the home page, the url stays youtube.com but filters videos based on the category you select. Is that possible in squarespace without a plugin? potenzanana 1 Link to comment
paul2009 Posted June 21, 2023 Share Posted June 21, 2023 9 minutes ago, hippiebrad said: So, when someone clicks the 'Woodshop' category, it stays on the same page and just filters the results on-page. It will reload the page when you filter the results using any of the built in features. For anything else you'll need a third party plugin. About me: I'm Paul. A SQSP User for 18 yrs, I joined Circle when it launched in 2016 and have been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL, providing expertise and extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work. Book paid help with a Squarespace Domain Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment