Design enhancements for the Attributes tab
This commit is contained in:
Jason Kytros
parent
785d45fbc3
commit
bb481269ff
|
|
@ -5290,6 +5290,12 @@ img.help_tip {
|
|||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
&.wc-metabox {
|
||||
&.postbox {
|
||||
border: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce_options_panel {
|
||||
|
|
@ -5504,7 +5510,8 @@ img.help_tip {
|
|||
* WooCommerce meta boxes
|
||||
*/
|
||||
.wc-metaboxes-wrapper {
|
||||
:not(#variable_product_options_inner) {
|
||||
:not(#variable_product_options_inner),
|
||||
&#product_attributes {
|
||||
.toolbar:not(.expand-close-hidden) {
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -514,6 +514,23 @@ jQuery( function ( $ ) {
|
|||
$attributeListItem.find( 'h3' ).trigger( 'click' );
|
||||
}
|
||||
|
||||
function toggle_selection_of_attribute_list_item_terms( $attributeListItem ) {
|
||||
|
||||
var $attributeListItemSelectAllButton = $attributeListItem.find( 'button.select_all_attributes' );
|
||||
|
||||
if ( $attributeListItemSelectAllButton.length ) {
|
||||
$attributeListItemSelectAllButton.trigger( 'click' );
|
||||
}
|
||||
}
|
||||
|
||||
function add_placeholder_to_attribute_values_field( $attributeListItem ) {
|
||||
if ( $attributeListItem.find( 'input.woocommerce_attribute_used_for_variations' ).is( ':checked' ) ) {
|
||||
$attributeListItem.find( 'textarea' ).attr( 'placeholder', woocommerce_admin_product_meta_boxes.i18n_attributes_used_for_variations_placeholder );
|
||||
} else {
|
||||
$attributeListItem.find( 'textarea' ).attr( 'placeholder', woocommerce_admin_product_meta_boxes.i18n_attributes_default_placeholder );
|
||||
}
|
||||
}
|
||||
|
||||
function init_select_controls() {
|
||||
$( document.body ).trigger( 'wc-enhanced-select-init' );
|
||||
}
|
||||
|
|
@ -547,6 +564,18 @@ jQuery( function ( $ ) {
|
|||
|
||||
toggle_expansion_of_attribute_list_item( $attributeListItem );
|
||||
|
||||
// Automatically pre-select all terms when a global Attribute is chosen.
|
||||
toggle_selection_of_attribute_list_item_terms( $attributeListItem );
|
||||
|
||||
// Conditionally change the placeholder of product-level Attributes depending on the value of the "Use for variations" checkbox.
|
||||
if ( 'undefined' === typeof globalAttributeId ) {
|
||||
add_placeholder_to_attribute_values_field( $attributeListItem );
|
||||
|
||||
$( '.woocommerce_attribute input.woocommerce_attribute_used_for_variations' ).on( 'change', function() {
|
||||
add_placeholder_to_attribute_values_field( $(this).closest( '.woocommerce_attribute' ) );
|
||||
} );
|
||||
}
|
||||
|
||||
$( document.body ).trigger( 'woocommerce_added_attribute' );
|
||||
|
||||
jQuery.maybe_disable_save_button();
|
||||
|
|
@ -602,6 +631,17 @@ jQuery( function ( $ ) {
|
|||
}
|
||||
}
|
||||
|
||||
// Handle the Attributes onboarding dismissible notice.
|
||||
// If users dismiss the notice, never show it again.
|
||||
if ( localStorage.getItem('attributes-notice-dismissed' ) ) {
|
||||
$( '#product_attributes .notice' ).hide();
|
||||
}
|
||||
|
||||
$( '#product_attributes .notice.woocommerce-message button' ).on( 'click', function( e ) {
|
||||
$( '#product_attributes .notice' ).hide();
|
||||
localStorage.setItem( 'attributes-notice-dismissed', 'true');
|
||||
} );
|
||||
|
||||
$( 'select.wc-attribute-search' ).on( 'select2:select', function ( e ) {
|
||||
const attributeId = e && e.params && e.params.data && e.params.data.id;
|
||||
|
||||
|
|
|
|||
|
|
@ -280,6 +280,14 @@ if ( ! class_exists( 'WC_Admin_Assets', false ) ) :
|
|||
wp_enqueue_script( 'wc-admin-product-meta-boxes' );
|
||||
wp_enqueue_script( 'wc-admin-variation-meta-boxes' );
|
||||
|
||||
$params = array(
|
||||
/* translators: %s: WC_DELIMITER */
|
||||
'i18n_attributes_default_placeholder' => sprintf( esc_attr__( 'Enter some descriptive text. Use “%s” to separate different values.', 'woocommerce' ), esc_attr( WC_DELIMITER ) ),
|
||||
'i18n_attributes_used_for_variations_placeholder' => sprintf( esc_attr__( 'Enter options for customers to choose from, f.e. “Blue” or “Large”. Use “%s” to separate different options.', 'woocommerce' ), esc_attr( WC_DELIMITER ) )
|
||||
);
|
||||
|
||||
wp_localize_script( 'wc-admin-product-meta-boxes', 'woocommerce_admin_product_meta_boxes', $params );
|
||||
|
||||
$params = array(
|
||||
'post_id' => isset( $post->ID ) ? $post->ID : '',
|
||||
'plugin_url' => WC()->plugin_url(),
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ if ( ! defined( 'ABSPATH' ) ) {
|
|||
<select multiple="multiple"
|
||||
data-minimum_input_length="0"
|
||||
data-limit="50" data-return_id="id"
|
||||
data-placeholder="<?php esc_attr_e( 'Select terms', 'woocommerce' ); ?>"
|
||||
data-placeholder="<?php esc_attr_e( 'Select values', 'woocommerce' ); ?>"
|
||||
data-orderby="<?php echo esc_attr( $attribute_orderby ); ?>"
|
||||
class="multiselect attribute_values wc-taxonomy-term-search"
|
||||
name="attribute_values[<?php echo esc_attr( $i ); ?>][]"
|
||||
|
|
@ -79,7 +79,7 @@ if ( ! defined( 'ABSPATH' ) ) {
|
|||
do_action( 'woocommerce_product_option_terms', $attribute_taxonomy, $i, $attribute );
|
||||
} else {
|
||||
?>
|
||||
<textarea name="attribute_values[<?php echo esc_attr( $i ); ?>]" cols="5" rows="5" placeholder="<?php /* translators: %s: WC_DELIMITER */ printf( esc_attr__( 'Enter options for customers to choose from, f.e. “Blue” or “Large”. Use “%s” to separate different options.', 'woocommerce' ), esc_attr( WC_DELIMITER ) ); ?>"><?php echo esc_textarea( wc_implode_text_attributes( $attribute->get_options() ) ); ?></textarea>
|
||||
<textarea name="attribute_values[<?php echo esc_attr( $i ); ?>]" cols="5" rows="5"><?php echo esc_textarea( wc_implode_text_attributes( $attribute->get_options() ) ); ?></textarea>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
|
|
|
|||
|
|
@ -17,14 +17,15 @@ $product_attributes = $product_object->get_attributes( 'edit' );
|
|||
?>
|
||||
<div id="product_attributes" class="panel wc-metaboxes-wrapper hidden">
|
||||
<div class="toolbar toolbar-top">
|
||||
<div id="message" class="inline notice woocommerce-message">
|
||||
<p>
|
||||
<div id="message" class="inline notice woocommerce-message is-dismissible">
|
||||
<p class="help">
|
||||
<?php
|
||||
esc_html_e(
|
||||
'Add descriptive pieces of information that customers can use to search for this product on your store, such as “Material” or “Brand”.',
|
||||
'woocommerce'
|
||||
);
|
||||
?>
|
||||
<button type="button" class="notice-dismiss"><span class="screen-reader-text"><?php esc_html_e( 'Dismiss this notice.', 'woocommerce' ); ?></span></button>
|
||||
</p>
|
||||
</div>
|
||||
<span class="expand-close">
|
||||
|
|
|
|||
Loading…
Reference in New Issue