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 new file mode 100644 index 0000000000000..2446e52f8d58d --- /dev/null +++ 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 index 93ac527691c78..df845aeaca305 100644 --- 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' => '' . + '
' . + '' . + /* translators: Hidden accessibility text. */ + __( 'Cart', 'jetpack-mu-wpcom' ) . + '', + '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 index 79fded05804d6..8205068c60620 100644 --- 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;