Create Custom Product in Shopify

Question

I need to create the custom product by the Shopify Storefront.

Documentation link: http://docs.shopify.com/api/product#create

I have tried the following code:

$('#addProduct').click(function() {
        $.ajax({
            url:'https://xxxxxx:[email protected]/admin/products.json',
            type: 'POST',
            contentType : 'application/json',
            dataType: 'json',
            data: {
                  "product": {
                    "title": "Burton Custom Freestlye 151",
                    "body_html": "<strong>Good snowboard!</strong>",
                    "vendor": "Burton",
                    "product_type": "Snowboard",
                    "tags": "Barnes & Noble, John's Fav, \"Big Air\""
                  }
                },
            success: function(response) {
                console.log(response);
            },
            error: function(xhr) {
                console.log(xhr.statusText);
            }
        }).done(function(data) {
            console.log(data);
        });
    });

The above code shows the following error in Chrome console while ajax request:

OPTIONS https://rmisys.myshopify.com/admin/products.json 405 (Not Allowed) jquery-1.10.2.js:8706 OPTIONS https://rmisys.myshopify.com/admin/products.json No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://rmisys.myshopify.com' is therefore not allowed access. jquery-1.10.2.js:8706 XMLHttpRequest cannot load https://rmisys.myshopify.com/admin/products.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://rmisys.myshopify.com' is therefore not allowed access. design-your-shirt:1 error

Answer 1

After searching for a long time, I found the solution.

The problem is Cross-Origin Resource Sharing(CORS).

http://en.wikipedia.org/wiki/Cross-origin_resource_sharing

This is used to prevent the CSRF Protection.

https://docs.djangoproject.com/en/1.4/ref/contrib/csrf/

In most cases the API should accept requests with Same Origin Policy http://en.wikipedia.org/wiki/Same-origin_policy

So,

If we request from "http" host means, we got the following error for AJAX request from Shopify:

No 'Access-Control-Allow-Origin' header is present on the requested resource.

The solution is to redirect the users to "https" when they come to our website using the "http" protocol.

I tried with the following additional code and successfully added custom products.

<script>
window.onload = RedirNonHttps();

function RedirNonHttps() {
    if (location.href.indexOf("https://") == -1) {
        location.href = location.href.replace("http://", "https://");
    }
}
</script>

NOTE: If we add the custom product from the Client Side with a script it is not secure because keys are then publicly available, the users can do whatever they want with that API key. So make to keep the Secure Auth and then client side script interact with that Secure Auth.

I hope this answer gives ideas of CORS (Cross-Origin Resource Sharing) for beginners.