**Try out the live website**
Introduction
In today's competitive e-commerce landscape, providing an interactive and personalized shopping experience is crucial for attracting and engaging customers. One effective way to achieve this is by creating a configurator product page on your Wix website. Wix configurator with wix velo allows customers to customize and personalize products according to their preferences. In this blog post, we will guide you through the process of setting up a configurator product page in Wix, empowering you to offer a unique and interactive shopping experience for your customers.
Step 1: Creating the configurator page
After adding all the products and their customizable features on the configurator page, enter the following code to the page.
import { cart } from 'wix-stores';
$w.onReady(() => {
setupData();
setupRepeaters();
setupHandlers();
});
function setupData() {
$w('#dynamicDataset').onReady(() => {
const currentProduct = $w("#dynamicDataset").getCurrentItem().product;
const productOptions = currentProduct.productOptions;
$w('#bgColorRepeater').data = createColorRepeaterData('bgcolor', productOptions['Background Color'].choices);
$w('#textColorRepeater').data = createColorRepeaterData('textcolor', productOptions['Text Color'].choices);
});
$w('#customProductsDataset').onReady(updateMenuButtons);
}
function createColorRepeaterData(idPrefix, choices) {
return choices.map((item, index) => {
item._id = `${idPrefix}-${index}`;
return item;
});
}
function setupRepeaters() {
$w('#bgColorRepeater').onItemReady(($item, itemData, index) => {
$item('#bgColorBox').style.backgroundColor = itemData.value;
$item('#bgColorBtn').onClick(() => {
updateBackgroundColor(itemData);
});
});
$w('#textColorRepeater').onItemReady(($item, itemData, index) => {
$item('#textColorBox').style.backgroundColor = itemData.value;
$item('#textColorBtn').onClick(() => {
updateTextColor(itemData);
});
});
}
function updateBackgroundColor(colorItem) {
$w('#colorText').text = colorItem.description;
$w('#bgColor').style.backgroundColor = colorItem.value;
}
function updateTextColor(colorItem) {
$w('#textColorName').text = colorItem.description;
$w('#customText').html = "<h6 style='text-align:center;color:" + colorItem.value + "'>" + $w('#customText').text + "</h6>";
}
function setupHandlers() {
$w('#textInput').onKeyPress(() => {
setTimeout(() => {
const textToShow = $w('#textInput').value;
$w('#customText').text = textToShow;
if (textToShow) {
$w('#customText').show();
} else {
$w('#customText').hide();
}
}, 10);
});
$w('#addToCartBtn').onClick(async() => {
const currentProduct = $w('#dynamicDataset').getCurrentItem().product;
await cart.addProducts([{
productId: currentProduct._id,
quantity: 1,
options: {
choices: {
"Background Color": $w('#colorText').text,
"Text Color": $w('#textColorName').text
},
customTextFields: [{
title: "Custom Text",
value: $w('#textInput').value
},
{
title: "Background Image",
value: $w('#print').src
}
]
}
}]);
cart.showMiniCart();
});
}
function updateMenuButtons() {
$w('#repeater1').forEachItem(($item, itemData) => {
const currentDynamicId = $w('#dynamicDataset').getCurrentItem()._id;
if (currentDynamicId === itemData._id) {
$item('#button1').disable();
} else {
$item('#button1').enable();
}
});
}Step 2: Enable Configurator Functionality
1. Click on the variant you want to configure and select "Edit Options."
2. Enable the "User Selectable" option to allow customers to choose their preferred attributes.
3. Customize the appearance of the variant options using the design tools.
Step 3: Customize Product Preview
Step 4: Test and Publish
1. Preview and test your configurator product page thoroughly, ensuring that all customization options, product previews, and the checkout process function as intended.
2. Publish your configurator product page.
Conclusion:
With wix configurator product page on your website, you can offer a personalized and interactive shopping experience that sets you apart from the competition. By following the step-by-step guide outlined in this blog post, you can create an engaging configurator product page that empowers customers to customize products according to their preferences. Take advantage of Wix's user-friendly interface and customizable options to create a unique shopping experience that drives customer engagement and boosts your sales.
Comments