import wixAnimations from 'wix-animations';
import wixLocation from 'wix-location';
import wixWindow from 'wix-window';
const selectedColor = '#DA004F';
const defaultColor = '#767676';
let productOptions = {};
let quantity = 1;
$w.onReady(function () {
resetUItoDefault();
wixLocation.onChange(() => {
resetUItoDefault();
getProductDetails();
productOptions = {};
});
return getProductDetails();
});
// STEP 01: Get product information
// STEP 02: Set text information
// STEP 03: Set options
// STEP 04: Set additional info
// STEP 05: Set Images
// STEP 06: Add product to cart
// STEP 07: Add interactions
async function getProductDetails() {
await $w('#productPage1').getProduct() //Get product information
.then((productInfo) => {
console.log(productInfo);
setProductTextInfo(productInfo);
if ('productOptions' in productInfo) {
updateProductOptions(productInfo.productOptions);
}
updateProductQuantityLimit(productInfo.quantityInStock)
setAditionalInfo(productInfo.additionalInfoSections);
updateProductImages(productInfo.mediaItems);
$w('#addToCart').onClick(async () => {
await validateProductOptions().then((x) => { //Return true or false
if (x) {
$w('#shoppingCartIcon1').addToCart(productInfo._id, quantity, {
"choices": productOptions,
})
.then(() => {
console.log("Product added");
})
.catch((error) => {
console.log(error);
});
}
});
});
$w('#productTextInfoContainer').show('slide', { direction: 'right', duration: 800 });
})
.catch((error) => {
console.error(error);
});
}
function setProductTextInfo(productInfo) {
$w('#ribbon').text = productInfo.ribbon;
$w('#productName').text = productInfo.name;
$w('#productDescription').html = productInfo.description;
$w('#productPrise').text = productInfo.formattedPrice;
}
function updateProductOptions(options) {
try {
const addIdsToColors = options.Color.choices.map((item, index) => {
return {
_id: index.toString(),
value: item.value,
colorName: item.description,
inStock: item.inStock,
mediaItems: item.mediaItems,
visible: true
};
});
$w('#colorsRepeater').data = addIdsToColors;
} catch (err) { console.error(err); }
try {
const setSizes = options.Size.choices.map(item => {
return {
label: item.description,
value: item.value
};
});
$w('#sizesDropdown').options = setSizes;
} catch (err) { console.error(err); }
}
function updateProductQuantityLimit(quantityLimit) {
if (quantityLimit !== undefined) {
$w('#quantityInput').max = quantityLimit;
}
}
export function colorsRepeater_itemReady($item, itemData, index) {
// I made a change here because of accessibility: I replaced the container used for the color of the product with a button without a background color and gave the background color to the container that contains the button. This way users who navigate only with the keyboard will be able to focus on the color button in a tab click.
$item('#singleColorWrapper').style.backgroundColor = itemData.value;
$item('#singleColorWrapper').onMouseIn(() => {
$item('#singleColorWrapper').style.backgroundColor = itemData.value;
});
$item('#singleColorWrapper').onMouseOut(() => {
$item('#singleColorWrapper').style.backgroundColor = itemData.value;
});
$item('#singleColor').onClick(() => {
addColorToSelected(index);
if (itemData.mediaItems.length !== 0)
updateProductImages(itemData.mediaItems);
});
}
function addColorToSelected(colorItemIndex) {
$w('#colorsRepeater').forEachItem(($item, itemData, index) => {
if (index === colorItemIndex) {
$item('#singleColorWrapper').style.backgroundColor = itemData.value;
$item('#singleColor').style.borderColor = '#FFFFFF';
productOptions.Color = itemData.colorName; //Defines the color of the product when adding the product to the cart
} else {
$item('#singleColorWrapper').style.backgroundColor = itemData.value;
$item('#singleColor').style.borderColor = '#767676';
}
})
validateProductOptions();
}
function setAditionalInfo(additionalInfo) {
const newAdditionalInfo = additionalInfo.map((item, index) => {
return {
_id: index.toString(),
title: item.title,
description: item.description,
};
});
$w('#additionalInfoSectionsRepeater').data = newAdditionalInfo;
}
export function additionalInfoSectionsRepeater_itemReady($item, itemData, index) {
const button = $item('#additionalInfoButton');
const description = $item('#additionalInfoDescription');
button.label = itemData.title;
description.html = itemData.description;
button.onClick(() => {
$item('#additionalInfoDescription').collapsed ? $item('#additionalInfoDescription').expand() : $item('#additionalInfoDescription').collapse();
})
}
function updateProductImages(images) {
const addIdsToImages = images.map((item, index) => {
return {
_id: `collectionImageId${index.toString()}`,
image: item.src,
thumbnail: item.thumbnail || '',
type: item.type
};
});
const addIdsToImagesforAnchor = images.map((item, index) => {
return { _id: `anchorId${index.toString()}`, };
});
$w('#productImagesRepeater').data = [];
$w('#productImagesRepeater').data = addIdsToImages;
$w('#anchorRepeater').data = [];
$w('#anchorRepeater').data = addIdsToImagesforAnchor;
const mainImage = addIdsToImages[0];
updateMainImage(mainImage.image, mainImage.type)
}
export function productImagesRepeater_itemReady($item, itemData, index) {
const imageNumber = (index + 1) < 10 ? `0${index + 1}` : `${index + 1}`;
$item('#imageNumber').text = imageNumber;
if (itemData.type === 'Video') {
const videoThumbnail = itemData.thumbnail.replace('originWidth=50&originHeight=50', 'originWidth=500&originHeight=500'); //Get better image for video thumbnail
$item('#collectionImage').src = videoThumbnail;
} else {
$item('#collectionImage').src = itemData.image;
}
$item('#collectionImage').onClick((event) => {
updateMainImage(itemData.image, itemData.type);
updateSelectedAnchorItem(index)
});
$item('#imageBox').onMouseIn(() => {
wixAnimations.timeline()
.add($item('#collectionImage'), { scale: 1.05, duration: 200 })
.play();
})
$item('#imageBox').onMouseOut(() => {
wixAnimations.timeline()
.add($item('#collectionImage'), { scale: 1, duration: 200 })
.play();
});
if (index === 0) {
updateSelectedAnchorItem(index);
}
}
export function anchorRepeater_itemReady($item, itemData, index) {
$item('#anchorButton').label = index + 1 < 10 ? `0${index + 1}` : `${index + 1}`;
$item('#anchorButton').onClick(() => {
const contentToDisplay = $w('#productImagesRepeater').data[index];
updateMainImage(contentToDisplay.image, contentToDisplay.type)
updateSelectedAnchorItem(index);
});
}
function updateMainImage(media, type) {
if (type === 'Video') {
$w('#mainVideo').expand();
$w('#mainVideo').src = media;
$w('#mainImageBox').collapse();
} else {
$w('#mainImageBox').expand();
$w('#mainImage').src = media;
$w('#mainVideo').collapse();
}
}
function updateSelectedAnchorItem(index) {
$w('#productImagesRepeater').forEachItem(($item, itemData, i) => {
if (index === i) {
$item('#imageNumber').html = `<p style="color:${selectedColor}">${$item('#imageNumber').text}</p>`;
getDeviceWidth().then(windowWidth => {
if (windowWidth > 750)
$item('#collectionImage').scrollTo();
});
} else {
$item('#imageNumber').html = `<p style="color:${defaultColor}">${$item('#imageNumber').text}</p>`;
}
})
$w('#anchorRepeater').forEachItem(($item, itemData, i) => {
if (index === i) {
$item('#anchorButton').style.color = selectedColor;
} else {
$item('#anchorButton').style.color = '#5d5d5d';
}
})
}
export function sizesDropdown_change(event) {
productOptions.Size = event.target.value;
validateProductOptions();
}
export function quantityInput_change(event) {
const value = event.target.value;
quantity = value;
}
async function validateProductOptions() {
const sizeIsSelected = 'Size' in productOptions;
const colorIsSelected = 'Color' in productOptions;
const alertMessage = $w('#alert');
const fadeOptions = { duration: 300 };
if (sizeIsSelected && colorIsSelected) {
alertMessage.hide('fade', fadeOptions);
return true;
} else if (sizeIsSelected) {
alertMessage.text = 'Select Color';
alertMessage.show('fade', fadeOptions);
return false;
} else if (colorIsSelected) {
alertMessage.text = 'Select Size';
alertMessage.show('fade', fadeOptions);
return false;
} else {
alertMessage.show('fade', fadeOptions);
}
}
// Reset Information
function resetUItoDefault() {
$w('#productImagesRepeater').data = [];
$w('#additionalInfoSectionsRepeater').data = [];
$w('#anchorRepeater').data = [];
}
function getDeviceWidth() {
return wixWindow.getBoundingRect()
.then((windowSizeInfo) => {
let windowWidth = windowSizeInfo.window.width;
return windowWidth
});
}