css_scheme = apply_filters( 'jet-smart-filters/widgets/search/css-scheme', array( 'filters-label' => '.jet-filter-label', 'filter-wrapper' => '.jet-search-filter', 'input' => '.jet-search-filter__input', 'input-wrapper' => '.jet-search-filter__input-wrapper', 'input-clear' => '.jet-search-filter__input-clear', 'input-loading' => '.jet-search-filter__input-loading', 'apply-filters-button' => '.jet-search-filter__submit', 'apply-filters-button-icon' => '.jet-search-filter__submit > i', 'apply-filters-label' => '.jet-filter-label', ) ); } public function add_style_manager_options() { $this->controls_manager->start_section( 'style_controls', [ 'id' => 'section_search_content_style', 'initialOpen' => false, 'title' => esc_html__( 'Content', 'jet-smart-filters' ) ] ); $this->controls_manager->add_control([ 'id' => 'content_position', 'type' => 'choose', 'label' => esc_html__( 'Position', 'jet-smart-filters' ), 'separator' => 'after', 'options' =>[ 'line' => [ 'shortcut' => esc_html__( 'Line', 'jet-smart-filters' ), 'icon' => 'dashicons-ellipsis', ], 'column' => [ 'shortcut' => esc_html__( 'Column', 'jet-smart-filters' ), 'icon' => 'dashicons-menu-alt', ], ], 'return_value' => [ 'line' => 'display:flex; flex-direction:row;', 'column' => 'display:flex; flex-direction:column;', ], 'css_selector' => [ '{{WRAPPER}} ' . $this->css_scheme['filter-wrapper'] => '{{VALUE}}', ], 'attributes' => [ 'default' => [ 'value' => [ 'value' =>'line' ] ], ] ]); $this->controls_manager->add_control([ 'id' => 'content_search_input_width', 'type' => 'range', 'label' => esc_html__( 'Input Width', 'jet-smart-filters' ), 'css_selector' => [ '{{WRAPPER}} ' . $this->css_scheme['input-wrapper'] => 'max-width: {{VALUE}}{{UNIT}};', ], 'attributes' => [ 'default' => [ 'value' => [ 'value' => 100, 'unit' => '%' ] ] ], 'units' => [ [ 'value' => '%', 'intervals' => [ 'step' => 1, 'min' => 0, 'max' => 100, ] ], ], ]); $this->controls_manager->add_control([ 'id' => 'content_line_horizontal_alignment', 'type' => 'choose', 'label' => esc_html__( 'Vertical Alignment', 'jet-smart-filters' ), 'separator' => 'before', 'options' =>[ 'flex-start' => [ 'shortcut' => esc_html__( 'Left', 'jet-smart-filters' ), 'icon' => 'dashicons-editor-alignleft', ], 'center' => [ 'shortcut' => esc_html__( 'Center', 'jet-smart-filters' ), 'icon' => 'dashicons-editor-aligncenter', ], 'flex-end' => [ 'shortcut' => esc_html__( 'Right', 'jet-smart-filters' ), 'icon' => 'dashicons-editor-alignright', ], 'space-between' => [ 'shortcut' => esc_html__( 'Justify', 'jet-smart-filters' ), 'icon' => 'dashicons-editor-justify', ], ], 'css_selector' => [ '{{WRAPPER}} ' . $this->css_scheme['filter-wrapper'] => 'justify-content: {{VALUE}};', ], 'attributes' => [ 'default' => [ 'value' => 'flex-start', ], ], 'condition' => [ 'content_position' => 'line' ] ]); $this->controls_manager->add_control([ 'id' => 'content_line_vertical_alignment', 'type' => 'choose', 'label' => esc_html__( 'Horizontal Alignment', 'jet-smart-filters' ), 'separator' => 'before', 'options' =>[ 'flex-start' => [ 'shortcut' => esc_html__( 'Left', 'jet-smart-filters' ), 'icon' => 'dashicons-editor-alignleft', ], 'center' => [ 'shortcut' => esc_html__( 'Center', 'jet-smart-filters' ), 'icon' => 'dashicons-editor-aligncenter', ], 'flex-end' => [ 'shortcut' => esc_html__( 'Right', 'jet-smart-filters' ), 'icon' => 'dashicons-editor-alignright', ], 'stretch' => [ 'shortcut' => esc_html__( 'Stretch', 'jet-smart-filters' ), 'icon' => 'dashicons-editor-justify', ], ], 'css_selector' => [ '{{WRAPPER}} ' . $this->css_scheme['filter-wrapper'] => 'align-items: {{VALUE}};', ], 'attributes' => [ 'default' => [ 'value' => 'flex-start', ], ], ]); $this->controls_manager->end_section(); $this->controls_manager->start_section( 'style_controls', [ 'id' => 'section_search_input_style', 'initialOpen' => false, 'title' => esc_html__( 'Input', 'jet-smart-filters' ) ] ); $this->controls_manager->add_control([ 'id' => 'search_input_typography', 'type' => 'typography', 'css_selector' => [ '{{WRAPPER}} ' . $this->css_scheme['input'] => 'font-family: {{FAMILY}}; font-weight: {{WEIGHT}}; text-transform: {{TRANSFORM}}; font-style: {{STYLE}}; text-decoration: {{DECORATION}}; line-height: {{LINEHEIGHT}}{{LH_UNIT}}; letter-spacing: {{LETTERSPACING}}{{LS_UNIT}}; font-size: {{SIZE}}{{S_UNIT}};', ], ]); $this->controls_manager->add_control([ 'id' => 'search_input_color', 'type' => 'color-picker', 'label' => esc_html__( 'Color', 'jet-smart-filters' ), 'separator' => 'after', 'css_selector' => array( '{{WRAPPER}} ' . $this->css_scheme['input'] => 'color: {{VALUE}}', '{{WRAPPER}} ' . $this->css_scheme['input'] . '::placeholder' => 'color: {{VALUE}}', '{{WRAPPER}} ' . $this->css_scheme['input'] . ':-ms-input-placeholder' => 'color: {{VALUE}}', '{{WRAPPER}} ' . $this->css_scheme['input'] . '::-ms-input-placeholder' => 'color: {{VALUE}}', '{{WRAPPER}} ' . $this->css_scheme['input-clear'] => 'color: {{VALUE}}', '{{WRAPPER}} ' . $this->css_scheme['input-loading'] => 'color: {{VALUE}}' ), ]); $this->controls_manager->add_control([ 'id' => 'search_input_background_color', 'type' => 'color-picker', 'label' => esc_html__( 'Background Color', 'jet-smart-filters' ), 'separator' => 'after', 'css_selector' => array( '{{WRAPPER}} ' . $this->css_scheme['input'] => 'background-color: {{VALUE}}', ), ]); $this->controls_manager->add_control([ 'id' => 'item_border', 'type' => 'border', 'label' => esc_html__( 'Border', 'jet-smart-filters' ), 'css_selector' => array( '{{WRAPPER}} ' . $this->css_scheme['input'] => 'border-style: {{STYLE}}; border-width: {{WIDTH}}; border-radius: {{RADIUS}}; border-color: {{COLOR}}', ), ]); $this->controls_manager->add_control([ 'id' => 'search_input_padding', 'type' => 'dimensions', 'label' => esc_html__( 'Padding', 'jet-smart-filters' ), 'units' => array( 'px', '%' ), 'css_selector' => array( '{{WRAPPER}} ' . $this->css_scheme['input'] => 'padding: {{TOP}} {{RIGHT}} {{BOTTOM}} {{LEFT}};', ), 'separator' => 'before', ]); $this->controls_manager->add_control([ 'id' => 'search_input_margin', 'type' => 'dimensions', 'label' => esc_html__( 'Margin', 'jet-smart-filters' ), 'units' => array( 'px', '%' ), 'css_selector' => array( '{{WRAPPER}} ' . $this->css_scheme['input'] => 'margin: {{TOP}} {{RIGHT}} {{BOTTOM}} {{LEFT}};', ), 'separator' => 'before', ]); $this->controls_manager->end_section(); $this->controls_manager->start_section( 'style_controls', [ 'id' => 'label_style', 'initialOpen' => false, 'title' => esc_html__( 'Label', 'jet-smart-filters' ), 'condition' => [ 'show_label' => true, ], ] ); $this->controls_manager->add_control([ 'id' => 'label_typography', 'type' => 'typography', 'css_selector' => [ '{{WRAPPER}} ' . $this->css_scheme['filters-label'] => 'font-family: {{FAMILY}}; font-weight: {{WEIGHT}}; text-transform: {{TRANSFORM}}; font-style: {{STYLE}}; text-decoration: {{DECORATION}}; line-height: {{LINEHEIGHT}}{{LH_UNIT}}; letter-spacing: {{LETTERSPACING}}{{LS_UNIT}}; font-size: {{SIZE}}{{S_UNIT}};', ], ]); $this->controls_manager->add_control([ 'id' => 'label_alignment', 'type' => 'choose', 'label' => esc_html__( 'Alignment', 'jet-smart-filters' ), 'separator' => 'before', 'options' =>[ 'left' => [ 'shortcut' => esc_html__( 'Left', 'jet-smart-filters' ), 'icon' => 'dashicons-editor-alignleft', ], 'center' => [ 'shortcut' => esc_html__( 'Center', 'jet-smart-filters' ), 'icon' => 'dashicons-editor-aligncenter', ], 'right' => [ 'shortcut' => esc_html__( 'Right', 'jet-smart-filters' ), 'icon' => 'dashicons-editor-alignright', ], ], 'css_selector' => [ '{{WRAPPER}} .jet-search-filter ' . $this->css_scheme['filters-label'] => 'text-align: {{VALUE}};', ], 'attributes' => [ 'default' => [ 'value' => 'left', ] ], ]); $this->controls_manager->add_control([ 'id' => 'label_color', 'type' => 'color-picker', 'label' => esc_html__( 'Color', 'jet-smart-filters' ), 'separator' => 'before', 'css_selector' => array( '{{WRAPPER}} ' . $this->css_scheme['filters-label'] => 'color: {{VALUE}}', ), ]); $this->controls_manager->add_control([ 'id' => 'label_border', 'type' => 'border', 'label' => esc_html__( 'Border', 'jet-smart-filters' ), 'css_selector' => array( '{{WRAPPER}} ' . $this->css_scheme['filters-label'] =>'border-style: {{STYLE}}; border-width: {{WIDTH}}; border-radius: {{RADIUS}}; border-color: {{COLOR}}', ), 'separator' => 'before', ]); $this->controls_manager->add_control([ 'id' => 'label_padding', 'type' => 'dimensions', 'label' => esc_html__( 'Padding', 'jet-smart-filters' ), 'units' => array( 'px', '%' ), 'css_selector' => array( '{{WRAPPER}} ' . $this->css_scheme['filters-label'] => 'padding: {{TOP}} {{RIGHT}} {{BOTTOM}} {{LEFT}};', ), 'separator' => 'before', ]); $this->controls_manager->add_control([ 'id' => 'label_margin', 'type' => 'dimensions', 'label' => esc_html__( 'Margin', 'jet-smart-filters' ), 'units' => array( 'px', '%' ), 'css_selector' => array( '{{WRAPPER}} ' . $this->css_scheme['filters-label'] => 'margin: {{TOP}} {{RIGHT}} {{BOTTOM}} {{LEFT}};', ), 'separator' => 'before', ]); $this->controls_manager->end_section(); $this->controls_manager->start_section( 'style_controls', [ 'id' => 'button_style', 'initialOpen' => false, 'title' => esc_html__( 'Button', 'jet-smart-filters' ) ] ); $this->controls_manager->start_tabs( 'style_controls', [ 'id' => 'filter_apply_button_style_tabs', 'separator' => 'after', ] ); $this->controls_manager->start_tab( 'style_controls', [ 'id' => 'filter_apply_button_normal_styles', 'title' => esc_html__( 'Normal', 'jet-smart-filters' ), ] ); $this->controls_manager->add_control([ 'id' => 'filter_apply_button_normal_color', 'type' => 'color-picker', 'label' => esc_html__( 'Text Color', 'jet-smart-filters' ), 'css_selector' => array( '{{WRAPPER}} ' . $this->css_scheme['apply-filters-button'] => 'color: {{VALUE}}', ), ]); $this->controls_manager->add_control([ 'id' => 'filter_apply_button_normal_background_color', 'type' => 'color-picker', 'label' => esc_html__( 'Background Color', 'jet-smart-filters' ), 'separator' => 'before', 'css_selector' => array( '{{WRAPPER}} ' . $this->css_scheme['apply-filters-button'] => 'background-color: {{VALUE}}', ), ]); $this->controls_manager->end_tab(); $this->controls_manager->start_tab( 'style_controls', [ 'id' => 'filter_apply_button_hover_styles', 'title' => esc_html__( 'Hover', 'jet-smart-filters' ), ] ); $this->controls_manager->add_control([ 'id' => 'filter_apply_button_hover_color', 'type' => 'color-picker', 'label' => esc_html__( 'Text Color', 'jet-smart-filters' ), 'css_selector' => array( '{{WRAPPER}} ' . $this->css_scheme['apply-filters-button'] . ':hover' => 'color: {{VALUE}}', ), ]); $this->controls_manager->add_control([ 'id' => 'filter_apply_button_hover_background_color', 'type' => 'color-picker', 'label' => esc_html__( 'Background Color', 'jet-smart-filters' ), 'separator' => 'before', 'css_selector' => array( '{{WRAPPER}} ' . $this->css_scheme['apply-filters-button'] . ':hover' => 'background-color: {{VALUE}}', ), ]); $this->controls_manager->add_control([ 'id' => 'filter_apply_button_hover_border_color', 'type' => 'color-picker', 'label' => esc_html__( 'Border Color', 'jet-smart-filters' ), 'separator' => 'before', 'css_selector' => array( '{{WRAPPER}} ' . $this->css_scheme['apply-filters-button'] . ':hover' => 'border-color: {{VALUE}}', ), ]); $this->controls_manager->end_tab(); $this->controls_manager->end_tabs(); $this->controls_manager->add_control([ 'id' => 'filter_apply_button_border', 'type' => 'border', 'label' => esc_html__( 'Border', 'jet-smart-filters' ), 'css_selector' => array( '{{WRAPPER}} ' . $this->css_scheme['apply-filters-button'] =>'border-style: {{STYLE}}; border-width: {{WIDTH}}; border-radius: {{RADIUS}}; border-color: {{COLOR}}', ), ]); $this->controls_manager->add_control([ 'id' => 'filter_apply_button_padding', 'type' => 'dimensions', 'label' => esc_html__( 'Padding', 'jet-smart-filters' ), 'units' => array( 'px', '%' ), 'css_selector' => array( '{{WRAPPER}} ' . $this->css_scheme['apply-filters-button'] => 'padding: {{TOP}} {{RIGHT}} {{BOTTOM}} {{LEFT}};', ), 'separator' => 'before', ]); $this->controls_manager->add_control([ 'id' => 'filter_apply_button_margin', 'type' => 'dimensions', 'label' => esc_html__( 'Margin', 'jet-smart-filters' ), 'units' => array( 'px', '%' ), 'css_selector' => array( '{{WRAPPER}} ' . $this->css_scheme['apply-filters-button'] => 'margin: {{TOP}} {{RIGHT}} {{BOTTOM}} {{LEFT}};', ), 'separator' => 'before', ]); $this->controls_manager->add_control([ 'id' => 'filter_apply_button_alignment', 'type' => 'choose', 'label' => esc_html__( 'Alignment', 'jet-smart-filters' ), 'separator' => 'before', 'options' =>[ 'flex-start' => [ 'shortcut' => esc_html__( 'Left', 'jet-smart-filters' ), 'icon' => 'dashicons-editor-alignleft', ], 'center' => [ 'shortcut' => esc_html__( 'Center', 'jet-smart-filters' ), 'icon' => 'dashicons-editor-aligncenter', ], 'flex-end' => [ 'shortcut' => esc_html__( 'Right', 'jet-smart-filters' ), 'icon' => 'dashicons-editor-alignright', ], ], 'css_selector' => [ '{{WRAPPER}} ' . $this->css_scheme['apply-filters-button'] => 'align-self: {{VALUE}};', ], 'attributes' => [ 'default' => [ 'value' => 'left', ] ], ]); $this->controls_manager->end_section(); } /** * Return callback */ public function render_callback( $settings = array() ) { jet_smart_filters()->set_filters_used(); if ( empty( $settings['filter_id'] ) ) { return $this->is_editor() ? __( 'Please select a filter', 'jet-smart-filters' ) : false; } if ( empty( $settings['content_provider'] ) || $settings['content_provider'] === 'not-selected' ) { return $this->is_editor() ? __( 'Please select a provider', 'jet-smart-filters' ) : false; } $filter_id = $settings['filter_id']; $base_class = 'jet-smart-filters-' . $this->get_name(); $provider = $settings['content_provider']; $query_id = ! empty( $settings['query_id'] ) ? $settings['query_id'] : 'default'; $show_label = $settings['show_label']; if ( in_array( $settings['apply_type'], ['ajax', 'mixed'] ) ) { $apply_type = $settings['apply_type'] . '-reload'; } else { $apply_type = $settings['apply_type']; } jet_smart_filters()->admin_bar_register_item( $filter_id ); ob_start(); printf( '