[TASK] Allow more than one CartPreview in page

Build/Sources/JavaScript/add_to_cart.js

@@ -89,29 +89,30 @@ document.addEventListener('DOMContentLoaded', () => {
     const { net } = response;
     const { gross } = response;
 
-    const miniCart = document.querySelector('#cart-preview');
-    const countElement = miniCart.querySelector('.cart-preview-count');
-    const netElement = miniCart.querySelector('.net');
-    const grossElement = miniCart.querySelector('.gross');
-    const linkElement = miniCart.querySelector('.checkout-link');
-
-    if (countElement) {
-      countElement.innerHTML = count;
-    }
-    if (netElement) {
-      netElement.innerHTML = net;
-    }
-    if (grossElement) {
-      grossElement.innerHTML = gross;
-    }
-
-    if (linkElement) {
-      if (count > 0) {
-        linkElement.style.display = 'block';
-      } else {
-        linkElement.style.display = 'none';
+    const miniCarts = document.querySelectorAll('.cart-preview');
+    miniCarts.forEach((miniCart) => {
+      const countElement = miniCart.querySelector('.cart-preview-count');
+      const netElement = miniCart.querySelector('.net');
+      const grossElement = miniCart.querySelector('.gross');
+      const linkElement = miniCart.querySelector('.checkout-link');
+
+      if (countElement) {
+        countElement.innerHTML = count;
       }
-    }
+      if (netElement) {
+        netElement.innerHTML = net;
+      }
+      if (grossElement) {
+        grossElement.innerHTML = gross;
+      }
+      if (linkElement) {
+        if (count > 0) {
+          linkElement.style.display = 'block';
+        } else {
+          linkElement.style.display = 'none';
+        }
+      }
+    });
 
     dispatchCustomEvent(
       'extcode:minicart-was-updated',

Documentation/Changelog/10.0/Breaking-614-AllowMoreThanOneCartPreviewInPage

@@ -0,0 +1,27 @@
+.. include:: ../../Includes.rst.txt
+
+=======================================================================
+Breaking: #614 - Allow more than one CartPreview (aka minicart) in page
+=======================================================================
+
+See `Issue 614 <https://github.com/extcode/cart/issues/614>`__
+
+Description
+===========
+
+The `id` "cart-preview" was removed from the default template file.
+The provided JavaScript now uses the `class` "cart-preview" instead of the `id` "cart-preview".
+
+
+Affected Installations
+======================
+
+All installations using the CartPreview with an own template without the
+`class` "cart-preview".
+
+Migration
+=========
+
+Replace `id` "cart-preview" with `class` "cart-preview" in the CartPreview template.
+
+.. index:: Frontend

Documentation/Changelog/10.0/Feature-614-AllowMoreThanOneCartPreviewInPage

@@ -0,0 +1,21 @@
+.. include:: ../../Includes.rst.txt
+
+======================================================================
+Feature: #614 - Allow more than one CartPreview (aka minicart) in page
+======================================================================
+
+See `Issue 614 <https://github.com/extcode/cart/issues/614>`__
+
+Description
+===========
+
+You can now integrate several CartPreview plugins (aka minicarts) on one page.
+The provided JavaScript now uses the `class` "cart-preview" instead of the `id` "cart-preview".
+The `id` "cart-preview" was removed from the default template file.
+
+Impact
+======
+
+No direct impact.
+
+.. index:: Backend, API

Documentation/Changelog/10.0/Index.rst

@@ -18,3 +18,13 @@ Breaking
    :glob:
 
    Breaking-*
+
+Features
+--------
+
+.. toctree::
+   :maxdepth: 1
+   :titlesonly:
+   :glob:
+
+   Feature-*

Resources/Private/Templates/Cart/CartPreview/Show.html

@@ -4,7 +4,7 @@
 <f:layout name="Plain"/>
 
 <f:section name="main">
-    <div id="cart-preview" class="tx-cart cart-preview">
+    <div class="tx-cart cart-preview">
         <div class="cart-preview-content">
             <span class="cart-preview-count">{cart.count}</span> <f:translate key="tx_cart.plugin.mini_cart.products_in_cart" />
         </div>
@@ -15,4 +15,4 @@
         </div>
     </div>
 </f:section>
-</html>
+</html>

Resources/Public/JavaScript/add_to_cart.js

@@ -83,27 +83,29 @@
       const { count } = response;
       const { net } = response;
       const { gross } = response;
-      const miniCart = document.querySelector("#cart-preview");
-      const countElement = miniCart.querySelector(".cart-preview-count");
-      const netElement = miniCart.querySelector(".net");
-      const grossElement = miniCart.querySelector(".gross");
-      const linkElement = miniCart.querySelector(".checkout-link");
-      if (countElement) {
-        countElement.innerHTML = count;
-      }
-      if (netElement) {
-        netElement.innerHTML = net;
-      }
-      if (grossElement) {
-        grossElement.innerHTML = gross;
-      }
-      if (linkElement) {
-        if (count > 0) {
-          linkElement.style.display = "block";
-        } else {
-          linkElement.style.display = "none";
+      const miniCarts = document.querySelectorAll(".cart-preview");
+      miniCarts.forEach((miniCart) => {
+        const countElement = miniCart.querySelector(".cart-preview-count");
+        const netElement = miniCart.querySelector(".net");
+        const grossElement = miniCart.querySelector(".gross");
+        const linkElement = miniCart.querySelector(".checkout-link");
+        if (countElement) {
+          countElement.innerHTML = count;
         }
-      }
+        if (netElement) {
+          netElement.innerHTML = net;
+        }
+        if (grossElement) {
+          grossElement.innerHTML = gross;
+        }
+        if (linkElement) {
+          if (count > 0) {
+            linkElement.style.display = "block";
+          } else {
+            linkElement.style.display = "none";
+          }
+        }
+      });
       dispatchCustomEvent(
         "extcode:minicart-was-updated",
         {