JetEngine Listing grid title

gistfile1.txt

We have developed a custom code that adds a new feature to the default JetEngine Listing Grid widget in Elementor. 
This enhancement allows users to easily add a title or label directly from Elementor's controls. With full styling options, 
including alignment, typography, colors, and spacing, the label integrates seamlessly with the existing widget for a dynamic 
and customizable experience.

Copy the following PHP code and create a PHP snippet using your snippet plugins. 
Paste the code into the plugin and save it.
________________________________________


add_action('elementor/element/jet-listing-grid/section_general/after_section_end', function ($element, $args) {
    // Add a custom control to the Content tab
    $element->start_controls_section(
        'add_label_section',
        [
            'label' => __('Add your label', 'text-domain'),
            'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
        ]
    );

    $element->add_control(
        'add_label_text',
        [
            'label' => __('Label Text', 'text-domain'),
            'type' => \Elementor\Controls_Manager::TEXT,
            'default' => __('Rental car', 'text-domain'),
            'placeholder' => __('Enter your label text here...', 'text-domain'),
        ]
    );

    $element->end_controls_section();

    // Add styling options in the Style tab
    $element->start_controls_section(
        'add_label_style_section',
        [
            'label' => __('Label Style', 'text-domain'),
            'tab' => \Elementor\Controls_Manager::TAB_STYLE,
        ]
    );

    $element->add_control(
        'add_label_color',
        [
            'label' => __('Text Color', 'text-domain'),
            'type' => \Elementor\Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .custom-listing-label' => 'color: {{VALUE}};',
            ],
        ]
    );

    $element->add_control(
        'add_label_alignment',
        [
            'label' => __('Alignment', 'text-domain'),
            'type' => \Elementor\Controls_Manager::CHOOSE,
            'options' => [
                'left' => [
                    'title' => __('Left', 'text-domain'),
                    'icon' => 'eicon-text-align-left',
                ],
                'center' => [
                    'title' => __('Center', 'text-domain'),
                    'icon' => 'eicon-text-align-center',
                ],
                'right' => [
                    'title' => __('Right', 'text-domain'),
                    'icon' => 'eicon-text-align-right',
                ],
            ],
            'default' => 'left',
            'selectors' => [
                '{{WRAPPER}} .custom-listing-label-wrapper' => 'text-align: {{VALUE}};',
            ],
        ]
    );

    $element->add_group_control(
        \Elementor\Group_Control_Typography::get_type(),
        [
            'name' => 'add_label_typography',
            'label' => __('Typography', 'text-domain'),
            'selector' => '{{WRAPPER}} .custom-listing-label',
        ]
    );

    $element->add_responsive_control(
        'add_label_margin',
        [
            'label' => __('Margin', 'text-domain'),
            'type' => \Elementor\Controls_Manager::DIMENSIONS,
            'size_units' => ['px', '%', 'em'],
            'selectors' => [
                '{{WRAPPER}} .custom-listing-label' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
            ],
        ]
    );

    $element->add_responsive_control(
        'add_label_padding',
        [
            'label' => __('Padding', 'text-domain'),
            'type' => \Elementor\Controls_Manager::DIMENSIONS,
            'size_units' => ['px', '%', 'em'],
            'selectors' => [
                '{{WRAPPER}} .custom-listing-label' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
            ],
        ]
    );

    $element->add_control(
        'add_label_background',
        [
            'label' => __('Background Color', 'text-domain'),
            'type' => \Elementor\Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .custom-listing-label' => 'background-color: {{VALUE}};',
            ],
        ]
    );

    $element->add_group_control(
        \Elementor\Group_Control_Border::get_type(),
        [
            'name' => 'add_label_border',
            'label' => __('Border', 'text-domain'),
            'selector' => '{{WRAPPER}} .custom-listing-label',
        ]
    );

    $element->add_responsive_control(
        'add_label_border_radius',
        [
            'label' => __('Border Radius', 'text-domain'),
            'type' => \Elementor\Controls_Manager::DIMENSIONS,
            'size_units' => ['px', '%', 'em'],
            'selectors' => [
                '{{WRAPPER}} .custom-listing-label' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
            ],
        ]
    );

    $element->end_controls_section();
}, 10, 2);

// Inject label into the listing grid output dynamically
add_filter('jet-engine/listing/grid/item-content', function ($content, $listing) {
    $elementor = \Elementor\Plugin::$instance;
    $settings = $elementor->frontend->get_settings_for_display();

    if (!empty($settings['add_label_text'])) {
        $label_html = '<div class="custom-listing-label-wrapper"><div class="custom-listing-label">' . esc_html($settings['add_label_text']) . '</div></div>';
        return $label_html . $content;
    }

    return $content;
}, 10, 2);

// Ensure Elementor saves the custom settings
add_action('elementor/widget/render_content', function ($content, $widget) {
    if ('jet-listing-grid' === $widget->get_name()) {
        $settings = $widget->get_settings_for_display();

        if (!empty($settings['add_label_text'])) {
            $label_html = '<div class="custom-listing-label-wrapper"><div class="custom-listing-label">' . esc_html($settings['add_label_text']) . '</div></div>';
            return $label_html . $content;
        }
    }

    return $content;
}, 10, 2);

// Add inline CSS for styling
add_action('wp_enqueue_scripts', function () {
    wp_add_inline_style('elementor-frontend', '
        .custom-listing-label-wrapper {
            text-align: left;
            position: relative; 
            z-index: 10;
        }
        .custom-listing-label {
            display: inline-block; 
            font-size: 16px;
            font-weight: bold;
            z-index: 11; 
            position: relative;
        }
    ');
});