From deb0acafc56778a9727afa2988cf2ea8a45e8fc8 Mon Sep 17 00:00:00 2001 From: "stephen@cubedesigners.com" Date: Tue, 16 Jun 2020 19:03:43 +0000 Subject: [PATCH] WIP #3678 @10 --- .../physioassist/src/WooCommerce/Setup.php | 15 +++ wp-content/themes/physioassist/app/setup.php | 1 + .../resources/assets/images/icons/cart.svg | 1 + .../assets/styles/components/navigation.styl | 5 +- .../components/woocommerce-mini-cart.styl | 104 ++++++++++++++++++ .../assets/styles/components/woocommerce.styl | 31 +++++- .../assets/styles/layouts/header.styl | 5 +- .../resources/assets/styles/main.styl | 1 + .../resources/views/partials/footer.blade.php | 2 +- .../views/woocommerce/mini-cart.blade.php | 13 +++ 10 files changed, 172 insertions(+), 6 deletions(-) create mode 100644 wp-content/themes/physioassist/resources/assets/images/icons/cart.svg create mode 100644 wp-content/themes/physioassist/resources/assets/styles/components/woocommerce-mini-cart.styl create mode 100644 wp-content/themes/physioassist/resources/views/woocommerce/mini-cart.blade.php diff --git a/wp-content/mu-plugins/physioassist/src/WooCommerce/Setup.php b/wp-content/mu-plugins/physioassist/src/WooCommerce/Setup.php index 2d1b0301..5be85853 100644 --- 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 54c82152..b6b06445 100644 --- 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 index 00000000..b6862015 --- /dev/null +++ b/wp-content/themes/physioassist/resources/assets/images/icons/cart.svg @@ -0,0 +1 @@ + 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 0cb90980..d47af740 100644 --- 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 index 00000000..1cbcbd62 --- /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 99abc776..629313ba 100644 --- 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 6c8ccdb9..8c07feaa 100644 --- 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 569c225d..7ff04a7e 100644 --- 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 4460e912..dac39f58 100644 --- 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 @@

- {!! 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]) !!}
@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 index 00000000..d481b57d --- /dev/null +++ b/wp-content/themes/physioassist/resources/views/woocommerce/mini-cart.blade.php @@ -0,0 +1,13 @@ +
  • + + @svg('icons/cart', 'menu-cart-icon') + + +
      +
    • +
      + @php(woocommerce_mini_cart()) +
      +
      • +
    +
    • -- 2.39.5