Add existing global attribute layout (#36944)
* Changed `has_local_attributes` * Add new layout * Add attribute layout * Add changelog * Create method `toggle_add_global_attribute_layout` * Add global attribute layout * Fix button in mobile * Remove commented code * Change changelog * Fix typo * Fix style * Fix buttons visibility * Fix div visibility * Fix buttons visibility --------- Co-authored-by: Fernando Marichal <contacto@fernandomarichal.com>
This commit is contained in:
Fernando Marichal
GitHub
parent
2e33922e35
commit
25497c4faa
|
|
@ -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_4183_170650" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="3" y="3" width="71" height="71">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.6663 21.6663H34.333L23.333 3.33301L3.33301 36.6663H21.6663V21.6663ZM73.333 56.6663C73.333 65.8697 65.8697 73.333 56.6663 73.333C47.463 73.333 39.9997 65.8697 39.9997 56.6663C39.9997 47.463 47.463 39.9997 56.6663 39.9997C65.8697 39.9997 73.333 47.463 73.333 56.6663ZM53.333 26.6663V35.283C44.0563 36.7263 36.7263 44.0563 35.283 53.333H26.6663V26.6663H53.333Z" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_4183_170650)">
|
||||
<rect width="80" height="80" fill="#DCDCDE"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 744 B |
|
|
@ -0,0 +1,4 @@
|
|||
Significance: minor
|
||||
Type: dev
|
||||
|
||||
Add existing global attribute layout #36944
|
||||
|
|
@ -1012,6 +1012,31 @@
|
|||
}
|
||||
|
||||
#product_attributes {
|
||||
.add-global-attribute-container {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 32px 0px;
|
||||
gap: 24px;
|
||||
height: 360px;
|
||||
@media screen and ( max-width: 782px ) {
|
||||
button {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
p {
|
||||
width: 90%;
|
||||
max-width: 544px;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
}
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.toolbar-top {
|
||||
.button,
|
||||
.select2-container {
|
||||
|
|
@ -5384,8 +5409,10 @@ img.help_tip {
|
|||
.toolbar {
|
||||
margin: 0 !important;
|
||||
border-top: 1px solid white;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 9px 12px !important;
|
||||
&:not( .expand-close-hidden ) {
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-top: 0;
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ jQuery( function ( $ ) {
|
|||
} );
|
||||
|
||||
$( function () {
|
||||
if ( ! woocommerce_admin_meta_boxes.has_attributes ) {
|
||||
if ( ! woocommerce_admin_meta_boxes.has_local_attributes ) {
|
||||
$( 'button.add_attribute' ).trigger( 'click' );
|
||||
}
|
||||
} );
|
||||
|
|
@ -434,6 +434,12 @@ jQuery( function ( $ ) {
|
|||
selectedAttributes
|
||||
);
|
||||
|
||||
function toggle_add_global_attribute_layout() {
|
||||
$( 'div.add-attribute-container' ).toggle();
|
||||
$( 'div.add-global-attribute-container' ).toggle();
|
||||
$( '#product_attributes > .toolbar-buttons' ).toggle();
|
||||
}
|
||||
|
||||
function add_attribute( element, attribute ) {
|
||||
var size = $( '.product_attributes .woocommerce_attribute' ).length;
|
||||
var $wrapper = $( element ).closest( '#product_attributes' );
|
||||
|
|
@ -499,6 +505,12 @@ jQuery( function ( $ ) {
|
|||
}
|
||||
$( this ).val( null );
|
||||
$( this ).trigger( 'change' );
|
||||
if (
|
||||
$( 'div.add-attribute-container' ).hasClass( 'hidden' ) &&
|
||||
! $( 'div.add-global-attribute-container' ).hasClass( 'hidden' )
|
||||
) {
|
||||
toggle_add_global_attribute_layout();
|
||||
}
|
||||
|
||||
return false;
|
||||
} );
|
||||
|
|
@ -522,6 +534,12 @@ jQuery( function ( $ ) {
|
|||
$( 'button.add_custom_attribute' ).on( 'click', function () {
|
||||
add_attribute( this, '' );
|
||||
|
||||
if (
|
||||
$( 'div.add-attribute-container' ).hasClass( 'hidden' ) &&
|
||||
! $( 'div.add-global-attribute-container' ).hasClass( 'hidden' )
|
||||
) {
|
||||
toggle_add_global_attribute_layout();
|
||||
}
|
||||
return false;
|
||||
} );
|
||||
|
||||
|
|
@ -571,7 +589,6 @@ jQuery( function ( $ ) {
|
|||
term.term_id +
|
||||
'"]'
|
||||
);
|
||||
console.log( currentItem );
|
||||
if ( currentItem && currentItem.length > 0 ) {
|
||||
currentItem.prop( 'selected', 'selected' );
|
||||
} else {
|
||||
|
|
@ -634,6 +651,13 @@ jQuery( function ( $ ) {
|
|||
$parent.hide();
|
||||
attribute_row_indexes();
|
||||
}
|
||||
|
||||
if (
|
||||
! $( '.woocommerce_attribute_data' ).is( ':visible' ) &&
|
||||
! $( 'div.add-global-attribute-container' ).hasClass( 'hidden' )
|
||||
) {
|
||||
toggle_add_global_attribute_layout();
|
||||
}
|
||||
}
|
||||
return false;
|
||||
} );
|
||||
|
|
|
|||
|
|
@ -405,7 +405,7 @@ if ( ! class_exists( 'WC_Admin_Assets', false ) ) :
|
|||
'rounding_precision' => wc_get_rounding_precision(),
|
||||
'tax_rounding_mode' => wc_get_tax_rounding_mode(),
|
||||
'product_types' => array_unique( array_merge( array( 'simple', 'grouped', 'variable', 'external' ), array_keys( wc_get_product_types() ) ) ),
|
||||
'has_attributes' => ! empty( wc_get_attribute_taxonomies() ) || ! empty( $product ? $product->get_attributes( 'edit' ) : array() ),
|
||||
'has_local_attributes' => ! empty( wc_get_attribute_taxonomies() ),
|
||||
'i18n_download_permission_fail' => __( 'Could not grant access - the user may already have permission for this file or billing email is not set. Ensure the billing email is set, and the order has been saved.', 'woocommerce' ),
|
||||
'i18n_permission_revoke' => __( 'Are you sure you want to revoke access to this download?', 'woocommerce' ),
|
||||
'i18n_tax_rate_already_exists' => __( 'You cannot add the same tax rate twice!', 'woocommerce' ),
|
||||
|
|
|
|||
|
|
@ -1,19 +1,46 @@
|
|||
<?php
|
||||
/**
|
||||
* Displays the attributes tab in the product data meta box.
|
||||
*
|
||||
* @package WooCommerce\Admin
|
||||
*/
|
||||
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
global $wc_product_attributes;
|
||||
// Array of defined attribute taxonomies.
|
||||
$attribute_taxonomies = wc_get_attribute_taxonomies();
|
||||
// Product attributes - taxonomies and custom, ordered, with visibility and variation attributes set.
|
||||
$product_attributes = $product_object->get_attributes( 'edit' );
|
||||
$has_local_attributes = empty( $attribute_taxonomies );
|
||||
$has_global_attributes = empty( $product_attributes );
|
||||
$is_add_global_attribute_visible = ! $has_local_attributes && $has_global_attributes;
|
||||
$icon_url = WC_ADMIN_IMAGES_FOLDER_URL . '/icons/global-attributes-icon.svg';
|
||||
?>
|
||||
<div id="product_attributes" class="panel wc-metaboxes-wrapper hidden">
|
||||
<div class="toolbar toolbar-top">
|
||||
<?php
|
||||
global $wc_product_attributes;
|
||||
// Array of defined attribute taxonomies.
|
||||
$attribute_taxonomies = wc_get_attribute_taxonomies();
|
||||
// Product attributes - taxonomies and custom, ordered, with visibility and variation attributes set.
|
||||
$product_attributes = $product_object->get_attributes( 'edit' );
|
||||
|
||||
if ( empty( $attribute_taxonomies ) && empty( $product_attributes ) ) :
|
||||
?>
|
||||
<div class="toolbar toolbar-top <?php echo $is_add_global_attribute_visible ? ' expand-close-hidden' : ''; ?>">
|
||||
<div class="add-global-attribute-container<?php echo $is_add_global_attribute_visible ? '' : ' hidden'; ?>">
|
||||
<img src="<?php echo esc_url( $icon_url ); ?>" />
|
||||
<p>
|
||||
<?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'
|
||||
);
|
||||
?>
|
||||
</p>
|
||||
<div>
|
||||
<button type="button" class="button add_custom_attribute"><?php esc_html_e( 'Create new attribute', 'woocommerce' ); ?></button>
|
||||
<select class="wc-attribute-search" data-placeholder="<?php esc_attr_e( 'Add existing attribute', 'woocommerce' ); ?>" data-minimum-input-length="0">
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="add-attribute-container<?php echo $is_add_global_attribute_visible ? ' hidden' : ' '; ?>">
|
||||
<?php
|
||||
if ( $has_local_attributes && $has_global_attributes ) :
|
||||
?>
|
||||
<div id="message" class="inline notice woocommerce-message">
|
||||
<p>
|
||||
<?php
|
||||
|
|
@ -24,24 +51,24 @@ if ( ! defined( 'ABSPATH' ) ) {
|
|||
?>
|
||||
</p>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<span class="expand-close">
|
||||
<a href="#" class="expand_all"><?php esc_html_e( 'Expand', 'woocommerce' ); ?></a> / <a href="#" class="close_all"><?php esc_html_e( 'Close', 'woocommerce' ); ?></a>
|
||||
</span>
|
||||
<?php endif; ?>
|
||||
<span class="expand-close">
|
||||
<a href="#" class="expand_all"><?php esc_html_e( 'Expand', 'woocommerce' ); ?></a> / <a href="#" class="close_all"><?php esc_html_e( 'Close', 'woocommerce' ); ?></a>
|
||||
</span>
|
||||
|
||||
<?php
|
||||
/**
|
||||
* Filter for the attribute taxonomy filter dropdown threshold.
|
||||
*
|
||||
* @since 7.0.0
|
||||
* @param number $threshold The threshold for showing the simple dropdown.
|
||||
*/
|
||||
if ( count( $attribute_taxonomies ) <= apply_filters( 'woocommerce_attribute_taxonomy_filter_threshold', 20 ) ) :
|
||||
?>
|
||||
<?php
|
||||
/**
|
||||
* Filter for the attribute taxonomy filter dropdown threshold.
|
||||
*
|
||||
* @since 7.0.0
|
||||
* @param number $threshold The threshold for showing the simple dropdown.
|
||||
*/
|
||||
if ( count( $attribute_taxonomies ) <= apply_filters( 'woocommerce_attribute_taxonomy_filter_threshold', 20 ) ) :
|
||||
?>
|
||||
<select name="attribute_taxonomy" class="attribute_taxonomy">
|
||||
<option value=""><?php esc_html_e( 'Custom product attribute', 'woocommerce' ); ?></option>
|
||||
<?php
|
||||
if ( ! empty( $attribute_taxonomies ) ) {
|
||||
if ( ! $has_local_attributes ) {
|
||||
foreach ( $attribute_taxonomies as $attr_taxonomy ) {
|
||||
$attribute_taxonomy_name = wc_attribute_taxonomy_name( $attr_taxonomy->attribute_name );
|
||||
$label = $attr_taxonomy->attribute_label ? $attr_taxonomy->attribute_label : $attr_taxonomy->attribute_name;
|
||||
|
|
@ -51,11 +78,12 @@ if ( ! defined( 'ABSPATH' ) ) {
|
|||
?>
|
||||
</select>
|
||||
<button type="button" class="button add_attribute"><?php esc_html_e( 'Add', 'woocommerce' ); ?></button>
|
||||
<?php else : ?>
|
||||
<?php else : ?>
|
||||
<button type="button" class="button add_custom_attribute"><?php esc_html_e( 'Add custom attribute', 'woocommerce' ); ?></button>
|
||||
<select class="wc-attribute-search attribute_taxonomy" id="attribute_taxonomy" name="attribute_taxonomy" data-placeholder="<?php esc_attr_e( 'Add existing attribute', 'woocommerce' ); ?>" data-minimum-input-length="0">
|
||||
</select>
|
||||
<?php endif; ?>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product_attributes wc-metaboxes">
|
||||
<?php
|
||||
|
|
@ -74,7 +102,7 @@ if ( ! defined( 'ABSPATH' ) ) {
|
|||
}
|
||||
?>
|
||||
</div>
|
||||
<div class="toolbar">
|
||||
<div class="toolbar toolbar-buttons<?php echo $is_add_global_attribute_visible ? ' hidden' : ''; ?>">
|
||||
<span class="expand-close">
|
||||
<a href="#" class="expand_all"><?php esc_html_e( 'Expand', 'woocommerce' ); ?></a> / <a href="#" class="close_all"><?php esc_html_e( 'Close', 'woocommerce' ); ?></a>
|
||||
</span>
|
||||
|
|
|
|||
Loading…
Reference in New Issue