Add WooCommerce Cart as custom menu item to the Menus page (#208)

* Fix mini-cart items count init and update * Try a more consistent and predictable way of integrating woocommerce * Improvements to WooCommerce integration: menu items custom fields * Minor * Minor * Make item count and mini-cart toggle work with multiple cart menu items * WIP migrate to new cart menu item * Finished with the migration logic - see #134 * Fix JS + remove automatic adding of cart menu item * Bump version to 1.8.0 * Add display options for cart menu item This reverts commit 7abee86. * Only move the first cart menu item from header menus into to mobile header This reverts commit 56686c0. * Fix cart menu item refresh in customizer * Remove garbage Co-authored-by: Vlad Olaru <[email protected]> Co-authored-by: madalingorbanescu <[email protected]>
pixelgrade · Jan 22, 2021 · ad89ffa · ad89ffa
1 parent 9bb4e7c
commit ad89ffa
Show file tree

Hide file tree

Showing 27 changed files with 559 additions and 304 deletions.
diff --git a/dist/css/admin/edit-nav-menus-rtl.css b/dist/css/admin/edit-nav-menus-rtl.css
@@ -1,4 +0,0 @@
-#menu-to-edit li.menu-item-pxg-extras__search .field-link-target,
-#menu-to-edit li.menu-item-pxg-extras__search .field-xfn,
-#menu-to-edit li.menu-item-pxg-extras__search .field-description {
-  display: none; }

diff --git a/dist/css/admin/edit-nav-menus.css b/dist/css/admin/edit-nav-menus.css
@@ -1,4 +0,0 @@
-#menu-to-edit li.menu-item-pxg-extras__search .field-link-target,
-#menu-to-edit li.menu-item-pxg-extras__search .field-xfn,
-#menu-to-edit li.menu-item-pxg-extras__search .field-description {
-  display: none; }

diff --git a/dist/css/woocommerce/style-rtl.css b/dist/css/woocommerce/style-rtl.css
@@ -1708,30 +1708,34 @@
 .cart_list.product_list_widget {
   flex-basis: 0; }
 
-.menu-item--cart {
-  display: flex;
-  align-items: center; }
-  .menu-item--cart > a {
-    border-bottom: 0;
-    text-decoration: none; }
-    .menu-item--cart > a:before {
-      content: none !important; }
-  .menu-item--cart[class][class][class][class][class] a {
-    padding: 0;
-    margin: 0; }
-    .menu-item--cart[class][class][class][class][class] a:before {
-      content: none; }
-  .menu-item--cart .cart-count {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+.menu-item--cart > a {
+  text-decoration: none; }
+
+.menu-item--cart:not(.no-icon) > a:before {
+  content: none !important; }
+
+.menu-item--cart.no-icon .menu-item__icon,
+.menu-item--cart.icon-only .menu-item__label {
+  display: none; }
+
+.menu-item--cart:not(.icon-only) .menu-item__label + .menu-item__icon {
+  margin-right: 0.75em; }
+
+.menu-item--cart .menu-item__icon {
+  position: relative;
+  width: 1.75em;
+  font-feature-settings: "lnum"; }
+  .menu-item--cart .menu-item__icon:after {
+    content: "";
+    display: block;
     width: 1.75em;
     height: 1.75em;
     border: .125em solid currentColor;
     border-radius: 50%;
-    font-weight: 700;
-    line-height: 1;
-    font-feature-settings: "lnum"; }
+    position: absolute;
+    top: 50%;
+    right: 50%;
+    transform: translate(50%, -50%); }
 
 #add_payment_method table.cart td.actions .coupon .input-text,
 .woocommerce-cart table.cart td.actions .coupon .input-text,

diff --git a/dist/css/woocommerce/style.css b/dist/css/woocommerce/style.css
@@ -1708,30 +1708,34 @@
 .cart_list.product_list_widget {
   flex-basis: 0; }
 
