Problem 1:
The ‘event’ argument of nested checkbox is different in preview mode than the live site.
I have a checkbox group inside a repeater that essentially separates collections (A, B, C) into sub-collections (1, 2, 3) and then filters the dataset based on combined selection across the checkbox selection ( A1, B2, B3, C1, C2). It works properly in preview mode but not after publishing. After some testing the issue seems to come from this part of the code.
export function collectionCheckBox_change(event) {
let $repeater = $w.at(event.context)
let parent = $repeater('#collectionParent').text
let child = $repeater('#collectionCheckBox').value
collectionFilterSelection[parent] = child
reloadProductsBasedOnFilter()
}
Since wix doesn’t allow alert() and console.log() doesn’t work for published sites, I created two text fields and used the following to see the value of the event variable.
export function collectionCheckBox_change(event) {
let $repeater = $w.at(event.context)
let parent = $repeater('#collectionParent').text
let child = $repeater('#collectionCheckBox').value
// set text to variables to test on published page itself rather than preview
$w('#TESTING').text = event.context.itemId
$w('#TESTING1').text = event.context.id
collectionFilterSelection[parent] = child
reloadProductsBasedOnFilter()
}
In preview mode it would give me the corresponding number of the repetition in the repeater for ‘context.itemId’ and ‘comp-kgrqwa7s’ for the ‘context.id’. However on the live site it doesn’t return any value in the and just sets the texts blank. Since it doesn’t get the context of the event, the ‘parent’ and ‘child’ declarations to just retrieve the default values of those elements instead of the actual selected values which causes the filtering to return nothing. Again the code works in preview mode but not on the live site.
Problem 2:
Product images no longer altering correctly
Again this works in preview, but not on the live site. I have not been able to figure out the root of the issue though.
//fading is a global variable to indicate that the image is fading as a fading image returns true for .isVisible. If you use .show() while an image is still fading, the .show() has no effect.
export function productContainer_mouseIn(event) {
let product = $w('#productsRepeater').data.find(obj => obj._id === event.context.itemId)
let $repeater = $w.at(event.context)
if (product.mediaItems.length > 1){
alterImage($repeater, product)
}
}
// Alters image by showing and hiding productImageEven, when it is shown, the next image for productImageOdd is loading, when it is hiding, it is loading
async function alterImage ($repeater, product){
let first = true
let i = 1
let top = $repeater('#productImageTop')
let bottom = $repeater('#productImageBottom')
fading = true
top.hide('fade', defaultFadeOptions) // hide top otherwise the first fade will have a delay
// loops to change image
productGalleryImageOnHover = setInterval(async function (){
i += 1
if(i >= product.mediaItems.length){
i = 0
}
if(first === true){
top.src = product.mediaItems[i]['src']
top.tooltip = product.description
first = false
fading = false
}
else if(top.isVisible === true){
// hide top, load top
fading = true
await top.hide('fade', defaultFadeOptions)
fading = false
top.src = product.mediaItems[i]['src']
top.tooltip = product.description
}
else{
// show top, load bottom
fading = true
await top.show('fade', defaultFadeOptions)
fading = false
bottom.src = product.mediaItems[i]['src']
bottom.tooltip = product.description
}
},2500)
}
export function productContainer_mouseOut(event) {
clearInterval(productGalleryImageOnHover)
let $repeater = $w.at(event.context)
let product = $w('#productsRepeater').data.find(obj => obj._id === event.context.itemId)
let top = $repeater('#productImageTop')
let bottom = $repeater('#productImageBottom')
let productMedia = product.mediaItems
if(fading === true){
var resetImage = setInterval(async function(){
if(top.isVisible === false){
top.src = productMedia[0].src
top.show('fade',defaultFadeOptions)
clearInterval(resetImage)
}
},0)
}
else{
top.src = productMedia[0].src
top.tooltip = product.description
top.show('fade',defaultFadeOptions)
}
if (productMedia.length > 1) {
bottom.src = product.mediaItems[1].src
bottom.tooltip = product.description
}
}
