I’ve built a page that’s mostly working as I need, but the sort that’s defined in the dataset is not respected on the page. I suspect this is due to the loading of data that’s being done by my amateur coding.
The intention is to present a large list of organisations in the repeater.
The list is able to be filtered by clicking a selection tag, these filter the list based on the tags in the content collection. If a selection tag is unclicked, the page should revert to the full list; if a different selection tag is clicked (whether or not an existing tag is clicked) the previous selection is cleared and only items that match the new selection are displayed.
This is working nicely.
On each repeater item there is a “More Info” button. Clicking this loads a Lightbox that presents content from the collection, filtered to only show the info relative to the repeater item.
This is also working nicely.
The unfiltered and filtered repeater lists are not respecting the sort that’s defined in the settings of the dataset. I suspect I’ve caused a lot of the problem here by using a combination of code and in-page controls. I’ll be trying to put together a new version of the page where everything is done in code, but would still appreciate appraisal of what’s there now and a pointer or two.
The code is a bit of a mess as I’ve pulled pages and sections together to integrate it all into the same page, so it’s likely I could make several efficiencies to make it more sensible to read, and faster to process. I’d really appreciate one of you geniuses casting your eyes across and suggesting where I can do better…
If there’s anything extra I could provide please just say.
This is the page
https://kylahuff3.wixsite.com/khag/healthservices
This is the code from the page at the moment:
import wixWindow from 'wix-window';
import wixData from 'wix-data';
const collectionName = 'Organisations';
const fieldToFilterByInCollection = 'selectionTags';
$w.onReady(function () {
setRepeatedItemsInRepeater();
loadDataToRepeater();
$w('#tags').onChange((event) => {
const selectedTags = $w('#tags').value;
loadDataToRepeater(selectedTags);
})
});
function loadDataToRepeater(selectedCategories = []) {
let dataQuery = wixData.query(collectionName);
if (selectedCategories.length > 0) {
dataQuery = dataQuery.hasSome(fieldToFilterByInCollection, selectedCategories);
}
dataQuery
.find()
.then(results => {
const itemsReadyForRepeater = results.items;
$w('#listRepeater').data = itemsReadyForRepeater;
const isRepeaterEmpty = itemsReadyForRepeater.length === 0
})
}
function setRepeatedItemsInRepeater() {
$w('#listRepeater').onItemReady(($item, itemData) => {
$item('#Title').text = itemData.title;
$item('#Content').html = itemData.content;
$item('#Contact').html = itemData.contact;
})
}
$w.onReady( () => {
// This allows the selection tags to clear the filter on clicking the next tag
$w('#tags').onChange(() => {
let VALUE = $w('#tags').value
let LENGTH = VALUE.length
for (var i = 0; i < LENGTH-1; i++) {
if(LENGTH>1) {
VALUE.shift()
}
else{}
}
setTimeout(()=>{
$w('#tags').value = []
$w('#tags').value = VALUE
},1)
})
// This populates the text field with a truncated version of the content description from the main collection.
$w("#dynamicDataset").onReady( () => {
$w("#listRepeater").onItemReady( ($item, itemdata, index) => {
let longContent = itemdata.content;
let shortContent = longContent.substr(0,85);
$item("#shortText").html = shortContent + "...";
});
});
// This triggers the lightbox from the "More Information" button.
// Filtering to present the selected Organisation's info is done in the lightbox.
$w("#dynamicDataset").onReady(() => {
$w("#listRepeater").onItemReady(($item, itemData, index) => {
$item('#MoreButton').onClick(() => {
let item = $item('#dynamicDataset').getCurrentItem();
wixWindow.openLightbox('OrgInfo', item)
});
});
});
});