File: /mnt/data/dreamssalon-wp/wp-content/plugins/dreamsalon-widgets/widgets/class-about-two.php
<?php
/**
* DS About Two Widget
*
* @since 1.0.0
*/
namespace dreamsalonelementor\Widgets;
use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Repeater;
if (!defined('ABSPATH')) {
exit; // Exit if accessed directly
}
class DSAboutTwo extends Widget_Base
{
public function get_name()
{
return 'dreamsalon-ds-about-two';
}
public function get_title()
{
return __('DS About Two', 'dreamsalon_elementor');
}
public function get_icon()
{
return 'eicon-info-circle';
}
public function get_categories()
{
return ['dreamsalon'];
}
public function get_script_depends()
{
return [
'jquery',
'wowjs',
'counterup',
];
}
protected function _register_controls()
{
/**
* Section: Main Info
*/
$this->start_controls_section(
'about_section',
[
'label' => __('About Section', 'dreamsalon_elementor'),
]
);
$this->add_control(
'section_title',
[
'label' => __('Section Title', 'dreamsalon_elementor'),
'type' => Controls_Manager::TEXT,
'default' => __('Who We Are', 'dreamsalon_elementor'),
]
);
// ✅ New image option between title and description
$this->add_control(
'section_image',
[
'label' => __('Section Image', 'dreamsalon_elementor'),
'type' => Controls_Manager::MEDIA,
'default' => [
'url' => plugins_url('assets/img/about/section-image.png', __FILE__),
],
]
);
$this->add_control(
'section_description',
[
'label' => __('Short Description', 'dreamsalon_elementor'),
'type' => Controls_Manager::TEXTAREA,
'default' => __('Welcome to Dream Salon, where beauty meets expertise, and every visit is a refreshing step toward lasting confidence and self-care.', 'dreamsalon_elementor'),
]
);
$this->add_control(
'main_image',
[
'label' => __('Main Image', 'dreamsalon_elementor'),
'type' => Controls_Manager::MEDIA,
'default' => [
'url' => plugins_url('assets/img/about/who-img-1.jpg', __FILE__),
],
]
);
$this->end_controls_section();
/**
* Section: Counters
*/
$this->start_controls_section(
'counters_section',
[
'label' => __('Counters', 'dreamsalon_elementor'),
]
);
$repeater = new Repeater();
$repeater->add_control(
'icon',
[
'label' => __('Icon Class', 'dreamsalon_elementor'),
'type' => Controls_Manager::TEXT,
'default' => 'ti ti-users-group',
]
);
$repeater->add_control(
'value',
[
'label' => __('Counter Value', 'dreamsalon_elementor'),
'type' => Controls_Manager::NUMBER,
'default' => 800,
]
);
$repeater->add_control(
'suffix',
[
'label' => __('Suffix', 'dreamsalon_elementor'),
'type' => Controls_Manager::TEXT,
'default' => '+',
]
);
$repeater->add_control(
'label_text',
[
'label' => __('Label Text', 'dreamsalon_elementor'),
'type' => Controls_Manager::TEXT,
'default' => 'Customers Worldwide',
]
);
$this->add_control(
'counters',
[
'label' => __('Counters', 'dreamsalon_elementor'),
'type' => Controls_Manager::REPEATER,
'fields' => $repeater->get_controls(),
'default' => [
['icon' => 'ti ti-users-group', 'value' => 800, 'suffix' => '+', 'label_text' => 'Customers Worldwide'],
['icon' => 'ti ti-users', 'value' => 1500, 'suffix' => '+', 'label_text' => 'Vendor Registered'],
['icon' => 'ti ti-building-store', 'value' => 4, 'suffix' => 'K+', 'label_text' => 'Salons Enrolled'],
['icon' => 'ti ti-calendar-check', 'value' => 25, 'suffix' => 'K+', 'label_text' => 'Bookings Completed'],
],
'title_field' => '{{label_text}}',
]
);
$this->end_controls_section();
/**
* Section: Background Elements
*/
$this->start_controls_section(
'background_images',
[
'label' => __('Decorative Images', 'dreamsalon_elementor'),
]
);
$this->add_control(
'bg_image_one',
[
'label' => __('Element Image 1', 'dreamsalon_elementor'),
'type' => Controls_Manager::MEDIA,
'default' => [
'url' => plugins_url('assets/img/about/who-element-1.png', __FILE__),
],
]
);
$this->add_control(
'bg_image_two',
[
'label' => __('Element Image 2', 'dreamsalon_elementor'),
'type' => Controls_Manager::MEDIA,
'default' => [
'url' => plugins_url('assets/img/about/who-element-2.png', __FILE__),
],
]
);
$this->add_control(
'bg_image_three',
[
'label' => __('Element Image 3', 'dreamsalon_elementor'),
'type' => Controls_Manager::MEDIA,
'default' => [
'url' => plugins_url('assets/img/about/who-element-3.png', __FILE__),
],
]
);
$this->end_controls_section();
}
protected function render()
{
$settings = $this->get_settings_for_display();
?>
<!-- Start Who We Are Section -->
<section class="expert-section section bg-dark position-relative overflow-hidden">
<div class="container">
<div class="row justify-content-center">
<div class="col-xxl-6 col-xl-7 col-lg-9">
<div class="section-header white-title text-center wow fadeInUp" data-wow-delay="0.2s">
<h2 class="section-title"><?php echo esc_html($settings['section_title']); ?></h2>
<?php if (!empty($settings['section_image']['url'])) : ?>
<div class="section-title-image mb-3">
<img src="<?php echo esc_url($settings['section_image']['url']); ?>" alt="section image" class="img-fluid mx-auto d-block">
</div>
<?php endif; ?>
<p class="decription-wvr"><?php echo esc_html($settings['section_description']); ?></p>
</div>
</div>
</div>
<div class="expert-item text-center">
<?php if (!empty($settings['main_image']['url'])): ?>
<div class="custom-img-item wow fadeInUp" data-wow-delay="0.4s">
<img src="<?php echo esc_url($settings['main_image']['url']); ?>" alt="who-img" class="rounded img-fluid">
</div>
<?php endif; ?>
<p class="mb-0 text-white"><?php echo esc_html($settings['section_description']); ?></p>
</div>
<div class="row row-gap-4 mt-5 justify-content-center">
<?php if (!empty($settings['counters'])): ?>
<?php foreach ($settings['counters'] as $counter): ?>
<div class="col-xl-3 col-lg-6 col-sm-6">
<div class="counter-item-two d-flex align-items-center flex-wrap gap-3 mb-0 wow fadeInUp" data-wow-delay="0.3s">
<div class="avatar avatar-lg rounded-circle bg-primary">
<i class="<?php echo esc_attr($counter['icon']); ?> fs-22"></i>
</div>
<div>
<p class="counter-value mb-2 text-white">
<span class="counter" data-target="<?php echo esc_attr($counter['value']); ?>"><?php echo esc_html($counter['value']); ?></span><?php echo esc_html($counter['suffix']); ?>
</p>
<p class="mb-0 text-white"><?php echo esc_html($counter['label_text']); ?></p>
</div>
</div>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
</div>
<?php if (!empty($settings['bg_image_one']['url'])): ?>
<img src="<?php echo esc_url($settings['bg_image_one']['url']); ?>" alt="who-element-1" class="element-one d-lg-block d-none">
<?php endif; ?>
<?php if (!empty($settings['bg_image_two']['url'])): ?>
<img src="<?php echo esc_url($settings['bg_image_two']['url']); ?>" alt="who-element-2" class="element-two d-lg-block d-none bg-image2-wvr">
<?php endif; ?>
<?php if (!empty($settings['bg_image_three']['url'])): ?>
<img src="<?php echo esc_url($settings['bg_image_three']['url']); ?>" alt="who-element-3" class="element-three d-lg-block d-none">
<?php endif; ?>
</section>
<script>
jQuery(document).ready(function($){
if (typeof WOW !== 'undefined') {
new WOW().init();
}
$('.counter').each(function(){
var $this = $(this);
var countTo = $this.attr('data-target');
$({ countNum: $this.text() }).animate({
countNum: countTo
},
{
duration: 2000,
easing: 'swing',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
}
});
});
});
</script>
<style>
.bg-image2-wvr{
top: 110px !important;
}
</style>
<!-- End Who We Are Section -->
<?php
}
}