Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Order confirmation: Update mobile order summary styling so items appear side by side (#50722) 

* Update order confirmation wording

* Style order details inline

* Changelog

* Update test due to change of text
This commit is contained in:
Mike Jolley 2024-08-23 19:22:59 +01:00 committed by GitHub
parent d773bb483a
commit 6c4a26770d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/summary/style.scss
View File

@ -26,7 +26,14 @@
} }
@media only screen and (max-width: 480px) { @media only screen and (max-width: 480px) {
flex-direction: column; li {
width: 100%;
> .wc-block-order-confirmation-summary-list-item__key,
> .wc-block-order-confirmation-summary-list-item__value {
display: inline;
}
}
} }
} }
.woocommerce-verify-email { .woocommerce-verify-email {

4
plugins/woocommerce/changelog/update-mobile-order-summary-styling-50635 Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: tweak
On mobile, style order confirmation page details side by side

4
plugins/woocommerce/src/Blocks/BlockTypes/OrderConfirmation/Summary.php
View File

@ -29,11 +29,11 @@ class Summary extends AbstractOrderConfirmationBlock {
} }
$content = '<ul class="wc-block-order-confirmation-summary-list">'; $content = '<ul class="wc-block-order-confirmation-summary-list">';
$content .= $this->render_summary_row( __( 'Order number:', 'woocommerce' ), $order->get_order_number() ); $content .= $this->render_summary_row( __( 'Order #:', 'woocommerce' ), $order->get_order_number() );
$content .= $this->render_summary_row( __( 'Date:', 'woocommerce' ), wc_format_datetime( $order->get_date_created() ) ); $content .= $this->render_summary_row( __( 'Date:', 'woocommerce' ), wc_format_datetime( $order->get_date_created() ) );
$content .= $this->render_summary_row( __( 'Total:', 'woocommerce' ), $order->get_formatted_order_total() ); $content .= $this->render_summary_row( __( 'Total:', 'woocommerce' ), $order->get_formatted_order_total() );
$content .= $this->render_summary_row( __( 'Email:', 'woocommerce' ), $order->get_billing_email() ); $content .= $this->render_summary_row( __( 'Email:', 'woocommerce' ), $order->get_billing_email() );
$content .= $this->render_summary_row( __( 'Payment method:', 'woocommerce' ), $order->get_payment_method_title() ); $content .= $this->render_summary_row( __( 'Payment:', 'woocommerce' ), $order->get_payment_method_title() );
$content .= '</ul>'; $content .= '</ul>';
return $content; return $content;

2
plugins/woocommerce/tests/e2e-pw/tests/merchant/customer-payment-page.spec.js
View File

@ -114,7 +114,7 @@ test.describe(
page.getByText( 'Your order has been received' ) page.getByText( 'Your order has been received' )
).toBeVisible(); ).toBeVisible();
await expect( await expect(
page.getByText( `Order number: ${ orderId }` ) page.getByText( `Order #: ${ orderId }` )
).toBeVisible(); ).toBeVisible();
await expect( await expect(
await page.getByText( `Total: $${ productPrice }` ).count() await page.getByText( `Total: $${ productPrice }` ).count()