PHP Function: wpestate_show_price_v2_component

Function Overview

This function generates the HTML markup for the price selection component:


function wpestate_show_price_v2_component($appendix, $slug, $label, $placeholder, $elementor_label, $term_counter_elementor, $position, $price_array_data) {
// Function body
}


Key Parameters:

• $appendix: Determines if the component should be half-width
• $label: Label for the price component
• $placeholder: Custom placeholder text for the dropdown
• $price_array_data: Array containing price-related data for taxonomy terms

Function Breakdown

1. Sets the default value for the dropdown
2. Handles layout options (e.g., half-width)
3. Checks for existing price labels in the request
4. Generates the HTML markup for the component
5. Adds price form based on provided data
6. Includes reset and done buttons

JavaScript Function: wpestate_price_component_item

Function Overview

This function sets up the interactive behavior for the price range selection component:


function wpestate_price_component_item() {
// Function body
}


Key Features:

1. Prevents click event propagation on the price popup wrapper
2. Clears input value on focus for price range inputs
3. Ensures only numeric input for price range fields
4. Updates the slider when price input changes
5. Handles resetting of the price component to default values
6. Manages the ‘Done’ button click event

Important Event Handlers:

• .component_adv_search_elementor_price_low,.component_adv_search_elementor_price_max: Handles input changes
• .wpestate-price-component-popoup-reset: Resets the component
• .wpestate-price-component-popoup-done: Completes the selection process

SCSS Styles

General Styles

These styles apply to both v2 and v3 of the price component:


.dropdown-menu.wpestate-price-popoup-wrapper_v3,
.dropdown-menu.wpestate-price-popoup-wrapper {
border: 0px;
box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;
color: #5c727d;
}


Price v2 Component Styles

Key features of the v2 component styles:

• Flexible layout with gap spacing
• Custom styling for input fields and sliders
• Responsive design with max-width and overflow handling

Price v3 Component Styles

Key features of the v3 component styles:

• Flexible layout with gap spacing
• Custom styling for dropdown menu items
• Specific styles for price component select elements

Interaction Between Components

The PHP function generates the initial HTML structure, which the JavaScript function then manipulates for interactive behavior. The SCSS styles define the visual appearance of these elements.

Key Interaction Points:

1. PHP generates elements with specific classes that JavaScript uses for event handling
2. JavaScript updates input fields and sliders created by the PHP function
3. SCSS styles target classes used in both PHP-generated HTML and JavaScript-manipulated elements

Customization Tips

Extending the PHP Function

To add new features to the price component, you can use WordPress filters. For example:


function custom_price_form($price_form, $position, $slug, $label) {
// Modify $price_form here
return $price_form;
}
add_filter('wpestate_price_form_adv_search', 'custom_price_form', 10, 4);


Extending the JavaScript Function

To add custom behavior, you can extend the JavaScript function:


jQuery(document).ready(function($) {
var originalFunction = wpestate_price_component_item;
wpestate_price_component_item = function() {
originalFunction();
// Add your custom code here
};
});


Customizing Styles

To modify the appearance, add custom CSS to your theme or use the WordPress Customizer. For example:


.wpestate-price-popoup-wrapper input {
border-color: #007bff;
}


Price Component Version 3

PHP Function: wpestate_show_price_v3_component

This function generates an advanced version of the price selection component with more customizable options.

Key Differences from v2:

• Uses a different wrapper class: wpestate-price-popoup-wrapper_v3
• Implements a two-level dropdown system using wpresidence_generate_2nlevel_dropdown
• Adds separate dropdowns for minimum and maximum price
• Includes a hidden input for storing the selected price range label

Function Breakdown:

1. Generates a unique string for the component (for Elementor compatibility)
2. Determines price input names based on term ID
3. Creates separate dropdowns for minimum and maximum price
4. Adds reset and done buttons specific to v3
5. Includes a hidden input for the price label

JavaScript Function: wpestate_price_component_item_v3

This function manages the interactive behavior of the v3 price component.

Key Features:

1. Manages click events on the price popup wrapper
2. Toggles dropdown menus for child items
3. Handles resetting of the price component to default values
4. Updates the displayed price range when an option is selected
5. Triggers pin display on the map when selection is done

Important Event Handlers:

• .wpestate-price-popoup-wrapper_v3: Prevents event propagation
• .wpestate_child_dropdown_item: Toggles dropdown visibility
• .wpestate-price-component-popoup-reset_v3: Resets the component
• .wpestate-price-component-popoup-done_v3: Completes the selection process
• .wpestate-price-popoup-wrapper_v3 li: Handles price option selection

Key Interactions:

1. When a price option is selected:
   • Updates the displayed price range in the main button
   • Updates the hidden input with the selected range
   • Hides the dropdown after selection
2. On reset:
   • Clears all selections
   • Resets the main button and child dropdown texts to default values
   • Clears hidden input values
3. On ‘Done’:
   • Triggers a fake click to close dropdowns
   • Initiates the wpestate_show_pins function to update map display

Customization Tips for v3

Extending the PHP Function

To modify the price range options, you can filter the price array data:


function custom_price_array_data($price_array_data) {
// Modify $price_array_data here
return $price_array_data;
}
add_filter('wpestate_price_array_data', 'custom_price_array_data');


Extending the JavaScript Function

To add custom behavior to the v3 component:


jQuery(document).ready(function($) {
var originalFunction = wpestate_price_component_item_v3;
wpestate_price_component_item_v3 = function() {
originalFunction();
// Add your custom code here
$('.wpestate-price-popoup-wrapper_v3').on('customEvent', function() {
// Custom behavior
});
};
});


V3-Specific SCSS Styles

The v3 component has some specific styles to handle its unique structure:


.wpestate-price-popoup-wrapper_v3 {
.wpestate_pricev3_component_adv_search_wrapper {
display: flex;
gap: 10px;

.wpestate-price-component-select {
width: 50%;
border: 1px solid #e7e7e7;
padding: 10px;
border-radius: 4px;
}
}
}

Conclusion

The v3 price component offers more advanced functionality with its two-level dropdown system. It provides a more intuitive interface for users to select price ranges, with separate controls for minimum and maximum prices. When implementing or customizing this component, pay close attention to the interaction between the PHP-generated structure and the JavaScript-controlled behavior to ensure a smooth user experience.