javascript - Need Example of Using JQuery with Shopify to Create Collection and Use Returned ID to Add Products

Question

844 votes

1 answers

javascript - Need Example of Using JQuery with Shopify to Create Collection and Use Returned ID to Add Products

I'm very new to web development. I am looking at these docs and I need a more complete example to follow.

CustomCollection - Shopify API - Developer Resources (http://docs.shopify.com/api/customcollection#create)

I need an example of using a jQuery script to create a custom collection (using just a title) and then add multiple products to it. The main part I do not understand yet is how to obtain the collection ID (which will be in the response to the POST /admin/custom_collections.json).

Once I have the collection ID, I can use it to as shown here to add products (i.e., create new Collect objects).

Collect - Shopify API - Developer Resources (http://docs.shopify.com/api/collect#create)

It would really help to see a complete but simple example. Here's what I have so far. (And var new_collection_title comes from the HTML form.)

<script>

$(document).ready(function () {

  $("#submit-table").click(function(e) {     
    e.preventDefault();

    var collection_id;
    function createCollection(){

            var collection_title = $("#new_collection_title").val();
            var params = {
                type: 'POST',
                url: '/admin/custom_collections.json',
                data: 'title='+collection_title,
                dataType: 'json',
                success: function(response) { 
                    console.log(response);
                    collection_id = response.id;
                    console.log(collection_id);
                },
                error: function() {
                    console.log(response);
                }
            };
            $.ajax(params);

  };
  createCollection();
});
TODO: add function that puts products into collection just created...
</script>

Here is the response I'm getting:

    Use of getPreventDefault() is deprecated.  Use defaultPrevented instead. jquery.min.js:17
"length is 11" test_collection:776
"collection_title: [MyFirstCollection]" test_collection:794

"log: {"custom_collection":{"title":"MyFirstWishList1"}}" test_collection:795

"create collection failed! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<script type="text/javascript">window.NREUM||(NREUM={});NREUM.info={"beacon":"beacon-5.newrelic.com","errorBeacon":"bam.nr-data.net","licenseKey":"xxxxxxxxxx","applicationID":"151","transactionName":"zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz=","queueTime":8,"applicationTime":17,"ttGuid":"","agentToken":null,"agent":"js-agent.newrelic.com/nr-476.min.js"}</script>
<script type="text/javascript">(window.NREUM||(NREUM={})).loader_config={xpid:"VQQUUFNS"};window.NREUM||(NREUM={}),__nr_require=function(t,e,n){function r(n){if(!e[n]){var o=e[n]={exports:{}};t[n][0].call(o.exports,function(e){var o=t[n][1][e];return r(o?o:e)},o,o.exports)}return e[n].exports}if("function"==typeof __nr_require)return __nr_require;for(var o=0;o<n.length;o++)r(n[o]);return r}({ABC4zc:[function(t,e){fu"[вЂ¦] test_collection:817

The error isn't helpful to me. Anyone see anything interesting there?

Thanks

Undefined asked

2022-03-12

Source

Didn't find the answer?

Our community is visited by hundreds of Shopify development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Answer

Solution:

Not tested but should help you along.

<script>
$(document).ready(function () {
function createCollection(collection_title){    
 $.ajax{
            type: 'POST',
            url: '/admin/custom_collections.json',
            data: {"title":collection_title},
            dataType: 'json',
            success: function(response) { 
                console.log(response);
                collection_id = response.id;
                console.log(collection_id);
            },
            error: function() {
                console.log(response);
            }
        };
    return collection_id;
}
$("#submit-table").click(function(e) {     
e.preventDefault();
var collection_title = $("#new_collection_title").val();      
var collection_id=createCollection(collection_title);
});
</script>

javascript - Need Example of Using JQuery with Shopify to Create Collection and Use Returned ID to Add Products

Answer

Solution:

Didn't find the answer?

Similar questions

Write quick answer