-.menu-item--cart {
-  display: flex;
-  align-items: center; }
-  .menu-item--cart > a {
-    border-bottom: 0;
-    text-decoration: none; }
-    .menu-item--cart > a:before {
-      content: none !important; }
-  .menu-item--cart[class][class][class][class][class] a {
-    padding: 0;
-    margin: 0; }
-    .menu-item--cart[class][class][class][class][class] a:before {
-      content: none; }
-  .menu-item--cart .cart-count {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+.menu-item--cart > a {
+  text-decoration: none; }
+
+.menu-item--cart:not(.no-icon) > a:before {
+  content: none !important; }
+
+.menu-item--cart.no-icon .menu-item__icon,
+.menu-item--cart.icon-only .menu-item__label {
+  display: none; }
+
+.menu-item--cart:not(.icon-only) .menu-item__label + .menu-item__icon {
+  margin-left: 0.75em; }
+
+.menu-item--cart .menu-item__icon {
+  position: relative;
+  width: 1.75em;
+  font-feature-settings: "lnum"; }
+  .menu-item--cart .menu-item__icon:after {
+    content: "";
+    display: block;
     width: 1.75em;
     height: 1.75em;
     border: .125em solid currentColor;
     border-radius: 50%;
-    font-weight: 700;
-    line-height: 1;
-    font-feature-settings: "lnum"; }
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%); }
 
 #add_payment_method table.cart td.actions .coupon .input-text,
 .woocommerce-cart table.cart td.actions .coupon .input-text,

diff --git a/dist/js/scripts.js b/dist/js/scripts.js
@@ -1465,7 +1465,7 @@ function () {
 
       this.$mobileHeader = external_jQuery_default()('<div class="site-header--mobile">');
       external_jQuery_default()('.c-branding').first().clone().appendTo(this.$mobileHeader);
-      external_jQuery_default()('.menu-item--cart').first().clone().appendTo(this.$mobileHeader);
+      this.$header.find('.menu-item--cart').first().clone().appendTo(this.$mobileHeader);
       this.$mobileHeader.insertAfter(this.$toggle);
       this.createdMobileHeader = true;
     }

diff --git a/dist/js/scripts.min.js b/dist/js/scripts.min.js
diff --git a/dist/js/woocommerce.js b/dist/js/woocommerce.js
@@ -127,7 +127,39 @@
     enableMinusButton();
   });
   $(function () {
-    var $body = $(document.body).not('.woocommerce-cart'); // show mini cart when a product is added to cart
+    var $body = $(document.body).not('.woocommerce-cart');
+    var $cartMenuItems = $('.site-header__menu .menu > .menu-item--cart');
+    initializeCartMenuItems($cartMenuItems);
+
+    if (typeof wp.customize !== "undefined" && typeof wp.customize.selectiveRefresh !== "undefined") {
+      wp.customize.selectiveRefresh.bind('partial-content-rendered', function (placement) {
+        var $container = $(placement.container).filter('.site-header__menu .menu');
+        var $items = $container.children('.menu-item--cart');
+        initializeCartMenuItems($items);
+      });
+    }
+
+    function initializeCartMenuItems($cartMenuItems) {
+      $cartMenuItems.each(function (i, obj) {
+        var $cartMenuItem = $(obj);
+        var $cartMenuItemLink = $cartMenuItem.children('a');
+        var cartMenuItemText = $cartMenuItemLink.text();
+        var $cartMenuItemCount = $('<span class="menu-item__icon">0</span>');
+        $cartMenuItemLink.html("<span class=\"menu-item__label\">".concat(cartMenuItemText, " </span>"));
+        $cartMenuItemCount.appendTo($cartMenuItemLink);
+        var fragmentKey = 'div.widget_shopping_cart_content';
+        var $fragment = $(fragmentKey);
+
+        if ($fragment.length) {
+          var fragments = {};
+          fragments[fragmentKey] = $fragment.html();
+          var itemCount = getCartMenuItemCount(fragments);
+          updateCardMenuItems($cartMenuItems, itemCount);
+        }
+      });
+      $cartMenuItems.on('click', openMiniCart);
+    } // show mini cart when a product is added to cart
+
 
     function onAddedToCart(event, fragments, cart_hash, $button) {
       var key = 'div.widget_shopping_cart_content';
@@ -160,22 +192,21 @@
     } // update cart items count in cart menu item
 
 
-    function updateCartMenuItemCount(event, fragments, cart_hash, $button) {
+    function getCartMenuItemCount(fragments) {
       var key = 'div.widget_shopping_cart_content';
+      var count = 0;
 
       if (key in fragments) {
-        // initialize cart items sum count with 0
-        var products = 0; // loop through every item in cart and sum up the quantity
-
+        // loop through every item in cart and sum up the quantity
         $(fragments[key]).find('.mini_cart_item').each(function (i, obj) {
           var $quantity = $(obj).find('.quantity'); // remove the price html tag to be able to parse number of items for that product
 
           $quantity.children().remove();
-          products += parseInt($quantity.text(), 10);
-        }); // actually update the cart items count
-
-        $('.menu-item--cart .cart-count span').text(products);
+          count += parseInt($quantity.text(), 10);
+        });
       }
+
+      return count;
     } // show mini cart when Cart menu item is clicked
 
 
@@ -202,9 +233,20 @@
     }
 
     $('.c-mini-cart__overlay, .c-mini-cart__close').on('click', closeMiniCart);
