From 38fb43feaa9ee632bd3ec6dfd531ab2a920f899b Mon Sep 17 00:00:00 2001 From: Anuj Aggarwal Date: Wed, 14 Aug 2024 17:22:57 +0530 Subject: [PATCH] Extended tab control to provide conditional tab control functionality and applied it in Woocommerce Product Catalog Options --- ...ive-woocommerce-shop-layout-customizer.php | 104 ++++++++++++++++-- ...ive-customizer-responsive-tabs-control.php | 13 +++ .../src/tabs/tabs-component.js | 24 ++++ core/includes/customizer/helper.php | 6 +- 4 files changed, 135 insertions(+), 12 deletions(-) diff --git a/core/includes/compatibility/woocommerce/customizer/settings/class-responsive-woocommerce-shop-layout-customizer.php b/core/includes/compatibility/woocommerce/customizer/settings/class-responsive-woocommerce-shop-layout-customizer.php index 71dce85a..a6f0d6ce 100644 --- a/core/includes/compatibility/woocommerce/customizer/settings/class-responsive-woocommerce-shop-layout-customizer.php +++ b/core/includes/compatibility/woocommerce/customizer/settings/class-responsive-woocommerce-shop-layout-customizer.php @@ -163,8 +163,86 @@ public function customizer_options( $wp_customize ) { $design_tab_ids_prefix . 'product_content_shop_typography-color', ); + $control_tab_ids = array( + [ + "controlId" => "responsive_hamburger_off_canvas_btn_label_text", + "controllerId" => "responsive_enable_off_canvas_filter", + "desiredValue" => 1, + "desiredTab" => 'general', + ], + [ + "controlId" => "responsive_off_canvas_filter_color_separator", + "controllerId" => "responsive_enable_off_canvas_filter", + "desiredValue" => 1, + "desiredTab" => 'design', + ], + [ + "controlId" => "responsive_off_canvas_filter_button_color", + "controllerId" => "responsive_enable_off_canvas_filter", + "desiredValue" => 1, + "desiredTab" => 'design', + ], + [ + "controlId" => "responsive_off_canvas_filter_button_text_color", + "controllerId" => "responsive_enable_off_canvas_filter", + "desiredValue" => 1, + "desiredTab" => 'design', + ], + [ + "controlId" => "responsive_off_canvas_filter_button_border_color", + "controllerId" => "responsive_enable_off_canvas_filter", + "desiredValue" => 1, + "desiredTab" => 'design', + ], + [ + "controlId" => "responsive_off_canvas_filter_button_hover_color", + "controllerId" => "responsive_enable_off_canvas_filter", + "desiredValue" => 1, + "desiredTab" => 'design', + ], + [ + "controlId" => "responsive_off_canvas_filter_button_text_hover_color", + "controllerId" => "responsive_enable_off_canvas_filter", + "desiredValue" => 1, + "desiredTab" => 'design', + ], + [ + "controlId" => "responsive_off_canvas_filter_button_border_hover_color", + "controllerId" => "responsive_enable_off_canvas_filter", + "desiredValue" => 1, + "desiredTab" => 'design', + ], + + [ + "controlId" => "responsive_sale_percent_value", + "controllerId" => "responsive_product_sale_notification", + "desiredValue" => 'sale-percentage', + "desiredTab" => 'general', + ], + + [ + "controlId" => "responsive_off_canvas_close_button_separator", + "controllerId" => "responsive_enable_off_canvas_close_btn", + "desiredValue" => 1, + "desiredTab" => 'design', + ], + [ + "controlId" => "responsive_off_canvas_close_button_color", + "controllerId" => "responsive_enable_off_canvas_close_btn", + "desiredValue" => 1, + "desiredTab" => 'design', + ], + [ + "controlId" => "responsive_off_canvas_close_button_hover_color", + "controllerId" => "responsive_enable_off_canvas_close_btn", + "desiredValue" => 1, + "desiredTab" => 'design', + ], + + + ); - responsive_tabs_button_control( $wp_customize, 'woocommerce_shop_tabs', $tabs_label, 'responsive_woocommerce_shop', 1, '', 'responsive_woocommerce_shop_general_tab', 'responsive_woocommerce_shop_design_tab', $general_tab_ids, $design_tab_ids, null ); + responsive_tabs_button_control( $wp_customize, 'woocommerce_shop_tabs', $tabs_label, 'responsive_woocommerce_shop', 1, '', 'responsive_woocommerce_shop_general_tab', 'responsive_woocommerce_shop_design_tab', $general_tab_ids, $design_tab_ids, null ,'refresh', '',$control_tab_ids); // Layouts. @@ -283,34 +361,40 @@ public function customizer_options( $wp_customize ) { responsive_toggle_control( $wp_customize, 'enable_off_canvas_filter', $enable_off_canvas_filter, 'responsive_woocommerce_shop', 115, 0, null, 'refresh' ); $hamburger_off_canvas_btn_label = __( 'Off Canvas Filter Button Text', 'responsive' ); - responsive_text_control( $wp_customize, 'hamburger_off_canvas_btn_label_text', $hamburger_off_canvas_btn_label, 'responsive_woocommerce_shop', 120, 'Filter', 'enable_off_canvas_filter_check', 'sanitize_text_field', 'text', 'postMessage' ); + responsive_text_control( $wp_customize, 'hamburger_off_canvas_btn_label_text', $hamburger_off_canvas_btn_label, 'responsive_woocommerce_shop', 120, 'Filter', null , 'sanitize_text_field', 'text', 'postMessage' ); $enable_off_canvas_close_btn = __( 'Enable Off Canvas Close Button', 'responsive' ); responsive_toggle_control( $wp_customize, 'enable_off_canvas_close_btn', $enable_off_canvas_close_btn, 'responsive_woocommerce_shop', 125, 0, null, 'refresh' ); + $close_button_color_seperator_label = esc_html__( 'Enable Off Canvas Close Button', 'responsive' ); + responsive_separator_control( $wp_customize, 'off_canvas_close_button_separator', $close_button_color_seperator_label, 'responsive_woocommerce_shop', 130 ); + $close_button_color = __( 'Close Button Color', 'responsive' ); - responsive_color_control( $wp_customize, 'off_canvas_close_button', $close_button_color, 'responsive_woocommerce_shop', 130, '#CCCCCC', 'enable_enable_off_canvas_close_btn' ); + responsive_color_control( $wp_customize, 'off_canvas_close_button', $close_button_color, 'responsive_woocommerce_shop', 130, '#CCCCCC', null ); $close_button_hover_color = __( 'Close Button Hover Color', 'responsive' ); - responsive_color_control( $wp_customize, 'off_canvas_close_button_hover', $close_button_hover_color, 'responsive_woocommerce_shop', 135, '#777777', 'enable_enable_off_canvas_close_btn' ); + responsive_color_control( $wp_customize, 'off_canvas_close_button_hover', $close_button_hover_color, 'responsive_woocommerce_shop', 135, '#777777', null ); + + $off_canvas_filter_color_label = esc_html__( 'Off Canvas Filter', 'responsive' ); + responsive_separator_control( $wp_customize, 'off_canvas_filter_color_separator', $off_canvas_filter_color_label, 'responsive_woocommerce_shop', 140 ); $filter_button_color = __( 'Filter Button Color', 'responsive' ); - responsive_color_control( $wp_customize, 'off_canvas_filter_button', $filter_button_color, 'responsive_woocommerce_shop', 140, 'transparent', 'enable_off_canvas_filter_check' ); + responsive_color_control( $wp_customize, 'off_canvas_filter_button', $filter_button_color, 'responsive_woocommerce_shop', 140, 'transparent', null ); $filter_text_color = __( 'Filter Button Text Color', 'responsive' ); - responsive_color_control( $wp_customize, 'off_canvas_filter_button_text', $filter_text_color, 'responsive_woocommerce_shop', 140, '#808080', 'enable_off_canvas_filter_check' ); + responsive_color_control( $wp_customize, 'off_canvas_filter_button_text', $filter_text_color, 'responsive_woocommerce_shop', 140, '#808080', null ); $filter_button_border_color = __( 'Filter Button Border Color', 'responsive' ); - responsive_color_control( $wp_customize, 'off_canvas_filter_button_border', $filter_button_border_color, 'responsive_woocommerce_shop', 140, '#808080', 'enable_off_canvas_filter_check' ); + responsive_color_control( $wp_customize, 'off_canvas_filter_button_border', $filter_button_border_color, 'responsive_woocommerce_shop', 140, '#808080', null ); $filter_button_color_hover = __( 'Filter Button Hover Color', 'responsive' ); - responsive_color_control( $wp_customize, 'off_canvas_filter_button_hover', $filter_button_color_hover, 'responsive_woocommerce_shop', 140, 'transparent', 'enable_off_canvas_filter_check' ); + responsive_color_control( $wp_customize, 'off_canvas_filter_button_hover', $filter_button_color_hover, 'responsive_woocommerce_shop', 140, 'transparent', null ); $filter_text_color_hover = __( 'Filter Button Text Hover Color', 'responsive' ); - responsive_color_control( $wp_customize, 'off_canvas_filter_button_text_hover', $filter_text_color_hover, 'responsive_woocommerce_shop', 140, '#10659c', 'enable_off_canvas_filter_check' ); + responsive_color_control( $wp_customize, 'off_canvas_filter_button_text_hover', $filter_text_color_hover, 'responsive_woocommerce_shop', 140, '#10659c', null ); $filter_button_border_color_hover = __( 'Filter Button Border Hover Color', 'responsive' ); - responsive_color_control( $wp_customize, 'off_canvas_filter_button_border_hover', $filter_button_border_color_hover, 'responsive_woocommerce_shop', 140, '#10659c', 'enable_off_canvas_filter_check' ); + responsive_color_control( $wp_customize, 'off_canvas_filter_button_border_hover', $filter_button_border_color_hover, 'responsive_woocommerce_shop', 140, '#10659c', null ); } } diff --git a/core/includes/customizer/controls/tabs/class-responsive-customizer-responsive-tabs-control.php b/core/includes/customizer/controls/tabs/class-responsive-customizer-responsive-tabs-control.php index d8d02552..df7412f2 100644 --- a/core/includes/customizer/controls/tabs/class-responsive-customizer-responsive-tabs-control.php +++ b/core/includes/customizer/controls/tabs/class-responsive-customizer-responsive-tabs-control.php @@ -59,6 +59,14 @@ class Responsive_Customizer_Responsive_Tabs_Control extends WP_Customize_Control */ public $design_tab_ids; + /** + * Ids that are controlled by some other element. + * + * @access public + * @var string + */ + public $control_tab_ids; + /** * Constructor for the custom control. * @@ -89,6 +97,10 @@ public function __construct( $manager, $id, $args = array() ) { $this->design_tab_ids = $args['design_tab_ids']; } + if ( isset( $args['control_tab_ids'] ) ) { + $this->control_tab_ids = $args['control_tab_ids']; + } + // Call parent constructor. parent::__construct( $manager, $id, $args ); } @@ -121,6 +133,7 @@ public function to_json() { $this->json['design_id'] = $this->design_id; $this->json['general_tab_ids'] = $this->general_tab_ids; $this->json['design_tab_ids'] = $this->design_tab_ids; + $this->json['control_tab_ids'] = $this->control_tab_ids; } /** diff --git a/core/includes/customizer/extend-controls/src/tabs/tabs-component.js b/core/includes/customizer/extend-controls/src/tabs/tabs-component.js index fa7b2476..897d4dba 100644 --- a/core/includes/customizer/extend-controls/src/tabs/tabs-component.js +++ b/core/includes/customizer/extend-controls/src/tabs/tabs-component.js @@ -21,6 +21,7 @@ const TabsComponent = props => { general_id, design_tab_ids, general_tab_ids, + control_tab_ids } = props.control.params; const elementsToHide = { @@ -28,6 +29,17 @@ const TabsComponent = props => { general: design_tab_ids, }; + // Registering conditionalControl function to call it whenever the contoller element value changes + control_tab_ids.forEach(element => { + const {controlId,controllerId,desiredValue,desiredTab} = element; + + api(`${controllerId}`, function( value ) { + value.bind( function( newval ) { + conditionalControl(newval,desiredValue,controlId,desiredTab); + }); + }); + }); + useEffect(() => { const showElements = tab === 'general' ? 'design' : 'general'; elementsToHide[showElements].forEach(elementId => { @@ -94,6 +106,12 @@ const TabsComponent = props => { } }); }); + + // Function to call on tab switch + control_tab_ids.forEach(element => { + const {controlId,controllerId,desiredValue,desiredTab} = element; + conditionalControl(api(`${controllerId}`).get(),desiredValue,controlId,desiredTab); + }); }, [tab]); const toggleSidebarPositionWidthControls = (value, control) => { @@ -118,6 +136,12 @@ const TabsComponent = props => { } }; + const conditionalControl = (value,desiredValue,control,desiredTab) => { + + document.getElementById(`customize-control-${control}`).style.display = (value == desiredValue && tab == desiredTab) ? 'block' : 'none'; + + }; + return <>
add_setting( 'responsive_' . $element, @@ -2348,6 +2349,7 @@ function responsive_tabs_button_control( $wp_customize, $element, $label, $secti 'design_id' => $design_id, 'general_tab_ids' => $general_tab_ids, 'design_tab_ids' => $design_tab_ids, + 'control_tab_ids' => $control_tab_ids, ) ) );