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
This commit is contained in:
Matt Sherman
GitHub
parent
a92c16d93d
commit
3e7d2fbe15
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.83337 4.66674C2.83337 3.65422 3.65419 2.8334 4.66671 2.8334H6.83337V3.8334H4.66671C4.20647 3.8334 3.83337 4.2065 3.83337 4.66674V11.3334C3.83337 11.7936 4.20647 12.1667 4.66671 12.1667H11.3334C11.7936 12.1667 12.1667 11.7936 12.1667 11.3334V8.90748H13.1667V11.3334C13.1667 12.3459 12.3459 13.1667 11.3334 13.1667H4.66671C3.65419 13.1667 2.83337 12.3459 2.83337 11.3334V4.66674Z" fill="#1B71B1"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.4156 3.01306L9.93204 3.02428L9.92752 2.02429L14.1325 2.00529L14.0964 6.19525L13.0965 6.18665L13.1177 3.72518L8.86104 7.9818L8.15393 7.27469L12.4156 3.01306Z" fill="#1B71B1"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 779 B |
|
|
@ -0,0 +1,8 @@
|
|||
<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="mask0_211_34197" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="6" y="6" width="68" height="68">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M73.3333 40C73.3333 21.59 58.41 6.66667 40 6.66667C21.59 6.66667 6.66663 21.59 6.66663 40C6.66663 58.41 21.59 73.3333 40 73.3333C58.41 73.3333 73.3333 58.41 73.3333 40ZM40 13.3333C25.2966 13.3333 13.3333 25.2967 13.3333 40C13.3333 54.7033 25.2966 66.6667 40 66.6667C54.7033 66.6667 66.6666 54.7033 66.6666 40C66.6666 25.2967 54.7033 13.3333 40 13.3333ZM43.3333 30V23.3333H36.6666V30H43.3333ZM43.3333 36.6667V56.6667H36.6666V36.6667H43.3333Z" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_211_34197)">
|
||||
<rect width="80" height="80" fill="#DCDCDE"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 819 B |
|
|
@ -0,0 +1,4 @@
|
|||
Significance: minor
|
||||
Type: enhancement
|
||||
|
||||
Show info message when on variations tab and no attributes have been assigned to product.
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -8,11 +8,33 @@
|
|||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
$add_attributes_icon_url = WC_ADMIN_IMAGES_FOLDER_URL . '/icons/info.svg';
|
||||
?>
|
||||
<div id="variable_product_options" class="panel wc-metaboxes-wrapper hidden">
|
||||
<div id="variable_product_options_inner">
|
||||
|
||||
<?php if ( ! count( $variation_attributes ) ) : ?>
|
||||
<?php if ( ! count( $variation_attributes ) && ( ( $global_attributes_count > 0 ) || ( $non_variation_attributes_count > 0 ) ) ) : ?>
|
||||
|
||||
<div class="add-attributes-container">
|
||||
<div class="add-attributes-message">
|
||||
<img src="<?php echo esc_url( $add_attributes_icon_url ); ?>" />
|
||||
<p>
|
||||
<?php
|
||||
echo wp_kses_post(
|
||||
sprintf(
|
||||
/* translators: %1$s: url for attributes tab, %2$s: url for variable product documentation */
|
||||
__( 'Add some attributes in the <a href="%1$s">Attributes</a> tab to generate variations. Make sure to check the <b>Used for variations</b> box. <a href="%2$s" target="_blank" rel="noreferrer">Learn more</a>', 'woocommerce' ),
|
||||
esc_url( '#product_attributes' ),
|
||||
esc_url( 'https://woocommerce.com/document/variable-product/' )
|
||||
)
|
||||
);
|
||||
?>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php elseif ( ! count( $variation_attributes ) ) : ?>
|
||||
|
||||
<div id="message" class="inline notice woocommerce-message">
|
||||
<p>
|
||||
|
|
|
|||
Loading…
Reference in New Issue