Varia: Add support for a mini-cart in the main menu.

varia/classes/class-varia-svg-icons.php

@@ -19,7 +19,7 @@
  *
  * @since 1.0.0
  */
-class TwentyNineteen_SVG_Icons {
+class Varia_SVG_Icons {
 
 	/**
 	 * Gets the SVG code for a given icon.
@@ -168,6 +168,11 @@ class TwentyNineteen_SVG_Icons {
     </g>
 </svg>',
 
+		'shopping_cart' => /* material-design - shopping_cart */ '
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+	<path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z" fill="currentColor"/>
+	<path d="M0 0h24v24H0z" fill="none"/>
+</svg>',
 	);
 
 	/**

varia/classes/class-varia-walker-comment.php

@@ -12,7 +12,7 @@
  *
  * @since 1.0.0
  */
-class TwentyNineteen_Walker_Comment extends Walker_Comment {
+class Varia_Walker_Comment extends Walker_Comment {
 
 	/**
 	 * Outputs a comment in the HTML5 format.

varia/inc/icon-functions.php

@@ -11,21 +11,21 @@
  * Gets the SVG code for a given icon.
  */
 function varia_get_icon_svg( $icon, $size = 24 ) {
-	return TwentyNineteen_SVG_Icons::get_svg( 'ui', $icon, $size );
+	return Varia_SVG_Icons::get_svg( 'ui', $icon, $size );
 }
 
 /**
  * Gets the SVG code for a given social icon.
  */
 function varia_get_social_icon_svg( $icon, $size = 24 ) {
-	return TwentyNineteen_SVG_Icons::get_svg( 'social', $icon, $size );
+	return Varia_SVG_Icons::get_svg( 'social', $icon, $size );
 }
 
 /**
  * Detects the social network from a URL and returns the SVG code for its icon.
  */
 function varia_get_social_link_svg( $uri, $size = 24 ) {
-	return TwentyNineteen_SVG_Icons::get_social_link_svg( $uri, $size );
+	return Varia_SVG_Icons::get_social_link_svg( $uri, $size );
 }
 
 /**

varia/inc/woocommerce.php

@@ -54,10 +54,131 @@ remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10 );
  * Enqueue scripts and styles.
  */
 function varia_woocommerce_scripts() {
-
 	// WooCommerce styles
 	wp_enqueue_style( 'varia-woocommerce-style', get_stylesheet_directory_uri() . '/style-woocommerce.css', array(), wp_get_theme()->get( 'Version' ) );
-
 }
 add_action( 'wp_enqueue_scripts', 'varia_woocommerce_scripts' );
 
+/**
+ * Setup cart link for main menu
+ */
+if ( ! function_exists( 'varia_cart_link' ) ) {
+	/**
+	 * Cart Link
+	 * Display a link to the cart including the number of items present and the cart total
+	 *
+	 * @return void
+	 * @since  1.0.0
+	 */
+	function varia_cart_link() {
+		$link_output = sprintf(
+			'<a class="woocommerce-cart-link" href="%1$s" title="%2$s">
+				%3$s
+				<span class="woocommerce-cart-subtotal">%4$s</span> - <span class="woocommerce-cart-count">%5$s</span>
+			</a>',
+			esc_url( wc_get_cart_url() ),
+			esc_attr__( 'View your shopping cart', 'varia' ),
+			varia_get_icon_svg( 'shopping_cart', 16 ),
+			wp_kses_post( WC()->cart->get_cart_subtotal() ),
+			wp_kses_data( sprintf( _n( '%d item', '%d items', WC()->cart->get_cart_contents_count(), 'varia' ), WC()->cart->get_cart_contents_count() ) )
+		);
+		return $link_output;
+	}
+}
+
+/**
+ * Setup cart widget for main menu
+ */
+if ( ! function_exists( 'varia_cart_widget' ) ) {
+	/**
+	 * Cart Items List
+	 * Ensure cart contents update when products are added to the cart via AJAX
+	 *
+	 * @param  array $fragments Fragments to refresh via AJAX.
+	 * @return array            Fragments to refresh via AJAX
+	 */
+	function varia_cart_widget() {
+		ob_start();
+		the_widget( 'WC_Widget_Cart', 'title=' );
+		$widget_output = ob_get_contents();
+		ob_end_clean();
+		return $widget_output;
+	}
+}
+
+/**
+ * Setup cart fragments
+ */
+if ( ! function_exists( 'varia_cart_subtotal_fragment' ) ) {
+	/**
+	 * Cart Subtotal Fragments
+	 * Ensure cart subtotal amount update when products are added to the cart via AJAX
+	 *
+	 * @param  array $fragments Fragments to refresh via AJAX.
+	 * @return array            Fragments to refresh via AJAX
+	 */
+	function varia_cart_subtotal_fragment( $fragments ) {
+		ob_start();
+		echo '<span class="woocommerce-cart-subtotal">' . wp_kses_post( WC()->cart->get_cart_subtotal() ) . '</span>';
+		$fragments['.woocommerce-cart-subtotal'] = ob_get_clean();
+		return $fragments;
+	}
+}
+
+if ( ! function_exists( 'varia_cart_count_fragment' ) ) {
+	/**
+	 * Cart Count Fragments
+	 * Ensure cart item count update when products are added to the cart via AJAX
+	 *
+	 * @param  array $fragments Fragments to refresh via AJAX.
+	 * @return array            Fragments to refresh via AJAX
+	 */
+	function varia_cart_count_fragment( $fragments ) {
+		ob_start();
+		echo '<span class="woocommerce-cart-count">' . wp_kses_data( sprintf( _n( '%d item', '%d items', WC()->cart->get_cart_contents_count(), 'varia' ), WC()->cart->get_cart_contents_count() ) ) . '</span>';
+		$fragments['.woocommerce-cart-count'] = ob_get_clean();
+		return $fragments;
+	}
+}
+
+/**
+ * Add cart fragment filters
+ *
+ * @see varia_cart_subtotal_fragment() and varia_cart_count_fragment()
+ */
+if ( defined( 'WC_VERSION' ) && version_compare( WC_VERSION, '2.3', '>=' ) ) {
+	add_filter( 'woocommerce_add_to_cart_fragments', 'varia_cart_subtotal_fragment', 10, 1 );
+	add_filter( 'woocommerce_add_to_cart_fragments', 'varia_cart_count_fragment', 10, 1 );
+} else {
+	add_filter( 'add_to_cart_fragments', 'varia_cart_subtotal_fragment' );
+	add_filter( 'add_to_cart_fragments', 'varia_cart_count_fragment' );
+}
+
+/**
+ * Add WooCommerce mini-cart link to primary menu
+ */
+function varia_add_cart_menu( $nav, $args ) {
+	if ( $args->theme_location == 'menu-1' ) {
+		return sprintf(
+			'%1$s
+			<li class="menu-item wc-menu-item %6$s" title="%2$s">
+				%4$s
+				<ul class="sub-menu">
+					<li class="wc-menu-items-list" title="%3$s">
+						%5$s
+					</li>
+				</ul>
+			</li>',
+			$nav,
+			esc_attr__( 'View your shopping cart', 'varia' ),
+			esc_attr__( 'View your shopping list', 'varia' ),
+			varia_cart_link(),
+			varia_cart_widget(),
+			is_cart() ? 'current-menu-item' : ''
+		);
+	}
+
+	// Our primary menu isn't set, return the regular nav
+	return $nav;
+}
+add_filter( 'wp_nav_menu_items', 'varia_add_cart_menu', 10, 2 );

varia/sass/vendors/woocommerce/components/_imports.scss

@@ -4,6 +4,7 @@
 
 @import "cart-sidebar";
 @import "cart-collaterals";
+@import "mini-cart";
 @import "product-loops";
 @import "reviews";
 @import "product-tabs";

varia/sass/vendors/woocommerce/components/_mini-cart.scss

@@ -0,0 +1,12 @@
+/**
+ * Mini-cart
+ */
+
+body[class*="woocommerce"] #page { // adding #page here to override default wc styles without !important
+
+	.wc-block-grid__product-add-to-cart .added_to_cart {
+		display: inline-block;
+		text-decoration: none;
+	}
+}
+

varia/style-woocommerce.css

@@ -704,6 +704,14 @@ body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .shipping
 	margin-top: 16px;
 }
 
+/**
+ * Mini-cart
+ */
+body[class*="woocommerce"] #page .wc-block-grid__product-add-to-cart .added_to_cart {
+	display: inline-block;
+	text-decoration: none;
+}
+
 /**
  * Product loops
  */