<?php /** * Banner Widget */ namespace Elementor; class Cyarb_Banner extends Widget_Base { public function get_name() { return 'Cyarb_Banner'; } public function get_title() { return __( 'Cyarb_Banner', 'cyarb-toolkit' ); } public function get_icon() { return 'eicon-banner'; } public function get_categories() { return [ 'cyarb-elements' ]; } protected function register_controls() { $this->start_controls_section( 'Cyarb_Banner_Area', [ 'label' => __( 'Cyarb Banner Area', 'cyarb-toolkit' ), 'tab' => Controls_Manager::TAB_CONTENT, ] ); $this->add_control( 'add_image', [ 'label' => __('Add Banner Image', 'cyarb-toolkit' ), 'type' => Controls_Manager::MEDIA, 'default' => [ 'url' => Utils::get_placeholder_image_src(), ] ] ); $this->add_control( 'banner_title', [ 'label' => __( 'Add Banner Title', 'cyarb-toolkit' ), 'type'=>Controls_Manager:: TEXT, ] ); $this->add_control( 'title_type', [ 'label' => __( 'Choose Heading Type', 'cyarb-toolkit' ), 'type' => Controls_Manager::SELECT, 'label_block' => true, 'options' => [ 'h1' => __( 'h1', 'cyarb-toolkit' ), 'h2' => __( 'h2', 'cyarb-toolkit' ), 'h3' => __( 'h3', 'cyarb-toolkit' ), 'h4' => __( 'h4', 'cyarb-toolkit' ), 'h5' => __( 'h5', 'cyarb-toolkit' ), 'h6' => __( 'h6', 'cyarb-toolkit' ), ], 'default' => 'h1' ] ); $this->add_control( 'banner_desc', [ 'label'=>__('Banner Description', 'cyarb-toolkit'), 'type'=>Controls_Manager:: WYSIWYG, 'description' => __('This text editor for p','cyarb-toolkit'), ] ); $this->add_control( 'placeholder_text', [ 'label' => __( 'Placeholder Text', 'cyrab-toolkit' ), 'type' => Controls_Manager::TEXT, 'label_block' => true, ] ); $this->add_control( 'button_text', [ 'label' => __( 'Button text', 'cyrab-toolkit' ), 'type' => Controls_Manager::TEXT, 'label_block' => true, ] ); $this->add_control( 'action_url', [ 'label' => esc_html__( 'Action URL', 'cyrab-toolkit' ), 'description' => __( 'Enter here your MailChimp action URL. <a href="https://docs.envytheme.com/docs/cyrab-theme-documentation/tips-guides-troubleshoots/get-mailchimp-newsletter-form-action-url/" target="_blank"> How to </a>', 'cyrab-toolkit' ), 'type' => Controls_Manager::TEXT, 'label_block' => true, 'default' => 'https://envytheme.us20.list-manage.com/subscribe/post?u=60e1ffe2e8a68ce1204cd39a5&amp;id=42d6d188d9 ', ] ); //Shape Images $this->add_control( 'image_shape', [ 'label' => esc_html__( 'Hide Shapes?', 'cyarb-toolkit' ), 'type' => Controls_Manager::SWITCHER, 'label_on' => esc_html__( 'Show', 'cyarb-toolkit' ), 'label_off' => esc_html__( 'Hide', 'cyarb-toolkit' ), 'return_value' => 'yes', 'default' => 'yes', ] ); $this->end_controls_section(); $this->start_controls_section( 'section_style', [ 'label' => __( 'Style', 'cyarb-toolkit' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'title_color', [ 'label' => __( 'Title Color', 'cyarb-toolkit' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .banner-content h1, .banner-content h2, .banner-content h3, .banner-content h4, .banner-content h5, .banner-content h6' => 'color: {{VALUE}}', ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'title_type_typography', 'label' => __( 'Title Type Typography', 'cyarb-toolkit' ), 'selector' => '{{WRAPPER}} .banner-content h1, .banner-content h2, .banner-content h3, .banner-content h4, .banner-content h5, .banner-content h6', ] ); $this->add_control( 'content_color', [ 'label' => __( 'Content Color', 'cyarb-toolkit' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} p' => 'color: {{VALUE}}', ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'content_type_typography', 'label' => __( 'Content Type Typography', 'cyarb-toolkit' ), 'selector' => '{{WRAPPER}} .banner-content p', ] ); $this->add_control( 'btn_color', [ 'label' => __( 'Button Color', 'cyarb-toolkit' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .default-btn' => 'color: {{VALUE}}', ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'btn_type_typography', 'label' => __( 'Button Type Typography', 'cyarb-toolkit' ), 'selector' => '{{WRAPPER}} .default-btn', ] ); } protected function render() { $settings = $this->get_settings_for_display(); ?> <div class="banner-area"> <div class="container-fluid"> <div class="row align-items-center"> <div class="col-lg-6 col-md-12"> <div class="banner-content"> <<?php echo esc_attr($settings['title_type']);?>><?php echo esc_html( $settings['banner_title'] ); ?></<?php echo esc_attr($settings['title_type']);?>> <?php echo wp_kses_post( $settings['banner_desc'] ); ?> <form class="mailchimp newsletter-form" method="post"> <div class="form-group"> <input type="email" class="input-newsletter" placeholder="<?php echo esc_html( $settings['placeholder_text'] ); ?>" name="EMAIL" required autocomplete="off"> <button type="submit" class="default-btn"><span><?php echo esc_html( $settings['button_text'] ); ?></span></button> </div> <p class="mchimp-errmessage" style="display: none;"></p> <p class="mchimp-sucmessage" style="display: none;"></p> </form> </div> </div> <?php if( $settings['add_image']['url'] != '' ) :?> <div class="col-lg-6 col-md-12"> <div class="banner-image"> <img src="<?php echo esc_url($settings['add_image']['url']) ?>" alt="<?php echo esc_attr('banner-image','cyarb-toolkit'); ?>"> </div> </div> <?php endif; ?> </div> </div> <?php if ( 'yes' === $settings['image_shape'] ) : ?> <div class="shape1"><img src="<?php echo esc_url(get_template_directory_uri() .'/assets/img/shape/shape1.png' ); ?>" alt="<?php echo esc_attr__( 'Shape', 'cyarb-toolkit' ); ?>"></div> <div class="shape2"><img src="<?php echo esc_url(get_template_directory_uri() .'/assets/img/shape/shape2.png' ); ?>" alt="<?php echo esc_attr__( 'Shape', 'cyarb-toolkit' ); ?>"></div> <div class="shape3"><img src="<?php echo esc_url(get_template_directory_uri() .'/assets/img/shape/shape3.png' ); ?>" alt="<?php echo esc_attr__( 'Shape', 'cyarb-toolkit' ); ?>"></div> <div class="shape4"><img src="<?php echo esc_url(get_template_directory_uri() .'/assets/img/shape/shape4.png' ); ?>" alt="<?php echo esc_attr__( 'Shape', 'cyarb-toolkit' ); ?>"></div> <div class="shape5"><img src="<?php echo esc_url(get_template_directory_uri() .'/assets/img/shape/shape5.png' ); ?>" alt="<?php echo esc_attr__( 'Shape', 'cyarb-toolkit' ); ?>"></div> <?php endif; ?> </div> <script> ;(function($){ "use strict"; $(document).ready(function () { // MAILCHIMP if ($(".mailchimp").length > 0) { $(".mailchimp").ajaxChimp({ callback: mailchimpCallback, url: "<?php echo esc_js($settings['action_url']) ?>" //Replace this with your own mailchimp post URL. Don't remove the "". Just paste the url inside "". }); } $(".memail").on("focus", function () { $(".mchimp-errmessage").fadeOut(); $(".mchimp-sucmessage").fadeOut(); }); $(".memail").on("keydown", function () { $(".mchimp-errmessage").fadeOut(); $(".mchimp-sucmessage").fadeOut(); }); $(".memail").on("click", function () { $(".memail").val(""); }); function mailchimpCallback(resp) { if (resp.result === "success") { $(".mchimp-sucmessage").html(resp.msg).fadeIn(1000); $(".mchimp-sucmessage").fadeOut(500); } else if (resp.result === "error") { $(".mchimp-errmessage").html(resp.msg).fadeIn(1000); } } }); })(jQuery) </script> <?php } } Plugin::instance()->widgets_manager->register_widget_type( new Cyarb_Banner );