Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by hippiebrad

  1. 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?
  2. Or, if someone knows a way to do this without a ton of code, I'm all ears.
  3. 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>
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.