Can someone tell me whats wrong with my code?

Ask the community
, , ,
1

Hi

Im extremly new to coding. I dont know anything about it but i want to create a custom cart page. so i was looking at tutorials on youtube. This one: https://www.youtube.com/watch?v=3bHDzqKWytY&t=620s

I tried to replicate the steps/code but still getting the red lines.

I copy pasted the exact code from: Estimate Current Cart Totals | Velo named: “Get current site visitor’s cart to the backend”

The backend web module i added is named “cart.web.js”

and wrote this in the frontend:

import {myGetCurrentCartFunction} from 'backend/myCurrentCart';

$w.onReady(function () {
populateCartItems();
});

async function populateCartItems(params) {
	const cart = await myGetCurrentCartFunction();
	const {lineitems, currency} = cart;

	$w('#lineItemsrepeater').onItemReady(($item, itemData)=>{
		$item('#productName').text = itemData.productName.original;
		$item('#image').src = itemData.image;
		$item('#price').text = itemData.price.formattedAmount;
		$item('#totalPrice').text = ${currency} ${itemData.quantity*itemData.price.amount};
		$item('#quantityInput').value = itemData.quantity.toString();
	})
	($w('#lineItemsrepeater')).data = lineitems;
}

Screenshot 2025-05-07 172806
Screenshot 2025-05-07 172806807×374 21.2 KB

What is needed to be replaced? I wuld really appreciate the help here!!!

2

A few things that might help:

  • If you’re backend file is named cart.web.js, your import is likely to be import {myGetCurrentCartFunction} from 'backend/cart.web.js';, because we’re calling the function from the backend/cart.web.js file
  • Make sure all of your element id’s in the code match the elements in the editor.
  • At the moment, you have extra () surrounding $w('#lineItemsrepeater') on the last row, so should be $w('#lineItemsrepeater').data = lineitems;

In full, I imagine it looks like this:

import { myGetCurrentCartFunction } from 'backend/cart.web.js';

$w.onReady(function () {
    populateCartItems();
});

async function populateCartItems(params) {
    const cart = await myGetCurrentCartFunction();
    const { lineitems, currency } = cart;

    $w('#lineItemsrepeater').onItemReady(($item, itemData) => {
        $item('#productName').text = itemData.productName.original;
        $item('#image').src = itemData.image;
        $item('#price').text = itemData.price.formattedAmount;
        $item('#totalPrice').text = $ { currency } $ { itemData.quantity * itemData.price.amount };
        $item('#quantityInput').value = itemData.quantity.toString();
    })

    $w('#lineItemsrepeater').data = lineitems;
}

@thewixwiz - you know your own tutorial a little better than I do :laughing: - any other things you noticed/would recommend :slight_smile:

1 Like
3

TYSM Noah!!!

also, the wix wiz is so goshdang helpful!!!

1 Like
4

@thewixwiz Quite the legend, honestly!

2 Likes