add to cart gift wrapping via checkbox with AJAX on Brooklyn Theme

Highlighted
Shopify Partner
14 0 2

hey Shopify Fam, 

I'm needing some help with adding a gift wrapping option using a checkbox on the cart drawer in the Brooklyn theme. so far, I've manged to add an html checkbox and call a function to try and post a product. But all I get is a 404 message from the AJAX, POST. 

I've tried installing cartjs.org too. But I want to learn how to post a product to the cart with AJAX. 

Html: 

{%raw%}<div id="is-a-gift" style="clear: left; margin: 30px 0" class="clearfix rte">
    <p>
      <input id="gift-wrapping" type="checkbox" onchange="giftWrapping()" style="float: none" />
      <label for="gift-wrapping" style="display:inline; padding-left: 5px; float: none;">
      Add Gift Wrap for $5.95
      </label>
    </p>
</div>
{%endraw%}

script: 

 function giftWrapping(){
       console.log('checkbox was checked');
       $.ajax({
						type:"POST",
						dataType: "json",
         data:{
  quantity: 1,
  id: 211980451864
},
						success: function (response){
						
                         //sucess


                        }});
    }

Any help woulr be greatly appreciated!! 

Chris Weachock
0 Likes
Shopify Partner
14 0 2

UPDATE: SO. I Think I figured it out! *dancing kirby <(^.^<) (>^.^)> **

After looking in the developer console and reading some on the forums turns out my variant for the product was wrong. It must have been the product id not the variant id. I changes from add.js to update.js and replaced my variant the format for the updates. 

Here is my updated code: 

  <script>
    function giftWrapping(){
       console.log('checkbox was checked');
          jQuery.post('/cart/update.js', {
          updates: { 2220248498200: 1,}
        });
    
    }   </script>

bear in mind this is with ajax already added with the theme (brooklyn). 

if you want me to do this for your shop respond to this post! or throw me some money!

https://www.paypal.me/cWeachock/20

-Chris

Chris Weachock
0 Likes
Excursionist
11 1 2

Hi Chris,

I would like to add this to my shopify store.

Could you please explain exactly where I should each part of your code?

 

thanks

0 Likes