Quantcast
Channel: Opinion: Shopify Community - Shopify & Ecommerce Jobs
Viewing all articles
Browse latest Browse all 7259

Need Assistance with AJAX API to add multiple items to cart - Code modification needed by Chris Cozzens

$
0
0

Hello All,

My name is Chris , I am fairly new to shopify and need some assistance.  

My Store name is new-vision-nutritio.myshopify.com

I am looking for someone who is familiar with AJAX and jquery to help me out here.  My goal is to get multiple products to add to the cart with one button click.  Here are the varient IDs and quantities of each that i would like the button to add. 

2339538243:4,
2341286915:4,
2499653571:3,
2499654147:3 
2497227651:2,

2728168259:2,

2496918595:2, 

2496989635:1,

I am just not familiar with how to queue up each of them, any help would be amazing. I can pay but it will not be much. 

 

Heres my code below : this works for one item.

 

  1. added a class to the button called "buy-it-now-button"
    <a class="buy-it-now-button">Buy It Now!</a>
  2. added data attributes for a jquery listener:
    <a class="buy-it-now-button" data-id="PRODUCTID" data-qty="1">Buy It Now</a>

     

  3. created a jquery listener at the bottom of my theme.liquid:
    <script>
        //WHEN THE PAGE LOADS START LISTENING
        $(function(){
    
          //IF SOMEONE CLICKS THE BUTTON WITH THE AFFORMENTIONED CLASS
          $('.buy-it-now-button').click(function(){
            //GET TEH PRODUCT ID FROM THE CLICKED LINK
            var id = $(this).attr('data-id');
            //GET TEH QUANTITY FROM THE CLICKED LINK
            var quantity = $(this).attr('data-qty');
    
            //POST IT
            $.ajax({
              type: "POST",
              url: '/cart/add.js?quantity='+quantity+'&id='+id,
              //SEND THEM TO THE CART AFTER SUCCESS
              success: function(){
                window.location.href = "/cart"; 
              },
    
             
             //THEM TO THE CART ANYWAY   - FOR TESTING - WILL CHANGE 
              error: function(){
               window.location.href = "/cart"; 
              }
            });
          })
        })</script>

     

  4. Added jquery to the head section of the theme.liquid:
    {{ 'api.jquery.js' | shopify_asset_url | script_tag }}

Viewing all articles
Browse latest Browse all 7259

Trending Articles