From c0d5e2100c7fb8b1b6f415629fa65e04ac0ffbd7 Mon Sep 17 00:00:00 2001 From: "stephen@cubedesigners.com" Date: Wed, 16 Dec 2020 10:28:47 +0000 Subject: [PATCH] Committing previous changes that were awaiting validation. WIP #3678 @12 --- .../physioassist/src/WooCommerce/Setup.php | 85 +++++++++++++++++++ .../physioassist/resources/assets/config.json | 2 +- .../assets/images/icons/cart-add.svg | 1 + .../assets/images/icons/poubelle.svg | 15 ++++ .../components/woocommerce-mini-cart.styl | 26 +++++- .../assets/styles/components/woocommerce.styl | 77 +++++++++++++++-- .../woocommerce/archive-product.blade.php | 6 +- .../woocommerce/mini-cart-link.blade.php | 6 ++ .../views/woocommerce/mini-cart.blade.php | 4 +- .../woocommerce/single-product.blade.php | 6 +- 10 files changed, 210 insertions(+), 18 deletions(-) create mode 100644 wp-content/themes/physioassist/resources/assets/images/icons/cart-add.svg create mode 100644 wp-content/themes/physioassist/resources/assets/images/icons/poubelle.svg create mode 100644 wp-content/themes/physioassist/resources/views/woocommerce/mini-cart-link.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 c8464639..4f9715b3 100644 --- a/wp-content/mu-plugins/physioassist/src/WooCommerce/Setup.php +++ b/wp-content/mu-plugins/physioassist/src/WooCommerce/Setup.php @@ -19,6 +19,13 @@ class Setup { // Add WooCommerce mini-cart to the main nav (primary_navigation) add_filter('wp_nav_menu_items', [$this, 'woocommerce_cart_menu'], 10, 2); + // Update mini-cart link count on AJAX updates + add_filter('woocommerce_add_to_cart_fragments', [$this, 'woocommerce_add_to_cart_fragment']); + + // Remove content wrappers + remove_action('woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10); + remove_action('woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10); + // Remove product sorting dropdowns // Ref: https://rudrastyh.com/woocommerce/remove-product-sorting-dropdown.html remove_action('woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30); @@ -26,6 +33,15 @@ class Setup { // Remove product count remove_action('woocommerce_before_shop_loop', 'woocommerce_result_count', 20); + // Replace add to cart button with icon + //add_filter('woocommerce_loop_add_to_cart_link', [$this, 'add_to_cart_button'], 10, 3); + + // Change number of columns on shop page + add_filter('loop_shop_columns', function() { return 3; }, 999); + + // Replace remove cart item "x" with custom icon + add_filter('woocommerce_cart_item_remove_link', [$this, 'cart_remove_link'], 10, 2); + // Remove product single page meta (Category) remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40); @@ -36,13 +52,22 @@ class Setup { // Also disable the headings in custom tabs add_filter('yikes_woocommerce_custom_repeatable_product_tabs_heading', '__return_false'); + + // Add Newsletter subscription checkbox to checkout + add_action('woocommerce_review_order_before_submit', [$this, 'newsletter_checkbox']); + // Save Newsletter checkbox + add_action('woocommerce_checkout_update_order_meta', [$this, 'newsletter_checkbox_process']); } public function woocommerce_cart_menu($menu, $args) { + // The shop is only available on the French version of the site so we need to check this + $isFrench = apply_filters('wpml_current_language', NULL) === 'fr'; + // Only continue if woocommerce mini cart is available and we're on the primary_navigation menu if (!function_exists('woocommerce_mini_cart') //|| WC()->cart->cart_contents_count < 1 + || !$isFrench || $args->theme_location !== 'primary_navigation') { return $menu; } @@ -52,4 +77,64 @@ class Setup { return $menu; } + public function woocommerce_add_to_cart_fragment($fragments) { + // Re-run and populate updated cart link template + $fragments['a.menu-cart-link'] = template('woocommerce/mini-cart-link'); + + return $fragments; + } + + public function add_to_cart_button($html, $product, $args) { + if ($product->is_purchasable() && !$product->is_sold_individually() && $product->is_in_stock() && 'variable' != $product->get_type() && 'bundle' != $product->get_type()) { + + return sprintf( + '%s', + esc_url( $product->add_to_cart_url() ), + esc_attr( isset( $args['quantity'] ) ? $args['quantity'] : 1 ), + //esc_attr( isset( $args['class'] ) ? $args['class'] : 'button' ), + 'add_to_cart_button ajax_add_to_cart', // WooCommerce CSS is a mess so just add these for the JS to hook + isset( $args['attributes'] ) ? wc_implode_html_attributes( $args['attributes'] ) : '', + \BladeSvgSage\svg_image('icons/cart-add')->toHtml() + ); + + //return '
'. print_r($args, true) .'
'; + } + + return $html; + } + + + public function cart_remove_link($html, $cart_item_key) { + + // Instead of trying to recreate the full HTML link with all the attributes, it's easier + // to replace the part we don't want: the × with the SVG icon + $icon = \BladeSvgSage\svg_image('icons/poubelle')->toHtml(); + + return str_replace('×', $icon, $html); + + } + + public function newsletter_checkbox() { + woocommerce_form_field('newsletter_subscribe', array( + 'type' => 'checkbox', + 'class' => [], + 'label' => __('Je souhaite recevoir la newsletter et les offres de PhysioAssist'), + 'required' => false, + 'default' => 1, // Pre-check the checkbox + ), WC()->checkout->get_value('newsletter_subscribe')); + } + + public function newsletter_checkbox_process($order_ID) { + + $newsletter = (isset($_POST['newsletter_subscribe']) && $_POST['newsletter_subscribe'] == 1) ? __('Oui') : __('Non'); + + update_post_meta($order_ID, 'Newsletter', $newsletter); + + // ToDo: send an e-mail notifying when there is a new subscriber + if ($newsletter === __('Oui')) { + // ADDRESS: $_POST['billing_email'] + } + + } + } diff --git a/wp-content/themes/physioassist/resources/assets/config.json b/wp-content/themes/physioassist/resources/assets/config.json index 1a096a71..1d897715 100644 --- a/wp-content/themes/physioassist/resources/assets/config.json +++ b/wp-content/themes/physioassist/resources/assets/config.json @@ -39,7 +39,7 @@ ] }, "publicPath": "/wp-content/themes/physioassist", - "devUrl": "https://physioassist.test", + "devUrl": "https://fr.physioassist.test", "proxyUrl": "https://localhost:3000", "cacheBusting": "[name]_[hash:8]", "watch": [ diff --git a/wp-content/themes/physioassist/resources/assets/images/icons/cart-add.svg b/wp-content/themes/physioassist/resources/assets/images/icons/cart-add.svg new file mode 100644 index 00000000..235f5fb3 --- /dev/null +++ b/wp-content/themes/physioassist/resources/assets/images/icons/cart-add.svg @@ -0,0 +1 @@ + diff --git a/wp-content/themes/physioassist/resources/assets/images/icons/poubelle.svg b/wp-content/themes/physioassist/resources/assets/images/icons/poubelle.svg new file mode 100644 index 00000000..b949c581 --- /dev/null +++ b/wp-content/themes/physioassist/resources/assets/images/icons/poubelle.svg @@ -0,0 +1,15 @@ + + + + + + + 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 index 1af3df55..ec84f8e7 100644 --- 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 @@ -16,6 +16,11 @@ margin-bottom: 0.8em; margin-top: 0.9em; + #mobileMenu & + width: 26px + margin-left: auto + margin-right: auto + // Create a larger hover zone for the cart icon to make // it easier to touch and keep over when viewing the dropdown &:before @@ -26,6 +31,18 @@ bottom: @top left: @top + &-count + position: absolute + top: -0.25em + left: -0.65em + width: 1.5em + color: #fff + font-size: 12px + line-height: 1.5 + text-align: center + border-radius: 50% + overflow: hidden + background-color: $colors.blue .sub-menu-mini-cart padding: 0 @@ -91,12 +108,17 @@ left: -0.8em top: 0 color: $colors.red !important - width: 1.5rem + width: 1em height: @width line-height: 1 - font-size: @width + font-size: 1.7rem text-align: center + svg + fill: currentColor + width: 0.7em + height: @width + &:hover color: #fff !important background: $colors.red 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 5158f076..10329377 100644 --- a/wp-content/themes/physioassist/resources/assets/styles/components/woocommerce.styl +++ b/wp-content/themes/physioassist/resources/assets/styles/components/woocommerce.styl @@ -40,7 +40,8 @@ box-shadow: 0 0 0 2px $colors.dark-blue #respond input#submit, - a.button, + a.button, + a.added_to_cart, button.button, input.button font-smoothing() @@ -49,6 +50,7 @@ color: #fff font-size: 14px font-weight: 700 + line-height: 1 text-align: center text-transform: uppercase transition: background-color 0.15s @@ -85,20 +87,66 @@ &:disabled[disabled]:hover background-color: #888 - a.added_to_cart - padding-top: 0 - margin: 1em + .add_to_cart_button + position: relative color: $colors.dark-blue &:hover color: $colors.blue - .single_add_to_cart_button - margin-left: 1.5em !important + &.loading + opacity: 0.7 + cursor: wait + pointer-events: none + + // Tick after successfully adding product + &.added:after + content: '\e017' + font-family: 'WooCommerce' + display: inline-block + position: absolute + top: 0 + right: -2.4em + font-size: 1.2em + color: #77a464 + + svg + fill: currentColor + margin-left: 1em + width: 35px + + + a.added_to_cart + margin-top: 1em + + a.added_to_cart + display: block + width: max-content + + // Remove from cart link + a.remove + display: flex + align-items: center + justify-content: center + color: $colors.red !important + font-size: 1.7rem + width: 1em + height: @width + + &:hover + background-color: $colors.red !important + + svg + fill: currentColor + width: 0.7em + height: @width // Product grid ul.products li.product + + +below(550px) + width: 100% !important + .woocommerce-loop-category__title, .woocommerce-loop-product__title, h3 @@ -120,7 +168,16 @@ p.price, span.price margin-bottom: 0.5em + div.summary + width: 64% + +below(769px) + width: 100% + div.images + width: 33% + +below(769px) + width: 100% + .woocommerce-product-gallery__wrapper line-height: 1 // So spacing between inline-block images is correct @@ -149,6 +206,10 @@ .elementor-section.elementor-section-boxed > .elementor-container padding: 0 + #tab-additional_information + h2 + display: none + // Cart &-cart table.cart @@ -195,6 +256,10 @@ //============= // Quantity input -/+ buttons +.qib-container + margin-right: 1.5em + margin-bottom: 0.75em + .qib-button position: relative text-align: center diff --git a/wp-content/themes/physioassist/resources/views/woocommerce/archive-product.blade.php b/wp-content/themes/physioassist/resources/views/woocommerce/archive-product.blade.php index 054ab259..4728e6bb 100644 --- a/wp-content/themes/physioassist/resources/views/woocommerce/archive-product.blade.php +++ b/wp-content/themes/physioassist/resources/views/woocommerce/archive-product.blade.php @@ -21,7 +21,7 @@ the readme will list any important changes.
@php - do_action('get_header', 'shop'); + //do_action('get_header', 'shop'); do_action('woocommerce_before_main_content'); @endphp @@ -63,8 +63,8 @@ the readme will list any important changes. @php do_action('woocommerce_after_main_content'); - do_action('get_sidebar', 'shop'); - do_action('get_footer', 'shop'); + //do_action('get_sidebar', 'shop'); + //do_action('get_footer', 'shop'); @endphp
diff --git a/wp-content/themes/physioassist/resources/views/woocommerce/mini-cart-link.blade.php b/wp-content/themes/physioassist/resources/views/woocommerce/mini-cart-link.blade.php new file mode 100644 index 00000000..3ad4e65c --- /dev/null +++ b/wp-content/themes/physioassist/resources/views/woocommerce/mini-cart-link.blade.php @@ -0,0 +1,6 @@ + + @svg('icons/cart', 'menu-cart-icon') + @if (($cart_count = WC()->cart->get_cart_contents_count()) > 0) + {{ $cart_count }} + @endif + 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 index d481b57d..f40fad5b 100644 --- a/wp-content/themes/physioassist/resources/views/woocommerce/mini-cart.blade.php +++ b/wp-content/themes/physioassist/resources/views/woocommerce/mini-cart.blade.php @@ -1,7 +1,5 @@
  • - - @svg('icons/cart', 'menu-cart-icon') - + @include('woocommerce.mini-cart-link')