Connect Add To Cart button w/ Custom product page/database

Just following up so the forum community can see how the problem could be solved.

To be able to have a fully customized product display with additional product details, create a custom collection and upload the .csv and create the repeater page with 2 datasets.

Create a copy for the store/product collection and fill it with the matching tabs/columns i.e (Product Name, Category, SKU)

On the repeater. The code you need for the Add To Cart button on the repeater is:

import wixData from 'wix-data';
import wixStores from 'wix-stores';

$w.onReady(function () {
    $w("#addToCart").onClick((event) => {
 let $item = $w.at(event.context);

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

    });

});

The repeater needs to be connected to the custom collection dataset and the button needs to be connected to the store/product dataset.

Set a filter for the custom collection dataset for "Product Name" (coming from a different dataset - which should be Store/Product)

(***Make sure both data collections are sorted in the same order. )

Now your button connects to the right product and adds the item to the cart.

Cheers.

I added the code for the Add To Cart button but I can't get the button to connect to the item in the repeater. It ads a random item from the wix store database instead of the item in the container which comes from the High Bay (dynamicDataset).

(dataset1: Store/Products dataset)

?

import wixData from 'wix-data';
import wixStores from 'wix-stores';

$w.onReady(function () {
    $w("#addToCart").onClick((event) => {
 let $item = $w.at(event.context);

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

    });

});

You can use addToCart() or addProductsToCart() methods to add a specific product to cart as instructed in our API here: https://www.wix.com/corvid/reference/$w.CartIcon.html#addProductsToCart https://www.wix.com/corvid/reference/$w.CartIcon.html#addToCart

Thanks for your reply. Doesn't help thou.. I wasn't asking if I could customize the "Add To Cart" button. The real question is:

Is there a way to add a custom "Add To Cart" button to the custom/dyanmic product page with a repeater that is connected to a custom product database but it links to the right item at the store?

Basically, I need a code that enables a button in a dynamic page (connected to a different database than the store database) to connect to the product to the store database in a repeater.

Hope this makes sense.

The Add to Cart button is a feature of the Wix Stores app itself and can't be edited through Corvid as you have to manually connect it to a product.

https://support.wix.com/en/article/adding-a-standalone-add-to-cart-button

Important:

After adding the button, go to Settings to connect it to one of your products. To learn more, click here.

As your issue is technically not code related, you would be better suited going through Wix Support for more help on this. https://support.wix.com/en/article/contacting-wix-support