Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Add table styles for order details #10185

Merged
merged 4 commits into from
Jul 18, 2023
Merged

Add table styles for order details #10185

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
26ebd0a
Add table styles for order details
mikejolley Jul 12, 2023
51ad63d
__experimentalFontWeight
mikejolley Jul 12, 2023
42be2c4
Add link styles
mikejolley Jul 14, 2023
e0529a6
Handle preview link styles
mikejolley Jul 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions assets/js/blocks/order-confirmation/status/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
"color": {
"background": true,
"text": true,
"gradients": true,
"__experimentalDefaultControls": {
"background": true,
"text": true
Expand Down
1 change: 1 addition & 0 deletions assets/js/blocks/order-confirmation/summary/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
"color": {
"background": true,
"text": true,
"gradients": true,
"__experimentalDefaultControls": {
"background": true,
"text": true
Expand Down
47 changes: 46 additions & 1 deletion assets/js/blocks/order-confirmation/totals/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,52 @@
"keywords": [ "WooCommerce" ],
"supports": {
"multiple": false,
"align": [ "wide", "full" ]
"align": [ "wide", "full" ],
"html": false,
"typography": {
"fontSize": true,
"lineHeight": true,
"__experimentalFontFamily": true,
"__experimentalTextDecoration": true,
"__experimentalFontStyle": true,
"__experimentalFontWeight": true,
"__experimentalLetterSpacing": true,
"__experimentalTextTransform": true,
"__experimentalDefaultControls": {
"fontSize": true
}
},
"color": {
"background": true,
"text": true,
"link": true,
"gradients": true,
"__experimentalDefaultControls": {
"background": true,
"text": true
},
"__experimentalSkipSerialization": true
},
"spacing": {
"padding": true,
"margin": true,
"__experimentalDefaultControls": {
"margin": false,
"padding": false
}
},
"__experimentalBorder": {
"color": true,
"style": true,
"width": true,
"__experimentalDefaultControls": {
"color": true,
"style": true,
"width": true
},
"__experimentalSkipSerialization": true
},
"__experimentalSelector": ".wp-block-woocommerce-order-confirmation-totals table"
},
"attributes": {
"align": {
Expand Down
40 changes: 25 additions & 15 deletions assets/js/blocks/order-confirmation/totals/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,36 @@
.wc-block-order-confirmation-totals {
.woocommerce-order-details table,
.woocommerce-order-details table.shop_table {
table {
width: 100%;
border: 1px solid currentColor;
border-bottom: 0;

thead {
text-transform: uppercase;
border-collapse: collapse;
th,
td {
border: 1px solid currentColor;
border-right-width: 0;
border-left-width: 0;
padding: $gap;
margin: 0;
text-align: left;
font-weight: inherit;
}

th {
thead {
font-weight: bold;
}

.wc-block-order-confirmation-totals__total {
font-variant-numeric: tabular-nums;
text-align: right;
}
}
table[style*="border-width"] {
> *,
tr,
th,
td {
border-style: solid;
border-color: currentColor;
border-width: 0 0 1px 0;
padding: $gap-small;
margin: 0;
text-align: left;
border-style: inherit;
border-width: inherit;
border-color: inherit;
border-right-width: 0;
border-left-width: 0;
}
}
}
Expand Down
126 changes: 89 additions & 37 deletions src/BlockTypes/OrderConfirmation/Totals.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,18 +36,24 @@ protected function render( $attributes, $content, $block ) {
}
}

$content = $order ? $this->render_content( $order ) : $this->render_content_fallback();
$content = $order ? $this->render_content( $order, $attributes ) : $this->render_content_fallback();
$classes_and_styles = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes, [], [ 'border_color', 'border_radius', 'border_width', 'background_color', 'text_color' ] );
$classname = $attributes['className'] ?? '';
$classes_and_styles = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes );

if ( isset( $attributes['align'] ) ) {
$classname .= " align{$attributes['align']}";
}

if ( ! empty( $attributes['isPreview'] ) ) {
$styles = $this->get_link_styles( $attributes );
$content .= '<style>' . esc_html( $styles ) . '</style>';
}

return sprintf(
'<div class="wc-block-%4$s %1$s %2$s">%3$s</div>',
'<div class="wc-block-%5$s %1$s %2$s" style="%3$s">%4$s</div>',
esc_attr( $classes_and_styles['classes'] ),
esc_attr( $classname ),
esc_attr( $classes_and_styles['styles'] ),
$content,
esc_attr( $this->block_name )
);
Expand All @@ -62,35 +68,64 @@ protected function render_content_fallback() {
return '<p>' . esc_html__( 'The details of your order can be found in the email that was sent to you when the order was placed.', 'woo-gutenberg-products-block' ) . '</p>';
}

/**
* Enqueue frontend assets for this block, just in time for rendering.
*
* @param array $attributes Any attributes that currently are available from the block.
* @return string
*/
protected function get_link_styles( array $attributes ) {
$link_classes_and_styles = StyleAttributesUtils::get_link_color_class_and_style( $attributes );
$link_hover_classes_and_styles = StyleAttributesUtils::get_link_hover_color_class_and_style( $attributes );

return '
.wc-block-order-confirmation-totals__table a {' . $link_classes_and_styles['style'] . '}
.wc-block-order-confirmation-totals__table a:hover, .wc-block-order-confirmation-totals__table a:focus {' . $link_hover_classes_and_styles['style'] . '}
';
}

/**
* Enqueue frontend assets for this block, just in time for rendering.
*
* @param array $attributes Any attributes that currently are available from the block.
*/
protected function enqueue_assets( array $attributes ) {
parent::enqueue_assets( $attributes );

$styles = $this->get_link_styles( $attributes );

wp_add_inline_style( 'wc-blocks-style', $styles );
}

/**
* This renders the content of the block within the wrapper.
*
* @param \WC_Order $order Order object.
* @param array $attributes Block attributes.
* @return string
*/
protected function render_content( $order ) {
return '
<section class="woocommerce-order-details">
' . $this->get_hook_content( 'woocommerce_order_details_before_order_table', [ $order ] ) . '
<table class="woocommerce-table woocommerce-table--order-details shop_table order_details" cellspacing="0">
<thead>
<tr>
<th class="woocommerce-table__product-name product-name">' . esc_html__( 'Product', 'woo-gutenberg-products-block' ) . '</th>
<th class="woocommerce-table__product-table product-total">' . esc_html__( 'Total', 'woo-gutenberg-products-block' ) . '</th>
</tr>
</thead>
<tbody>
' . $this->get_hook_content( 'woocommerce_order_details_before_order_table_items', [ $order ] ) . '
' . $this->render_order_details_table_items( $order ) . '
' . $this->get_hook_content( 'woocommerce_order_details_after_order_table_items', [ $order ] ) . '
</tbody>
<tfoot>
' . $this->render_order_details_table_totals( $order ) . '
' . $this->render_order_details_table_customer_note( $order ) . '
</tfoot>
</table>
' . $this->get_hook_content( 'woocommerce_order_details_after_order_table', [ $order ] ) . '
</section>
protected function render_content( $order, $attributes = [] ) {
$classes_and_styles = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes, [ 'border_color', 'border_radius', 'border_width', 'background_color', 'text_color' ] );

return $this->get_hook_content( 'woocommerce_order_details_before_order_table', [ $order ] ) . '
<table cellspacing="0" class="wc-block-order-confirmation-totals__table ' . esc_attr( $classes_and_styles['classes'] ) . '" style="' . esc_attr( $classes_and_styles['styles'] ) . '">
<thead>
<tr>
<th class="wc-block-order-confirmation-totals__product">' . esc_html__( 'Product', 'woo-gutenberg-products-block' ) . '</th>
<th class="wc-block-order-confirmation-totals__total">' . esc_html__( 'Total', 'woo-gutenberg-products-block' ) . '</th>
</tr>
</thead>
<tbody>
' . $this->get_hook_content( 'woocommerce_order_details_before_order_table_items', [ $order ] ) . '
' . $this->render_order_details_table_items( $order, $attributes ) . '
' . $this->get_hook_content( 'woocommerce_order_details_after_order_table_items', [ $order ] ) . '
</tbody>
<tfoot>
' . $this->render_order_details_table_totals( $order ) . '
' . $this->render_order_details_table_customer_note( $order ) . '
</tfoot>
</table>
' . $this->get_hook_content( 'woocommerce_order_details_after_order_table', [ $order ] ) . '
' . $this->get_hook_content( 'woocommerce_after_order_details', [ $order ] ) . '
';
}
Expand All @@ -101,9 +136,10 @@ protected function render_content( $order ) {
* Loosely based on the templates order-details.php and order-details-item.php from core.
*
* @param \WC_Order $order Order object.
* @param array $attributes Block attributes.
* @return string
*/
protected function render_order_details_table_items( $order ) {
protected function render_order_details_table_items( $order, $attributes ) {
$return = '';
$order_items = array_filter(
// phpcs:ignore WooCommerce.Commenting.CommentHooks.MissingHookComment
Expand All @@ -116,7 +152,7 @@ function( $item ) {

foreach ( $order_items as $item_id => $item ) {
$product = $item->get_product();
$return .= $this->render_order_details_table_item( $order, $item_id, $item, $product );
$return .= $this->render_order_details_table_item( $order, $item_id, $item, $product, $attributes );
}

return $return;
Expand All @@ -129,14 +165,21 @@ function( $item ) {
* @param integer $item_id Item ID.
* @param \WC_Order_Item $item Item object.
* @param \WC_Product|false $product Product object if it exists.
* @param array $attributes Block attributes.
* @return string
*/
protected function render_order_details_table_item( $order, $item_id, $item, $product ) {
protected function render_order_details_table_item( $order, $item_id, $item, $product, $attributes ) {
$is_visible = $product && $product->is_visible();
// phpcs:ignore WooCommerce.Commenting.CommentHooks.MissingHookComment
$row_class = apply_filters( 'woocommerce_order_item_class', 'woocommerce-table__line-item order_item', $item, $order );
// phpcs:ignore WooCommerce.Commenting.CommentHooks.MissingHookComment
$product_permalink = apply_filters( 'woocommerce_order_item_permalink', $is_visible ? $product->get_permalink( $item ) : '', $item, $order );

// Previews enable links.
if ( ! empty( $attributes['isPreview'] ) ) {
$product_permalink = '#';
}

// phpcs:ignore WooCommerce.Commenting.CommentHooks.MissingHookComment
$item_name = apply_filters(
'woocommerce_order_item_name',
Expand All @@ -156,15 +199,15 @@ protected function render_order_details_table_item( $order, $item_id, $item, $pr

return '
<tr class="' . esc_attr( $row_class ) . '">
<td class="woocommerce-table__product-name product-name">
<th scope="row" class="wc-block-order-confirmation-totals__product">
' . wp_kses_post( $item_name ) . '&nbsp;
' . wp_kses_post( $item_qty ) . '
' . $this->get_hook_content( 'woocommerce_order_item_meta_start', [ $item_id, $item, $order, false ] ) . '
' . wc_display_item_meta( $item, [ 'echo' => false ] ) . '
' . $this->get_hook_content( 'woocommerce_order_item_meta_end', [ $item_id, $item, $order, false ] ) . '
' . $this->render_order_details_table_item_purchase_note( $order, $product ) . '
</td>
<td class="woocommerce-table__product-total product-total">
<td class="wc-block-order-confirmation-totals__total">
' . wp_kses_post( $order->get_formatted_line_subtotal( $item ) ) . '
</td>
</tr>
Expand Down Expand Up @@ -193,13 +236,22 @@ protected function render_order_details_table_item_purchase_note( $order, $produ
* @return string
*/
protected function render_order_details_table_totals( $order ) {
$return = '';
add_filter( 'woocommerce_order_shipping_to_display_shipped_via', '__return_empty_string' );

$return = '';
$total_rows = array_diff_key(
$order->get_order_item_totals(),
array(
'cart_subtotal' => '',
'payment_method' => '',
)
);

foreach ( $order->get_order_item_totals() as $total ) {
foreach ( $total_rows as $total ) {
$return .= '
<tr>
<th scope="row">' . esc_html( $total['label'] ) . '</th>
<td>' . wp_kses_post( $total['value'] ) . '</td>
<th class="wc-block-order-confirmation-totals__label" scope="row">' . esc_html( $total['label'] ) . '</th>
<td class="wc-block-order-confirmation-totals__total">' . wp_kses_post( $total['value'] ) . '</td>
</tr>
';
}
Expand All @@ -219,8 +271,8 @@ protected function render_order_details_table_customer_note( $order ) {
}

return '<tr>
<th>' . esc_html__( 'Note:', 'woo-gutenberg-products-block' ) . '</th>
<td>' . wp_kses_post( nl2br( wptexturize( $order->get_customer_note() ) ) ) . '</td>
<th class="wc-block-order-confirmation-totals__label" scope="row">' . esc_html__( 'Note:', 'woo-gutenberg-products-block' ) . '</th>
<td class="wc-block-order-confirmation-totals__note">' . wp_kses_post( nl2br( wptexturize( $order->get_customer_note() ) ) ) . '</td>
</tr>';
}
}
Loading