+
+    function updateCardMenuItems($cartMenuItems, count) {
+      $cartMenuItems.each(function (i, obj) {
+        var $cartMenuItem = $(obj);
+        var $cartMenuItemCount = $cartMenuItem.find('.menu-item__icon');
+        $cartMenuItemCount.text(count);
+      });
+    }
+
     $body.on('added_to_cart', onAddedToCart);
-    $body.on('added_to_cart removed_from_cart', updateCartMenuItemCount);
-    $('.js-open-cart').on('click', openMiniCart); // in order to avoid template overwrites add the class used to style buttons programatically
+    $body.on('added_to_cart removed_from_cart', function (event, fragments, cart_hash, $button) {
+      var itemCount = getCartMenuItemCount(fragments);
+      updateCardMenuItems($cartMenuItems, itemCount);
+    }); // in order to avoid template overwrites add the class used to style buttons programatically
 
     $body.on('wc_cart_button_updated', function (event, $button) {
       $button.siblings('.added_to_cart').addClass('button');

diff --git a/dist/js/woocommerce.min.js b/dist/js/woocommerce.min.js
diff --git a/functions.php b/functions.php
@@ -416,13 +416,21 @@ function wupdates_add_id_JxLn7( $ids = array() ) {
 /**
  * Custom template tags for this theme.
  */
-require get_template_directory() . '/inc/template-tags.php';
+require_once trailingslashit( get_template_directory() ) . 'inc/template-tags.php';
 
 /**
  * Functions which enhance the theme by hooking into WordPress.
  */
-require get_template_directory() . '/inc/template-functions.php';
-require get_template_directory() . '/inc/extras.php';
-require get_template_directory() . '/inc/required-plugins.php';
+require_once trailingslashit( get_template_directory() ) . 'inc/template-functions.php';
+require_once trailingslashit( get_template_directory() ) . 'inc/extras.php';
+require_once trailingslashit( get_template_directory() ) . 'inc/required-plugins.php';
 
-require get_template_directory() . '/inc/integrations.php';
+/**
+ * Admin Dashboard logic.
+ */
+require_once trailingslashit( get_template_directory() ) . 'inc/admin/admin.php'; // phpcs:ignore
+
+/**
+ * Various integrations with plugins to keep things smooth and easy.
+ */
+require_once trailingslashit( get_template_directory() ) . '/inc/integrations.php';
diff --git a/inc/admin/admin.php b/inc/admin/admin.php
@@ -30,4 +30,4 @@ function rosa2_admin_setup() {
 	}
 	PixelgradeCare_Install_Notice::init();
 }
-add_action( 'after_setup_theme', 'rosa2_admin_setup' );
+add_action( 'after_setup_theme', 'rosa2_admin_setup', 99 );