From 3e7d2fbe15726520f3cb116a737724d02dacd148 Mon Sep 17 00:00:00 2001 From: Matt Sherman Date: Tue, 28 Mar 2023 10:57:02 -0400 Subject: [PATCH] New empty state for variations when no attributes (#37352) * HTML for new empty state * Go to attributes tab when clicking on link in message * Handle case where local attributes exist but are not used for variations * Make sure the click handler is re-hooked up when attributes are added --- .../assets/images/icons/external-link.svg | 4 +++ .../woocommerce/assets/images/icons/info.svg | 8 +++++ .../update-variations-empty-state-no-attr | 4 +++ .../woocommerce/client/legacy/css/admin.scss | 34 +++++++++++++++++++ .../legacy/js/admin/meta-boxes-product.js | 12 +++++++ .../class-wc-meta-box-product-data.php | 24 +++++++++---- .../views/html-product-data-variations.php | 24 ++++++++++++- 7 files changed, 103 insertions(+), 7 deletions(-) create mode 100644 plugins/woocommerce/assets/images/icons/external-link.svg create mode 100644 plugins/woocommerce/assets/images/icons/info.svg create mode 100644 plugins/woocommerce/changelog/update-variations-empty-state-no-attr diff --git a/plugins/woocommerce/assets/images/icons/external-link.svg b/plugins/woocommerce/assets/images/icons/external-link.svg new file mode 100644 index 00000000000..e021f4dbef9 --- /dev/null +++ b/plugins/woocommerce/assets/images/icons/external-link.svg @@ -0,0 +1,4 @@ + + + + diff --git a/plugins/woocommerce/assets/images/icons/info.svg b/plugins/woocommerce/assets/images/icons/info.svg new file mode 100644 index 00000000000..f85694e0c03 --- /dev/null +++ b/plugins/woocommerce/assets/images/icons/info.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/plugins/woocommerce/changelog/update-variations-empty-state-no-attr b/plugins/woocommerce/changelog/update-variations-empty-state-no-attr new file mode 100644 index 00000000000..b1024baad3d --- /dev/null +++ b/plugins/woocommerce/changelog/update-variations-empty-state-no-attr @@ -0,0 +1,4 @@ +Significance: minor +Type: enhancement + +Show info message when on variations tab and no attributes have been assigned to product. diff --git a/plugins/woocommerce/client/legacy/css/admin.scss b/plugins/woocommerce/client/legacy/css/admin.scss index 45cdcdd07b7..91838040e51 100644 --- a/plugins/woocommerce/client/legacy/css/admin.scss +++ b/plugins/woocommerce/client/legacy/css/admin.scss @@ -1016,6 +1016,40 @@ margin: 1px; } } + + .add-attributes-container { + box-sizing: border-box; + display: flex; + align-items: center; + padding: 32px 0; + height: 360px; + + a { + text-decoration: none; + + &[target="_blank"]::after { + content: url('../images/icons/external-link.svg'); + margin-left: 2px; + vertical-align: sub; + } + } + + .add-attributes-message { + display: flex; + flex-direction: column; + align-items: center; + gap: 24px; + width: 100%; + + p { + width: 90%; + max-width: 544px; + font-size: 14px; + line-height: 18px; + text-align: center; + } + } + } } #product_attributes { diff --git a/plugins/woocommerce/client/legacy/js/admin/meta-boxes-product.js b/plugins/woocommerce/client/legacy/js/admin/meta-boxes-product.js index 3227cd4b7ed..5bc65fd8058 100644 --- a/plugins/woocommerce/client/legacy/js/admin/meta-boxes-product.js +++ b/plugins/woocommerce/client/legacy/js/admin/meta-boxes-product.js @@ -836,6 +836,18 @@ jQuery( function ( $ ) { } ); } ); + // Go to attributes tab when clicking on link in variations message + $( document.body ).on( + 'click', + '#variable_product_options .add-attributes-message a[href="#product_attributes"]', + function () { + $( + '#woocommerce-product-data .attribute_tab a[href="#product_attributes"]' + ).trigger( 'click' ); + return false; + } + ); + // Uploading files. var downloadable_file_frame; var file_path_field; diff --git a/plugins/woocommerce/includes/admin/meta-boxes/class-wc-meta-box-product-data.php b/plugins/woocommerce/includes/admin/meta-boxes/class-wc-meta-box-product-data.php index 560468487b4..4a776a60a20 100644 --- a/plugins/woocommerce/includes/admin/meta-boxes/class-wc-meta-box-product-data.php +++ b/plugins/woocommerce/includes/admin/meta-boxes/class-wc-meta-box-product-data.php @@ -169,6 +169,16 @@ class WC_Meta_Box_Product_Data { return true === $attribute->get_variation(); } + /** + * Filter callback for finding non-variation attributes. + * + * @param WC_Product_Attribute $attribute Product attribute. + * @return bool + */ + private static function filter_non_variation_attributes( $attribute ) { + return false === $attribute->get_variation(); + } + /** * Show options for the variable product type. */ @@ -176,12 +186,14 @@ class WC_Meta_Box_Product_Data { global $post, $wpdb, $product_object; /* phpcs:disable WooCommerce.Commenting.CommentHooks.MissingHookComment */ - $variation_attributes = array_filter( $product_object->get_attributes(), array( __CLASS__, 'filter_variation_attributes' ) ); - $default_attributes = $product_object->get_default_attributes(); - $variations_count = absint( apply_filters( 'woocommerce_admin_meta_boxes_variations_count', $wpdb->get_var( $wpdb->prepare( "SELECT COUNT(ID) FROM $wpdb->posts WHERE post_parent = %d AND post_type = 'product_variation' AND post_status IN ('publish', 'private')", $post->ID ) ), $post->ID ) ); - $variations_per_page = absint( apply_filters( 'woocommerce_admin_meta_boxes_variations_per_page', 15 ) ); - $variations_total_pages = ceil( $variations_count / $variations_per_page ); - $modal_title = get_bloginfo( 'name' ) . __( ' says', 'woocommerce' ); + $global_attributes_count = count( wc_get_attribute_taxonomies() ); + $variation_attributes = array_filter( $product_object->get_attributes(), array( __CLASS__, 'filter_variation_attributes' ) ); + $non_variation_attributes_count = count( array_filter( $product_object->get_attributes(), array( __CLASS__, 'filter_non_variation_attributes' ) ) ); + $default_attributes = $product_object->get_default_attributes(); + $variations_count = absint( apply_filters( 'woocommerce_admin_meta_boxes_variations_count', $wpdb->get_var( $wpdb->prepare( "SELECT COUNT(ID) FROM $wpdb->posts WHERE post_parent = %d AND post_type = 'product_variation' AND post_status IN ('publish', 'private')", $post->ID ) ), $post->ID ) ); + $variations_per_page = absint( apply_filters( 'woocommerce_admin_meta_boxes_variations_per_page', 15 ) ); + $variations_total_pages = ceil( $variations_count / $variations_per_page ); + $modal_title = get_bloginfo( 'name' ) . __( ' says', 'woocommerce' ); /* phpcs: enable */ include __DIR__ . '/views/html-product-data-variations.php'; diff --git a/plugins/woocommerce/includes/admin/meta-boxes/views/html-product-data-variations.php b/plugins/woocommerce/includes/admin/meta-boxes/views/html-product-data-variations.php index c6b0e1bb254..1b85eb444b3 100644 --- a/plugins/woocommerce/includes/admin/meta-boxes/views/html-product-data-variations.php +++ b/plugins/woocommerce/includes/admin/meta-boxes/views/html-product-data-variations.php @@ -8,11 +8,33 @@ if ( ! defined( 'ABSPATH' ) ) { exit; } + +$add_attributes_icon_url = WC_ADMIN_IMAGES_FOLDER_URL . '/icons/info.svg'; ?>