I need to create a dynamic page that shows the client’s projects similar to a blog format (they do not want to use the blog tool due to the social media icons and other issues). It is supposed to have some buttons so visitors would be able to filter the projects according to their tags. This is how it’s supposed to look and work:
(this website was created just to test the feature, so the layout does not correspond to the actual layout of the client website)
https://marcosviniciusmo.wixsite.com/meusite1/blog
Fisrt, I created the database from the excell sheet sent by the client. The projects have basically a long description, some tags that receive a value from a list and other that are unique (but a project could have more than one of them).
Then, I created a dynamic page that has a repeater connected to the dataset.
And then I created a dropdown menu which I connected to the dataset via code with help from this forum.
The issue is: despite being able to connect both elements to the dataset, I cannot make it work. Whenever I select an option from the dropdown menu, it should act as a filter upon the gallery (repeater) and then show only projects with that tag, but nothing happens. Also, when I click visualize, I get these errors on the developer console:
The dropdown would be used to the tags selected from a list, and we would probably need a radio/checkbox button in order to apply the unique tags as filters to the gallery as well.
Here is the current code of the page and also a link to it:
https://marcosviniciusmo.wixsite.com/meusite1/ourexperiencetest1
import wixData from 'wix-data';
$w.onReady(function () {
// Run a query that returns all the items in the collection
wixData.query("OurExpData")
// Get the max possible results from the query
.limit(1000)
.find()
.then(results => {
// Call the function that creates a list of unique titles
const uniqueClientType = getUniqueClientType(results.items);
// Call the function that builds the options list from the unique titles
$w("#dropClient").options = buildOptions(uniqueClientType);
});
// Builds an array from the "Title" field only from each item in
// the collection and then removes the duplicates
function getUniqueClientType(items) {
// Use the map method to create the titlesOnly object containing all the titles from the query results
const clientTypeOnly = items.map(item => item.clientType);
// Return an array with a list of unique titles
return [...new Set(clientTypeOnly)];
}
// Creates an array of objects in the form {label: "label", value: "value"} from the array of titles
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
// Use the map method to build the options list in the format {label:uniqueTitle, value:uniqueTitle}
return { label: curr, value: curr };
});
}
function filter(clientType) {
$w("#OurExpData").setFilter(wixData.filter()
.contains("firstName", $w("#dropClient").value));
}
});
export function dropClient_change(event) {
$w("#OurExpData").setFilter(wixData.filter().contains("clientType", $w('#dropClient').value));
}
I am very lost in the middle of all this code and almost giving up on making it work by myself, so if anyone would be interested in a freelance to create all these filter buttons please let me know.