Show total sale badge in medium carts & make it display below price (#…

…3879) * Show total sale badge in medium carts * Add markup to cart line item row to enable it to be displayed as flex * Add styling to display price and sale badge as flex * Revert product price being displayed as block * Rename sale badge and price wrapper * Hide line-total sale badge on mobile * Change class name on total price and sale badge wrapper again
woocommerce · Feb 23, 2021 · 6401e17 · 6401e17
1 parent 12e8f4a
commit 6401e17
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 19 deletions.
diff --git a/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-item-row.js b/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-item-row.js
@@ -256,22 +256,24 @@ const CartLineItemRow = ( { lineItem = {} } ) => {
 				</div>
 			</td>
 			<td className="wc-block-cart-item__total">
-				<ProductPrice
-					currency={ totalsCurrency }
-					format={ productPriceFormat }
-					price={ totalsPrice.getAmount() }
-				/>
-
-				{ quantity > 1 && (
-					<ProductSaleBadge
-						currency={ priceCurrency }
-						saleAmount={ getAmountFromRawPrice(
-							saleAmount,
-							priceCurrency
-						) }
-						format={ saleBadgePriceFormat }
+				<div className="wc-block-cart-item__total-price-and-sale-badge-wrapper">
+					<ProductPrice
+						currency={ totalsCurrency }
+						format={ productPriceFormat }
+						price={ totalsPrice.getAmount() }
 					/>
-				) }
+
+					{ quantity > 1 && (
+						<ProductSaleBadge
+							currency={ priceCurrency }
+							saleAmount={ getAmountFromRawPrice(
+								saleAmount,
+								priceCurrency
+							) }
+							format={ saleBadgePriceFormat }
+						/>
+					) }
+				</div>
 			</td>
 		</tr>
 	);

diff --git a/assets/js/blocks/cart-checkout/cart/full-cart/style.scss b/assets/js/blocks/cart-checkout/cart/full-cart/style.scss
@@ -150,6 +150,25 @@ table.wc-block-cart-items {
 	display: flex;
 }
 
+.wc-block-cart-item__total-price-and-sale-badge-wrapper {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+
+	.wc-block-components-sale-badge {
+		margin-top: $gap-smallest;
+	}
+}
+
+.is-small,
+.is-mobile {
+	.wc-block-cart-item__total {
+		.wc-block-components-sale-badge {
+			display: none;
+		}
+	}
+}
+
 .is-medium,
 .is-small,
 .is-mobile {
@@ -202,10 +221,6 @@ table.wc-block-cart-items {
 				.wc-block-components-formatted-money-amount {
 					display: inline-block;
 				}
-
-				.wc-block-components-sale-badge {
-					display: none;
-				}
 			}
 		}
 	}