Add a Custom Product from a custom Page to Cart

Ask the community
, , ,
1
  1. How do I add a custom product from a custom page to the shopping cart?

I have almost no experience in coding and wrote my current code with a lot of trial and error. The UI works as I envisioned it, including all necessary inputs. However, I’m having trouble getting the customer’s selections and inputs into the shopping cart.

To be specific, these are the pieces of information I need to transfer:

$w("#addToCartButton").onClick(() => {
    console.log("🛒 Warenkorb-Button geklickt!");

    const depth = parseFloat($w("#inputDepth").value) || 0;
    const height = parseFloat($w("#inputHeight").value) || 0;
    const width = parseFloat($w("#inputWidth").value) || 0;
    const material = selectedMaterial;
    const zipperSelection = $w("#zipper1").value || "";
    const dropdown2Selection = $w("#dropdown2").value || "";
    const quantity = parseInt($w("#quantityInput").value, 10) || 0;

    if (!$w("#infoCheckbox1").checked) {
        showError("Bitte bestätigen Sie die Bedingungen, bevor Sie das Produkt hinzufügen.");
        return;
    }

    if (!material) {
        showError("Bitte wählen Sie ein Material aus.");
        return;
    }

    if (depth <= 0 || height <= 0 || width <= 0) {
        showError("Bitte geben Sie gültige Maße ein.");
        return;
    }

    if (!zipperSelection) {
        showError("Bitte wählen Sie eine Option für den Reißverschluss.");
        return;
    }

    if (!dropdown2Selection) {
        showError("Bitte wählen Sie eine Option im zweiten Dropdown.");
        return;
    }

    if (quantity <= 0) {
        showError("Bitte geben Sie eine gültige Menge ein.");
        return;
    }

    const rutschfestSelected = $w("#rutschfestCheckbox").checked ? "Ja" : "Nein";
    const optionalNotes = $w("#optionalNotesField").value || "Keine Notizen";
    const price = calculatePrice();

    const product = {
        productId: "d70ce1e2-a8fb-f41b-e73b-c08968c4d942",
        quantity: quantity,
        customTextFields: [
            { title: "Material", value: material },
            { title: "Seite A (Tiefe)", value: `${depth} cm` },
            { title: "Seite B (Höhe)", value: `${height} cm` },
            { title: "Seite C (Breite)", value: `${width} cm` },
            { title: "Zipper-Auswahl", value: zipperSelection },
            { title: "Dropdown2-Auswahl", value: dropdown2Selection },
            { title: "Rutschfest", value: rutschfestSelected },
            { title: "Notizen", value: optionalNotes },
            { title: "Anzahl", value: `${quantity}` },
            { title: "Preis", value: `${price.toFixed(2)} €` }
        ]
    };

    wixStores.addToCart(product)
        .then(() => {
            console.log("✅ Produkt erfolgreich hinzugefügt.");
            $w("#successMessage").text = "✅ Produkt erfolgreich zum Warenkorb hinzugefügt!";
            $w("#successMessage").show();
        })
        .catch((error) => {
            console.error("❌ Fehler beim Hinzufügen zum Warenkorb:", error);
            showError("❌ Fehler beim Hinzufügen zum Warenkorb.");
        });
});

function showError(message) {
    console.error("⚠️ Fehler:", message);
    $w("#errorMessage").text = message;
    $w("#errorMessage").show();
}

});

I appreciate any help!
And if someone needs the full 240 lines of code to get an overview, just let me know. :slight_smile: