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>
potenzanana reacted to a post in a topic:
Category Filter for Events not working
