Unable to add item in cart using Store front API by javascript SDK

Suneel
Tourist
14 0 1

I have worked on Store front API by javascript SDK. I have checked there are not any api for add item in cart.

I have followed this shopify javascript SDK document.

https://shopify.github.io/js-buy-sdk/

There have api for add item in checkout but I want to add item in cart. So please help me which api is useful for it.

Replies 9 (9)

c10s
Shopify Partner
67 12 25

The Storefront API doesn't have the concept of a "cart", however a checkout is essentially the same thing.

You can either create and manage a cart locally then convert it to a checkout when the customer is ready to checkout or manage everything via the built in checkout mutations.

Suneel
Tourist
14 0 1

please explain the process of how to create local cart. I do not understand. 

I create remote website using with storefront api and I want to push items and fetch items from the exiting cart so please explain about it.

One more thing I face the issue because in our shopify store customer login is mandatory so please explain how to use customer email id and password for customer login for go to checkout.

c10s
Shopify Partner
67 12 25

A local cart being you storing the data client-side via something like localStorage.

For simplicity sake I'd avoid doing that and instead just use the Storefront API to manage a checkout, since you're using the Buy SDK here's an example of adding an item to cart.

I personally find the Buy SDK to be more trouble than it's worth and prefer to use the API directly via GraphQL, especially if you need to do more than the Buy SDK has out of the box. The main mutations for doing what you're trying to do are:

Suneel
Tourist
14 0 1

Is there any other way like as use custom app for this specific shopify store?

Can I get existing cart items and push new items in cart?

is it possible or not ?

c10s
Shopify Partner
67 12 25

Is there any other way like as use custom app for this specific shopify store?

Not sure what you mean by this.

Can I get existing cart items and push new items in cart?

Yes. Once you have your checkout id (eg. after running checkoutCreate) and you've added line items to your cart (checkoutLineItemsAdd) you can query for your checkout by id and get the lineItems:

{
  node(id: "CHECKOUT_ID_GOES_HERE") {
    ...on Checkout {
      id
      lineItems(first: 10) {
        edges {
          node {
            id
            title
            quantity
            // other data you want
          }
        }
      }
    }
  }
}

 

Suneel
Tourist
14 0 1

I have already used this process but these items not add to our Shopify shopping cart. these items direct add-in checkout.

when opening a shopping cart then this is showing blank in our store. But when I go to the checkout page using by checkout.weburl then these items display on the checkout page.

I want to add these items to the shopping cart because If a customer wants to change or remove anything then he can do it easily.

c10s
Shopify Partner
67 12 25

Are you building a custom storefront or a custom theme (.liquid files)?

I assumed a custom storefront since the question was posted in this forum category. If so, as mentioned above, there is no "cart". A checkout that hasn't been completed is the same thing as a cart.

If you are building a theme (which I think may be the case) you don't need the Storefront API and instead need to use the AJAX API (cart reference), that will add products to a "cart"

Suneel
Tourist
14 0 1

I want to create a remote website there display all products from my shopify store (https://www.rubiconsa.com/).

when customer open my shopify store (https://www.rubiconsa.com/) and go to my remote webiste and then add to cart any product from remote website then these items add in shopify store shopping cart. this is my need.

So I am using store front api and shopify store front javascript SDK for fetch products from shopify store. but when customer add products then these product added in checkout not shopping cart.

One more issue I face when I fetch single product by product id then I did not get "QuantityAvailable" in response by javascript SDK.

But when fetch single product by garphql and test it in by graphql app then get response but when run api in our server then get error.

So please explain how to addconnection product in queryroot in graphql by api with example of code.

AP13
Tourist
4 0 3

I'm currently building a custom storefront. Sometimes when attempting to checkoutCreate with new products returns a webUrl that's null. From what I've read and confirmed, it's because newly added products are not automatically made available to this type of sales channel. Do you have any suggestion on how to automatically make new products available for this sales channel to avoid this issue? From what I'm seeing I'll have to create a task to automatically do this every time a new product is added to inventory.