Untitled
unknown
plain_text
6 months ago
5.7 kB
2
Indexable
<?php class Statistics_Widget extends \Elementor\Widget_Base { public function get_script_depends() { return [ 'statistics-widget' ]; } public function get_style_depends() { return [ 'statistics-widget' ]; } public function get_name() { return 'statistics_widget'; } public function get_title() { return __( 'Statistics Section', 'eks' ); } public function get_icon() { return 'eicon-counter'; } public function get_categories() { return [ 'Eks' ]; } protected function _register_controls() { // Content section $this->start_controls_section( 'content_section', [ 'label' => __( 'Content', 'eks' ), 'tab' => \Elementor\Controls_Manager::TAB_CONTENT, ] ); $this->add_control( 'section_title_text', [ 'label' => __( 'Section Title', 'text-domain' ), 'type' => \Elementor\Controls_Manager::TEXT, 'default' => __( 'Strength in numbers', 'text-domain' ), ] ); $this->end_controls_section(); // Repeater for Statistics Items $this->start_controls_section( 'statistics_items', [ 'label' => __( 'Statistics Items', 'text-domain' ), 'tab' => \Elementor\Controls_Manager::TAB_CONTENT, ] ); $repeater = new \Elementor\Repeater(); $repeater->add_control( 'item_title', [ 'label' => __( 'Item Title', 'text-domain' ), 'type' => \Elementor\Controls_Manager::TEXT, 'default' => __( 'Years of experience', 'text-domain' ), ] ); $repeater->add_control( 'lottie_file', [ 'label' => __( 'Lottie Animation JSON', 'text-domain' ), 'type' => \Elementor\Controls_Manager::MEDIA, 'media_type' => 'application/json', ] ); $repeater->add_control( 'target_number', [ 'label' => __( 'Target Number', 'text-domain' ), 'type' => \Elementor\Controls_Manager::NUMBER, 'default' => 30, ] ); $repeater->add_control( 'suffix', [ 'label' => __( 'Suffix', 'text-domain' ), 'type' => \Elementor\Controls_Manager::TEXT, 'default' => '+', ] ); $repeater->add_control( 'background_image', [ 'label' => __( 'Background Image', 'text-domain' ), 'type' => \Elementor\Controls_Manager::MEDIA, 'media_type' => 'image', ] ); $this->add_control( 'items_list', [ 'label' => __( 'Items', 'text-domain' ), 'type' => \Elementor\Controls_Manager::REPEATER, 'fields' => $repeater->get_controls(), 'default' => [ [ 'item_title' => __( 'Years of experience', 'text-domain' ), 'target_number' => 30, 'suffix' => '+', ], [ 'item_title' => __( 'Worldwide clients', 'text-domain' ), 'target_number' => 100, 'suffix' => '+', ], ], 'title_field' => '{{{ item_title }}}', ] ); $this->end_controls_section(); } protected function render() { $settings = $this->get_settings_for_display(); // Section title echo '<div class="py-24 sm:py-32"> <div class="mx-auto h-[500px] max-w-7xl px-6 lg:px-8"> <div class="max-w-2xl mx-auto lg:max-w-none"> <div> <h2 class="text-4xl font-semibold tracking-tight text-gray-900">' . esc_html($settings['section_title_text']) . '</h2> </div> <dl class="mt-16 grid grid-cols-1 gap-0.5 overflow-hidden sm:grid-cols-2 lg:grid-cols-4 h-[460px]">'; // Check if there are repeater items to loop through if (!empty($settings['items_list'])) { foreach ($settings['items_list'] as $index => $item) { $counter_id = 'counter-' . $this->get_id() . '-' . $index; $lottie_id = 'lottie-' . $this->get_id() . '-' . $index; $background_image = !empty($item['background_image']['url']) ? esc_url($item['background_image']['url']) : ''; echo '<div class="flex flex-col justify-center bg-custom p-8 rounded-[30%] fade-in hover-bg-container"> <div class="hover-bg" style="background-image: url(' . $background_image . ');"></div> <dt class="z-10 text-sm font-semibold leading-6 text-primary">' . esc_html($item['item_title']) . '</dt> <dd class="z-10 order-first text-3xl font-semibold tracking-tight"> <div class="lottie-container" id="' . esc_attr($lottie_id) . '"></div> <span class="counter" id="' . \esc_attr($counter_id) . '" data-target="' . esc_attr($item['target_number']) . '">0</span>' . esc_html($item['suffix']) . ' </dd> </div>'; // Lottie animation JSON for each statistic if (!empty($item['lottie_file']['url'])) { echo '<script> document.addEventListener("DOMContentLoaded", function() { if (typeof lottie !== "undefined") { lottie.loadAnimation({ container: document.getElementById("' . esc_js($lottie_id) . '"), renderer: "svg", loop: true, autoplay: true, path: "' . esc_url($item['lottie_file']['url']) . '" }); } }); </script>'; } } } echo '</dl></div></div></div>'; } }
Editor is loading...
Leave a Comment