Checkout.liquid JQuery wait for shipping methods to load

Shopify Partner
132 4 12

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.

0 Likes
Shopify Partner
1353 20 187

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

 

https://sections.design tips, tricks & Shopify sections
0 Likes
Shopify Partner
132 4 12

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
          });
        }

 

 

0 Likes
Highlighted
Shopify Partner
23 0 1

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.
}
}

 

 

0 Likes