WIP #3678 @10

diff --git a/wp-content/mu-plugins/physioassist/src/WooCommerce/Setup.php b/wp-content/mu-plugins/physioassist/src/WooCommerce/Setup.php
index 2d1b030126dd3f7e331f2c1a8d06c20cc78ee677..5be858536a52f3d9c4f4a65390eff389447e5970 100644 (file)
--- a/wp-content/mu-plugins/physioassist/src/WooCommerce/Setup.php
+++ b/wp-content/mu-plugins/physioassist/src/WooCommerce/Setup.php
@@ -2,6 +2,8 @@
 
 namespace PhysioAssist\Woocommerce;
 
+use function App\template;
+
 class Setup {
 
     /**
@@ -14,6 +16,9 @@ class Setup {
 
     public function on_woocommerce_loaded() {
 
+        // Add WooCommerce mini-cart to the main nav (primary_navigation)
+        add_filter('wp_nav_menu_items', [$this, 'woocommerce_cart_menu'], 10, 2);
+
         // Remove product sorting dropdowns
         // Ref: https://rudrastyh.com/woocommerce/remove-product-sorting-dropdown.html
         remove_action('woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30);
@@ -27,4 +32,14 @@ class Setup {
         add_filter('woocommerce_product_description_heading', '__return_false');
     }
 
+    public function woocommerce_cart_menu($menu, $args) {
+
+        // Only continue if woocommerce mini cart is available and we're on the primary_navigation menu
+        if (!function_exists('woocommerce_mini_cart') || $args->theme_location !== 'primary_navigation') return $menu;
+
+        $menu .= template('woocommerce/mini-cart');
+
+        return $menu;
+    }
+
 }

diff --git a/wp-content/themes/physioassist/app/setup.php b/wp-content/themes/physioassist/app/setup.php
index 54c82152b694bde1baa727f13f6f3b491c6651d6..b6b06445d9a4af86652f2f2e873feff065b6f472 100644 (file)
--- a/wp-content/themes/physioassist/app/setup.php
+++ b/wp-content/themes/physioassist/app/setup.php
@@ -44,6 +44,7 @@ add_action('after_setup_theme', function () {
     register_nav_menus([
         'primary_navigation' => __('Primary Navigation', 'sage'),
         'secondary_navigation' => __('Header Buttons', 'cube'),
+        'footer_navigation' => __('Footer Navigation (Sitemap)', 'cube'),
     ]);
 
     /**

diff --git a/wp-content/themes/physioassist/resources/assets/images/icons/cart.svg b/wp-content/themes/physioassist/resources/assets/images/icons/cart.svg
new file mode 100644 (file)
index 0000000..b686201
--- /dev/null
+++ b/wp-content/themes/physioassist/resources/assets/images/icons/cart.svg
@@ -0,0 +1 @@
+<svg width="26" height="26" xmlns="http://www.w3.org/2000/svg"><path d="M24.25 2.59h-2.836c-.027 0-.05.012-.076.015a.716.716 0 00-.496.266.723.723 0 00-.135.258c-.008.027-.026.048-.03.076l-.43 2.347L1.893 6.625c-.07-.005-.132.005-.21.013a.75.75 0 00-.669.892l1.279 6.975c.292 1.081 1.193 2.173 2.548 2.173h13.37l-.286 1.565H6.675a2.587 2.587 0 00-2.584 2.583c0 1.425 1.16 2.584 2.584 2.584s2.583-1.159 2.583-2.584c0-.388-.092-.753-.246-1.083h6.908c-.154.33-.246.695-.246 1.083 0 1.425 1.159 2.584 2.583 2.584s2.584-1.159 2.584-2.584a2.578 2.578 0 00-1.442-2.306l2.64-14.43h2.211a.75.75 0 000-1.5zm-5.228 9.655l-3.178.05.173-1.842 3.351-.1-.346 1.892zM3.144 10.839l3.176-.095.208 1.697-3.082.048-.302-1.65zm4.18-.126l3.49-.104v1.765l-3.28.051-.21-1.712zm3.49-1.105l-3.613.108-.23-1.885 3.843-.225v2.002zm1-2.06l3.49-.204-.2 2.135-3.29.099v-2.03zm-1 5.826v1.804H7.87l-.215-1.754 3.16-.05zm1-.016l2.93-.046-.176 1.866h-2.754v-1.82zm0-1v-1.78l3.196-.095-.172 1.827-3.024.048zm7.739-3.012l-3.442.103.204-2.164 3.654-.214-.416 2.275zM5.97 7.889l.227 1.857-3.236.097a78.91 78.91 0 00-.337-1.758l3.346-.196zm-2.216 6.285l-.126-.687 3.021-.048.213 1.74H4.841c-.642 0-1-.697-1.086-1.005zm11.818 1.004l.177-1.882 3.089-.048-.354 1.93h-2.912zm-7.815 5.648c0 .598-.486 1.084-1.083 1.084s-1.084-.486-1.084-1.084a1.084 1.084 0 012.167 0zm10.5 1.084a1.085 1.085 0 010-2.167 1.084 1.084 0 010 2.167z"/></svg>

diff --git a/wp-content/themes/physioassist/resources/assets/styles/components/navigation.styl b/wp-content/themes/physioassist/resources/assets/styles/components/navigation.styl
index 0cb909808f52268eb76aa7dfe2ab63db20c64965..d47af7402170a7880ce1e054993f95f9764f8e3b 100644 (file)
--- a/wp-content/themes/physioassist/resources/assets/styles/components/navigation.styl
+++ b/wp-content/themes/physioassist/resources/assets/styles/components/navigation.styl
@@ -9,7 +9,10 @@
   font-weight: 600
 
 .nav
-  inline-list()
+  reset-list()
+  li
+    display: inline-block
+    vertical-align: middle
 
 .menu-item
   position: relative

diff --git a/wp-content/themes/physioassist/resources/assets/styles/components/woocommerce-mini-cart.styl b/wp-content/themes/physioassist/resources/assets/styles/components/woocommerce-mini-cart.styl
new file mode 100644 (file)
index 0000000..1cbcbd6
--- /dev/null
+++ b/wp-content/themes/physioassist/resources/assets/styles/components/woocommerce-mini-cart.styl
@@ -0,0 +1,104 @@
+.menu-cart
+
+  &-icon
+    display: block
+    margin: -5px auto 0
+    transform: translateY(2px)
+
+    path
+      fill: currentColor
+
+  &-link
+    position: relative
+    display: block
+    padding-bottom: 0
+
+    // Create a larger hover zone for the cart icon to make
+    // it easier to touch and keep over when viewing the dropdown
+    &:before
+      content: ''
+      position: absolute
+      height: 100%
+      left: -1em
+      right: @left
+
+
+.sub-menu-mini-cart
+  padding: 1em 2em 2em 2em
+  left: unset
+  right: -1.7em
+  transform: none
+  min-width: 200px
+  font-size: 90%
+  color: #fff
+
+.woocommerce-mini-cart
+  padding: 0
+
+  &__empty-message
+    font-size: 80%
+    font-weight: normal
+    opacity: 0.5
+
+  &__total
+    white-space: nowrap
+    margin-top: 1em
+
+  &__buttons
+    .button
+      border: none
+      display: block
+      border-radius: 99em
+      background-color: $colors.blue
+      padding: 0.7em 1.8em
+      white-space: nowrap
+      transition: background-color 0.2s
+
+      &:hover
+        background-color: $colors.light-blue !important
+
+      &.checkout
+        background-color: $colors.red
+        margin-top: 1.2em
+
+  .mini_cart_item
+    position: relative
+    display: block
+    font-weight: 600
+    text-align: left
+    padding: 0 0 0 1em !important
+
+    &:not(:last-child)
+      margin-bottom: 1em
+
+    .remove
+      display: block
+      position: absolute
+      left: -0.8em
+      top: 0
+      color: $colors.red !important
+      width: 1.5rem
+      height: @width
+      line-height: 1
+      font-size: @width
+      text-align: center
+
+      &:hover
+        color: #fff !important
+        background: $colors.red
+        border-radius: 50%
+
+    a
+      white-space: nowrap
+
+    img
+      display: none
+
+    .quantity
+      display: block
+      font-size: 80%
+      opacity: 0.6
+
+  a
+    border: none
+

diff --git a/wp-content/themes/physioassist/resources/assets/styles/components/woocommerce.styl b/wp-content/themes/physioassist/resources/assets/styles/components/woocommerce.styl
index 99abc776deb3a900d43717f7e6fa421f6e3f9ced..629313bab3b37e884533eba2b059910823177917 100644 (file)
--- a/wp-content/themes/physioassist/resources/assets/styles/components/woocommerce.styl
+++ b/wp-content/themes/physioassist/resources/assets/styles/components/woocommerce.styl
@@ -9,12 +9,18 @@
     font-size: $font-size-medium
 
   // Message banners
-  &-message
-    border-top-color: $colors.blue
+  &-message, &-notice
+    border-top: 3px solid $colors.blue
+    background-color: #f5f5f5
+    color: #555
+    margin-bottom: 2em
 
     &:before
       color: $colors.blue
 
+  &-notice
+    padding: 1em
+
   // General form styles
   form, &-page form
     .form-row
@@ -74,6 +80,14 @@
       &:disabled[disabled]:hover
         background-color: #888
 
+  a.added_to_cart
+    padding-top: 0
+    margin-left: 1em
+    color: $colors.dark-blue
+
+    &:hover
+      color: $colors.blue
+
   // Product grid
   ul.products
     li.product
@@ -91,6 +105,19 @@
     p.price, span.price
       margin-bottom: 1.5em
 
+  // Order details
+  .woocommerce-order-details
+    margin-top: 1.5em
+
+  ul.order_details
+    padding-left: 0
+
+    li
+      strong
+        margin-top: 0.25em
+
+
+//=============
 
 // Quantity input -/+ buttons
 .qib-button

diff --git a/wp-content/themes/physioassist/resources/assets/styles/layouts/header.styl b/wp-content/themes/physioassist/resources/assets/styles/layouts/header.styl
index 6c8ccdb9c1459b77bfa1fe30f2173b9c724b9768..8c07feaa1fc30c6ddc192647a48c34f12b825c68 100644 (file)
--- a/wp-content/themes/physioassist/resources/assets/styles/layouts/header.styl
+++ b/wp-content/themes/physioassist/resources/assets/styles/layouts/header.styl
@@ -55,11 +55,11 @@ header.site
 
 // Main menu
 .nav-primary
-  margin-right: 72px // Space for phone icon
+  margin-right: 60px // Space for phone icon
 
   // Once we go above the max width, the phone icon will sit
   // in the gutter so we don't need to reserve space for it
-  +above($content-max-width + 72px)
+  +above($content-max-width + 100px)
     margin-right: 0.5em
 
 // CTA buttons + locale switcher (only visible on hero headers)
@@ -83,6 +83,7 @@ $phone-widget-width = 3.5em // 1em padding + 1.5em icon width + 1em padding
     position: absolute
     left: 100%
     bottom: 0
+    z-index: 20
 
     +below($breakpoint-menu)
       display: none

diff --git a/wp-content/themes/physioassist/resources/assets/styles/main.styl b/wp-content/themes/physioassist/resources/assets/styles/main.styl
index 569c225d55a4f06cc9fbe3185456aeea1d0d851f..7ff04a7ee1a4e1fa00332f0bb2a9f2609b3cacfe 100644 (file)
--- a/wp-content/themes/physioassist/resources/assets/styles/main.styl
+++ b/wp-content/themes/physioassist/resources/assets/styles/main.styl
@@ -22,6 +22,7 @@
 @import 'components/text'
 @import 'components/forms'
 @import 'components/woocommerce'
+@import 'components/woocommerce-mini-cart'
 @import 'components/wp-classes'
 
 @import 'layouts/header'

diff --git a/wp-content/themes/physioassist/resources/views/partials/footer.blade.php b/wp-content/themes/physioassist/resources/views/partials/footer.blade.php
index 4460e912d61e0c4b33558d869184332a892b4e6b..dac39f587f3fdfcfbc0554fd0c56eb457be8c744 100644 (file)
--- a/wp-content/themes/physioassist/resources/views/partials/footer.blade.php
+++ b/wp-content/themes/physioassist/resources/views/partials/footer.blade.php
@@ -23,7 +23,7 @@
 
     <div class="footer-col footer-sitemap">
       <h3><?php _e('Sitemap', 'physioassist') ?></h3>
-      {!! wp_nav_menu(['theme_location' => 'primary_navigation', 'menu_class' => 'footer-sitemap-menu', 'depth' => 1]) !!}
+      {!! wp_nav_menu(['theme_location' => 'footer_navigation', 'menu_class' => 'footer-sitemap-menu', 'depth' => 1]) !!}
 
       <br/>
       @include('partials/locales')

diff --git a/wp-content/themes/physioassist/resources/views/woocommerce/mini-cart.blade.php b/wp-content/themes/physioassist/resources/views/woocommerce/mini-cart.blade.php
new file mode 100644 (file)
index 0000000..d481b57
--- /dev/null
+++ b/wp-content/themes/physioassist/resources/views/woocommerce/mini-cart.blade.php
@@ -0,0 +1,13 @@
+<li class="menu-cart menu-item">
+  <a class="menu-cart-link" href="{{ wc_get_cart_url() }}">
+      @svg('icons/cart', 'menu-cart-icon')
+  </a>
+
+  <ul class="sub-menu sub-menu-mini-cart">
+    <li>
+      <div class="widget_shopping_cart_content">
+        @php(woocommerce_mini_cart())
+      </div>
+    </li>
+  </ul>
+</li>