Product Page Variants Issue

Ask the community
,
4

sorry, please see code here below

import wixWindow from 'wix-window';

const colorPicker = ['black', 'bone', 'blush'];
let productsMap = {};

export function productsRepeater_itemReady($item, itemData, index) {
 let product = createProductObject(itemData);
    productsMap[product.productId] = product;

    $w('#image').src = product.mainImage.src;
    $w('#productPrice').text = product.price;
    $w('#productName').text = product.name;

 if (wixWindow.formFactor === 'Mobile') {
        colorPicker.forEach(color => {
            $w(`#${color}`).show();
        });
        $w('#cartButton').show();
    } else {
        initProductHover($item);
        initDirectionsHover($item, product);
    }

    initColorPicker($item, product);

    $w('#cartButton').onClick(() => {
 let productObj = productsMap[product.productId];
        $w('#shoppingCartIcon1').addToCart(productObj.productId, 1, { choices: { Color: productObj.colorSelected } })
            .then(() => { console.log('added!') })
            .catch(console.error);

    })

}

function createProductObject(productRecord) {
 let product = {
        colorSelected: 'black',
        productId: productRecord._id,
        productImagesByColor: {
            Black: {
                front: productRecord.mediaItems[0],
                right: productRecord.mediaItems[1],
                left: productRecord.mediaItems[2],
            },
            Bone: {
                front: productRecord.mediaItems[3],
                right: productRecord.mediaItems[4],
                left: productRecord.mediaItems[5],
            },
            Blush: {
                front: productRecord.mediaItems[6],
                right: productRecord.mediaItems[7],
                left: productRecord.mediaItems[8],
            }
        },
        mainImage: productRecord.mediaItems[0],
        price: productRecord.formattedPrice,
        name: productRecord.name
    }

 return product;
}

function initProductHover($w) {
    $w('#productContainer').onMouseIn(() => {
        colorPicker.forEach(colorChoice => {
            $w(`#${colorChoice}`).show();
        });

        $w('#productContainer').onMouseOut(() => {
            colorPicker.forEach(colorChoice => {
                $w(`#${colorChoice}`).hide();
            });
            $w('#cartButton').hide();
        });
    })

 function initColorPicker($w, product) {
        colorPicker.forEach(colorChoice => {
            $w(`#${colorChoice}`).onClick(() => {
 let productObj = productsMap[product.productId];
                productObj.colorSelected = colorChoice;
                $w('#image').src = productObj.productImagesByColor[colorChoice].front.src;
            });
        });
    }

 function initDirectionsHover($w, product) {
 let productObj;
 let colorSelected;
 const directions = ['left', 'right'];

        directions.forEach(direction => {
            $w(`#${direction}Box`).onMouseIn(() => {
                productObj = productsMap[product.productId];
                colorSelected = productObj.colorSelected;
                $w('image').src = productObj.productImagesByColor[colorSelected].front.src;
            })
        })
    }