Always show pricing group fields, disable if not available for a product type (#38531)

* Always show General product tab

* Add info messages for variable and grouped products

* Add logic to disable/enable fields and labels based on product type

* Tweak CSS and fix links

* Add tracks events for links

* Add filters to pricing disabled message

* Tweak logic to only enable fields on certain product types instead of disabling in the opposite ones

Add fallback message when pricing is disabled but it's not Variable or Grouped product

* Add docblocks

* Fix more lint issues

* Fix last lint issues

* Update selector in e2e test

* Refactor PHP echo

* Attach to #woocommerce-product-data instead of attaching to body
This commit is contained in:
Nathan Silveira 2023-06-12 12:58:26 -03:00 committed by GitHub
parent 3efb6f488c
commit 18f2de2bc4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 169 additions and 19 deletions

View File

@ -541,6 +541,27 @@ const attachProductAttributesTracks = () => {
} );
};
const attachGeneralTabTracks = () => {
document
.querySelector(
'#general_product_data .woocommerce-message .variations-tab-navigation-link'
)
?.addEventListener( 'click', () => {
recordEvent( 'disabled_general_tab', {
action: 'go_to_variations',
} );
} );
document
.querySelector(
'#general_product_data .woocommerce-message .linked-products-navigation-link'
)
?.addEventListener( 'click', () => {
recordEvent( 'disabled_general_tab', {
action: 'go_to_linked_products',
} );
} );
};
/**
* Attaches product variations tracks.
*/
@ -731,6 +752,7 @@ export const initProductScreenTracks = () => {
attachProductVariationsTracks();
attachProductTabsTracks();
attachProductInventoryTabTracks();
attachGeneralTabTracks();
};
export function addExitPageListener( pageId: string ) {

View File

@ -0,0 +1,4 @@
Significance: minor
Type: update
Always show pricing group fields, disable if not available for a product type

View File

@ -959,6 +959,7 @@
#variable_product_options #message,
#inventory_product_data .notice,
#general_product_data .notice,
#variable_product_options .notice {
display: flex;
margin: 10px;
@ -5363,6 +5364,7 @@ img.help_tip {
padding: 0;
margin: 0 0 0 -150px;
.req {
font-weight: 700;
font-style: normal;
@ -5379,6 +5381,14 @@ img.help_tip {
display: inline;
}
label,
input {
&.disabled {
opacity: 0.5;
cursor: not-allowed;
}
}
input:not([type="checkbox"]):not([type="radio"]) + .description {
display: block;
clear: both;

View File

@ -139,6 +139,7 @@ jQuery( function ( $ ) {
}
show_and_hide_panels();
disable_or_enable_fields();
change_product_type_tip( get_product_tip_content( select_val ) );
$( 'ul.wc-tabs li:visible' ).eq( 0 ).find( 'a' ).trigger( 'click' );
@ -261,6 +262,39 @@ jQuery( function ( $ ) {
} );
}
function disable_or_enable_fields() {
var product_type = $( 'select#product-type' ).val();
var hasDisabledFields = true;
$( `.enable_if_simple` ).each( function () {
$( this ).addClass( 'disabled' );
if ( $( this ).is( 'input' ) ) {
$( this ).prop( 'disabled', true );
}
} );
$( `.enable_if_external` ).each( function () {
$( this ).addClass( 'disabled' );
if ( $( this ).is( 'input' ) ) {
$( this ).prop( 'disabled', true );
}
} );
$( `.enable_if_${ product_type }` ).each( function () {
hasDisabledFields = false;
$( this ).removeClass( 'disabled' );
if ( $( this ).is( 'input' ) ) {
$( this ).prop( 'disabled', false );
}
} );
if (
hasDisabledFields &&
! $( '#general_product_data .woocommerce-message' ).is( ':visible' )
) {
$( `.pricing_disabled_fallback_message` ).show();
} else {
$( `.pricing_disabled_fallback_message` ).hide();
}
}
// Sale price schedule.
$( '.sale_price_dates_fields' ).each( function () {
var $these_sale_dates = $( this );
@ -891,7 +925,7 @@ jQuery( function ( $ ) {
} );
// Go to attributes tab when clicking on link in variations message
$( document.body ).on(
$( '#woocommerce-product-data' ).on(
'click',
'#variable_product_options .add-attributes-message a[href="#product_attributes"]',
function () {
@ -902,6 +936,34 @@ jQuery( function ( $ ) {
}
);
// Go to variations tab when clicking on link in the general tab message
$( '#woocommerce-product-data' ).on(
'click',
'#general_product_data .woocommerce-message a[href="#variable_product_options"]',
function () {
$(
'#woocommerce-product-data .variations_tab a[href="#variable_product_options"]'
).trigger( 'click' );
return false;
}
);
// Go to linked products tab when clicking on link in the general tab message
$( '#woocommerce-product-data' ).on(
'click',
'#general_product_data .woocommerce-message a[href="#linked_product_data"]',
function () {
$(
'#woocommerce-product-data .linked_product_tab a[href="#linked_product_data"]'
).trigger( 'click' );
return false;
}
);
// Uploading files.
var downloadable_file_frame;
var file_path_field;

View File

@ -89,7 +89,7 @@ class WC_Meta_Box_Product_Data {
'general' => array(
'label' => __( 'General', 'woocommerce' ),
'target' => 'general_product_data',
'class' => array( 'hide_if_grouped' ),
'class' => array(),
'priority' => 10,
),
'inventory' => array(

View File

@ -36,14 +36,61 @@ defined( 'ABSPATH' ) || exit;
?>
</div>
<div class="options_group pricing show_if_simple show_if_external hidden">
<div class="inline notice woocommerce-message show_if_variable">
<p>
<?php
/**
* Allow developers to change the general pricing message.
*
* @since 7.9.0
*/
echo esc_html( apply_filters( 'woocommerce_general_pricing_disabled_message', __( 'You can manage pricing and other details individually for each product variation.', 'woocommerce' ), 'variable' ) );
?>
<a class="variations-tab-navigation-link" href="#variable_product_options">
<?php
esc_html_e( 'Go to Variations', 'woocommerce' );
?>
</a>
</p>
</div>
<div class="inline notice woocommerce-message show_if_grouped">
<p>
<?php
/**
* Allow developers to change the general pricing message.
*
* @since 7.9.0
*/
echo esc_html( apply_filters( 'woocommerce_general_pricing_disabled_message', __( 'You can manage pricing and other details individually for each product added to this group.', 'woocommerce' ), 'grouped' ) );
?>
<a class="linked-products-navigation-link" href="#linked_product_data"><?php esc_html_e( 'Go to Linked Products', 'woocommerce' ); ?></a>
</p>
</div>
<div class="inline notice woocommerce-message pricing_disabled_fallback_message">
<p>
<?php
/**
* Allow developers to change the general pricing message.
*
* @since 7.9.0
*/
echo esc_html( apply_filters( 'woocommerce_general_pricing_disabled_message', __( 'You can manage pricing and other details in one of the other tabs.', 'woocommerce' ), 'grouped' ) );
?>
</p>
</div>
<div class="options_group pricing">
<?php
woocommerce_wp_text_input(
array(
'id' => '_regular_price',
'value' => $product_object->get_regular_price( 'edit' ),
'label' => __( 'Regular price', 'woocommerce' ) . ' (' . get_woocommerce_currency_symbol() . ')',
'data_type' => 'price',
'id' => '_regular_price',
'value' => $product_object->get_regular_price( 'edit' ),
'label' => __( 'Regular price', 'woocommerce' ) . ' (' . get_woocommerce_currency_symbol() . ')',
'label_class' => 'enable_if_simple enable_if_external',
'data_type' => 'price',
'class' => 'enable_if_simple enable_if_external',
)
);
@ -53,7 +100,9 @@ defined( 'ABSPATH' ) || exit;
'value' => $product_object->get_sale_price( 'edit' ),
'data_type' => 'price',
'label' => __( 'Sale price', 'woocommerce' ) . ' (' . get_woocommerce_currency_symbol() . ')',
'description' => '<a href="#" class="sale_schedule">' . __( 'Schedule', 'woocommerce' ) . '</a>',
'label_class' => 'enable_if_simple enable_if_external',
'description' => '<a href="#" class="sale_schedule show_if_simple show_if_external">' . __( 'Schedule', 'woocommerce' ) . '</a>',
'class' => 'enable_if_simple enable_if_external',
)
);
@ -93,7 +142,7 @@ defined( 'ABSPATH' ) || exit;
if ( $downloadable_files ) {
foreach ( $downloadable_files as $key => $file ) {
$disabled_download = isset( $file['enabled'] ) && false === $file['enabled'];
$disabled_download = isset( $file['enabled'] ) && false === $file['enabled'];
$disabled_downloads_count += (int) $disabled_download;
include __DIR__ . '/html-product-download.php';
}
@ -105,8 +154,8 @@ defined( 'ABSPATH' ) || exit;
<th colspan="2">
<a href="#" class="button insert" data-row="
<?php
$key = '';
$file = array(
$key = '';
$file = array(
'file' => '',
'name' => '',
);

View File

@ -31,6 +31,7 @@ function woocommerce_wp_text_input( $field, WC_Data $data = null ) {
$field['name'] = isset( $field['name'] ) ? $field['name'] : $field['id'];
$field['type'] = isset( $field['type'] ) ? $field['type'] : 'text';
$field['desc_tip'] = isset( $field['desc_tip'] ) ? $field['desc_tip'] : false;
$field['label_class'] = isset( $field['label_class'] ) ? $field['label_class'] : '';
$data_type = empty( $field['data_type'] ) ? '' : $field['data_type'];
switch ( $data_type ) {
@ -65,8 +66,10 @@ function woocommerce_wp_text_input( $field, WC_Data $data = null ) {
}
}
$label_class = ! empty( $field['label_class'] ) ? 'class="' . esc_attr( $field['label_class'] ) . '" ' : '';
echo '<p class="form-field ' . esc_attr( $field['id'] ) . '_field ' . esc_attr( $field['wrapper_class'] ) . '">
<label for="' . esc_attr( $field['id'] ) . '">' . wp_kses_post( $field['label'] ) . '</label>';
<label ' . esc_attr( $label_class ) . ' for="' . esc_attr( $field['id'] ) . '">' . wp_kses_post( $field['label'] ) . '</label>';
if ( ! empty( $field['description'] ) && false !== $field['desc_tip'] ) {
echo wc_help_tip( $field['description'] );

View File

@ -138,7 +138,7 @@ test.describe( 'Update variations', () => {
} );
await test.step( 'Click on the "Variations" tab.', async () => {
await page.locator( 'a[href="#variable_product_options"]' ).click();
await page.locator( '.variations_tab > a[href="#variable_product_options"]' ).click();
} );
await test.step( 'Expand all variations.', async () => {
@ -231,7 +231,7 @@ test.describe( 'Update variations', () => {
} );
await test.step( 'Click on the "Variations" tab.', async () => {
await page.locator( 'a[href="#variable_product_options"]' ).click();
await page.locator( '.variations_tab > a[href="#variable_product_options"]' ).click();
} );
await test.step( 'Expand all variations.', async () => {
@ -344,7 +344,7 @@ test.describe( 'Update variations', () => {
} );
await test.step( 'Click on the "Variations" tab.', async () => {
await page.locator( 'a[href="#variable_product_options"]' ).click();
await page.locator( '.variations_tab > a[href="#variable_product_options"]' ).click();
} );
await test.step(
@ -387,7 +387,7 @@ test.describe( 'Update variations', () => {
} );
await test.step( 'Click on the "Variations" tab.', async () => {
await page.locator( 'a[href="#variable_product_options"]' ).click();
await page.locator( '.variations_tab > a[href="#variable_product_options"]' ).click();
} );
await test.step(
@ -418,7 +418,7 @@ test.describe( 'Update variations', () => {
} );
await test.step( 'Click on the "Variations" tab.', async () => {
await page.locator( 'a[href="#variable_product_options"]' ).click();
await page.locator( '.variations_tab > a[href="#variable_product_options"]' ).click();
} );
await test.step( 'Expand all variations', async () => {
@ -538,7 +538,7 @@ test.describe( 'Update variations', () => {
} );
await test.step( 'Click on the "Variations" tab.', async () => {
await page.locator( 'a[href="#variable_product_options"]' ).click();
await page.locator( '.variations_tab > a[href="#variable_product_options"]' ).click();
} );
await test.step( 'Wait for block overlay to disappear.', async () => {
@ -602,7 +602,7 @@ test.describe( 'Update variations', () => {
} );
await test.step( 'Click on the "Variations" tab.', async () => {
await page.locator( 'a[href="#variable_product_options"]' ).click();
await page.locator( '.variations_tab > a[href="#variable_product_options"]' ).click();
} );
await test.step( 'Click "Remove" on a variation', async () => {