Rendering main-cart-footer in a Dawn mini cart

Technical Q&A
1

I’ve been building a mini cart on Dawn following this tutorial. https://scratchlabsdigital.com/shopify-2-0-dawn-how-to-mini-cart/

Everything is working well except for the main-cart-footer. The getSectionsToRender function in cart.js selects the main-cart-footer by data-id attribute which is available on the cart page. When the cart api is called bundled section rendering returns the html for the main-cart-footer just fine.

1.jpg
1.jpg1869×1157 246 KB

2.jpg
2.jpg1869×1157 165 KB

When we are not on the cart page there is no dynamic id attribute is available. I have tried using the ‘main-cart-footer’ which is the static id of the section but the bundled section rendering doesn’t return the dynamic content inside of cart__blocks.

3.jpg
3.jpg1869×1157 278 KB

4.jpg
4.jpg1882×1157 205 KB

It’s not possible to hard code dynamic id attribute because it changes. I have also tried using the sections_url parameter available set to the context of ‘/cart’ and still get the empty area of the cart.
https://shopify.dev/api/ajax/reference/cart#bundled-section-rendering.

Anyone attempted this before or faced a similar issue?

2 Likes
2

I’m not sure its the proper solution and have tested it only on one theme but here’s what I did:

  1. Select all the DOM const dom = document.querySelectorAll("*")

  2. Loop through the DOM and find element that have ‘cart-footer’/‘cart-items’ ids.

  3. That yields 4 results - the 2 main sections and the actually sections with the dynamic id. shopify-section-template---[id]-cart-items or so.

  4. Now, we need to send the sections to cart/(add/update/whatever) endpoint. it for some reason, you should remove shopify-section- part and it will get you the html.

  5. All you have to do is loop thru the sections in response and add shopify-section- back to those section you removed it from.

1 Like