How to add items to the cart using the Shopify API

Question

I'm working on a custom web app using the Shopify API. The idea here is to use the app as the exclusive storefront and just make requests to the Shopify API. I've set up a private application in my Shopify account to do this.

I have no problem pulling in products from the api (using the /admin/products.json API endpoint). But I'm having a heck of a time trying to get the product added to the cart from my domain using the Ajax API and specifically the /cart/add.js API endpoint.I get the proper JSON response when using my REST client (I'm using the Google Chrome extension Postman), but I can't for the life of me get this to work within my own app.

In my app, I'm sending an AJAX request to my own server, which in turn calls the API endpoint using curl and returns a JSON response(to avoid the cross-domain problem/having to use JSONP). Even though both JSON responses are identical, the item is not being added to the cart in my web app.

Sample Code:

Javascript:

$(".add-to-cart").on('click', function() {
     // sample initialization code here
     // ...
        $.post("/url-to-server", {
            id: id, // this is the variant ID
            quantity: 1
        }, function(response) {
                    // more checking to make sure we have proper response
        });

        return false;
    });

Server Side Code (PHP):

protected function _ajax_add_item_to_cart()
{
    $args = $this->input->post();

    // custom app method that makes curl request
    $result = $this->_shopify_request('post', 'cart/add.js', $args);

    // custom app method that returns valid JSON
    return $this->json_response(true, 'Item Added!', [
        'item' => $result
    ]);
}

Sample JSON response (same result when using Postman REST client):

{
  "id": 313743963,
  "title": "All Natural GumBits 16oz",
  "price": 3800,
  "line_price": 3800,
  "quantity": 1,
  "sku": "",
  "grams": 0,
  "vendor": "horseshow",
  "properties": null,
  "variant_id": 313743963,
  "url": "/products/all-natural-gumbits-16oz",
  "image": "http://cdn.shopify.com/s/files/1/0235/4155/products/gumbits.png?43",
  "handle": "all-natural-gumbits-16oz",
  "requires_shipping": true
}

This is the first app that I've built using the Shopify API, so I'd appreciate any guidance that I can get. I looked into signing up with a partner application and using the OAuth authentication, but that seems like overkill for what I need to do since I don't want to use the Shopify storefront and I don't plan on offering my app in the Shopify App Store.

hjblok hjblok · Accepted Answer · 2013-05-22T06:51:55

There seems to be a ~~undocumented~~ feature (documented here) to forward a customer directly to the checkout page (with prefilled cart). You just need to construct a special URL, for example:

# order 1 item of product with variant_id 300823433
http://murray-inc9186.myshopify.com/cart/300823433:1

or

# order 1 item  of product with variant_id 300823433
# order 2 items of product with variant_id 261826220
http://murray-inc9186.myshopify.com/cart/300823433:1,261826220:2

Maybe you can use this special URL instead of AJAX POSTing to the cart.

How to add items to the cart using the Shopify API

1 Answers