From d4e0b4c19d0a16e3da6efa386bbf6d0a280a4da1 Mon Sep 17 00:00:00 2001 From: Miguel Peixe Date: Mon, 26 Jun 2023 18:19:11 -0300 Subject: [PATCH 1/3] feat(modal-checkout): feature parity with theme's order details options --- src/modal-checkout/checkout.scss | 12 ++++- .../templates/checkout-form.php | 54 +++++++++++++++---- 2 files changed, 54 insertions(+), 12 deletions(-) diff --git a/src/modal-checkout/checkout.scss b/src/modal-checkout/checkout.scss index 0e8ccaca2..7e8d3fe4f 100644 --- a/src/modal-checkout/checkout.scss +++ b/src/modal-checkout/checkout.scss @@ -3,6 +3,16 @@ #newspack_modal_checkout { /* stylelint-disable-line */ padding: 32px; font-size: 1rem; + .cart-summary-header { + align-items: center; + display: flex; + justify-content: space-between; + margin: 0 0 0.5rem; + h3 { + margin: 0; + font-size: 1em; + } + } .order-details-summary { border: 2px solid; border-radius: 3px; @@ -78,7 +88,7 @@ #payment button#place_order { /* stylelint-disable-line */ margin-bottom: 0; } - button { + .checkout-billing button[type='submit'] { display: block; width: 100%; } diff --git a/src/modal-checkout/templates/checkout-form.php b/src/modal-checkout/templates/checkout-form.php index e4929be3e..4c30e44d8 100644 --- a/src/modal-checkout/templates/checkout-form.php +++ b/src/modal-checkout/templates/checkout-form.php @@ -17,10 +17,16 @@ $edit_billing = ! $has_filled_billing || isset( $_REQUEST['edit_billing'] ); // phpcs:ignore WordPress.Security.NonceVerification.Recommended $form_action = $edit_billing ? '#checkout' : wc_get_checkout_url(); -$form_class = $edit_billing ? 'edit-billing' : 'checkout woocommerce-checkout'; +$form_class = 'checkout woocommerce-checkout'; $form_method = $edit_billing ? 'get' : 'post'; $form_billing_fields = \Newspack_Blocks\Modal_Checkout::get_prefilled_fields(); +if ( $edit_billing ) { + $form_class .= ' edit-billing'; +} + +$order_details_display = get_theme_mod( 'collapse_order_details', 'hide' ); + do_action( 'woocommerce_before_checkout_form', $checkout ); // If checkout registration is disabled and not logged in, the user cannot checkout. @@ -30,14 +36,17 @@ } ?> -
- - - + +
+

+ +
+ + +
+ + + + + + + + +
+ +
+ + + +

