Force hiding block-related price labels within non-block mini carts. …

…Fix unit price showing/moving in cart/mini cart and checkout block.
vendidero · Dec 3, 2024 · e4c01ac · e4c01ac
1 parent 5667987
commit e4c01ac
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 32 deletions.
diff --git a/assets/css/layout.scss b/assets/css/layout.scss
@@ -86,22 +86,14 @@ body.theme-astra {
  * Hide (block) price labels added via the woocommerce_get_item_data filter
  * while displaying classic shortcodes. Fallback-use only.
  */
-.woocommerce-cart, .woocommerce-checkout {
+.woocommerce-cart, .woocommerce-checkout, .woocommerce-mini-cart {
   dl.variation {
     dt[class*="variation-gzd-"], dd[class*="variation-gzd-"] {
       display: none !important;
     }
   }
 }
 
-.woocommerce-mini-cart {
-  dl.variation {
-    dt[class*="variation-gzd-"] {
-      display: none !important;
-    }
-  }
-}
-
 .includes_tax, .tax_label {
   display: none !important;
 }

diff --git a/assets/js/blocks/checkout/slotfills/order-meta.js b/assets/js/blocks/checkout/slotfills/order-meta.js
@@ -26,33 +26,38 @@ const DomWatcher = ({
     }, [] );
 
     useEffect(() => {
-        const orderItems = document.getElementsByClassName( 'wc-block-components-order-summary-item' );
-
-        for ( let item of orderItems ) {
-            const unitPrice   = item.getElementsByClassName( "wc-block-components-product-details__gzd-unit-price" )[0];
-            const notGzdElements = item.querySelectorAll( "li:not([class*=__gzd])" )[0];
+        /**
+         * Use a timeout as tweak to make sure DOM is available.
+         */
+        window.setTimeout( () => {
+            const orderItems = document.getElementsByClassName( 'wc-block-components-order-summary-item' );
+
+            for ( let item of orderItems ) {
+                const unitPrice   = item.getElementsByClassName( "wc-block-components-product-details__gzd-unit-price" )[0];
+                const notGzdElements = item.querySelectorAll( "li:not([class*=__gzd])" )[0];
+
+                if ( notGzdElements ) {
+                    notGzdElements.classList.add( "wc-not-gzd-summary-item-first" );
+                }
 
-            if ( notGzdElements ) {
-                notGzdElements.classList.add( "wc-not-gzd-summary-item-first" );
-            }
+                if ( unitPrice ) {
+                    const priceNode = item.getElementsByClassName( "wc-block-components-order-summary-item__total-price" )[0];
+                    const unitPriceNew = priceNode.getElementsByClassName( "wc-gzd-unit-price" )[0];
 
-            if ( unitPrice ) {
-                const priceNode = item.getElementsByClassName( "wc-block-components-order-summary-item__total-price" )[0];
-                const unitPriceNew = priceNode.getElementsByClassName( "wc-gzd-unit-price" )[0];
+                    if ( unitPriceNew ) {
+                        priceNode.removeChild( unitPriceNew );
+                    }
 
-                if ( unitPriceNew ) {
-                    priceNode.removeChild( unitPriceNew );
-                }
+                    const newUnitPrice = document.createElement("div" );
+                    newUnitPrice.className = 'wc-gzd-unit-price';
+                    newUnitPrice.innerHTML = unitPrice.innerHTML;
 
-                const newUnitPrice = document.createElement("div" );
-                newUnitPrice.className = 'wc-gzd-unit-price';
-                newUnitPrice.innerHTML = unitPrice.innerHTML;
+                    unitPrice.classList.add( "wc-gzd-unit-price-moved" );
 
-                unitPrice.classList.add( "wc-gzd-unit-price-moved" );
-
-                priceNode.appendChild( newUnitPrice );
+                    priceNode.appendChild( newUnitPrice );
+                }
             }
-        }
+        }, 500 );
     }, [
         cart.cartItems
     ] );

diff --git a/assets/js/blocks/mini-cart/style.scss b/assets/js/blocks/mini-cart/style.scss
@@ -1,5 +1,13 @@
 @import '../cart-checkout/items';
 
-.wp-block-woocommerce-mini-cart-contents .wc-block-components-totals-item__description {
-  display: none !important;
+.wp-block-woocommerce-mini-cart-contents {
+  .wc-block-components-totals-item__description {
+    display: none !important;
+  }
+
+  ul.wc-block-components-product-details {
+    li.wc-block-components-product-details__gzd-unit-price {
+      display: block !important;
+    }
+  }
 }