Checkout button issue from cart (beyond theme)

Technical Q&A
1

The checkout button on the cart popup get locked on the loading icon in the following circumstance

  • click checkout button, reach shipment/information page

  • go back to previous page (using browser control and not the on screen “return to cart” button)

  • the checkout button has the loading widget instead of the word “checkout”, button works fine as usual, but the loading widget doesnt go away

The data-loading attribute for the checkout button’s html gets stuck to true

On desktop, when the user clicks the browser back button from the shipment details page, the site returns to the homepage with the cart appearing empty, the loading widget works fine with the checkout text appearing

When any product is added, it appears along with the previously added cart item (which was hidden i assume)

On mobile, this doesnt seem to happen, but the loading widget issue appears

2

Add this code in cart.liquid file

// Find the element representing the checkout button
var checkoutButton = document.querySelector('.cart-popup__checkout');

// Listen for the cart popup close event (assuming it has a close button or a similar trigger)
var cartPopupCloseButton = document.querySelector('.cart-popup__close-button');
cartPopupCloseButton.addEventListener('click', function() {
  // Reset the data-loading attribute to false when the cart popup is closed
  checkoutButton.setAttribute('data-loading', 'false');
});

// Listen for the browser back button event (assuming you can detect it)
window.addEventListener('popstate', function() {
  // Reset the data-loading attribute to false when returning from the shipment/information page
  checkoutButton.setAttribute('data-loading', 'false');
});