I would REALLY appreciate any help with this: I have added a few new lines of code to the “Programs” page on this site . But it seems to be working on some elements but not others and I can’t work out why…
Here is the code I have added:
//Show cancelled overlay box
if (itemObj.coedSpringStatus === "CANCELLED") {
$w("#cSpringCancelledBox").show();
} else {
$w("#cSpringCancelledBox").hide();
}
//Hide season container
if (itemObj.coedSpringStatus === "NA") {
$w("#cSpringCancelledBox").collapse();
$w("#coedSpringBox").collapse();
} else {
$w("#cSpringCancelledBox").expand();
$w("#coedSpringBox").expand();
}
I have added this to each program option (coed spring, summer, fall and mens spring, summer, fall) - which you can see in the full page code below. But it only seems to be working for coed spring and summer. The database fields are set as follows: Coed Spring = CONFIRMED, Coed Summer = NA, Coed Fall = NA, Mens Spring = CONFIRMED, Mens Summer = NA, Mens Fall = NA. However, this is not triggering the code as it should for each box/cancelled element.
Here is the full page code:
import wixWindow from 'wix-window';
$w.onReady(function () {
/*$w("#programsDataset").onReady( () => {
let itemId = wixLocation.query.id;
$w("#programsRepeater").forItems( [itemId], ($item, itemData, index) => {
$item("#programContainer").scrollTo();
$item("#detailsContainer").expand();
})
})*/
$w("#programsRepeater").onItemReady(($item, itemData, index) => {
$item("#detailsButton").onClick((event) => {
if ($item("#detailsContainer").collapsed) {
$item("#detailsContainer").expand();
$w("#detailsButton").label = "Show Less";
} else {
$item("#detailsContainer").collapse();
$w("#detailsButton").label = "Details";
}
})
if (itemData.status === "NA") {
$item("#detailsButton").hide();
} else {
$item("#detailsButton").show();
}
if (itemData.status === "PENDING") {
$item("#detailsButton").hide();
} else {
$item("#detailsButton").show();
}
let itemObj = $w("#programsDataset").getCurrentItem();
console.log(itemObj);
if (itemObj.status === "CONFIRMED") {
// Set date and time options
const dateOptions = { month: "long" };
const dayOptions = { weekday: "long" };
const getOrdinalNum = (number) => {
let selector;
if (number <= 0) {
selector = 4;
} else if ((number > 3 && number < 21) || number % 10 > 3) {
selector = 0;
} else {
selector = number % 10;
}
return number + ['th', 'st', 'nd', 'rd', ''][selector];
};
//Show or hide coed & mens double season offer box
let doubleDiscountPrice = itemObj.discountPriceDouble;
if (doubleDiscountPrice === "NA") {
$w("#offerBoxCoed").collapse();
$w("#offerBoxMens").collapse();
} else {
$w("#offerBoxCoed").expand();
$w("#offerBoxMens").expand();
}
// Set Coed Spring fields
$w("#coedSpringPrice").text = itemObj.singleSeasonPrice;
$w("#coedSpringFull").text = itemObj.discountPrice;
//Show or hide discount banner
if ($w("#coedSpringFull").text === "NA") {
$w("#coedSpringDiscount").hide();
$w("#discountBanner").collapse();
} else {
$w("#coedSpringDiscount").show();
$w("#discountBanner").expand();
}
const cspStartDate = itemObj.coedSpringStart;
const cspStartDay = cspStartDate.toLocaleDateString([], { day: "numeric" });
const cspEndDate = itemObj.coedSpringEnd;
const cspEndDay = cspEndDate.toLocaleDateString([], { day: "numeric" });
const csp2StartDate = itemObj.coedSpringStart2;
const csp2EndDate = itemObj.coedSpringEnd2;
$w("#coedSpringDates").text = cspStartDate.toLocaleDateString("en-US", dateOptions) + " " + getOrdinalNum(cspStartDay) + " - " +
cspEndDate.toLocaleDateString("en-US", dateOptions) + " " + getOrdinalNum(cspEndDay);
$w("#coedSpringDay").text = cspStartDate.toLocaleDateString("en-US", dayOptions) + "s";
const cspSession1Start = cspStartDate;
$w("#coedSpringSession1").text = cspStartDate.toLocaleTimeString([], { hour12: true, hour: "numeric", minute: "2-digit" }).toLocaleUpperCase() + " - " + cspEndDate.toLocaleTimeString([], { hour12: true, hour: 'numeric', minute: '2-digit' }).toUpperCase();
$w("#coedSpringSession2").text = csp2StartDate.toLocaleTimeString([], { hour12: true, hour: "numeric", minute: "2-digit" }).toLocaleUpperCase() + " - " + csp2EndDate.toLocaleTimeString([], { hour12: true, hour: 'numeric', minute: '2-digit' }).toUpperCase();
//Show cancelled overlay box
if (itemObj.coedSpringStatus === "CANCELLED") {
$w("#cSpringCancelledBox").show();
} else {
$w("#cSpringCancelledBox").hide();
}
//Hide season container
if (itemObj.coedSpringStatus === "NA") {
$w("#cSpringCancelledBox").collapse();
$w("#coedSpringBox").collapse();
} else {
$w("#cSpringCancelledBox").expand();
$w("#coedSpringBox").expand();
}
// Set Coed Summer fields
$w("#coedSummerPrice").text = itemObj.singleSeasonPrice;
$w("#coedSummerFull").text = itemObj.discountPrice;
if ($w("#coedSummerFull").text === "NA") {
$w("#coedSummerDiscount").hide();
} else {
$w("#coedSummerDiscount").show();
}
const csuStartDate = itemObj.coedSummerStart;
const csuStartDay = csuStartDate.toLocaleDateString([], { day: "numeric" });
const csuEndDate = itemObj.coedSummerEnd;
const csuEndDay = csuEndDate.toLocaleDateString([], { day: "numeric" });
const csu2StartDate = itemObj.coedSummerStart2;
const csu2EndDate = itemObj.coedSummerEnd2;
const coedSummerStatus =itemObj.coedSummerStatus;
$w("#coedSummerDates").text = csuStartDate.toLocaleDateString("en-US", dateOptions) + " " + getOrdinalNum(csuStartDay) + " - " +
csuEndDate.toLocaleDateString("en-US", dateOptions) + " " + getOrdinalNum(csuEndDay);
$w("#coedSummerDay").text = csuStartDate.toLocaleDateString("en-US", dayOptions) + "s";
const csuSession1Start = csuStartDate;
$w("#coedSummerSession1").text = csuStartDate.toLocaleTimeString([], { hour12: true, hour: "numeric", minute: "2-digit" }).toLocaleUpperCase() + " - " + csuEndDate.toLocaleTimeString([], { hour12: true, hour: 'numeric', minute: '2-digit' }).toUpperCase();
$w("#coedSummerSession2").text = csu2StartDate.toLocaleTimeString([], { hour12: true, hour: "numeric", minute: "2-digit" }).toLocaleUpperCase() + " - " + csu2EndDate.toLocaleTimeString([], { hour12: true, hour: 'numeric', minute: '2-digit' }).toUpperCase();
//Show cancelled overlay box
if (itemObj.coedSummerStatus === "CANCELLED") {
$w("#cSummerCancelledBox").show();
} else {
$w("#cSummerCancelledBox").hide();
}
//Hide season container
if (itemObj.coedSummerStatus === "NA") {
$w("#cSummerCancelledBox").collapse();
$w("#coedSummerBox").collapse();
} else {
$w("#cSummerCancelledBox").expand();
$w("#coedSummerBox").expand();
}
// Set Coed Fall fields
$w("#coedFallPrice").text = itemObj.fallPrice;
$w("#coedFallFull").text = itemObj.discountPrice;
if ($w("#coedFallFull").text === "NA") {
$w("#coedFallDiscount").hide();
$w("#discountBanner").collapse();
} else {
$w("#coedFallDiscount").show();
$w("#discountBanner").expand();
}
const cfaStartDate = itemObj.coedFallStart;
const cfaStartDay = cfaStartDate.toLocaleDateString([], { day: "numeric" });
const cfaEndDate = itemObj.coedFallEnd;
const cfaEndDay = cfaEndDate.toLocaleDateString([], { day: "numeric" });
const cfa2StartDate = itemObj.coedFallStart2;
const cfa2EndDate = itemObj.coedFallEnd2;
const coedFallStatus = itemObj.coedFallStatus;
$w("#coedFallDates").text = cfaStartDate.toLocaleDateString("en-US", dateOptions) + " " + getOrdinalNum(cfaStartDay) + " - " +
cfaEndDate.toLocaleDateString("en-US", dateOptions) + " " + getOrdinalNum(cfaEndDay);
$w("#coedFallDay").text = cfaStartDate.toLocaleDateString("en-US", dayOptions) + "s";
const cfaSession1Start = cfaStartDate;
$w("#coedFallSession1").text = cfaStartDate.toLocaleTimeString([], { hour12: true, hour: "numeric", minute: "2-digit" }).toLocaleUpperCase() + " - " + cfaEndDate.toLocaleTimeString([], { hour12: true, hour: 'numeric', minute: '2-digit' }).toUpperCase();
$w("#coedFallSession2").text = cfa2StartDate.toLocaleTimeString([], { hour12: true, hour: "numeric", minute: "2-digit" }).toLocaleUpperCase() + " - " + cfa2EndDate.toLocaleTimeString([], { hour12: true, hour: 'numeric', minute: '2-digit' }).toUpperCase();
//Show cancelled overlay box
if (coedFallStatus === "CANCELLED") {
$w("#cFallCancelledBox").show();
} else {
$w("#cFallCancelledBox").hide();
}
//Hide season container
if (coedFallStatus === "NA") {
$w("#cFallCancelledBox").collapse();
$w("#coedFallBox").collapse();
} else {
$w("#cFallCancelledBox").expand();
$w("#coedFallBox").expand();
}
// Set coed offer text
if ($w("#coedSpringFull").text === "NA" || $w("#coedSummerFull").text === "NA") {
$w("#coedOfferText").text = "Sign up for both spring and summer leagues at the same time for " + itemObj.doubleSeasonPrice;
} else {
$w("#coedOfferText").text = "Sign up for both spring and summer leagues at the same time for " + itemObj.doubleSeasonPrice + " (Regular " + itemObj.discountPriceDouble + ")";
}
// Set Mens Spring fields
$w("#mensSpringPrice").text = itemObj.singleSeasonPrice;
$w("#mensSpringFull").text = itemObj.discountPrice;
if ($w("#mensSpringFull").text === "NA") {
$w("#mensSpringDiscount").hide();
} else {
$w("#mensSpringDiscount").show();
}
const mspStartDate = itemObj.mensSpringStart;
const mspStartDay = mspStartDate.toLocaleDateString([], { day: "numeric" });
const mspEndDate = itemObj.mensSpringEnd;
const mspEndDay = mspEndDate.toLocaleDateString([], { day: "numeric" });
const msp2StartDate = itemObj.mensSpringStart2;
const msp2EndDate = itemObj.mensSpringEnd2;
$w("#mensSpringDates").text = mspStartDate.toLocaleDateString("en-US", dateOptions) + " " + getOrdinalNum(mspStartDay) + " - " +
mspEndDate.toLocaleDateString("en-US", dateOptions) + " " + getOrdinalNum(mspEndDay);
$w("#mensSpringDay").text = mspStartDate.toLocaleDateString("en-US", dayOptions) + "s";
const mspSession1Start = mspStartDate;
$w("#mensSpringSession1").text = mspStartDate.toLocaleTimeString([], { hour12: true, hour: "numeric", minute: "2-digit" }).toLocaleUpperCase() + " - " + mspEndDate.toLocaleTimeString([], { hour12: true, hour: 'numeric', minute: '2-digit' }).toUpperCase();
$w("#mensSpringSession2").text = msp2StartDate.toLocaleTimeString([], { hour12: true, hour: "numeric", minute: "2-digit" }).toLocaleUpperCase() + " - " + msp2EndDate.toLocaleTimeString([], { hour12: true, hour: 'numeric', minute: '2-digit' }).toUpperCase();
//Show cancelled overlay box
if (itemObj.mensSpringStatus === "CANCELLED") {
$w("#mSpringCancelledBox").show();
} else {
$w("#mSpringCancelledBox").hide();
}
//Hide season container
if (itemObj.mensSpringStatus === "NA") {
$w("#mSpringCancelledBox").collapse();
$w("#mensSpringBox").collapse();
} else {
$w("#mSpringCancelledBox").expand();
$w("#mensSpringBox").expand();
}
// Set Mens Summer fields
$w("#mensSummerPrice").text = itemObj.singleSeasonPrice;
$w("#mensSummerFull").text = itemObj.discountPrice;
if ($w("#mensSummerFull").text === "NA") {
$w("#mensSummerDiscount").hide();
} else {
$w("#mensSummerDiscount").show();
}
const msuStartDate = itemObj.mensSummerStart;
const msuStartDay = msuStartDate.toLocaleDateString([], { day: "numeric" });
const msuEndDate = itemObj.mensSummerEnd;
const msuEndDay = msuEndDate.toLocaleDateString([], { day: "numeric" });
const msu2StartDate = itemObj.mensSummerStart2;
const msu2EndDate = itemObj.mensSummerEnd2;
$w("#mensSummerDates").text = msuStartDate.toLocaleDateString("en-US", dateOptions) + " " + getOrdinalNum(msuStartDay) + " - " +
msuEndDate.toLocaleDateString("en-US", dateOptions) + " " + getOrdinalNum(msuEndDay);
$w("#mensSummerDay").text = msuStartDate.toLocaleDateString("en-US", dayOptions) + "s";
const msuSession1Start = msuStartDate;
$w("#mensSummerSession1").text = msuStartDate.toLocaleTimeString([], { hour12: true, hour: "numeric", minute: "2-digit" }).toLocaleUpperCase() + " - " + msuEndDate.toLocaleTimeString([], { hour12: true, hour: 'numeric', minute: '2-digit' }).toUpperCase();
$w("#mensSummerSession2").text = msu2StartDate.toLocaleTimeString([], { hour12: true, hour: "numeric", minute: "2-digit" }).toLocaleUpperCase() + " - " + msu2EndDate.toLocaleTimeString([], { hour12: true, hour: 'numeric', minute: '2-digit' }).toUpperCase();
if (itemObj.mensSummerStatus === "CANCELLED") {
$w("#mSummerCancelledBox").show();
} else {
$w("#mSummerCancelledBox").hide();
}
//Hide season container
if (itemObj.mensSummerStatus === "NA") {
$w("#mSummerCancelledBox").collapse();
$w("#mensSummerBox").collapse();
} else {
$w("#mSummerCancelledBox").expand();
$w("#mensSummerBox").expand();
}
// Set Mens Fall fields
$w("#mensFallPrice").text = itemObj.singleSeasonPrice;
$w("#mensFallFull").text = itemObj.discountPrice;
if ($w("#mensFallFull").text === "NA") {
$w("#mensFallDiscount").hide();
$w("#discountBanner").collapse();
} else {
$w("#mensFallDiscount").show();
$w("#discountBanner").expand();
}
const mfaStartDate = itemObj.mensFallStart;
const mfaStartDay = mfaStartDate.toLocaleDateString([], { day: "numeric" });
const mfaEndDate = itemObj.mensFallEnd;
const mfaEndDay = mfaEndDate.toLocaleDateString([], { day: "numeric" });
const mfa2StartDate = itemObj.mensFallStart2;
const mfa2EndDate = itemObj.mensFallEnd2;
$w("#mensFallDates").text = mfaStartDate.toLocaleDateString("en-US", dateOptions) + " " + getOrdinalNum(mfaStartDay) + " - " +
mfaEndDate.toLocaleDateString("en-US", dateOptions) + " " + getOrdinalNum(mfaEndDay);
$w("#mensFallDay").text = mfaStartDate.toLocaleDateString("en-US", dayOptions) + "s";
const mfaSession1Start = mfaStartDate;
$w("#mensFallSession1").text = mfaStartDate.toLocaleTimeString([], { hour12: true, hour: "numeric", minute: "2-digit" }).toLocaleUpperCase() + " - " + mfaEndDate.toLocaleTimeString([], { hour12: true, hour: 'numeric', minute: '2-digit' }).toUpperCase();
$w("#mensFallSession2").text = mfa2StartDate.toLocaleTimeString([], { hour12: true, hour: "numeric", minute: "2-digit" }).toLocaleUpperCase() + " - " + mfa2EndDate.toLocaleTimeString([], { hour12: true, hour: 'numeric', minute: '2-digit' }).toUpperCase();
//Show cancelled overlay box
if (itemObj.mensFallStatus === "CANCELLED") {
$w("#mFallCancelledBox").show();
} else {
$w("#mFallCancelledBox").hide();
}
//Hide season container
if (itemObj.mensFallStatus === "NA") {
$w("#mFallCancelledBox").collapse();
$w("#mensFallBox").collapse();
} else {
$w("#mFallCancelledBox").expand();
$w("#mensFallBox").expand();
}
// Set mens offer text
if ($w("#mensSpringFull").text === "NA" || $w("#mensSummerFull").text === "NA") {
$w("#mensOfferText").text = "Sign up for both spring and summer leagues at the same time for " + itemObj.doubleSeasonPrice;
} else {
$w("#mensOfferText").text = "Sign up for both spring and summer leagues at the same time for " + itemObj.doubleSeasonPrice + " (Regular " + itemObj.discountPriceDouble + ")";
}
const itemLocation = itemObj.location;
const locationLink = itemObj.locationLink;
$w("#locationText").text = "All matches are held at " + itemLocation + ".";
$w("#locationText").onMouseIn((event) => {
let locationText = $w("#locationText").text;
$w("#locationText").html = "<p style='color:#ED5829; font-size:14px'>" + locationText + "</p>";
});
$w("#locationText").onMouseOut((event) => {
let locationText = $w("#locationText").text;
$w("#locationText").html = "<p style='color:#757575; font-size:14px'>" + locationText + "</p>";
});
$w("#locationText").onClick((event) => {
wixWindow.openLightbox("Pretty River Academy (Sidebar)");
});
}
});
});