Checkout.liquid JQuery wait for shipping methods to load

[Thomas_Lang1]

Hi, 

On a shopify PLUS store I'm trying to customize the checkout.liquid at the shipping method select page, so far so good, but my script only works after a refresh. This is probably due to the fact that my script runs before the shipping methods are all loaded :(

Is there any event I can listen for, that tells me all shippingmethods have been loaded? 

I tried to use the shopify.onCartupdate event, because once the shipping methods are loaded the first one is applied to the checkout by default (added to the checkout total) but unfortunately, and maybe logicallly the checkout does not update the cart for the shipping method.

Any help would be appreciated.

[Mircea_Piturca]

Hi Thomas,

Not sure on the JS setup but this can be a race issue.

On checkout you have 2 custom events: page:load and page:change, see https://help.shopify.com/en/themes/development/layouts/checkout#page-events

Hard to say but page:load may help

[Thomas_Lang1]

Hi there,

I got it working putting my javascript code inside this function:

if(Shopify.Checkout.step == 'shipping_method') {
        $(document).on('readystatechange', function(
// My code for manipulating shipping options
          });
        }

[PixApps]

The onreadystatechange listener didn't work for me - needed to add a dirty setTimeout to check for the shipping input, and proceed with the function from there. A check for when no shipping rates are returned would probably be essential as well.

var _shippingLoaded = function(){
if (Shopify.Checkout.step == 'shipping_method') {
if ($('[name="checkout[shipping_rate][id]"]').length == false) {
    setTimeout(_shippingLoaded(), 100);
}

// The rest of the code goes here.
}   
}  

[shahzad-hafeez]

I have tried all the above-mentioned ways to update the shipping options but not succeeded. I have found out DOMNodeInserted event to resolve this race problem. Here is my code:

$(document).off("DOMNodeInserted", ".section__content").on("DOMNodeInserted", ".section__content", function (evt) {	
	if ( $('[name="checkout[shipping_rate][id]"]') )  {
		// code for manipulating shipping options
	}
}); 

[adearriba]

Hello, I just wanted to add that, if you have access to the checkout.liquid file, I am creating a JS library to modify the checkout page with ease. I already have a couple of functionality working that might help you. More is coming soon.

It is free to use: https://github.com/adearriba/ShopifyCheckoutJS

For your exact issue, you can use:

$checkout.on('load:shipping', function(e) { 
    //your code here
    console.log(e); 
})

[Mircea_Piturca]

This is what I use now. No jQuery or other libraries.

(function CheckoutShipping() {
  'use strict';

  // Perform changes only on the shipping_method step
  if (Shopify.Checkout.step !== 'shipping_method') return;

  // Initialize after Shopify renders the checkout
  document.addEventListener('page:load', init);
  // Reinitialize on DOM refresh
  document.addEventListener('page:change', init);

  // Logic
  function init() {
  }
})();

Wrap in an IFFY, exit fast, listen to DOM refresh (adding a discount code will refresh the whole page).

More examples here: https://sections.design/blogs/shopify/modifying-checkout-template

[adearriba]

Great for modifying only shipping page. If you want to add more custom logic or additional fields to attributes in different steps of the checkout, then something like https://github.com/adearriba/ShopifyCheckoutJS would be more helpful.