Dynamic "Add to cart" button, stay this page after click?

Ask the community
,
1

I added a "“Add to cart” button to a repeater on my Search page:

3840×2164 910 KB

But when i click the button, Wix redirect to Cart page automatically. I want it just open Mini Cart and stay at current page.
Here’s my code:

$w.onReady(function () {

$w("#addToCartButton").onClick((event) => {
let $item = $w.at(event.context);
let selectedProduct = $item('#productsDataset').getCurrentItem();
let productId = selectedProduct._id;
$w('#shoppingCartIcon1').addToCart(productId)
.then(() => {
console.log("add product ${productId} success");
})
.catch((error) => {
console.log(error);
});
});
});

Is there anyway to do like that?

1 Like
2

Did you add the add to cart button from within the Wix Editor.
https://support.wix.com/en/article/adding-and-setting-up-a-standalone-add-to-cart-button

If you have done the above which it looks like you have, then it won’t work as the standalone button is connected to each product through the button’s own settings.

If you add the Wix CartIcon API and the addToCart function as shown here.
https://www.wix.com/corvid/reference/$w.CartIcon.html#addToCart

Then as you are adding it to a repeater, you can have a read of this previous forum post that explains it all in detail for you.
https://www.wix.com/corvid/forum/community-discussion/add-button-to-add-to-cart

Always good idea to search the forum for previous posts before posting as you will often find it has been asked before.

3

Thank you. I got it.

4

@fullhouseit Hi, have you been able to stay on the page using the API ?

5

I followed the advise from GOS and the new coded button worked, however the site still does not stay on page after the product has been added to cart. Below is the code I’m using, is there anything I can alter to have it stay on page?
Thanks!

$w (“#myButton”). onClick ( () => {
2 $w (“#myShoppingCartIcon”). addToCart (“ea77f230-558f-0ba565e8f827”)
3 . then ( () => {
4 console . log (“Product added”);
5 } )
6 . catch ( ( error ) => {
7 console . log ( error );
8 } );
9 } );

6

@givemeawhisky
I have an issue with the mobile version. My addTocCart code is working fine, but I would like the customer to stay on the page instead of being redirected to the cart page. This happens on the mobile version only.

DO you have a way to bypass that?

7

I have the opposite problem: with similar code, my add to cart button adds items but does not work link straight to the cart which is my goal; it just opens the mini cart.
What am I doing wrong


export function addToCartButton_click(event, $w) {
let prod = dataset.getCurrentItem(); // declared above

let colors = prod['productOptions']['Color']['choices']
let sizes = prod['productOptions']['Size']['choices']
// selectedOptions is handled outside this function
selectedOptions['Color'] = colors[selectedColor].description;
selectedOptions['Size'] = sizes[selectedSize].description;
        
$w('#shoppingCartIcon').addToCart(prod._id, 1, {choices: selectedOptions})
        .then(()=>{console.log('add successful')}, (err)=>{console.log(err)});
 //wixLocation.to('/Cart') // attempted redirection that did not work
 
}
8

I have the same question! How to stay on page after add to cart. How to skip the Mini Cart?? My add to cart code works fine as well, but why would we want our mobile customers to stop shopping? Buy more, please! :slight_smile:

9

Anyone find a solution to this issue??

10

I found a simple solution! I was having the same problem on mobile mode.

There is no easy way to specifically turn this off for mobile, however there is a way you can turn it off on desktop, and it will reflect on mobile.
To do this, you will need to open the product page on desktop version, then you will need to select settings and select stay on product page.

I only had “stay on product page” selected for my shop. But not for the product page. Here is a video of my mobile version now.