Home / , / WPEstate Beds and Baths Component

WPEstate Beds and Baths Component

720 views

The wpestate_show_beds_baths_component function, along with its associated JavaScript function wpestate_beds_baths_component, forms a crucial part of the WPEstate theme. These functions are responsible for generating and managing the beds and baths selection component in property search forms. This guide will explain how these functions work, how to extend them, and how to customize their appearance.

PHP Function Overview

Here’s the basic structure of the PHP function:


function wpestate_show_beds_baths_component($appendix, $placeholder, $elementor_label, $term_counter_elementor, $position, $active='') {
// Function body
}

Parameters:

  • $appendix: Determines if the component should be half-width
  • $placeholder: Custom placeholder text for the dropdown
  • $elementor_label: Label for Elementor (not used in the function)
  • $term_counter_elementor: Counter for Elementor terms (not used in the function)
  • $position: Position of the component (not used in the function)
  • $active: Whether the component is in an active state

JavaScript Function Overview

The wpestate_beds_baths_component JavaScript function manages the interactive behavior of the component. Here’s a breakdown of its main parts:

1. handleItemClick Function

This function handles the selection of bed or bath items:


function handleItemClick(itemClass, inputClass) {
var selected_item = jQuery(this);
var parent = selected_item.parent();
var component = selected_item.closest('.wpestate-beds-baths-popoup-component');
parent.find(itemClass).removeClass('wp_estate_component_item_selected');
selected_item.addClass('wp_estate_component_item_selected');
var selected_value = selected_item.attr('data-value');
jQuery(inputClass).val(selected_value);
update_label(component);
}

2. update_label Function

This function updates the dropdown label based on the selected values:


function update_label(component){
var selected_beds = component.find('.wp_estate_beds_component_item.wp_estate_component_item_selected').length > 0 ? component.find('.wp_estate_beds_component_item.wp_estate_component_item_selected').attr('data-value') : '0';
var selected_baths = component.find('.wp_estate_baths_component_item.wp_estate_component_item_selected').length > 0 ? component.find('.wp_estate_baths_component_item.wp_estate_component_item_selected').attr('data-value') : '0';
var update_label = parseFloat(selected_beds) + '+ ' + control_vars.bd + '/' + parseFloat(selected_baths) + '+ ' + control_vars.ba;
component.find('.dropdown-toggle').text(update_label);
}

3. Event Handlers

The function sets up several event handlers:

  • Click handlers for bed and bath selection items
  • A reset handler to clear selections
  • A ‘done’ handler to complete the selection process

Interactions Between PHP and JavaScript

The PHP function generates the HTML structure, while the JavaScript function manages the interactive behavior. Key points of interaction include:

  • The PHP function creates elements with specific classes (e.g., wp_estate_beds_component_item) that the JavaScript function uses to attach event listeners.
  • The JavaScript function updates hidden input fields (.wpresidence-componentsbeds and .wpresidence-componentsbaths) that were created by the PHP function.
  • The reset functionality in JavaScript relies on the data-default-value attribute set by the PHP function.

Extending the Functions

Extending the PHP Function

To extend the wpestate_show_beds_baths_component function, you can use WordPress filters or create a child theme and override the function. Here’s an example of how to add a new option to the beds selection:


function add_extra_bed_option($beds_selection) {
$extra_option = '<div class="wp_estate_beds_component_item" data-value="5+">5+</div>';
return $beds_selection . $extra_option;
}
add_filter('wpestate_beds_selection', 'add_extra_bed_option');

Extending the JavaScript Function

To extend the JavaScript functionality, you can add your own functions or modify the existing ones. For example, to add a custom action after selection:


jQuery(document).ready(function($) {
var originalFunction = wpestate_beds_baths_component;
wpestate_beds_baths_component = function() {
originalFunction();
$('.wpestate-beds-baths-popoup-done').on('click', function() {
// Your custom action here
console.log('Selection completed!');
});
};
});

CSS Classes and Customization

The main CSS classes used in this component are:

  • wpestate-beds-baths-popoup-component: Main container class
  • wpestate-multiselect-custom-style: Style for the dropdown button
  • wpestate-beds-baths-popoup-wrapper: Wrapper for the dropdown content
  • wp_estate_beds_component_item: Individual bed option item
  • wp_estate_baths_component_item: Individual bath option item
  • wpestate-beds-baths-popoup-reset: Reset button
  • wpestate-beds-baths-popoup-done: Done button

To customize the appearance, you can add custom CSS to your theme or use the WordPress Customizer. Here’s an example of how to change the background color of the dropdown:


.wpestate-beds-baths-popoup-component .dropdown-menu {
background-color: #f0f0f0;
}

Conclusion

The combination of the PHP function wpestate_show_beds_baths_component and the JavaScript function wpestate_beds_baths_component creates a versatile and interactive beds and baths selection component in the WPEstate theme. By understanding their structure and interaction, and using WordPress hooks, custom JavaScript, and CSS, you can customize and extend their functionality to meet your specific needs.