Hello all,
We are a Facebook group that promotes tribute bands in the Houston area, and we’re expanding to the web with a directory - https://www.houstontributebands.com. We are working with a programmer who has been a big help, but he’s stumped as to how to accomplish what we’d like to do.
On the searchable band directory page, https://www.houstontributebands.com/search , you can view a listing of the bands, along with some basic information. The idea was to have icons in each listing that linked to the band’s social media. The problem is that not all bands have a social media account that matches all of the icons available, so we’re ending up with gaps between the icons. We’d like to arrange the icons to line up with the title (see image) and remove the white space that remains after the empty icons are hidden.
And the code:
import wixData from ‘wix-data’;
import { session } from ‘wix-storage’;
$w.onReady( function () {
//TODO: write your page related code here…
});
export async function button2_click(event) {
let val = $w(“#input2”).value;
await session.setItem(“prevSearch”, val)
var filter = wixData.filter()
.contains(“tributeBandName”, val)
.eq(“status”, “Active”)
wixData.query(“artists”)
.contains(“bandName”, val)
.find()
.then((ret) => {
let items = ret.items
let itemNum = 1;
items.forEach((f) => {
let id = f._id
filter = filter.or(wixData.filter().hasSome(“artistsCovered”, id))
itemNum++
})
$w(“#dataset1”).setFilter(filter). catch ((err) => {
console.log(err)
})
}). catch ((err) => {
console.log(err)
})
}
export function dataset1_afterSave() {
//Add your code for this event here:
}
function collapser(data, icon) {
if (data === undefined || data === null || data === ‘’) {
icon.collapse()
} else {
icon.expand()
}
}
export function repeater1_itemReady($item, itemData, index) {
let id = itemData._id
let bit = itemData.bandsInTown
let fb = itemData.facebookPage
let yt = itemData.youTubeChannel
let twit = itemData.twitter
let insta = itemData.instagram
let website = itemData.website
let email = itemData.email
//console.log(‘bit:’,bit,’ fb:‘,fb,’ yt:‘,’ twit:‘,twit,’ insta:‘,insta,’ website:‘,website,’ email:',email)
collapser(bit, $item("#image8"))
collapser(fb, $item("#image3"))
collapser(yt, $item("#image7"))
collapser(twit, $item("#image6"))
collapser(insta, $item("#image5"))
collapser(website, $item("#image4"))
collapser(email, $item("#image9"))
//gets artists and builds string if multiple artists
wixData.queryReferenced(“tributebands”, id, “artistsCovered”)
.then((results) => {
if (results.items.length > 0) {
let items = results.items
let artString = ‘’;
items.forEach((f) => {
if (artString === ‘’) {
artString = f.bandName
//console.log(“f.bandName:”+ f.bandName)
} else {
artString = artString + “, " + f.bandName;
//console.log(“artString:” +artString)
}
$item(”#text21").text = artString
})
} else {
$item(“#text21”).text = “No Artists Found”
}
})
. catch ((err) => {
let errorMsg = err;
});
}
//resets filter
export function button3_click(event) {
$w(“#input2”).value = ‘’
session.clear()
$w(“#dataset1”).setFilter(wixData.filter())
}
export function dataset1_ready() {
let prevSearch = session.getItem(“prevSearch”)
if (prevSearch === null || prevSearch === undefined){} else {
$w(“#input2”).value = prevSearch
let val = prevSearch
var filter = wixData.filter().contains(“tributeBandName”, val)
wixData.query(“artists”)
.contains(“bandName”, val)
.find()
.then((ret) => {
let items = ret.items
let itemNum = 1;
items.forEach((f) => {
let id = f._id
filter = filter.or(wixData.filter().hasSome(“artistsCovered”, id))
itemNum++
})
$w(“#dataset1”).setFilter(filter). catch ((err) => {
console.log(err)
})
}). catch ((err) => {
console.log(err)
})
}
}
We also have the same problem on the record (band) detail page https://www.houstontributebands.com/directory/Already-Gone :
// For full API documentation, including code examples, visit Velo API Reference - Wix.com
$w.onReady( function () {
//TODO: write your page related code here…
});
function collapser(data, icon){
if (data === undefined || data === null || data === ‘’){
icon.collapse()
} else {
icon.expand()
}
}
export function text23_viewportEnter(event) {
//Add your code for this event here:
}
export function dynamicDataset_ready() {
let itemData = $w(“#dynamicDataset”).getCurrentItem()
let bit = itemData.bandsInTown
let fb = itemData.facebookPage
let yt = itemData.youTubeChannel
let twit = itemData.twitter
let insta = itemData.instagram
let website = itemData.website
let email = itemData.email
collapser(bit, $w("#image8"))
collapser(fb, $w("#image3"))
collapser(yt, $w("#image7"))
collapser(twit, $w("#image6"))
collapser(insta, $w("#image5"))
collapser(website, $w("#image4"))
collapser(email, $w("#image9"))
}
I come from a programming background, ASP/PHP/JS, etc., and I feel like this should be easily accomplished with CSS, but I have no idea about how Corvid code works. Is what we’re trying to accomplish even possible?
Many, many thanks for reading this far! Any and all help is appreciated!
Danielle