Show cart icon on Simple wp-admin (#39298)

* Added basic cart functionallity to wp-admin wpcom sites * changelog * Fixed typo in class name * Added ab-icon class so that the icon adapts to the profile colors * Return early if the site is not a WPCOM Simple site * Removed unnecessary padding from cart icon * The space between the cart icon and the dot is now of the same color as the active theme * Updated cart icon svg data to exclude a circular segment from the top right corner of the cart * Added default dot color for non-admin context
Automattic · Sep 13, 2024 · 158adac · 158adac
1 parent 529e45e
commit 158adac
Show file tree

Hide file tree

Showing 3 changed files with 122 additions and 1 deletion.
diff --git a/projects/packages/jetpack-mu-wpcom/changelog/add-cart-to-wp-admin b/projects/packages/jetpack-mu-wpcom/changelog/add-cart-to-wp-admin
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Added a shopping cart icon to the masterbar. This icon will be displayed when the user has items in the cart and liks to the checkout page.
diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-bar/wpcom-admin-bar.php b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-bar/wpcom-admin-bar.php
@@ -159,6 +159,66 @@ function wpcom_replace_wp_logo_with_wpcom_all_sites_menu( $wp_admin_bar ) {
 }
 add_action( 'admin_bar_menu', 'wpcom_replace_wp_logo_with_wpcom_all_sites_menu', 11 );
 
+/**
+ * Adds the Cart menu to the WordPress admin bar.
+ *
+ * @param WP_Admin_Bar $wp_admin_bar The WP_Admin_Bar core object.
+ */
+function wpcom_add_shopping_cart( $wp_admin_bar ) {
+	// Return if the site isn't a simple site
+	if ( ! defined( 'IS_WPCOM' ) || ! IS_WPCOM ) {
+		return;
+	}
+
+	// Include the shopping cart functionality from the specified path.
+	require_once WP_CONTENT_DIR . '/admin-plugins/wpcom-billing/shopping-cart.php';
+
+	// Get the current blog ID.
+	$blog_id = get_current_blog_id();
+
+	// Retrieve the current user's shopping cart for the current blog.
+	$cart = \Store_Shopping_Cart::get_existing_cart(
+		array(
+			'blog_id' => $blog_id,
+			'user_id' => get_current_user_id(),
+		)
+	);
+
+	// If the cart is empty (no products), do not add the cart menu.
+	if ( ! $cart->get_product_slugs() ) {
+		return;
+	}
+
+	// Get the Calypso site slug for the current blog.
+	$calypso_site_slug = \WPCOM_Masterbar::get_calypso_site_slug( $blog_id );
+
+	// If no Calypso site slug is found, return early.
+	if ( ! $calypso_site_slug ) {
+		return;
+	}
+
+	// Add the cart menu item to the WordPress admin bar.
+	$wp_admin_bar->add_menu(
+		array(
+			'id'     => 'cart', // Unique ID for the cart menu item.
+			'title'  => '<span class="ab-item cart-icon" aria-hidden="true"></span>' .
+						'<div class="cart-icon__dot"></div>' .
+						'<span class="screen-reader-text">' .
+						/* translators: Hidden accessibility text. */
+						__( 'Cart', 'jetpack-mu-wpcom' ) .
+						'</span>',
+			'href'   => 'https://wordpress.com/checkout/' . esc_attr( $calypso_site_slug ), // Link to the checkout page.
+			'meta'   => array(
+				'class' => 'wp-admin-bar-cart', // Custom class for styling the cart menu item.
+			),
+			'parent' => 'top-secondary', // Position the cart in the 'top-secondary' section of the admin bar.
+		)
+	);
+}
+
+// Hook the cart icon to the admin bar menu, placing it before the reader icon (same as Calypso).
+add_action( 'admin_bar_menu', 'wpcom_add_shopping_cart', 11 );
+
 /**
  * Adds the Reader menu.
  *

diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-bar/wpcom-admin-bar.scss b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-bar/wpcom-admin-bar.scss
@@ -160,6 +160,37 @@
 			}
 		}
 
+		#wp-admin-bar-cart {
+			.cart-icon__dot {
+				margin-left: 17px;
+				position: absolute;
+				margin-top: -28px;
+				width: 6px;
+				height: 6px;
+				background-color: var( --color-masterbar-unread-dot-background, #e26f56 ) !important;
+				border-radius: 50px;
+			}
+
+			.cart-icon {
+				align-items: center;
+				display: flex;
+				height: 100%;
+				margin: 0;
+
+				&:before{
+					background-color: currentColor;
+					content: "";
+					display: flex;
+					height: 20px;
+					margin: 0;
+					mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZGVmcz4KICAgIDxtYXNrIGlkPSJjaXJjbGUtbWFzayI+CiAgICAgIDwhLS0gRXZlcnl0aGluZyBvdXRzaWRlIHRoZSBjaXJjbGUgaXMgdmlzaWJsZSAod2hpdGUpLCBhbmQgdGhlIGNpcmNsZSBpcyBzdWJ0cmFjdGVkIChibGFjaykgLS0+CiAgICAgIDxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IndoaXRlIiAvPgogICAgICA8Y2lyY2xlIGN4PSIyMCIgY3k9IjQiIHI9IjQiIGZpbGw9ImJsYWNrIiAvPgogICAgPC9tYXNrPgogIDwvZGVmcz4KICAKICA8IS0tIEFwcGx5IHRoZSBtYXNrIHRvIHRoZSBwYXRoIHNvIHRoZSBjaXJjbGUgaXMgc3VidHJhY3RlZCAtLT4KICA8ZyBtYXNrPSJ1cmwoI2NpcmNsZS1tYXNrKSI+CiAgICA8cGF0aCBmaWxsPSJ2YXIoLS1jb2xvci1tYXN0ZXJiYXItaWNvbikiIGQ9Ik05LDIwYzAsMS4xLTAuOSwyLTIsMnMtMi0wLjktMi0yczAuOS0yLDItMiAgIFM5LDE4LjksOSwyMHogTTE3LDE4Yy0xLjEsMC0yLDAuOS0yLDJzMC45LDIsMiwyczItMC45LDItMlMxOC4xLDE4LDE3LDE4eiBNMTcuNCwxM2MwLjksMCwxLjctMC43LDItMS42TDIxLDVIN1Y0YzAtMS4xLTAuOS0yLTItMiAgIEgzdjJoMnYxdjh2MmMwLDEuMSwwLjksMiwyLDJoMTJjMC0xLjEtMC45LTItMi0ySDd2LTJIMTcuNHoiPjwvcGF0aD4KICA8L2c+Cjwvc3ZnPgo=");
+					mask-position: center;
+					mask-repeat: no-repeat;
+					width: 24px
+				}
+			}
+		}
+
 		@media (max-width: 782px) {
 			height: 45px;
 
@@ -173,7 +204,7 @@
 					.ab-icon {
 						justify-content: center;
 						padding: 0px;
-	
+
 						&:before {
 							width: 36px;
 							height: 36px;
@@ -184,6 +215,32 @@
 				}
 			}
 
+			#wp-admin-bar-cart {
+				display: block;
+				min-width: 52px;
+				padding: 0;
+				width: auto !important;
+
+				.cart-icon__dot {
+					height: 7px;
+					margin-left: 33px;
+					margin-top: -37px;
+					width: 7px
+				}
+
+				.cart-icon {
+					justify-content: center;
+					padding: 0;
+
+					&:before{
+						height: 32px;
+						margin: 0;
+						mask-size: contain;
+						width: 32px
+					}
+				}
+			}
+
 			#wp-admin-bar-help-center {
 				display: block !important;
 				margin-right: 0 !important;