Custom Add to Cart Button on Dynamic Pages

I am trying to create a custom product page with dynamic pages. I ideally want the user to be able to click a button and add that product to their cart without being routed to Wix’s pre-built product page. I am trying to code a normal button to make it work.

I am new to Velo and javascript. I have researched a lot and no code that I have found in this forum has worked yet. Below are the codes that I have found/tried:

Attempt #1

import wixData from 'wix-data';

export function dynamicDataset_ready(){let product =$w('#dynamicDataset').getCurrentItem();$w('#atcButton').onClick(()=>{$w('#shoppingCartIcon1').addToCart(product._id);
})}

Attempt #2

import wixData from 'wix-data';

export function addToshoppingCartIcon_click(event, $w) {  
const productId = $w('#dynamicDataset').getCurrentItem()._id;
$w('#shoppingCartIcon1').addToCart(productId, 1, );
}

Attempt #3

export function button1_click(event) {
const productId = $w('#dynamicDataset').getCurrentItem()._id;
$w('#shoppingCartIcon1').addToCart(productId);
}

I have tried a few other codes as well, but these seem the most promising based on others comments and my very basic knowledge of the code. Any help would be great!

1 Like

Hi Ryan!

I don’t have an answer for you. I just wanted to add that I’ve been having the same problem and I can’t fix it either. I’m trying to create a custom product page using dynamic pages but I can’t get ‘add to cart’ to work at all.

Crossing my fingers that someone will know what to do.

Velo changed the code you want to use, it is already deprecated.

Try this:

import { cart } from "wix-stores"

$w("#shoppingCartIcon1").onClick(async () => {
    const productId = $w("#dynamicDataset").getCurrentItem()._id
    const addToCart = await cart.addProducts(createProductObj(productId, 1))
    addToCart._id
        ? console.log("Cart Updated!")
        : console.log("Something is wrong!")    
})

function createProductObj(id, qtd) {
    return [
        {
            productId: id,
            quantity: qtd,
        },
    ]
}


I really appreciate your answering me! It still isn’t working for me. I don’t understand what’s going wrong, but with this code or whatever else I have tried, I can still only get it to add to cart the item that was most recently added to my collection and not the one that is currently showing on the page. – or alternately add nothing at all. The difference between the two seems to be whether I’m using the dedicated ‘add to cart button’ or a standard button.

If you have any idea of what I may be doing wrong I’d love to know. I have only limited knowledge of this area, and all my research this past week has gotten me nowhere.

ETA: I just tried the most basic of changing the colour of the button text onMouseIn and that doesn’t even work so I assume something else is wrong on a basic setup level.

@kath0722 can you paste the whole code here so I can check it out?

1 Like

@bwprado I made it work somehow! I was going to re-build and show you, but this time around I hit something that actually works. I don’t know what went wrong for me previously.

Below is my code. If anything looks weird or off to you, please let me know since I wouldn’t know myself. Now I need to work out how to get the sidebar with the cart pop out when the item is added.

import { cart } from "wix-stores";

$w.onReady(function () {
    let productData = $w("#dynamicDataset").getCurrentItem()
    let productId = productData._id
    let quantity = 1
    let product = [{
        "productId": productId,
        "quantity": quantity
    }] 
    $w("#cartButton").onClick( (event) => {
    cart.addProducts(product)
} );
})

@kath0722 nice code, to pop the Mini Cart just use this method:

cart.showMiniCart()

@kath0722 Any code in the page’s onReady() that needs the Dataset should be wrapped in a dataset onReady() , since you can’t be sure that the Dataset will be ready when the page is ready.

1 Like

Hi Ryan!

I managed to find a solution that works for me, check below. Maybe it’ll work for you too.

This code adds ‘1’ of the current item to the cart and the sidebar ‘minicart’ pops out.

import { cart } from "wix-stores";
import { formFactor } from 'wix-window';

$w.onReady(function () {
    let productData = $w("#dynamicDataset").getCurrentItem()
    let productId = productData._id
    let quantity = 1
    let product = [{
        "productId": productId,
        "quantity": quantity
    }] 
    $w("#cartButton").onClick( (event) => {
    cart.addProducts(product)
    .then(() => {
    // Only show the Mini Cart if the site is not being viewed on mobile
    if (formFactor !== "Mobile") {
        cart.showMiniCart();
    }
    })
  .catch((error) => {
    console.error(error);
  });
});
})

@yisrael-wix just noticed I missed the on ready method. :see_no_evil:

Hi Kath,
Hi All,

I have a dynamic page, which is not a dynamic product page, where I also want to add a ´add to cart´button. The product are refferenced in my datasheet. any Idea how to modify the above code?

Thanks,

Jur

@kath0722 This was brilliant! I have been struggling for DAYS trying to figure out how to piece this code for a custom add to cart button for my dynamic product pages and you saved the day! Thank you so much for posting your code!

it tells me onclick cant be added to shopping cart icon … do i need to add custom icon too?

Hello Everyone,
I new to Java, I m stuck since 5 days trying to fix an issue.

I have two dynamic page, One is for the Customer, Second is product registered by the clients. I create a reference in my dynamic product collection in relation to each Customer.

I m looking to add a Cart in order for my site visitor to add to card by a simple click . but it does not work. Here is my code

import { cart } from ‘wix-stores’ ;

export function AddToCart_click_1 ( event ) {
const product = $w ( ‘#dynamicDataset’ ). getCurrentItem ();
c onst idproduct = product . multireference ;

cart . addProducts ( idproduct )
. then (( shoppingCartIcon1 )=>{
// Products added to cart
const cartId = shoppingCartIcon1 . _id ;
const cartLineItems = shoppingCartIcon1 . lineItems ;
})
. catch (( error )=>{
console . log ( error );
})
}