WIX Stores - Custom products with file upload (WIX Studio)

Ask the community
, ,
1

Hi!

I’m currently working on a wix stores website in wix studio.

I need to get a product configurator, with the possibility to upload images.

This is my current code:

import wixStores from ‘wix-stores’;
import { session } from ‘wix-storage’;

$w.onReady(function () {
const productId = “5106b9c0-ffd2-733c-780f-b1d76ca8e066”; // Die richtige GUID-Produkt-ID

// Set up event handlers
$w('#dropdownColor').onChange(updatePreview);
$w('#dropdownLineCount').onChange(updateLineInputs);

$w('#inputLine1').onInput(saveInputsToSession);
$w('#inputLine2').onInput(saveInputsToSession);
$w('#inputLine3').onInput(saveInputsToSession);
$w('#inputLine4').onInput(saveInputsToSession);
$w('#inputLine5').onInput(saveInputsToSession);

$w('#uploadLogo').onChange(uploadLogo);
$w('#uploadWatermark').onChange(uploadWatermark);

// Überprüfen, ob der Button existiert
if ($w('#addToCartButton')) {
    $w('#addToCartButton').onClick(addToCart);
} else {
    console.error('Button with ID "addToCartButton" not found');
}

// Variables to track if logo and watermark are uploaded
let isLogoUploaded = false;
let isWatermarkUploaded = false;

// Initial hiding of logo, watermark, and text previews
$w('#logoPreview').hide();
$w('#watermarkPreview').hide();
$w('#textPreview1').hide();
$w('#textPreview2').hide();
$w('#textPreview3').hide();
$w('#textPreview4').hide();
$w('#textPreview5').hide();

function updateLineInputs() {
    // Get the selected number of lines
    let lineCount = parseInt($w('#dropdownLineCount').value);

    // Expand the number of line inputs based on the selection
    for (let i = 1; i <= 5; i++) {
        if (i <= lineCount) {
            $w(`#inputLine${i}`).expand();
        } else {
            $w(`#inputLine${i}`).collapse();
            $w(`#textPreview${i}`).hide(); // Hide text preview if input line is collapsed
        }
    }

    // Update the preview to clear any old lines
    updatePreview();
}

function updatePreview() {
    // Get the selected color and line count
    let color = $w('#dropdownColor').value;
    let lineCount = parseInt($w('#dropdownLineCount').value);
    
    // Construct the image path based on the selected options
    let imagePath = `https://brink-3d.de/bilder/dein-vereinsshop/urkunden/modern-minimal/${color}_${lineCount}.png`;

    // Log the image path
    console.log(`Loading preview image: ${imagePath}`);

    // Update the image source and show the preview image
    if (color) {
        $w('#previewImage').src = imagePath;
        $w('#previewImage').show();
    }

    // Collect text from visible line inputs and update individual text previews
    for (let i = 1; i <= 5; i++) {
        let inputLine = $w(`#inputLine${i}`).value;
        if (i <= lineCount && inputLine.trim() !== "") {
            $w(`#textPreview${i}`).text = inputLine;
            $w(`#textPreview${i}`).show();
        } else {
            $w(`#textPreview${i}`).text = '';
            $w(`#textPreview${i}`).hide();
        }
    }

    // Update the logo visibility if there is an uploaded logo
    if (isLogoUploaded) {
        $w('#logoPreview').show();
    } else {
        $w('#logoPreview').hide();
    }

    // Update the watermark visibility if there is an uploaded watermark
    if (isWatermarkUploaded) {
        $w('#watermarkPreview').show();
    } else {
        $w('#watermarkPreview').hide();
    }
}

function saveInputsToSession() {
    let inputs = {
        line1: $w('#inputLine1').value,
        line2: $w('#inputLine2').value,
        line3: $w('#inputLine3').value,
        line4: $w('#inputLine4').value,
        line5: $w('#inputLine5').value,
    };
    session.setItem('customInputs', JSON.stringify(inputs));
}

function uploadLogo() {
    if ($w('#uploadLogo').value.length > 0) {
        $w('#uploadLogo').uploadFiles()
            .then((uploadedFiles) => {
                let logoUrl = uploadedFiles[0].fileUrl;
                $w('#logoPreview').src = logoUrl;
                session.setItem('logoUrl', logoUrl);
                isLogoUploaded = true;
                updatePreview();
            })
            .catch((uploadError) => {
                console.error("File upload error: ", uploadError);
            });
    } else {
        isLogoUploaded = false;
        $w('#logoPreview').hide();
        session.removeItem('logoUrl');
    }
}

function uploadWatermark() {
    if ($w('#uploadWatermark').value.length > 0) {
        $w('#uploadWatermark').uploadFiles()
            .then((uploadedFiles) => {
                let watermarkUrl = uploadedFiles[0].fileUrl;
                $w('#watermarkPreview').src = watermarkUrl;
                session.setItem('watermarkUrl', watermarkUrl);
                isWatermarkUploaded = true;
                updatePreview();
            })
            .catch((uploadError) => {
                console.error("File upload error: ", uploadError);
            });
    } else {
        isWatermarkUploaded = false;
        $w('#watermarkPreview').hide();
        session.removeItem('watermarkUrl');
    }
}

function addToCart() {
    let customInputs = JSON.parse(session.getItem('customInputs') || '{}');
    let color = $w('#dropdownColor').value || '';
    let logoUrl = session.getItem('logoUrl') || '';
    let watermarkUrl = session.getItem('watermarkUrl') || '';

    // Verify if customInputs contains necessary fields
    if (!customInputs.line1) customInputs.line1 = '';
    if (!customInputs.line2) customInputs.line2 = '';
    if (!customInputs.line3) customInputs.line3 = '';
    if (!customInputs.line4) customInputs.line4 = '';
    if (!customInputs.line5) customInputs.line5 = '';

    // Combine the custom text fields into a single array
    let customizations = [
        { field: 'Color', value: color },
        { field: 'Logo', value: logoUrl },
        { field: 'Watermark', value: watermarkUrl },
        { field: 'Zeile 1', value: customInputs.line1 },
        { field: 'Zeile 2', value: customInputs.line2 },
        { field: 'Zeile 3', value: customInputs.line3 },
        { field: 'Zeile 4', value: customInputs.line4 },
        { field: 'Zeile 5', value: customInputs.line5 }
    ];

    // Log the customizations array
    console.log('Customizations Array:', customizations);

    // Log the productId to ensure it is correct
    console.log('Product ID:', productId);

    wixStores.cart.addProducts([{
        productId: productId,
        quantity: 1,
        notes: JSON.stringify(customizations) // Add the customizations array as a string in the notes field
    }])
    .then((response) => {
        console.log('Product added to cart', response);

        // Warenkorb-Daten abrufen und anzeigen
        wixStores.cart.getCurrentCart()
            .then((cartData) => {
                console.log('Current Cart:', cartData);
            })
            .catch((cartError) => {
                console.error('Error getting current cart:', cartError);
            });
    })
    .catch((error) => {
        console.error('Error adding product to cart:', error);
    });
}

});

With the buttonpress on “Add to cart” the product already got added to the cart, but without any configurations. Does someone has an idea, how that could work?

2

image
image749×671 62.9 KB

Here is a preview of the site.