Javascript code after the Cart is loaded

Hello,

At the moment of $(document).ready(..., the Cart is not loaded, below is the page HTML. So the cart is rendered by some next-to-run Javascript.

I need to run own Javascript code *after* the Cart has been rendered.

How can I do that ? Should I wait after some custom event ?

Thank you !

<div class="system-page">
            <div id="sqs-cart-root">
  <script type="application/json">
    
    {"cart":{...CART_CONTENTS_AS_JSON.}}
  </script>
  <div id="sqs-cart-container"></div>
</div>
          </div>

9 hours ago, AndreiGh said:

Hello,

At the moment of $(document).ready(..., the Cart is not loaded, below is the page HTML. So the cart is rendered by some next-to-run Javascript.

I need to run own Javascript code *after* the Cart has been rendered.

How can I do that ? Should I wait after some custom event ?

Thank you !

<div class="system-page">
            <div id="sqs-cart-root">
  <script type="application/json">
    
    {"cart":{...CART_CONTENTS_AS_JSON.}}
  </script>
  <div id="sqs-cart-container"></div>
</div>
          </div>

The following code works fine on my testing

$(document).ready(function() {
  const cart = $('.showOnDesktop .icon--cart[href *="cart"]')[0];
  console.log(cart);
})

Try and let me know how it goes

That code retrieves the floating cart icon, not the actual cart contents, on the "cart" page (the products added in the cart, the "checkout" button) <-- these cart HTML is the one I want to modify (the DIVs with class cart-container, cart-summary).

Thank you !

Hi! I am looking to add a floating cart to my site - would love your help if you found a way!

Quote

 

I need to run own Javascript code *after* the Cart has been rendered.

How can I do that ? Should I wait after some custom event ?

 

A little late with an answer.

Let us know how it goes.