ShopifyPlus - Adding a product to cart on checkout and dynamically update cart

Highlighted
New Member
2 0 0

Hi all, 

I am curious as i have seen other shopify sites do this. How do you update the cart items on the checkout liquid without reloading the page? I am using the shopify ajax api to make the request through "add" product api call. The product gets added to the cart line items object and you can see that through the console, but on success i want to reload the liquid to reflect the change? I don't want to reload the entire page though and lose the customers information that they have filled out.  I have tried a few different methods with no luck. Please see my code of shipping options (products) that will display on the checkout page: 

 

<script>
//   if unwrapped
  36675002269858 
//   if wrapped
  36675002302626 
//   if birthday wrapped
  36675002335394 
//   if hearts & anniversary
  36675002368162
//   if boxed mailer
  36675002400930
  
  
  
  
  jQuery(document).ready(function(){
    var $this = jQuery(this),
        giftBoxValue;
    
    jQuery('[name ="checkout_field_gift_box"]').change(function(){
      
      giftBoxValue = Number(this.value);
      
      if(giftBoxValue) {
        
        console.log(giftBoxValue);
      
        jQuery.ajax({
          type: 'POST',
          url: '/cart/add.js',
          data: {quantity: 1, id:giftBoxValue},
          dataType: 'json',
          success:function(cart) {
            
            // show new updated cart with added product 

          }
        })
      
      }
      
      
    }) 
  })
  
  
  
  
  
  
  
</script>

<div class="section section--addons-gift-wrap">
    <div class="section__header">
      <h3 class="section__title" id="section-gift-wrap-title">
          Gift Wrap Options:
      </h3>
    </div>

    <div class="section__content">
        
        <div class="fieldset">
 
			<div class="field field--required field--show-floating-label">
            <div class="field__input-wrapper field__input-wrapper--select">
                <label class="field__label field__label--visible" for="checkout_field_gift_box">Gift Wrap</label>
                <select
                    name="checkout_field_gift_box" id="checkoutFieldGiftBox"
                    class="field__input field__input--select">
                    <option value="36675002269858">Eco-Friendly Gift Box (unwrapped) +$5.99</option>
                    <option value="36675002302626">Eco-Friendly Gift Box (wrapped - any occasion) +$9.99</option>
                    <option value="36675002335394">Eco-Friendly Gift Box (wrapped - birthday) +$9.99</option>
                    <option value="36675002368162">Eco-Friendly Gift Box (wrapped - hearts/anniversary)
                        +$9.99</option>
                    <option value="36675002400930">Eco-Friendly Gift Box Mailer (all occasion) +$6.99</option>
                </select> 
                <div class="field__caret">
                    <svg class="icon-svg icon-svg--color-adaptive-lighter icon-svg--size-10 field__caret-svg" role="presentation" aria-hidden="true" focusable="false"> <use xlink:href="#caret-down"></use> </svg>
                  </div>
            </div>
            <small>Have this order packed in a gift box. Includes gift box, crinkle paper, ribbon, and bow
                decoration.</small>
            </div>

        </div> 

    </div> 
  </div>

 

 

0 Likes
Highlighted
Shopify Expert
498 9 96

You can't reload the liquid without reloading the entire page. You'll need to insert the new product yourself with javascript. You'll have to include the code that injects the new product in a 'page:change' event as well because Shopify does dynamically update the page in certain cases, like when the customer enters a discount code for example.

0 Likes