Merge pull request #119 from commercelayer/fix-minicart

Add connected and disconnected callbacks to better manage minicart lifecycle

Author: marcomontalbano

packages/drop-in/src/components/cl-cart-link/cl-cart-link.tsx

@@ -27,14 +27,23 @@ export class ClCartLink {
   @State() minicart: HTMLClCartElement | null = null
   @State() href: string | undefined
 
-  componentWillLoad(): void {
-    this.host.setAttribute("cl-hydrated", "")
-    this.minicart = this.host.querySelector("cl-cart")
+  connectedCallback(): void {
+    this.minicart ??= this.host.querySelector("cl-cart")
 
     if (this.minicart !== null) {
-      document.body.appendChild(this.minicart)
       this.minicart.type = "mini"
+      document.body.appendChild(this.minicart)
+    }
+  }
+
+  disconnectedCallback(): void {
+    if (this.minicart !== null) {
+      this.host.appendChild(this.minicart)
     }
+  }
+
+  componentWillLoad(): void {
+    this.host.setAttribute("cl-hydrated", "")
 
     listenTo("cl-cart-update", async () => {
       if (this.href === undefined || !(await isValidUrl(this.href))) {

packages/drop-in/src/components/cl-cart/cl-cart.tsx

@@ -189,6 +189,18 @@ export class ClCart {
     }
   }
 
+  connectedCallback(): void {
+    if (this.type === "mini") {
+      document.body.classList.toggle(this.openDirective, this.open)
+    }
+  }
+
+  disconnectedCallback(): void {
+    if (this.type === "mini") {
+      document.body.classList.toggle(this.openDirective, false)
+    }
+  }
+
   @Watch("open")
   watchOpenHandler(opened: boolean): void {
     if (this.type === "mini") {