Product Page Variants Issue

Ask the community
,
3

Hi russian-dima,

the picture that i showed above was just an example webpage of what i’m trying to achieve.

I created most of my site through custom elements.

below is the code that i’m trying to use, but i’m getting a parsing error on the last line (mind you, i’m not an expert on coding…)

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; 
        }) 
    }) 
}

Thanks!