+ + - cart->display_prices_including_tax() && ! $edit_billing ) : ?>
- + + + +
get_checkout_fields() ) : ?> From 574f1a40acfc9cee9d063a309e0e5efba2eedd57 Mon Sep 17 00:00:00 2001 From: Miguel Peixe Date: Wed, 28 Jun 2023 11:14:49 -0300 Subject: [PATCH 2/3] feat: condition order details to cart context --- includes/class-modal-checkout.php | 44 +++++++++++++++++++ src/modal-checkout/checkout.scss | 7 ++- src/modal-checkout/index.js | 32 ++++++++++++++ .../templates/checkout-form.php | 33 +++----------- 4 files changed, 89 insertions(+), 27 deletions(-) diff --git a/includes/class-modal-checkout.php b/includes/class-modal-checkout.php index 518f648c1..8dc12d24d 100644 --- a/includes/class-modal-checkout.php +++ b/includes/class-modal-checkout.php @@ -42,6 +42,7 @@ public static function init() { add_filter( 'wc_get_template', [ __CLASS__, 'wc_get_template' ], 10, 2 ); add_filter( 'woocommerce_checkout_get_value', [ __CLASS__, 'woocommerce_checkout_get_value' ], 10, 2 ); add_filter( 'woocommerce_checkout_fields', [ __CLASS__, 'woocommerce_checkout_fields' ] ); + add_filter( 'woocommerce_update_order_review_fragments', [ __CLASS__, 'order_review_fragments' ] ); } /** @@ -481,5 +482,48 @@ function( $field ) { } return true; } + + /** + * Whether to show order details table. + * + * @return bool + */ + private static function should_show_order_details() { + $cart = \WC()->cart; + if ( $cart->is_empty() ) { + return false; + } + if ( ! empty( $cart->get_applied_coupons() ) ) { + return true; + } + if ( \wc_tax_enabled() && ! $cart->display_prices_including_tax() ) { + return true; + } + if ( 1 < $cart->get_cart_contents_count() ) { + return true; + } + return false; + } + + /** + * Customize order review fragments on cart updates. + * + * @param array $fragments Fragments. + * + * @return array + */ + public static function order_review_fragments( $fragments ) { + if ( isset( $_POST['post_data'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification.Missing + parse_str( \sanitize_text_field( \wp_unslash( $_POST['post_data'] ) ), $post_data ); // phpcs:ignore WordPress.Security.NonceVerification.Missing + } + if ( ! isset( $post_data['modal_checkout'] ) ) { + return $fragments; + } + if ( ! self::should_show_order_details() ) { + // Render an empty table so WC knows how to replace it on updates. + $fragments['.woocommerce-checkout-review-order-table'] = '
'; + } + return $fragments; + } } Modal_Checkout::init(); diff --git a/src/modal-checkout/checkout.scss b/src/modal-checkout/checkout.scss index 7e8d3fe4f..e44a65bd6 100644 --- a/src/modal-checkout/checkout.scss +++ b/src/modal-checkout/checkout.scss @@ -38,6 +38,10 @@ td { font-size: 0.8rem; } + &.empty { + margin: 0; + padding: 0; + } } .woocommerce-billing-fields { margin-bottom: 16px; @@ -88,7 +92,8 @@ #payment button#place_order { /* stylelint-disable-line */ margin-bottom: 0; } - .checkout-billing button[type='submit'] { + .checkout-billing button[type='submit'], + button.modal-continue { display: block; width: 100%; } diff --git a/src/modal-checkout/index.js b/src/modal-checkout/index.js index c96761e28..5ffcbae1c 100644 --- a/src/modal-checkout/index.js +++ b/src/modal-checkout/index.js @@ -2,3 +2,35 @@ * Style dependencies */ import './checkout.scss'; + +/** + * Specify a function to execute when the DOM is fully loaded. + * + * @see https://github.com/WordPress/gutenberg/blob/trunk/packages/dom-ready/ + * + * @param {Function} callback A function to execute after the DOM is ready. + * @return {void} + */ +function domReady( callback ) { + if ( typeof document === 'undefined' ) { + return; + } + if ( + document.readyState === 'complete' || // DOMContentLoaded + Images/Styles/etc loaded, so we call directly. + document.readyState === 'interactive' // DOMContentLoaded fires at this point, so we call directly. + ) { + return void callback(); + } + // DOMContentLoaded has not fired yet, delay callback until then. + document.addEventListener( 'DOMContentLoaded', callback ); +} + +domReady( () => { + const continueButton = document.querySelector( '.modal-continue' ); + if ( continueButton ) { + continueButton.addEventListener( 'click', () => { + const form = document.querySelector( '.checkout' ); + form.submit(); + } ); + } +} ); diff --git a/src/modal-checkout/templates/checkout-form.php b/src/modal-checkout/templates/checkout-form.php index 4c30e44d8..ff5c1bf63 100644 --- a/src/modal-checkout/templates/checkout-form.php +++ b/src/modal-checkout/templates/checkout-form.php @@ -13,6 +13,8 @@ // phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedHooknameFound -- WooCommerce hooks. // phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound -- Template variables. +$cart = WC()->cart; + $has_filled_billing = \Newspack_Blocks\Modal_Checkout::has_filled_required_fields( 'billing' ); $edit_billing = ! $has_filled_billing || isset( $_REQUEST['edit_billing'] ); // phpcs:ignore WordPress.Security.NonceVerification.Recommended @@ -25,8 +27,6 @@ $form_class .= ' edit-billing'; } -$order_details_display = get_theme_mod( 'collapse_order_details', 'hide' ); - do_action( 'woocommerce_before_checkout_form', $checkout ); // If checkout registration is disabled and not logged in, the user cannot checkout. @@ -36,21 +36,11 @@ } ?> - -
-

- -
- - - +get_cart_contents_count() ) : ?>
cart->get_cart() as $cart_item_key => $cart_item ) { + foreach ( $cart->get_cart() as $cart_item_key => $cart_item ) { $_product = apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key ); if ( $_product && $_product->exists() && $cart_item['quantity'] > 0 && apply_filters( 'woocommerce_checkout_cart_item_visible', true, $cart_item, $cart_item_key ) ) { @@ -65,7 +55,7 @@ cart->get_product_subtotal( $_product, $cart_item['quantity'] ), $cart_item, $cart_item_key ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped + echo apply_filters( 'woocommerce_cart_item_subtotal', $cart->get_product_subtotal( $_product, $cart_item['quantity'] ), $cart_item, $cart_item_key ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?> @@ -85,23 +75,14 @@ } ?> - -
- -
- +
-

- -
- -
get_checkout_fields() ) : ?> @@ -111,7 +92,7 @@
- +
From 541eca8ed067593a2d6c6e230a9c24324bdfeae3 Mon Sep 17 00:00:00 2001 From: Miguel Peixe Date: Wed, 28 Jun 2023 12:22:03 -0300 Subject: [PATCH 3/3] chore: remove unused css --- src/modal-checkout/checkout.scss | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/src/modal-checkout/checkout.scss b/src/modal-checkout/checkout.scss index e44a65bd6..a16857122 100644 --- a/src/modal-checkout/checkout.scss +++ b/src/modal-checkout/checkout.scss @@ -3,16 +3,6 @@ #newspack_modal_checkout { /* stylelint-disable-line */ padding: 32px; font-size: 1rem; - .cart-summary-header { - align-items: center; - display: flex; - justify-content: space-between; - margin: 0 0 0.5rem; - h3 { - margin: 0; - font-size: 1em; - } - } .order-details-summary { border: 2px solid; border-radius: 3px;