Add to cart button on custom page is not working #2428

lagahrajan · 2023-01-10T07:55:50Z

lagahrajan
Jan 10, 2023

I am following https://shopify.github.io/workshops/codelabs/hydrogen-cart-page/index.html?index=./workshops&viewga=UA-82702-93#4
this doc. And in this

add <CartProvider/> in app.server.jsx
use

<AddToCartButton 
 variantId={l.empi} 
 accessibleAddingToCartLabel="Adding item to your cart">
 Add to Cart
</AddToCartButton>

and after that I am getting an error

is there any function that I can call to add product to cart?

frandiox · 2023-01-10T11:43:16Z

frandiox
Jan 10, 2023
Maintainer

You need to place <AddToCartButton> within the ProductForm component in the file components/ProductDetails.client.jsx. This is because it must be a children of <ProductOptionsProvider>:

It should work once you put it there 👍

is there any function that I can call to add product to cart?

I think we don't have any public hook to do this manually, unfortunately (is this correct @lordofthecactus ?). However, you can customize AddToCartButton component with the as="<html element>" prop and also change its children.

2 replies

rajanlagah Jan 13, 2023

@frandiox thankyou for your response. We had another page on which we wanted a list of products ( wishlisted products ) and we wanted users to add products directly to their cart. Hence no function is available and fetching product data for all the products is expensive what i did is select the necessary params that are required by ProductOptionsProvider. I found if you pass data in this format it will work nicely. I was expecting a function but yea for now maybe someone with the same requirement can use this.

<ProductOptionsProvider
                        data={{
                          id: `gid://shopify/Product/${productId}`,
                          title: l.dt,
                          vendor: l.bt,
                          variants: [
                            {
                              id: `gid://shopify/ProductVariant/${variantId}`,
                            },
                          ],
                        }}
                      >
                          <AddToCartButton
                            className="m-auto w-full bg-black p-4 rounded text-white"
                            variantId={`gid://shopify/ProductVariant/${l.epi}`}
                            accessibleAddingToCartLabel="Adding item to your cart"
                          >
                            Add to Cart
                          </AddToCartButton>
                      </ProductOptionsProvider>

lordofthecactus Jan 16, 2023

@frandiox should be possible as answered here

lordofthecactus · 2023-01-16T18:57:28Z

lordofthecactus
Jan 16, 2023

You can also use the linesAdd function from the useCart hook. Docs: https://shopify.dev/api/hydrogen/hooks/cart/usecart

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add to cart button on custom page is not working #2428

{{title}}

Replies: 2 comments 2 replies

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Add to cart button on custom page is not working #2428

lagahrajan Jan 10, 2023

Replies: 2 comments · 2 replies

frandiox Jan 10, 2023 Maintainer

rajanlagah Jan 13, 2023

lordofthecactus Jan 16, 2023

lordofthecactus Jan 16, 2023

lagahrajan
Jan 10, 2023

Replies: 2 comments 2 replies

frandiox
Jan 10, 2023
Maintainer

lordofthecactus
Jan 16, 2023