Online Shopping Website Help [SOLVED]

Ask the community
,
1

I have created an online shopping website and I have a Cart Page where users can view their own items they added.
The cart is a Repeater & inside it each item has a ‘Delete’ button which lets the user remove that item from the Cart. Now whenever someone deletes an item, sure it gets removed from the Database but on the page it is still visible unless you reload the page.

Is there a way to update the repeater and show the current items only ?

This is my Cart Page Code:

import wixLocation from 'wix-location';
import wixUsers from 'wix-users';
import wixData from 'wix-data';

$w.onReady(() =>{
 let user = wixUsers.currentUser; 
 let userId = user.id;
    wixData.query("Cart")
    .eq("_id",userId)
    .find()
    .then((results) => {
 const firstItem = results.items[0];
 const ownerId = firstItem._owner;
        $w("#dataset1").setFilter( wixData.filter() 
        .eq("_owner",ownerId) );
    });
});

export function ccart_click(event, $w) {
 let user = wixUsers.currentUser; 
 let userId = user.id; 
    wixData.query("Cart")
    .eq("userId", userId)
    .find()
    .then((results) => {
        removeItems(results.items);
});
}

async function removeItems(items) {
    items.forEach(async (item, i) => {
 await wixData.remove("Cart", items[i]._id)
    })
}

export function deleteitem_click(event, $w) { //this is the function which deletes the item from the cart
 let user = wixUsers.currentUser; 
 let userId = user.id; 
 let currentItem = $w("#dataset1").getCurrentItem(); //unnecessary line here, dont mind it
 const itemId = event.context.itemId; 
    wixData.query("Cart")
    .eq("userId", userId)
    .find()
    .then((results) => {
 let remove = results.items[0]._id;
            wixData.remove("Cart", remove);
            console.log(remove);
 
});
}

My delete button id is: deleteitem

2

Hey shan,

You need to implement the onItemRemoved() function.

Good luck,

Yisrael

3

Hi Shan,
Please use the following - wix-dataset - Velo API Reference - Wix.com
Let me know if that works for you

Thanks,
Oded

4

Hey Yisrael,

Hope everything is good.

onItemRemoved() does not seem to work

 
export function deleteitem_click(event, $w) {
 let user = wixUsers.currentUser; 
 let userId = user.id; 
 let currentItem = $w("#dataset1").getCurrentItem();
 const itemId = event.context.itemId; // this is the item in the repeater assuming that the button is in the repeater.
    wixData.query("Cart") // get the item from the database collection.
    .eq("userId", userId)
    .find()
    .then((results) => {
 let remove = results.items[0]._id; // instead of results.items[0]
         wixData.remove("Cart", remove);
    }); 
}

export function repeater1_itemRemoved(itemData) {
    $w("#dataset1").refresh()
}
5

Is this logical what I’m trying to do below ?
multiple .then()

   .then( (results) => {
 let remove = results.items[0]._id;
        wixData.remove("Cart", itemId)
        .then($w("#dataset1").refresh(), $w("#dataset1").refresh()); //this
        });
}
6

Phew !

Did it.

For anyone who wants to put a delete button inside the repeater & then have the current item deleted from the database before refreshing the dataset. Useful for shopping carts

 
export function deleteitem_click(event, $w) {
 let user = wixUsers.currentUser; 
 let userId = user.id; 
 let currentItem = $w("#dataset1").getCurrentItem();
 const itemId = event.context.itemId; // this is the item in the repeater assuming that the button is in the repeater.
    wixData.query("Cart") // get the item from the database collection.
    .eq("userId", userId)
    .find()
    .then( (results) => {
 let remove = results.items[0]._id; // instead of results.items[0]
        deleteCartItem(remove, itemId);
    });
}

async function deleteCartItem(remove, itemId){
 await wixData.remove("Cart", itemId);
    $w("#dataset1").refresh();
}
7

Hi, Am doing exactly the same as you…I am thinking you probably have a CheckOut button to move to the payment page…but I can’t figure out how to create one is a custom cart page! Any ideas?