Add search price input layout

This commit is contained in:
Hoang Huu 2020-03-24 10:22:00 +07:00
parent 32c3a3da9a
commit 71a9c2227e
6 changed files with 77 additions and 40 deletions

View File

@ -4009,3 +4009,26 @@ header#masthead {
border: solid 1px #ebebeb; border: solid 1px #ebebeb;
position: relative; position: relative;
} }
.opalestate-price-input-wrap {
display: flex;
align-items: center;
}
.opalestate-price-input {
width: 45%;
display: inline-block;
position: relative;
}
.opalestate-price-input-separator {
flex-grow: 1;
text-align: center;
}
.opalestate-price-currency {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}

View File

@ -566,5 +566,25 @@ button.opal-collapse-button{
} }
} }
.opalestate-price-input-wrap {
display: flex;
align-items: center;
}
.opalestate-price-input {
width: 45%;
display: inline-block;
position: relative;
}
.opalestate-price-input-separator {
flex-grow: 1;
text-align: center;
}
.opalestate-price-currency {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}

View File

@ -256,6 +256,17 @@ class Opalestate_Settings_Property_Tab extends Opalestate_Settings_Base_Tab {
], ],
]; ];
$fields[] = [
'name' => esc_html__( 'Price input type', 'opalestate-pro' ),
'options' => [
'slider' => esc_html__( 'Range slider', 'opalestate-pro' ),
'input' => esc_html__( 'Input', 'opalestate-pro' ),
],
'id' => 'price_input_type',
'type' => 'select',
'default' => 'slider',
];
foreach ( $metas as $key => $meta ) { foreach ( $metas as $key => $meta ) {
$fields[] = [ $fields[] = [
'name' => $meta['name'], 'name' => $meta['name'],

View File

@ -223,42 +223,6 @@ function opalestate_toggle_featured_property() {
} }
/**
* load more properties by agency
*/
// add_action( 'wp_ajax_get_agency_property', 'opalestate_load_more_agency_property' );
// add_action( 'wp_ajax_nopriv_get_agency_property', 'opalestate_load_more_agency_property' );
//
// function opalestate_load_more_agency_property() {
//
//
// $post = [
// 'post_id' => 0,
// 'paged' => 1,
// 'user_id' => 13,
// 'related' => '',
// 'limit' => apply_filters( 'opalesate_agency_properties_limit', 5 ),
// ];
//
// $post = array_merge( $post, $_POST );
// extract( $post );
//
// $user_id = get_post_meta( absint( $post_id ), OPALESTATE_AGENCY_PREFIX . 'user_id', true );
// $query = Opalestate_Query::get_agency_property( absint( $post_id ), absint( $user_id ), absint( $limit ), absint( $paged ) );
//
// if ( $query->have_posts() ) :
// while ( $query->have_posts() ) : $query->the_post(); ?>
<!-- <div class="col-lg-12 col-md-12 col-sm-12">-->
<!-- --><?php //echo opalestate_load_template_path( 'content-property-list-v2' ); ?>
<!-- </div>-->
<!-- --><?php //endwhile;
// endif;
// wp_reset_postdata();
// exit;
// }
/** /**
* load more properties by agency * load more properties by agency
*/ */
@ -270,7 +234,7 @@ function opalestate_get_agent_property() {
$post = [ $post = [
'paged' => 1, 'paged' => 1,
'id' => 13, 'id' => '',
'limit' => apply_filters( 'opalesate_agent_properties_limit', 6 ), 'limit' => apply_filters( 'opalesate_agent_properties_limit', 6 ),
]; ];
@ -312,7 +276,7 @@ function opalestate_get_agency_property() {
$post = [ $post = [
'id' => 0, 'id' => 0,
'paged' => 1, 'paged' => 1,
'user_id' => 13, 'user_id' => '',
'related' => '', 'related' => '',
'limit' => apply_filters( 'opalesate_agency_properties_limit', 5 ), 'limit' => apply_filters( 'opalesate_agency_properties_limit', 5 ),
]; ];

View File

@ -0,0 +1,16 @@
<label class="opalestate-label opalestate-label--price-input"><?php esc_html_e( 'Price', 'opalestate-pro' ); ?></label>
<div class="opalestate-price-input-wrap">
<div class="opalestate-price-input opalestate-price-input--min">
<input class="form-control" type="number" name="min_price" value="<?php echo esc_attr( $data['input_min'] ); ?>" placeholder="<?php esc_attr_e( 'Min Price', 'opalestate-pro' ); ?>">
<span class="opalestate-price-currency"><?php echo esc_html( $data['unit'] ); ?></span>
</div>
<div class="opalestate-price-input-separator">
<span><?php echo esc_html_x( '-', 'price input separator', 'opalestate-pro' ); ?></span>
</div>
<div class="opalestate-price-input opalestate-price-input--max">
<input class="form-control" type="number" name="max_price" value="<?php echo esc_attr( $data['input_max'] ); ?>" placeholder="<?php esc_attr_e( 'Max Price', 'opalestate-pro' ); ?>">
<span class="opalestate-price-currency"><?php echo esc_html( $data['unit'] ); ?></span>
</div>
</div>

View File

@ -21,5 +21,8 @@ if ( opalestate_options( 'currency_position', 'before' ) == 'before' ) {
$data['unit_position'] = 'prefix'; $data['unit_position'] = 'prefix';
} }
?> if ( 'input' === opalestate_get_option( 'price_input_type', 'slider' ) ) {
<?php opalesate_property_slide_ranger_template( esc_html__( 'Price', 'opalestate-pro' ), $data ); ?> echo opalestate_load_template_path( 'search-box/fields/price-input', [ 'data' => $data ] );
} else {
opalesate_property_slide_ranger_template( esc_html__( 'Price', 'opalestate-pro' ), $data );
}