Checkout.liquid JQuery wait for shipping methods to load

Thomas_Lang1
Shopify Partner
156 4 31

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
Mircea_Piturca
Shopify Partner
1459 39 284

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

 

Finally—Add variant descriptions to your products
0 Likes
Thomas_Lang1
Shopify Partner
156 4 31

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
Shopify Partner
26 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
shahzad-hafeez
Tourist
4 0 1

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
Tourist
6 0 1

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

 

0 Likes
Mircea_Piturca
Shopify Partner
1459 39 284

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

Finally—Add variant descriptions to your products
adearriba
Tourist
6 0 1

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.

0 Likes