Wix Custom Page ->"Build Your Own Box" Checkout

Code Review
,
1

Hi All, Thanks for having me.

Quick intro as this is my first time posting: My name is Emily. I’m a small business owner (cookie bakery) in Las Vegas who’s always enjoyed the design side of websites. My stock website didn’t allow me to sell my products effectively so I’ve attempted to code it myself.

I am trying to make a “build your own box” checkout.

Example: user chooses from available cookie flavors. when #addToCartButton clicked user is directed to wix store cart page. #boxQtyTotals display in wixStudioCartIcon. boxQtyTotal is calculated by cookie price * cookie qty (5) = 1 box for cart

The issue: I need the wix cart page to display the data stored in the cart from custom order page. Curently when #addItemsToCartButton is clicked, the item that is pushed to the cart is the first item listed in the wixStoreDataset. I have spend days working on this and I cant find a way. I would like wix cart page should display:

boxTitle: 5 Macarons

selectedItems: vanilla(x3), chocolate(x2)

itemTotal: $15

Total:$30 (if multiples of same boxItemText selected)

I feel like I am sooo close but I’m stuck. Can anyone help me please? My coding level/knowledge is like a 2 out of 10, lol https://www.macaronwarehouse.com/5-macarons

// ============================
// Imports & Globals
// ============================
import wixWindow from ‘wix-window’;
import { session } from ‘wix-storage’;

let cart = ;
const MAX_COOKIES = 5;
const MIN_TOTAL = 15;
const MAX_TOTAL = 17.50;

const cookieSlots = [
$w(‘#slot1’),
$w(‘#slot2’),
$w(‘#slot3’),
$w(‘#slot4’),
$w(‘#slot5’),
];

// ============================
// Helper Functions
// ============================
function loadCart() {
const saved = session.getItem(‘cart’);
cart = saved ? JSON.parse(saved) : ;
}

function saveCart() {
session.setItem(‘cart’, JSON.stringify(cart));
}

function collectBoxData() {
let selectedCookies = ;
let boxTotal = 0;

const repeater = $w('#myRepeater');
if (!repeater || typeof repeater.forEachItem !== 'function') {
    console.warn("Repeater not ready yet or ID mismatch.");
    return { selectedCookies, total: boxTotal };
}

repeater.forEachItem(($item, itemData) => {
    const qty = Number($item('#qtyDropdown').value || 0);
    const price = Number(itemData.price || 0);

    if (qty > 0) {
        boxTotal += qty * price;
        for (let i = 0; i < qty; i++) {
            selectedCookies.push({
                name: itemData.title || '',
                image: itemData.image || ''
            });
        }
    }
});

return { selectedCookies, total: boxTotal };

}

function generateBoxTitle(selectedCookies) {
if (!selectedCookies.length) return “Unnamed Box”;
if (selectedCookies.length === 1) return selectedCookies[0].name;
if (selectedCookies.length === 2) return ${selectedCookies[0].name} & ${selectedCookies[1].name};
return ${selectedCookies[0].name}, ${selectedCookies[1].name} + ${selectedCookies.length - 2} more;
}

function updateOrder() {
const { selectedCookies, total: boxTotal } = collectBoxData();
$w(‘#totalText’).text = Total: $${boxTotal.toFixed(2)};

cookieSlots.forEach(slot => slot.hide());
selectedCookies.forEach((cookie, index) => {
    const slot = cookieSlots[index];
    if (slot && cookie.image) {
        slot.src = typeof cookie.image === 'string' ? cookie.image : cookie.image.src;
        slot.show();
    }
});

const button = $w('#addToCartButton');

if (boxTotal === 0) {
    button.disable();
    button.label = "Add Cookies";
} else if (selectedCookies.length < MAX_COOKIES) {
    button.disable();
    button.label = `Add ${MAX_COOKIES - selectedCookies.length} more`;
} else if (boxTotal < MIN_TOTAL) {
    button.disable();
    button.label = `Min $${MIN_TOTAL}`;
} else if (boxTotal > MAX_TOTAL) {
    button.disable();
    button.label = `Max ${MAX_COOKIES}`;
} else {
    button.enable();
    button.label = "Add to Cart";
}

}

function resetCurrentBox() {
$w(‘#myRepeater’).forEachItem($item => $item(‘#qtyDropdown’).value = ‘0’);
updateOrder();
}

function updateCartSummary() {
const totalBoxes = cart.reduce((sum, box) => sum + (box.quantity || 1), 0);
$w(‘#cartTotalBoxesText’).text = ${totalBoxes};
}

// ============================
// Page Ready
// ============================
$w.onReady(function () {
// Load saved cart and reset display
loadCart();
resetCurrentBox();
updateCartSummary();

// Initialize repeater items
$w('#myRepeater').onItemReady(($item, itemData) => {
    const qtyChoices = [
        { label: '0', value: '0' },
        { label: '1', value: '1' },
        { label: '2', value: '2' },
        { label: '3', value: '3' },
        { label: '4', value: '4' },
        { label: '5', value: '5' }
    ];
    $item('#qtyDropdown').options = qtyChoices;
    $item('#qtyDropdown').value = '0';
    $item('#itemTotalText').text = `$0.00`;

    $item('#qtyDropdown').onChange(() => {
        const qty = Number($item('#qtyDropdown').value || 0);
        const pricePerItem = Number(itemData.price || 0);
        $item('#itemTotalText').text = `$${(pricePerItem * qty).toFixed(2)}`;
        updateOrder();
    });
});

// Add to cart button
$w('#addToCartButton').onClick(() => {
    const boxData = collectBoxData();

    if (boxData.selectedCookies.length === MAX_COOKIES) {
        const boxTitle = generateBoxTitle(boxData.selectedCookies);

        const cartItem = {
            title: boxTitle,
            selectedCookies: boxData.selectedCookies,
            itemTotal: boxData.total,
            quantity: 1
        };

        cart.push(cartItem);
        saveCart();
        resetCurrentBox();
        updateCartSummary();

        wixWindow.openLightbox("BoxAddedLightbox", { message: "Macaron box added to cart!" });
    }
});

// Checkout button
$w('#checkoutLabelText').onClick(() => {
    if (cart.length > 0) {
        const grandTotal = cart.reduce((sum, box) => sum + (box.itemTotal * (box.quantity || 1)), 0);
        wixWindow.openLightbox("CheckoutLightbox", { cart, amount: grandTotal });
    } else {
        wixWindow.openLightbox("EmptyCartLightbox", { message: "Your cart is empty!" });
    }
});

});