Product Page Variants Issue

Ask the community
,
1

Hello, I’m trying to create a shopping page that shows all the color variants for my product. Currently, I only have one product so I’d like to be able to show all the color options and lead to all to the same product page and database

Check out this image of what i’m trying to achieve.

3334×1876 511 KB

Is there any way that I can achieve this?

2

Hello Jeremy,

do you already use Wix-Stores, or another APP, or did you create your site with custom elements? Or is this just an example webpage?

If so, do you already have created a part of your shop?

Some codes? Some pics?

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!

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