Hide the cart if empty. closes #35

jameskoster · Feb 8, 2017 · df5d2f9 · df5d2f9
1 parent e679019
commit df5d2f9
Show file tree

Hide file tree

Showing 6 changed files with 209 additions and 67 deletions.
diff --git a/assets/css/style-storefront.css b/assets/css/style-storefront.css
@@ -7,6 +7,8 @@
   -moz-transition: all cubic-bezier(0.11, 0.51, 0.54, 0.9) 0.5s;
   transition: all cubic-bezier(0.11, 0.51, 0.54, 0.9) 0.5s;
   box-sizing: border-box; }
+  .woocommerce-cart-tab-container .woocommerce-cart-tab--empty {
+    display: none; }
   .woocommerce-cart-tab-container .widget_shopping_cart {
     overflow: auto;
     margin-bottom: 0; }
@@ -133,21 +135,15 @@ body .site:before {
   -webkit-transition: all cubic-bezier(0.11, 0.51, 0.54, 0.9) 0.5s;
   -moz-transition: all cubic-bezier(0.11, 0.51, 0.54, 0.9) 0.5s;
   transition: all cubic-bezier(0.11, 0.51, 0.54, 0.9) 0.5s;
-  -webkit-transform: translateX(-100%);
-  -moz-transform: translateX(-100%);
-  -ms-transform: translateX(-100%);
-  -o-transform: translateX(-100%);
-  transform: translateX(-100%);
-  cursor: pointer; }
+  cursor: pointer;
+  visibility: hidden;
+  opacity: 0; }
 
 body.woocommerce-cart-tab-is-visible {
   overflow: hidden; }
   body.woocommerce-cart-tab-is-visible .site:before {
-    -webkit-transform: translateX(0);
-    -moz-transform: translateX(0);
-    -ms-transform: translateX(0);
-    -o-transform: translateX(0);
-    transform: translateX(0); }
+    visibility: visible;
+    opacity: 1; }
 
 @media screen and (max-width: 768px) {
   .woocommerce-cart-tab-container {

diff --git a/assets/css/style.css b/assets/css/style.css
@@ -7,6 +7,8 @@
   -moz-transition: all cubic-bezier(0.11, 0.51, 0.54, 0.9) 0.5s;
   transition: all cubic-bezier(0.11, 0.51, 0.54, 0.9) 0.5s;
   box-sizing: border-box; }
+  .woocommerce-cart-tab-container .woocommerce-cart-tab--empty {
+    display: none; }
   .woocommerce-cart-tab-container .widget {
     padding: 0; }
   .woocommerce-cart-tab-container .widget_shopping_cart {
@@ -138,12 +140,9 @@ body .site:before {
   -webkit-transition: all cubic-bezier(0.11, 0.51, 0.54, 0.9) 0.5s;
   -moz-transition: all cubic-bezier(0.11, 0.51, 0.54, 0.9) 0.5s;
   transition: all cubic-bezier(0.11, 0.51, 0.54, 0.9) 0.5s;
-  -webkit-transform: translateX(-100%);
-  -moz-transform: translateX(-100%);
-  -ms-transform: translateX(-100%);
-  -o-transform: translateX(-100%);
-  transform: translateX(-100%);
-  cursor: pointer; }
+  cursor: pointer;
+  opacity: 0;
+  visibility: hidden; }
 
 body.woocommerce-cart-tab-is-visible {
   overflow: hidden; }
@@ -152,7 +151,9 @@ body.woocommerce-cart-tab-is-visible {
     -moz-transform: translateX(0);
     -ms-transform: translateX(0);
     -o-transform: translateX(0);
-    transform: translateX(0); }
+    transform: translateX(0);
+    opacity: 1;
+    visibility: visible; }
 
 @media screen and (max-width: 768px) {
   .woocommerce-cart-tab-container {

diff --git a/assets/scss/style-storefront.scss b/assets/scss/style-storefront.scss
@@ -10,6 +10,10 @@ $cart_width: 320px;
 	@include transition(all cubic-bezier(.11,.51,.54,.9) .5s);
 	box-sizing: border-box;
 
+	.woocommerce-cart-tab--empty {
+		display: none;
+	}
+
 	.widget_shopping_cart {
 		overflow: auto;
 		margin-bottom: 0;
@@ -156,8 +160,9 @@ body {
 			background: rgba(#000,.4);
 			z-index: 9999999;
 			@include transition(all cubic-bezier(.11,.51,.54,.9) .5s);
-			@include transform(translateX(-100%));
 			cursor: pointer;
+			visibility: hidden;
+			opacity: 0;
 		}
 	}
 
@@ -166,7 +171,8 @@ body {
 
 		.site {
 			&:before {
-				@include transform(translateX(0));
+				visibility: visible;
+				opacity: 1;
 			}
 		}
 	}

diff --git a/assets/scss/style.scss b/assets/scss/style.scss
@@ -10,6 +10,10 @@ $cart_width: 320px;
 	@include transition(all cubic-bezier(.11,.51,.54,.9) .5s);
 	box-sizing: border-box;
 
+	.woocommerce-cart-tab--empty {
+		display: none;
+	}
+
 	.widget {
 		padding: 0;
 	}
@@ -163,8 +167,9 @@ body {
 			background: rgba(#000,.4);
 			z-index: 9999999;
 			@include transition(all cubic-bezier(.11,.51,.54,.9) .5s);
-			@include transform(translateX(-100%));
 			cursor: pointer;
+			opacity: 0;
+			visibility: hidden;
 		}
 	}
 
@@ -174,6 +179,8 @@ body {
 		.site {
 			&:before {
 				@include transform(translateX(0));
+				opacity: 1;
+				visibility: visible;
 			}
 		}
 	}

diff --git a/includes/cart-tab-templates.php b/includes/cart-tab-templates.php
@@ -7,8 +7,14 @@
 	 */
 	function woocommerce_cart_tab_button() {
 		global $woocommerce;
+
+		$empty = 'woocommerce-cart-tab--empty';
+
+		if ( intval( $woocommerce->cart->get_cart_contents_count() > 0 ) ) {
+			$empty = 'woocommerce-cart-tab--has-contents';
+		}
 		?>
-		<div class="woocommerce-cart-tab">
+		<div class="woocommerce-cart-tab <?php echo $empty; ?>">
 			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 86 104.5" class="woocommerce-cart-tab__icon">
 <path class="woocommerce-cart-tab__icon-bag" d="M67.2,26.7C64.6,11.5,54.8,0.2,43.1,0.2C31.4,0.2,21.6,11.5,19,26.7H0.1v77.6h86V26.7H67.2z M43.1,4.2
 	c9.6,0,17.7,9.6,20,22.6H23C25.4,13.8,33.5,4.2,43.1,4.2z M82.1,100.4h-78V30.7h14.4c-0.1,1.3-0.2,2.6-0.2,3.9c0,1.1,0,2.2,0.1,3.3