Does anyone know how to code an add to cart button on a dynamic product page?

Ask the community
,
1

I’m having difficulty figuring out how to get the id of the product for the page I’m on

1 Like
2

Hi :raised_hand_with_fingers_splayed:

Does the product have variants? If no you just need get the product ID before adding it to your cart.

$w('#dataset').onReady(() => {
    let product = $w('#dataset').getCurrentItems();
    
    $w('#addToCart').onClick( () => {
        $w('#cart').addToCart(product._id);
    })
})

If your product has multiple variants, you need to get its variants and their IDs before adding any to the cart.

Hope this helps~!
Ahmad

3

Hi Ahmad! I had to tweak it a little bit to get it to work for me. But thank you so much!!

It wouldn’t let me use onReady until I added the function to the data set’s properties panel. Here’s my code if anyone else needs it :^)

import wixData from 'wix-data';

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

You’re welcome :wink: And thank you for sharing your code with the community.

5

Hey Ahmad! I have one more question about this.

So I’m trying to add multiple variants, and I kind of see how to do it… But the examples I see are mostly for if every product in someone’s store has the same variants. What do I do if I’m setting up a dynamic product page. And some of my products have variants and some don’t. And the ones that do are not similar to one another. For example one product has colors, and another one is different materials, etc.

6

Hi :raised_hand_with_fingers_splayed:

You can check if the product is managing variants (product.manageVariants: Boolean).

$w('#dataset').onReady(() => {
    let product = $w('#dataset').getCurrentItems();
    
    if (product.manageVariants) {
        // Get the options and update the UI fields
        // Now loop through the options
        let variants = product.manageVariants
        let keys = [];
        for (key in variants) {
            keys.push(key)
        }
        
        // Now display the keys
        for (let i = 0; i < keys.length; i++) {
            let key = keys[i];
            
            if (variant[key].optionType === 'color') {
                let availableColors = [];
                for (let c = 0; c < variant[key].choices; c++) {
                    let colorChoice = variant[key].choices[c];
                    
                    if (colorChoice.inStock && colorChoice.visible) {
                        availableColors.push(colorChoice)
                    }
                }
                
                // Display the colors
                // ..........
            }
        }
    } else {
        // handle the case where the product doesn't have variants
    }    
})

This how you display the options on a dynamic page, I gave you an example how to display colors, the other options are quite the same.

Take a look at this page to learn more.

7

Thank you!

8

Hi Ahmad,

I want to add a Cart Button to a dynamic page which is nto a product page. the dataset however has a reference to the products dataset. do you have any idea how to solve this issue?

thanks,

Jurrien