File "how-to.php"
Full path: /home/kosmetik/public_html/wp-content/plugins/powerpack-elements/modules/how-to/widgets/how-to.php
File
size: 63.66 B
MIME-type: text/x-php
Charset: utf-8
Download Open Edit Advanced Editor Back
<?php
namespace PowerpackElements\Modules\HowTo\Widgets;
use PowerpackElements\Base\Powerpack_Widget;
use PowerpackElements\Classes\PP_Posts_Helper;
// Elementor Classes
use Elementor\Controls_Manager;
use Elementor\Control_Media;
use Elementor\Utils;
use Elementor\Icons_Manager;
use Elementor\Repeater;
use Elementor\Group_Control_Image_Size;
use Elementor\Group_Control_Background;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Typography;
use Elementor\Core\Schemes\Typography as Scheme_Typography;
use Elementor\Core\Schemes\Color as Scheme_Color;
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
/**
* How To Widget
*/
class How_To extends Powerpack_Widget {
private $_schema_rendered = false;
/**
* Retrieve How To widget name.
*
* @access public
*
* @return string Widget name.
*/
public function get_name() {
return parent::get_widget_name( 'How_To' );
}
/**
* Retrieve How To widget title.
*
* @access public
*
* @return string Widget title.
*/
public function get_title() {
return parent::get_widget_title( 'How_To' );
}
/**
* Retrieve How To widget icon.
*
* @access public
*
* @return string Widget icon.
*/
public function get_icon() {
return parent::get_widget_icon( 'How_To' );
}
/**
* Get widget keywords.
*
* Retrieve the list of keywords the widget belongs to.
*
* @access public
*
* @return array Widget keywords.
*/
public function get_keywords() {
return parent::get_widget_keywords( 'How_To' );
}
/**
* Retrieve the list of scripts the How To widget depended on.
*
* Used to set scripts dependencies required to run the widget.
*
* @access public
*
* @return array Widget scripts dependencies.
*/
public function get_script_depends() {
return [
'powerpack-frontend',
];
}
/**
* Register How To widget controls.
*
* Adds different input fields to allow the user to change and customize the widget settings.
*
* @access protected
*/
protected function _register_controls() { // phpcs:ignore PSR2.Methods.MethodDeclaration.Underscore
$this->register_controls();
}
/**
* Register How To widget controls.
*
* Adds different input fields to allow the user to change and customize the widget settings.
*
* @since 2.0.3
* @access protected
*/
protected function register_controls() {
/*-----------------------------------------------------------------------------------*/
/* CONTENT TAB
/*-----------------------------------------------------------------------------------*/
/**
* Content Tab: General
*/
$this->start_controls_section(
'section_schema_markup',
[
'label' => esc_html__( 'Schema Markup', 'powerpack' ),
]
);
$this->add_control(
'enable_schema',
[
'label' => __( 'Enable Schema Markup', 'powerpack' ),
'type' => Controls_Manager::SELECT,
'default' => 'yes',
'label_block' => true,
'options' => [
'yes' => __( 'Yes', 'powerpack' ),
'no' => __( 'No', 'powerpack' ),
],
'description' => __( 'Enable Schema Markup option if you are setting up a unique "HowTo" page on your website. The Module adds "HowTo" Page schema to the page as per Google\'s Structured Data guideline. <a target="_blank" rel="noopener" href="https://developers.google.com/search/docs/data-types/how-to"><b style="color: #d30c5c;">Click here</b></a> for more details. <p style="font-style: normal; padding: 10px; background: #fffbd4; color: #333; margin-top: 10px; border: 1px solid #FFEB3B; border-radius: 5px; font-size: 12px;">To use schema markup, your page must have only single instance of HowTo widget.</p>', 'powerpack' ),
]
);
$this->end_controls_section();
/**
* Content Tab: How To
*/
$this->start_controls_section(
'section_how_to',
[
'label' => esc_html__( 'How To', 'powerpack' ),
]
);
$this->add_control(
'how_to_title',
[
'label' => __( 'Title', 'powerpack' ),
'type' => Controls_Manager::TEXT,
'default' => __( 'How To', 'powerpack' ),
'dynamic' => [
'active' => true,
],
]
);
$this->add_control(
'how_to_description',
[
'label' => esc_html__( 'Description', 'powerpack' ),
'type' => Controls_Manager::WYSIWYG,
'default' => esc_html__( 'Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'powerpack' ),
'dynamic' => [ 'active' => true ],
]
);
$this->add_control(
'how_to_image',
[
'label' => __( 'Image', 'powerpack' ),
'type' => Controls_Manager::MEDIA,
'dynamic' => [
'active' => true,
],
'default' => [
'url' => Utils::get_placeholder_image_src(),
],
]
);
$this->add_group_control(
Group_Control_Image_Size::get_type(),
[
'name' => 'how_to_image_size',
'label' => __( 'Image Size', 'powerpack' ),
'default' => 'full',
]
);
$this->add_control(
'show_advanced',
[
'label' => __( 'Show Advanced Options', 'powerpack' ),
'type' => Controls_Manager::SELECT,
'default' => 'no',
'label_block' => true,
'options' => [
'yes' => __( 'Yes', 'powerpack' ),
'no' => __( 'No', 'powerpack' ),
],
'separator' => 'before',
]
);
$this->end_controls_section();
/**
* Content Tab: Advanced Options
*/
$this->start_controls_section(
'advanced_options',
[
'label' => __( 'Advanced Options', 'powerpack' ),
'condition' => [
'show_advanced' => 'yes',
],
]
);
$this->add_control(
'total_time_text',
[
'label' => __( 'Total Time Text', 'powerpack' ),
'type' => Controls_Manager::TEXT,
'default' => __( 'Time Needed:', 'powerpack' ),
'dynamic' => [
'active' => true,
],
]
);
$this->add_control(
'total_time_heading',
[
'label' => __( 'Duration', 'powerpack' ),
'type' => Controls_Manager::HEADING,
'description' => __( 'How much time this process will take', 'powerpack' ),
'separator' => 'before',
]
);
$this->add_control(
'total_time_years',
[
'label' => __( 'Years', 'powerpack' ),
'type' => Controls_Manager::NUMBER,
'default' => '',
'units' => array( 'years' ),
'dynamic' => [
'active' => true,
],
]
);
$this->add_control(
'total_time_months',
[
'label' => __( 'Months', 'powerpack' ),
'type' => Controls_Manager::NUMBER,
'default' => '',
'units' => array( 'months' ),
'dynamic' => [
'active' => true,
],
]
);
$this->add_control(
'total_time_days',
[
'label' => __( 'Days', 'powerpack' ),
'type' => Controls_Manager::NUMBER,
'default' => '',
'units' => array( 'days' ),
'dynamic' => [
'active' => true,
],
]
);
$this->add_control(
'total_time_hours',
[
'label' => __( 'Hours', 'powerpack' ),
'type' => Controls_Manager::NUMBER,
'default' => __( '1', 'powerpack' ),
'units' => array( 'hours' ),
'dynamic' => [
'active' => true,
],
]
);
$this->add_control(
'total_time_minutes',
[
'label' => __( 'Minutes', 'powerpack' ),
'type' => Controls_Manager::NUMBER,
'default' => __( '30', 'powerpack' ),
'units' => array( 'minutes' ),
'dynamic' => [
'active' => true,
],
]
);
$this->add_control(
'estimated_cost_text',
[
'label' => __( 'Estimated Cost Text', 'powerpack' ),
'type' => Controls_Manager::TEXT,
'default' => __( 'Total Cost:', 'powerpack' ),
'dynamic' => [
'active' => true,
],
'separator' => 'before',
]
);
$this->add_control(
'estimated_cost',
[
'label' => __( 'Estimated Cost', 'powerpack' ),
'type' => Controls_Manager::NUMBER,
'description' => __( 'How much cost of this.', 'powerpack' ),
'default' => __( '100', 'powerpack' ),
'dynamic' => [
'active' => true,
],
]
);
$this->add_control(
'currency_iso_code',
[
'label' => __( 'Currency ISO Code', 'powerpack' ),
'type' => Controls_Manager::TEXT,
'default' => __( '$', 'powerpack' ),
'description' => __( 'For your country ISO code <a href="https://en.wikipedia.org/wiki/List_of_circulating_currencies" target="_blank" rel="noopener"><b style="color: #d30c5c;">Click here</b></a>', 'powerpack' ),
'dynamic' => [
'active' => true,
],
'separator' => 'after',
]
);
$this->add_control(
'add_supply',
[
'label' => __( 'Add Supply', 'powerpack' ),
'type' => Controls_Manager::SELECT,
'default' => 'no',
'label_block' => true,
'options' => [
'yes' => __( 'Yes', 'powerpack' ),
'no' => __( 'No', 'powerpack' ),
],
]
);
$this->add_control(
'supply_title',
[
'label' => __( 'Supply Title', 'powerpack' ),
'type' => Controls_Manager::TEXT,
'default' => __( 'Necessary Supply Items', 'powerpack' ),
'dynamic' => [
'active' => true,
],
'condition' => [
'add_supply' => 'yes',
],
]
);
$repeater = new Repeater();
$repeater->add_control(
'supply_text',
[
'label' => __( 'Supply', 'powerpack' ),
'type' => Controls_Manager::TEXT,
'dynamic' => [
'active' => true,
],
]
);
$this->add_control(
'supply',
[
'label' => esc_html__( 'Add Supply', 'powerpack' ),
'type' => Controls_Manager::REPEATER,
'default' => [
[ 'supply_text' => esc_html__( 'Supply 1', 'powerpack' ) ],
[ 'supply_text' => esc_html__( 'Supply 2', 'powerpack' ) ],
[ 'supply_text' => esc_html__( 'Supply 3', 'powerpack' ) ],
],
'fields' => $repeater->get_controls(),
'title_field' => '{{supply_text}}',
'condition' => [
'add_supply' => 'yes',
],
]
);
$this->add_control(
'supply_icon',
[
'label' => __( 'Supply Icon', 'powerpack' ),
'type' => Controls_Manager::ICONS,
'default' => [
'value' => 'fas fa-check',
'library' => 'fa-solid',
],
'fa4compatibility' => 'list_icon',
'condition' => [
'add_supply' => 'yes',
],
]
);
$this->add_responsive_control(
'supply_icon_spacing',
[
'label' => __( 'Icon Spacing', 'powerpack' ),
'type' => Controls_Manager::SLIDER,
'range' => [
'px' => [
'min' => 0,
'max' => 50,
],
],
'default' => [
'size' => 10,
],
'selectors' => [
'{{WRAPPER}} .pp-supply-icon' => 'margin-right: {{SIZE}}{{UNIT}};',
],
'condition' => [
'add_supply' => 'yes',
],
]
);
$this->add_responsive_control(
'supply_icon_size',
[
'label' => __( 'Icon Size', 'powerpack' ),
'type' => Controls_Manager::SLIDER,
'range' => [
'px' => [
'min' => 0,
'max' => 50,
],
],
'selectors' => [
'{{WRAPPER}} .pp-supply-icon' => 'font-size: {{SIZE}}{{UNIT}};',
],
'condition' => [
'add_supply' => 'yes',
],
]
);
$this->add_control(
'add_tools',
[
'label' => __( 'Add Tools', 'powerpack' ),
'type' => Controls_Manager::SELECT,
'default' => 'no',
'label_block' => true,
'options' => [
'yes' => __( 'Yes', 'powerpack' ),
'no' => __( 'No', 'powerpack' ),
],
'separator' => 'before',
]
);
$this->add_control(
'tool_title',
[
'label' => __( 'Tool Title', 'powerpack' ),
'type' => Controls_Manager::TEXT,
'default' => __( 'Necessary Tool Items', 'powerpack' ),
'dynamic' => [
'active' => true,
],
'condition' => [
'add_tools' => 'yes',
],
]
);
$repeater = new Repeater();
$repeater->add_control(
'tool_text',
[
'label' => __( 'Tools', 'powerpack' ),
'type' => Controls_Manager::TEXT,
'dynamic' => [
'active' => true,
],
]
);
$this->add_control(
'tools',
[
'label' => esc_html__( 'Add Tools', 'powerpack' ),
'type' => Controls_Manager::REPEATER,
'default' => [
[ 'tool_text' => esc_html__( 'Tool 1', 'powerpack' ) ],
[ 'tool_text' => esc_html__( 'Tool 2', 'powerpack' ) ],
[ 'tool_text' => esc_html__( 'Tool 3', 'powerpack' ) ],
],
'fields' => $repeater->get_controls(),
'title_field' => '{{tool_text}}',
'condition' => [
'add_tools' => 'yes',
],
]
);
$this->add_control(
'tools_icon',
[
'label' => __( 'Tool Icon', 'powerpack' ),
'type' => Controls_Manager::ICONS,
'default' => [
'value' => 'fas fa-check',
'library' => 'fa-solid',
],
'fa4compatibility' => 'list_icon',
'condition' => [
'add_tools' => 'yes',
],
]
);
$this->add_responsive_control(
'tools_icon_spacing',
[
'label' => __( 'Icon Spacing', 'powerpack' ),
'type' => Controls_Manager::SLIDER,
'range' => [
'px' => [
'min' => 0,
'max' => 50,
],
],
'default' => [
'size' => 10,
],
'selectors' => [
'{{WRAPPER}} .pp-tool-icon' => 'margin-right: {{SIZE}}{{UNIT}};',
],
'condition' => [
'add_tools' => 'yes',
],
]
);
$this->add_responsive_control(
'tools_icon_size',
[
'label' => __( 'Icon Size', 'powerpack' ),
'type' => Controls_Manager::SLIDER,
'range' => [
'px' => [
'min' => 0,
'max' => 50,
],
],
'selectors' => [
'{{WRAPPER}} .pp-tool-icon' => 'font-size: {{SIZE}}{{UNIT}};',
],
'condition' => [
'add_tools' => 'yes',
],
]
);
$this->end_controls_section();
/**
* Content Tab: Steps
*/
$this->start_controls_section(
'steps',
[
'label' => __( 'Steps', 'powerpack' ),
]
);
$this->add_control(
'step_section_title',
[
'label' => __( 'Section Title', 'powerpack' ),
'default' => __( 'Necessary Steps', 'powerpack' ),
'type' => Controls_Manager::TEXT,
'dynamic' => [
'active' => true,
],
]
);
$repeater = new Repeater();
$repeater->add_control(
'step_title',
[
'label' => __( 'Title', 'powerpack' ),
'type' => Controls_Manager::TEXT,
'dynamic' => [
'active' => true,
],
]
);
$repeater->add_control(
'step_description',
[
'label' => esc_html__( 'Description', 'powerpack' ),
'type' => Controls_Manager::WYSIWYG,
'default' => esc_html__( 'Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'powerpack' ),
'dynamic' => [ 'active' => true ],
]
);
$repeater->add_control(
'step_image',
[
'label' => __( 'Image', 'powerpack' ),
'type' => Controls_Manager::MEDIA,
'dynamic' => [
'active' => true,
],
'default' => [
'url' => Utils::get_placeholder_image_src(),
],
]
);
$repeater->add_control(
'step_link',
[
'label' => __( 'Link', 'powerpack' ),
'type' => Controls_Manager::URL,
'dynamic' => [
'active' => true,
],
'show_external' => true,
'label_block' => true,
'placeholder' => __( 'http://your-link.com', 'powerpack' ),
]
);
$this->add_control(
'steps_form',
[
'label' => esc_html__( 'Add Steps', 'powerpack' ),
'type' => Controls_Manager::REPEATER,
'default' => [
[ 'step_title' => esc_html__( 'Step 1', 'powerpack' ) ],
[ 'step_title' => esc_html__( 'Step 2', 'powerpack' ) ],
],
'fields' => $repeater->get_controls(),
'title_field' => '{{step_title}}',
]
);
$this->add_control(
'open_lightbox',
[
'label' => __( 'Lightbox', 'powerpack' ),
'type' => Controls_Manager::SELECT,
'default' => 'no',
'options' => [
'default' => __( 'Default', 'powerpack' ),
'yes' => __( 'Yes', 'powerpack' ),
'no' => __( 'No', 'powerpack' ),
],
'separator' => 'before',
]
);
$this->end_controls_section();
/**
* Style Tab: Box
*/
$this->start_controls_section(
'section_box_style',
[
'label' => esc_html__( 'Box', 'powerpack' ),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_responsive_control(
'box_align',
[
'label' => __( 'Alignment', 'powerpack' ),
'type' => Controls_Manager::CHOOSE,
'options' => [
'left' => [
'title' => __( 'Left', 'powerpack' ),
'icon' => 'fa fa-align-left',
],
'center' => [
'title' => __( 'Center', 'powerpack' ),
'icon' => 'fa fa-align-center',
],
'right' => [
'title' => __( 'Right', 'powerpack' ),
'icon' => 'fa fa-align-right',
],
],
'default' => 'left',
'selectors' => [
'{{WRAPPER}} .pp-how-to-container' => 'text-align: {{VALUE}};',
],
]
);
$this->add_control(
'box_bg_color',
[
'label' => esc_html__( 'Background Color', 'powerpack' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .pp-how-to-container' => 'background-color: {{VALUE}};',
],
]
);
$this->add_responsive_control(
'box_padding',
[
'label' => esc_html__( 'Padding', 'powerpack' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', 'em', '%' ],
'selectors' => [
'{{WRAPPER}} .pp-how-to-container' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
'separator' => 'after',
]
);
$this->add_group_control(
Group_Control_Border::get_type(),
[
'name' => 'box_border',
'label' => esc_html__( 'Border', 'powerpack' ),
'selector' => '{{WRAPPER}} .pp-how-to-container',
]
);
$this->add_responsive_control(
'box_border_radius',
[
'label' => esc_html__( 'Border Radius', 'powerpack' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', 'em', '%' ],
'selectors' => [
'{{WRAPPER}} .pp-how-to-container' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_group_control(
Group_Control_Box_Shadow::get_type(),
[
'name' => 'box_shadow',
'selector' => '{{WRAPPER}} .pp-how-to-container',
]
);
$this->end_controls_section();
/**
* Style Tab: Title
*/
$this->start_controls_section(
'section_title_style',
[
'label' => esc_html__( 'Title', 'powerpack' ),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_control(
'title_color',
[
'label' => esc_html__( 'Color', 'powerpack' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .pp-how-to-title' => 'color: {{VALUE}};',
],
]
);
$this->add_responsive_control(
'title_bottom_spacing',
[
'label' => __( 'Bottom Spacing', 'powerpack' ),
'type' => Controls_Manager::SLIDER,
'range' => [
'px' => [
'min' => 0,
'max' => 200,
],
],
'default' => [
'size' => 10,
],
'selectors' => [
'{{WRAPPER}} .pp-how-to-title' => 'margin-bottom: {{SIZE}}{{UNIT}};',
],
]
);
$this->add_control(
'title_tag',
[
'label' => __( 'Title HTML Tag', 'powerpack' ),
'type' => Controls_Manager::SELECT,
'default' => 'h2',
'label_block' => true,
'options' => [
'h1' => __( 'H1', 'powerpack' ),
'h2' => __( 'H2', 'powerpack' ),
'h3' => __( 'H3', 'powerpack' ),
'h4' => __( 'H4', 'powerpack' ),
'h5' => __( 'H5', 'powerpack' ),
'h6' => __( 'H6', 'powerpack' ),
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'title_typography',
'selector' => '{{WRAPPER}} .pp-how-to-title',
]
);
$this->add_responsive_control(
'title_align',
[
'label' => __( 'Alignment', 'powerpack' ),
'type' => Controls_Manager::CHOOSE,
'options' => [
'left' => [
'title' => __( 'Left', 'powerpack' ),
'icon' => 'fa fa-align-left',
],
'center' => [
'title' => __( 'Center', 'powerpack' ),
'icon' => 'fa fa-align-center',
],
'right' => [
'title' => __( 'Right', 'powerpack' ),
'icon' => 'fa fa-align-right',
],
],
'default' => '',
'selectors' => [
'{{WRAPPER}} .pp-how-to-title' => 'text-align: {{VALUE}};',
],
]
);
$this->end_controls_section();
/**
* Style Tab: Description
*/
$this->start_controls_section(
'section_description_style',
[
'label' => esc_html__( 'Description', 'powerpack' ),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_control(
'description_color',
[
'label' => esc_html__( 'Color', 'powerpack' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .pp-how-to-description' => 'color: {{VALUE}};',
],
]
);
$this->add_responsive_control(
'description_bottom_spacing',
[
'label' => __( 'Bottom Spacing', 'powerpack' ),
'type' => Controls_Manager::SLIDER,
'range' => [
'px' => [
'min' => 0,
'max' => 200,
],
],
'default' => [
'size' => 10,
],
'selectors' => [
'{{WRAPPER}} .pp-how-to-description' => 'margin-bottom: {{SIZE}}{{UNIT}};',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'description_typography',
'selector' => '{{WRAPPER}} .pp-how-to-description',
]
);
$this->add_responsive_control(
'description_align',
[
'label' => __( 'Alignment', 'powerpack' ),
'type' => Controls_Manager::CHOOSE,
'options' => [
'left' => [
'title' => __( 'Left', 'powerpack' ),
'icon' => 'fa fa-align-left',
],
'center' => [
'title' => __( 'Center', 'powerpack' ),
'icon' => 'fa fa-align-center',
],
'right' => [
'title' => __( 'Right', 'powerpack' ),
'icon' => 'fa fa-align-right',
],
],
'default' => '',
'selectors' => [
'{{WRAPPER}} .pp-how-to-description' => 'text-align: {{VALUE}};',
],
]
);
$this->end_controls_section();
/**
* Style Tab: Image
*/
$this->start_controls_section(
'section_image_style',
[
'label' => esc_html__( 'Image', 'powerpack' ),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_responsive_control(
'image_align',
[
'label' => __( 'Alignment', 'powerpack' ),
'type' => Controls_Manager::CHOOSE,
'options' => [
'left' => [
'title' => __( 'Left', 'powerpack' ),
'icon' => 'fa fa-align-left',
],
'center' => [
'title' => __( 'Center', 'powerpack' ),
'icon' => 'fa fa-align-center',
],
'right' => [
'title' => __( 'Right', 'powerpack' ),
'icon' => 'fa fa-align-right',
],
],
'default' => 'left',
'selectors' => [
'{{WRAPPER}} .pp-how-to-image' => 'text-align: {{VALUE}};',
],
]
);
$this->add_responsive_control(
'image_padding',
[
'label' => esc_html__( 'Padding', 'powerpack' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', 'em', '%' ],
'selectors' => [
'{{WRAPPER}} .pp-how-to-image' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
'separator' => 'after',
]
);
$this->add_group_control(
Group_Control_Border::get_type(),
[
'name' => 'image_border',
'label' => esc_html__( 'Border', 'powerpack' ),
'selector' => '{{WRAPPER}} .pp-how-to-image img',
]
);
$this->add_responsive_control(
'image_border_radius',
[
'label' => esc_html__( 'Border Radius', 'powerpack' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', 'em', '%' ],
'selectors' => [
'{{WRAPPER}} .pp-how-to-image img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_group_control(
Group_Control_Box_Shadow::get_type(),
[
'name' => 'image_shadow',
'selector' => '{{WRAPPER}} .pp-how-to-image img',
]
);
$this->end_controls_section();
/**
* Style Tab: Advanced Options
*/
$this->start_controls_section(
'section_advanced_options_style',
[
'label' => esc_html__( 'Advanced Options', 'powerpack' ),
'tab' => Controls_Manager::TAB_STYLE,
'condition' => [
'show_advanced' => 'yes',
],
]
);
$this->add_control(
'total_time_color',
[
'label' => esc_html__( 'Total Time Color', 'powerpack' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .pp-how-to-total-time' => 'color: {{VALUE}};',
],
]
);
$this->add_responsive_control(
'total_time_bottom_spacing',
[
'label' => __( 'Total Time Bottom Spacing', 'powerpack' ),
'type' => Controls_Manager::SLIDER,
'range' => [
'px' => [
'min' => 0,
'max' => 200,
],
],
'default' => [
'size' => 10,
],
'selectors' => [
'{{WRAPPER}} .pp-how-to-total-time' => 'margin-bottom: {{SIZE}}{{UNIT}};',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'total_time_typography',
'selector' => '{{WRAPPER}} .pp-how-to-total-time',
]
);
$this->add_responsive_control(
'total_time_align',
[
'label' => __( 'Alignment', 'powerpack' ),
'type' => Controls_Manager::CHOOSE,
'options' => [
'left' => [
'title' => __( 'Left', 'powerpack' ),
'icon' => 'fa fa-align-left',
],
'center' => [
'title' => __( 'Center', 'powerpack' ),
'icon' => 'fa fa-align-center',
],
'right' => [
'title' => __( 'Right', 'powerpack' ),
'icon' => 'fa fa-align-right',
],
],
'default' => '',
'selectors' => [
'{{WRAPPER}} .pp-how-to-total-time' => 'text-align: {{VALUE}};',
],
]
);
$this->add_control(
'estimated_cost_color',
[
'label' => esc_html__( 'Estimated Cost Color', 'powerpack' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .pp-how-to-estimated-cost' => 'color: {{VALUE}};',
],
'separator' => 'before',
]
);
$this->add_responsive_control(
'estimated_cost_bottom_spacing',
[
'label' => __( 'Estimated Cost Bottom Spacing', 'powerpack' ),
'type' => Controls_Manager::SLIDER,
'range' => [
'px' => [
'min' => 0,
'max' => 200,
],
],
'default' => [
'size' => 10,
],
'selectors' => [
'{{WRAPPER}} .pp-how-to-estimated-cost' => 'margin-bottom: {{SIZE}}{{UNIT}};',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'estimated_cost_typography',
'selector' => '{{WRAPPER}} .pp-how-to-estimated-cost',
]
);
$this->add_responsive_control(
'estimated_cost_align',
[
'label' => __( 'Alignment', 'powerpack' ),
'type' => Controls_Manager::CHOOSE,
'options' => [
'left' => [
'title' => __( 'Left', 'powerpack' ),
'icon' => 'fa fa-align-left',
],
'center' => [
'title' => __( 'Center', 'powerpack' ),
'icon' => 'fa fa-align-center',
],
'right' => [
'title' => __( 'Right', 'powerpack' ),
'icon' => 'fa fa-align-right',
],
],
'default' => '',
'selectors' => [
'{{WRAPPER}} .pp-how-to-estimated-cost' => 'text-align: {{VALUE}};',
],
]
);
$this->add_control(
'supply_title_color',
[
'label' => esc_html__( 'Supply Title Color', 'powerpack' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .pp-how-to-supply-title' => 'color: {{VALUE}};',
],
'separator' => 'before',
'condition' => [
'add_supply' => 'yes',
],
]
);
$this->add_responsive_control(
'supply_box_bottom_spacing',
[
'label' => __( 'Supply Box Bottom Spacing', 'powerpack' ),
'type' => Controls_Manager::SLIDER,
'range' => [
'px' => [
'min' => 0,
'max' => 200,
],
],
'default' => [
'size' => 10,
],
'selectors' => [
'{{WRAPPER}} .pp-how-to-supply' => 'margin-bottom: {{SIZE}}{{UNIT}};',
],
'condition' => [
'add_supply' => 'yes',
],
]
);
$this->add_responsive_control(
'supply_title_bottom_spacing',
[
'label' => __( 'Supply Title Bottom Spacing', 'powerpack' ),
'type' => Controls_Manager::SLIDER,
'range' => [
'px' => [
'min' => 0,
'max' => 200,
],
],
'default' => [
'size' => 10,
],
'selectors' => [
'{{WRAPPER}} .pp-how-to-supply-title' => 'margin-bottom: {{SIZE}}{{UNIT}};',
],
'condition' => [
'add_supply' => 'yes',
],
]
);
$this->add_control(
'supply_title_tag',
[
'label' => __( 'Supply Title HTML Tag', 'powerpack' ),
'type' => Controls_Manager::SELECT,
'default' => 'h3',
'label_block' => true,
'options' => [
'h1' => __( 'H1', 'powerpack' ),
'h2' => __( 'H2', 'powerpack' ),
'h3' => __( 'H3', 'powerpack' ),
'h4' => __( 'H4', 'powerpack' ),
'h5' => __( 'H5', 'powerpack' ),
'h6' => __( 'H6', 'powerpack' ),
],
'condition' => [
'add_supply' => 'yes',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'supply_title_typography',
'selector' => '{{WRAPPER}} .pp-how-to-supply-title',
'condition' => [
'add_supply' => 'yes',
],
]
);
$this->add_responsive_control(
'supply_title_align',
[
'label' => __( 'Alignment', 'powerpack' ),
'type' => Controls_Manager::CHOOSE,
'options' => [
'left' => [
'title' => __( 'Left', 'powerpack' ),
'icon' => 'fa fa-align-left',
],
'center' => [
'title' => __( 'Center', 'powerpack' ),
'icon' => 'fa fa-align-center',
],
'right' => [
'title' => __( 'Right', 'powerpack' ),
'icon' => 'fa fa-align-right',
],
],
'default' => '',
'selectors' => [
'{{WRAPPER}} .pp-how-to-supply-title' => 'text-align: {{VALUE}};',
],
'condition' => [
'add_supply' => 'yes',
],
]
);
$this->add_control(
'supply_text_color',
[
'label' => esc_html__( 'Supply Text Color', 'powerpack' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .pp-supply' => 'color: {{VALUE}};',
],
'separator' => 'before',
'condition' => [
'add_supply' => 'yes',
],
]
);
$this->add_responsive_control(
'supply_text_bottom_spacing',
[
'label' => __( 'Supply Text Bottom Spacing', 'powerpack' ),
'type' => Controls_Manager::SLIDER,
'range' => [
'px' => [
'min' => 0,
'max' => 200,
],
],
'default' => [
'size' => 10,
],
'selectors' => [
'{{WRAPPER}} .pp-supply:not(:last-child)' => 'margin-bottom: {{SIZE}}{{UNIT}};',
],
'condition' => [
'add_supply' => 'yes',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'supply_text_typography',
'selector' => '{{WRAPPER}} .pp-supply',
'condition' => [
'add_supply' => 'yes',
],
]
);
$this->add_responsive_control(
'supply_text_align',
[
'label' => __( 'Alignment', 'powerpack' ),
'type' => Controls_Manager::CHOOSE,
'options' => [
'left' => [
'title' => __( 'Left', 'powerpack' ),
'icon' => 'fa fa-align-left',
],
'center' => [
'title' => __( 'Center', 'powerpack' ),
'icon' => 'fa fa-align-center',
],
'right' => [
'title' => __( 'Right', 'powerpack' ),
'icon' => 'fa fa-align-right',
],
],
'default' => '',
'selectors' => [
'{{WRAPPER}} .pp-supply' => 'text-align: {{VALUE}};',
],
'condition' => [
'add_supply' => 'yes',
],
]
);
$this->add_control(
'tools_title_color',
[
'label' => esc_html__( 'Tools Title Color', 'powerpack' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .pp-how-to-tools-title' => 'color: {{VALUE}};',
],
'separator' => 'before',
'condition' => [
'add_tools' => 'yes',
],
]
);
$this->add_responsive_control(
'tools_box_bottom_spacing',
[
'label' => __( 'Tools Box Bottom Spacing', 'powerpack' ),
'type' => Controls_Manager::SLIDER,
'range' => [
'px' => [
'min' => 0,
'max' => 200,
],
],
'default' => [
'size' => 10,
],
'selectors' => [
'{{WRAPPER}} .pp-how-to-tools' => 'margin-bottom: {{SIZE}}{{UNIT}};',
],
'condition' => [
'add_tools' => 'yes',
],
]
);
$this->add_responsive_control(
'tools_title_bottom_spacing',
[
'label' => __( 'Tools Title Bottom Spacing', 'powerpack' ),
'type' => Controls_Manager::SLIDER,
'range' => [
'px' => [
'min' => 0,
'max' => 200,
],
],
'default' => [
'size' => 10,
],
'selectors' => [
'{{WRAPPER}} .pp-how-to-tools-title' => 'margin-bottom: {{SIZE}}{{UNIT}};',
],
'condition' => [
'add_tools' => 'yes',
],
]
);
$this->add_control(
'tools_title_tag',
[
'label' => __( 'Tools Title HTML Tag', 'powerpack' ),
'type' => Controls_Manager::SELECT,
'default' => 'h3',
'label_block' => true,
'options' => [
'h1' => __( 'H1', 'powerpack' ),
'h2' => __( 'H2', 'powerpack' ),
'h3' => __( 'H3', 'powerpack' ),
'h4' => __( 'H4', 'powerpack' ),
'h5' => __( 'H5', 'powerpack' ),
'h6' => __( 'H6', 'powerpack' ),
],
'condition' => [
'add_tools' => 'yes',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'tools_title_typography',
'selector' => '{{WRAPPER}} .pp-how-to-tools-title',
'condition' => [
'add_tools' => 'yes',
],
]
);
$this->add_responsive_control(
'tools_title_align',
[
'label' => __( 'Alignment', 'powerpack' ),
'type' => Controls_Manager::CHOOSE,
'options' => [
'left' => [
'title' => __( 'Left', 'powerpack' ),
'icon' => 'fa fa-align-left',
],
'center' => [
'title' => __( 'Center', 'powerpack' ),
'icon' => 'fa fa-align-center',
],
'right' => [
'title' => __( 'Right', 'powerpack' ),
'icon' => 'fa fa-align-right',
],
],
'default' => '',
'selectors' => [
'{{WRAPPER}} .pp-how-to-tools-title' => 'text-align: {{VALUE}};',
],
'condition' => [
'add_tools' => 'yes',
],
]
);
$this->add_control(
'tool_text_color',
[
'label' => esc_html__( 'Tools Text Color', 'powerpack' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .pp-tool' => 'color: {{VALUE}};',
],
'separator' => 'before',
'condition' => [
'add_tools' => 'yes',
],
]
);
$this->add_responsive_control(
'tool_text_bottom_spacing',
[
'label' => __( 'Tools Text Bottom Spacing', 'powerpack' ),
'type' => Controls_Manager::SLIDER,
'range' => [
'px' => [
'min' => 0,
'max' => 200,
],
],
'default' => [
'size' => 10,
],
'selectors' => [
'{{WRAPPER}} .pp-tool:not(:last-child)' => 'margin-bottom: {{SIZE}}{{UNIT}};',
],
'condition' => [
'add_tools' => 'yes',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'tools_text_typography',
'selector' => '{{WRAPPER}} .pp-tool',
'condition' => [
'add_tools' => 'yes',
],
]
);
$this->add_responsive_control(
'tools_text_align',
[
'label' => __( 'Alignment', 'powerpack' ),
'type' => Controls_Manager::CHOOSE,
'options' => [
'left' => [
'title' => __( 'Left', 'powerpack' ),
'icon' => 'fa fa-align-left',
],
'center' => [
'title' => __( 'Center', 'powerpack' ),
'icon' => 'fa fa-align-center',
],
'right' => [
'title' => __( 'Right', 'powerpack' ),
'icon' => 'fa fa-align-right',
],
],
'default' => '',
'selectors' => [
'{{WRAPPER}} .pp-tool' => 'text-align: {{VALUE}};',
],
'condition' => [
'add_tools' => 'yes',
],
]
);
$this->end_controls_section();
/**
* Style Tab: Steps
*/
$this->start_controls_section(
'section_step_style',
[
'label' => esc_html__( 'Steps', 'powerpack' ),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_control(
'step_section_title_heading',
[
'label' => __( 'Section Title', 'powerpack' ),
'type' => Controls_Manager::HEADING,
]
);
$this->add_control(
'step_section_title_color',
[
'label' => esc_html__( 'Color', 'powerpack' ),
'type' => Controls_Manager::COLOR,
'separator' => 'before',
'selectors' => [
'{{WRAPPER}} .pp-how-to-step-section-title' => 'color: {{VALUE}};',
],
]
);
$this->add_responsive_control(
'step_section_title_bottom_spacing',
[
'label' => __( 'Bottom Spacing', 'powerpack' ),
'type' => Controls_Manager::SLIDER,
'range' => [
'px' => [
'min' => 0,
'max' => 200,
],
],
'default' => [
'size' => 10,
],
'selectors' => [
'{{WRAPPER}} .pp-how-to-step-section-title' => 'margin-bottom: {{SIZE}}{{UNIT}};',
],
]
);
$this->add_control(
'step_section_title_tag',
[
'label' => __( 'Title HTML Tag', 'powerpack' ),
'type' => Controls_Manager::SELECT,
'default' => 'h3',
'label_block' => true,
'options' => [
'h1' => __( 'H1', 'powerpack' ),
'h2' => __( 'H2', 'powerpack' ),
'h3' => __( 'H3', 'powerpack' ),
'h4' => __( 'H4', 'powerpack' ),
'h5' => __( 'H5', 'powerpack' ),
'h6' => __( 'H6', 'powerpack' ),
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'step_section_title_typography',
'selector' => '{{WRAPPER}} .pp-how-to-step-section-title',
]
);
$this->add_responsive_control(
'step_section_title_align',
[
'label' => __( 'Alignment', 'powerpack' ),
'type' => Controls_Manager::CHOOSE,
'options' => [
'left' => [
'title' => __( 'Left', 'powerpack' ),
'icon' => 'fa fa-align-left',
],
'center' => [
'title' => __( 'Center', 'powerpack' ),
'icon' => 'fa fa-align-center',
],
'right' => [
'title' => __( 'Right', 'powerpack' ),
'icon' => 'fa fa-align-right',
],
],
'default' => '',
'selectors' => [
'{{WRAPPER}} .pp-how-to-step-section-title' => 'text-align: {{VALUE}};',
],
]
);
$this->add_control(
'step_img_heading',
[
'label' => __( 'Step Image', 'powerpack' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
]
);
$this->add_responsive_control(
'step_img_position',
[
'label' => __( 'Position', 'powerpack' ),
'type' => Controls_Manager::CHOOSE,
'options' => [
'column-reverse' => [
'title' => __( 'Top', 'powerpack' ),
'icon' => 'eicon-v-align-top',
],
'column' => [
'title' => __( 'Bottom', 'powerpack' ),
'icon' => 'eicon-v-align-bottom',
],
'row-reverse' => [
'title' => __( 'Left', 'powerpack' ),
'icon' => 'eicon-h-align-left',
],
'row' => [
'title' => __( 'Right', 'powerpack' ),
'icon' => 'eicon-h-align-right',
],
],
'dynamic' => [
'active' => true,
],
'default' => 'row',
'render_type' => 'template',
'separator' => 'before',
'selectors' => [
'{{WRAPPER}} .pp-how-to-step.pp-has-img' => 'flex-direction: {{VALUE}};',
],
]
);
$this->add_responsive_control(
'step_align_h',
[
'label' => __( 'Horizontal Alignment', 'powerpack' ),
'type' => Controls_Manager::CHOOSE,
'options' => [
'left' => [
'title' => __( 'Left', 'powerpack' ),
'icon' => 'fa fa-align-left',
],
'center' => [
'title' => __( 'Center', 'powerpack' ),
'icon' => 'fa fa-align-center',
],
'right' => [
'title' => __( 'Right', 'powerpack' ),
'icon' => 'fa fa-align-right',
],
],
'default' => '',
'selectors' => [
'{{WRAPPER}} .pp-how-to-step.pp-has-img' => 'align-items: {{VALUE}};',
],
'condition' => [
'step_img_position' => [ 'column', 'column-reverse' ],
],
]
);
$this->add_responsive_control(
'step_align_v',
[
'label' => __( 'Vertical Alignment', 'powerpack' ),
'type' => Controls_Manager::CHOOSE,
'options' => [
'flex-start' => [
'title' => __( 'Top', 'powerpack' ),
'icon' => 'eicon-v-align-top',
],
'center' => [
'title' => __( 'Middle', 'powerpack' ),
'icon' => 'eicon-v-align-middle',
],
'flex-end' => [
'title' => __( 'Bottom', 'powerpack' ),
'icon' => 'eicon-v-align-bottom',
],
],
'default' => 'flex-start',
'selectors' => [
'{{WRAPPER}} .pp-how-to-step.pp-has-img' => 'align-items: {{VALUE}};',
],
'condition' => [
'step_img_position' => [ 'row', 'row-reverse' ],
],
]
);
$this->add_responsive_control(
'steps_spacing',
[
'label' => __( 'Steps Spacing', 'powerpack' ),
'type' => Controls_Manager::SLIDER,
'range' => [
'px' => [
'min' => 0,
'max' => 200,
],
],
'default' => [
'size' => 10,
],
'selectors' => [
'{{WRAPPER}} .pp-how-to-step:not(:last-child)' => 'margin-bottom: {{SIZE}}{{UNIT}};',
],
]
);
$this->add_responsive_control(
'step_image_width',
[
'label' => __( 'Image Width', 'powerpack' ),
'type' => Controls_Manager::SLIDER,
'range' => [
'%' => [
'min' => 0,
'max' => 100,
],
],
'default' => [
'size' => 30,
],
'size_units' => [ '%' ],
'selectors' => [
'{{WRAPPER}} .pp-how-to-step.pp-has-img' => 'display: flex;',
'{{WRAPPER}} .pp-how-to-step.pp-has-img .pp-how-to-step-image' => 'width: {{SIZE}}%;',
'{{WRAPPER}} .pp-how-to-step.pp-has-img.pp-step-img-left .pp-how-to-step-content' => 'width: calc( 100% - {{SIZE}}% );',
'{{WRAPPER}} .pp-how-to-step.pp-has-img.pp-step-img-right .pp-how-to-step-content' => 'width: calc( 100% - {{SIZE}}% );',
],
]
);
$this->add_responsive_control(
'step_image_spacing',
[
'label' => __( 'Image Spacing', 'powerpack' ),
'type' => Controls_Manager::SLIDER,
'range' => [
'px' => [
'min' => 0,
'max' => 50,
],
],
'size_units' => [ 'px' ],
'default' => [
'size' => 10,
],
'selectors' => [
'{{WRAPPER}} .pp-how-to-step.pp-has-img.pp-step-img-top .pp-how-to-step-image' => 'margin-bottom: {{SIZE}}{{UNIT}};',
'{{WRAPPER}} .pp-how-to-step.pp-has-img.pp-step-img-bottom .pp-how-to-step-image' => 'margin-top: {{SIZE}}{{UNIT}};',
'{{WRAPPER}} .pp-how-to-step.pp-has-img.pp-step-img-left .pp-how-to-step-image' => 'margin-right: {{SIZE}}{{UNIT}};',
'{{WRAPPER}} .pp-how-to-step.pp-has-img.pp-step-img-right .pp-how-to-step-image' => 'margin-left: {{SIZE}}{{UNIT}};',
],
]
);
$this->add_control(
'step_title_heading',
[
'label' => __( 'Step Title', 'powerpack' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
]
);
$this->add_control(
'step_title_color',
[
'label' => esc_html__( 'Color', 'powerpack' ),
'type' => Controls_Manager::COLOR,
'separator' => 'before',
'selectors' => [
'{{WRAPPER}} .pp-how-to-step-title' => 'color: {{VALUE}};',
],
]
);
$this->add_responsive_control(
'step_title_bottom_spacing',
[
'label' => __( 'Bottom Spacing', 'powerpack' ),
'type' => Controls_Manager::SLIDER,
'range' => [
'px' => [
'min' => 0,
'max' => 200,
],
],
'default' => [
'size' => 10,
],
'selectors' => [
'{{WRAPPER}} .pp-how-to-step-title' => 'margin-bottom: {{SIZE}}{{UNIT}};',
],
]
);
$this->add_control(
'step_title_tag',
[
'label' => __( 'Title HTML Tag', 'powerpack' ),
'type' => Controls_Manager::SELECT,
'default' => 'h3',
'label_block' => true,
'options' => [
'h1' => __( 'H1', 'powerpack' ),
'h2' => __( 'H2', 'powerpack' ),
'h3' => __( 'H3', 'powerpack' ),
'h4' => __( 'H4', 'powerpack' ),
'h5' => __( 'H5', 'powerpack' ),
'h6' => __( 'H6', 'powerpack' ),
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'step_title_typography',
'selector' => '{{WRAPPER}} .pp-how-to-step-title',
]
);
$this->add_responsive_control(
'step_title_align',
[
'label' => __( 'Alignment', 'powerpack' ),
'type' => Controls_Manager::CHOOSE,
'options' => [
'left' => [
'title' => __( 'Left', 'powerpack' ),
'icon' => 'fa fa-align-left',
],
'center' => [
'title' => __( 'Center', 'powerpack' ),
'icon' => 'fa fa-align-center',
],
'right' => [
'title' => __( 'Right', 'powerpack' ),
'icon' => 'fa fa-align-right',
],
],
'default' => '',
'selectors' => [
'{{WRAPPER}} .pp-how-to-step-title' => 'text-align: {{VALUE}};',
],
]
);
$this->add_control(
'step_description_heading',
[
'label' => __( 'Step Description', 'powerpack' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
]
);
$this->add_control(
'step_description_color',
[
'label' => esc_html__( 'Color', 'powerpack' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .pp-how-to-step-description' => 'color: {{VALUE}};',
],
'separator' => 'before',
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'step_description_typography',
'selector' => '{{WRAPPER}} .pp-how-to-step-description',
]
);
$this->add_responsive_control(
'step_description_align',
[
'label' => __( 'Alignment', 'powerpack' ),
'type' => Controls_Manager::CHOOSE,
'options' => [
'left' => [
'title' => __( 'Left', 'powerpack' ),
'icon' => 'fa fa-align-left',
],
'center' => [
'title' => __( 'Center', 'powerpack' ),
'icon' => 'fa fa-align-center',
],
'right' => [
'title' => __( 'Right', 'powerpack' ),
'icon' => 'fa fa-align-right',
],
],
'default' => '',
'selectors' => [
'{{WRAPPER}} .pp-how-to-step-description' => 'text-align: {{VALUE}};',
],
]
);
$this->end_controls_section();
}
/**
* Render How To Slug.
*
* @access protected
*/
protected function get_how_to_json_ld() {
$settings = $this->get_settings_for_display();
$id = $this->get_id();
$how_to_title = $settings['how_to_title'];
$how_to_description = wp_json_encode( $settings['how_to_description'] );
$how_to_image = $settings['how_to_image'];
$show_advanced = $settings['show_advanced'];
$years = ( '' !== $settings['total_time_years'] ) ? $settings['total_time_years'] : '0';
$months = ( '' !== $settings['total_time_months'] ) ? $settings['total_time_months'] : '0';
$days = ( '' !== $settings['total_time_days'] ) ? $settings['total_time_days'] : '0';
$hours = ( '' !== $settings['total_time_hours'] ) ? $settings['total_time_hours'] : '0';
$minutes = ( '' !== $settings['total_time_minutes'] ) ? $settings['total_time_minutes'] : '0';
$total_time = $settings['total_time_minutes'];
$estimated_cost = $settings['estimated_cost'];
$currency_iso_code = $settings['currency_iso_code'];
$add_supply = $settings['add_supply'];
$supplies = $settings['supply'];
$add_tools = $settings['add_tools'];
$tools = $settings['tools'];
$step_section_title = $settings['step_section_title'];
$steps_form = $settings['steps_form'];
$enable_schema = true;
$y = ( 525600 * $years );
$m = ( 43200 * $months );
$d = ( 1440 * $days );
$h = ( 60 * $hours );
$total_time = $y + $m + $d + $h + $minutes;
if ( isset( $settings['enable_schema'] ) && 'no' === $settings['enable_schema'] ) {
$enable_schema = false;
}
if ( ! $enable_schema ) {
return;
}
if ( $this->_schema_rendered ) {
return;
}
if ( ! empty( $how_to_image['url'] ) ) {
$image_url = Group_Control_Image_Size::get_attachment_image_src( $how_to_image['id'], 'how_to_image_size', $settings );
};
?>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "HowTo",
"name": "<?php echo $how_to_title; ?>",
"description": <?php echo $how_to_description; ?>,
"image": "<?php echo $image_url; ?>",
<?php if ( 'yes' === $show_advanced ) { ?>
<?php if ( '' !== $estimated_cost ) { ?>
"estimatedCost": {
"@type": "MonetaryAmount",
"currency": "<?php echo wp_kses_post( $currency_iso_code ); ?>",
"value": "<?php echo wp_kses_post( $estimated_cost ); ?>"
},
<?php } ?>
<?php if ( '' !== $total_time ) { ?>
"totalTime": "PT<?php echo wp_kses_post( $total_time ); ?>M",
<?php } ?>
<?php
if ( 'yes' === $add_supply && isset( $supplies ) ) {
?>
"supply": [
<?php foreach ( $supplies as $key => $supply ) { ?>
{
"@type": "HowToSupply",
"name": "<?php echo wp_kses_post( $supply['supply_text'] ); ?>"
}<?php echo ( ( $key + 1 ) !== sizeof( $supplies ) ) ? ',' : ''; ?>
<?php } ?>
],
<?php
}
if ( 'yes' === $add_tools && isset( $tools ) ) {
?>
"tool": [
<?php foreach ( $tools as $key => $tool ) { ?>
{
"@type": "HowToTool",
"name": "<?php echo wp_kses_post( $tool['tool_text'] ); ?>"
}<?php echo ( ( $key + 1 ) !== sizeof( $tools ) ) ? ',' : ''; ?>
<?php } ?>
],
<?php
}
}
if ( isset( $steps_form ) ) {
?>
"step": [
<?php
foreach ( $steps_form as $key => $step ) {
$step_id = 'step-' . $id . '-' . ( $key + 1 );
$step_image = $step['step_image'];
$step_img_url = '';
if ( ! empty( $step_image['url'] ) ) {
$step_img_url = $step_image['url'];
}
if ( isset( $step['step_link']['url'] ) && ! empty( $step['step_link']['url'] ) ) {
$meta_link = $step['step_link']['url'];
} else {
$meta_link = get_permalink() . '#' . $step_id;
}
?>
{
"@type": "HowToStep",
"name": "<?php echo wp_kses_post( $step['step_title'] ); ?>",
"text": <?php echo wp_json_encode( $step['step_description'] ); ?>,
"image": "<?php echo esc_url( $step_img_url ); ?>",
"url": "<?php echo esc_url( $meta_link ); ?>"
}<?php echo ( ( $key + 1 ) !== sizeof( $steps_form ) ) ? ',' : ''; ?>
<?php } ?>
]
<?php } ?>
}
</script>
<?php
$this->_schema_rendered = true;
}
/**
* Render How To Slug.
*
* @access protected
*/
protected function get_how_to_slug() {
$settings = $this->get_settings_for_display();
$total_time_text = $settings['total_time_text'];
$years = $settings['total_time_years'];
$months = $settings['total_time_months'];
$days = $settings['total_time_days'];
$hours = $settings['total_time_hours'];
$minutes = $settings['total_time_minutes'];
$estimated_cost_text = $settings['estimated_cost_text'];
$estimated_cost = $settings['estimated_cost'];
$currency_iso_code = $settings['currency_iso_code'];
$time = '';
$estimated_text = '';
$total_time = array(
// translators: %s for time duration.
'year' => ! empty( $years ) ? sprintf( _n( '%s year', '%s years', $years, 'powerpack' ), number_format_i18n( $years ) ) : '',
// translators: %s for time duration.
'month' => ! empty( $months ) ? sprintf( _n( '%s month', '%s months', $months, 'powerpack' ), number_format_i18n( $months ) ) : '',
// translators: %s for time duration.
'day' => ! empty( $days ) ? sprintf( _n( '%s day', '%s days', $days, 'powerpack' ), number_format_i18n( $days ) ) : '',
// translators: %s for time duration.
'hour' => ! empty( $hours ) ? sprintf( _n( '%s hour', '%s hours', $hours, 'powerpack' ), number_format_i18n( $hours ) ) : '',
// translators: %s for time duration.
'minute' => ! empty( $minutes ) ? sprintf( _n( '%s minute', '%s minutes', $minutes, 'powerpack' ), number_format_i18n( $minutes ) ) : '',
);
foreach ( $total_time as $time_key => $duration ) {
if ( empty( $duration ) ) {
unset( $total_time[ $time_key ] );
}
}
if ( ! empty( $total_time ) ) {
$this->add_render_attribute( 'total_time', 'class', 'pp-how-to-total-time' );
$time = implode( ', ', $total_time );
if ( ! empty( $total_time_text ) ) {
$time_text = $total_time_text . ' ' . $time;
} else {
$time_text = $time;
}
}
if ( ! empty( $estimated_cost ) ) {
$this->add_render_attribute( 'estimated_cost', 'class', 'pp-how-to-estimated-cost' );
$estimated_text = $estimated_cost_text;
$estimated_text .= '<span> ';
$estimated_text .= $currency_iso_code . ' ' . number_format( $estimated_cost );
$estimated_text .= '</span>';
}
?>
<div class="pp-how-to-slug">
<?php if ( isset( $total_time ) && ! empty( $total_time ) ) { ?>
<p <?php echo wp_kses_post( $this->get_render_attribute_string( 'total_time' ) ); ?>>
<?php echo wp_kses_post( $time_text ); ?>
</p>
<?php } ?>
<?php if ( isset( $estimated_cost ) && ! empty( $estimated_cost ) ) { ?>
<p <?php echo wp_kses_post( $this->get_render_attribute_string( 'estimated_cost' ) ); ?>>
<?php echo wp_kses_post( $estimated_text ); ?>
</p>
<?php } ?>
</div>
<?php
}
/**
* Render How To Supply.
*
* @access protected
*/
protected function get_how_to_supply() {
$settings = $this->get_settings_for_display();
$add_supply = $settings['add_supply'];
$supply_title = $settings['supply_title'];
$title_tag = $settings['supply_title_tag'];
$supplies = $settings['supply'];
$supply_icon = $settings['supply_icon']['value'];
if ( 'yes' === $add_supply ) {
?>
<div class="pp-how-to-supply">
<?php if ( isset( $supply_title ) && ! empty( $supply_title ) ) { ?>
<<?php echo wp_kses_post( $title_tag ); ?> class="pp-how-to-supply-title">
<?php echo wp_kses_post( $supply_title ); ?>
</<?php echo wp_kses_post( $title_tag ); ?>>
<?php } ?>
<?php
if ( isset( $supplies ) ) {
foreach ( $supplies as $key => $supply ) {
?>
<div class="pp-supply pp-supply-<?php echo esc_attr( $key + 1 ); ?>">
<i class="pp-supply-icon <?php echo esc_attr( $supply_icon ); ?>"></i>
<span><?php echo wp_kses_post( $supply['supply_text'] ); ?></span>
</div>
<?php } ?>
<?php } ?>
</div>
<?php
}
}
/**
* Render How To Tools.
*
* @access protected
*/
protected function get_how_to_tools() {
$settings = $this->get_settings_for_display();
$add_tools = $settings['add_tools'];
$tool_title = $settings['tool_title'];
$title_tag = $settings['tools_title_tag'];
$tools = $settings['tools'];
$tools_icon = $settings['tools_icon']['value'];
if ( 'yes' === $add_tools ) {
?>
<div class="pp-how-to-tools">
<?php if ( isset( $tool_title ) && ! empty( $tool_title ) ) { ?>
<<?php echo wp_kses_post( $title_tag ); ?> class="pp-how-to-tools-title">
<?php echo wp_kses_post( $tool_title ); ?>
</<?php echo wp_kses_post( $title_tag ); ?>>
<?php } ?>
<?php
if ( isset( $tools ) ) {
foreach ( $tools as $key => $tool ) {
?>
<div class="pp-tool pp-tool-<?php echo esc_attr( $key + 1 ); ?>">
<i class="pp-tool-icon <?php echo esc_attr( $tools_icon ); ?>"></i>
<span><?php echo wp_kses_post( $tool['tool_text'] ); ?></span>
</div>
<?php } ?>
<?php } ?>
</div>
<?php
}
}
/**
* Render Steps.
*
* @access protected
*/
protected function get_steps() {
$settings = $this->get_settings_for_display();
$id = $this->get_id();
$step_section_title = $settings['step_section_title'];
$section_title_tag = $settings['step_section_title_tag'];
$title_tag = $settings['step_title_tag'];
$steps_form = $settings['steps_form'];
$step_img_position = '';
if ( 'column-reverse' === $settings['step_img_position'] ) {
$step_img_position = 'pp-step-img-top';
} elseif ( 'column' === $settings['step_img_position'] ) {
$step_img_position = 'pp-step-img-bottom';
} elseif ( 'row' === $settings['step_img_position'] ) {
$step_img_position = 'pp-step-img-right';
} elseif ( 'row-reverse' === $settings['step_img_position'] ) {
$step_img_position = 'pp-step-img-left';
}
$this->add_render_attribute( 'how_to_steps', 'class', 'pp-how-to-steps' );
$this->add_render_attribute( 'how_to_steps', 'id', 'step-' . $id );
$this->add_render_attribute( 'step_section_title', 'class', 'pp-how-to-step-section-title' );
?>
<div <?php echo wp_kses_post( $this->get_render_attribute_string( 'how_to_steps' ) ); ?>>
<?php if ( isset( $step_section_title ) && ! empty( $step_section_title ) ) { ?>
<<?php echo wp_kses_post( $section_title_tag ); ?> <?php echo wp_kses_post( $this->get_render_attribute_string( 'step_section_title' ) ); ?>>
<?php echo wp_kses_post( $step_section_title ); ?>
</<?php echo wp_kses_post( $section_title_tag ); ?>>
<?php } ?>
<?php
if ( isset( $steps_form ) ) {
foreach ( $steps_form as $key => $step ) {
$step_id = 'step-' . $id . '-' . ( $key + 1 );
$step_image = $step['step_image'];
$step_img_class = 'pp-no-img';
$step_img_url = '';
if ( ! empty( $step['step_title'] ) ) {
$this->add_render_attribute( 'step_title' . ( $key + 1 ), 'class', 'pp-how-to-step-title' );
};
if ( ! empty( $step['step_description'] ) ) {
$this->add_render_attribute( 'step_description' . ( $key + 1 ), 'class', 'pp-how-to-step-description' );
};
if ( ! empty( $step_image['url'] ) ) {
$step_img_url = $step_image['url'];
$this->add_render_attribute( 'step_image' . ( $key + 1 ), 'src', $step_img_url );
$this->add_render_attribute( 'step_image' . ( $key + 1 ), 'alt', Control_Media::get_image_alt( $step_image ) );
$this->add_render_attribute( 'step_image' . ( $key + 1 ), 'title', Control_Media::get_image_title( $step_image ) );
$step_img_class = 'pp-has-img';
};
$this->add_render_attribute( 'step' . ( $key + 1 ), 'class', 'pp-how-to-step' );
$this->add_render_attribute( 'step' . ( $key + 1 ), 'class', $step_img_class );
$this->add_render_attribute( 'step' . ( $key + 1 ), 'class', $step_img_position );
$this->add_render_attribute( 'step' . ( $key + 1 ), 'id', $step_id );
if ( isset( $step['step_link']['url'] ) && ! empty( $step['step_link']['url'] ) ) {
$this->add_link_attributes( 'step-link', $step['step_link'] );
$a_open = '<a ' . $this->get_render_attribute_string( 'step-link' ) . '>';
$a_close = '</a>';
} else {
$a_open = '';
$a_close = '';
}
?>
<div <?php echo wp_kses_post( $this->get_render_attribute_string( 'step' . ( $key + 1 ) ) ); ?>>
<div class="pp-how-to-step-content">
<?php echo wp_kses_post( $a_open ); ?>
<?php if ( ! empty( $step['step_title'] ) ) { ?>
<<?php echo wp_kses_post( $title_tag ); ?> <?php echo wp_kses_post( $this->get_render_attribute_string( 'step_title' . ( $key + 1 ) ) ); ?> >
<?php echo wp_kses_post( $step['step_title'] ); ?>
</<?php echo wp_kses_post( $title_tag ); ?>>
<?php echo wp_kses_post( $a_close ); ?>
<?php } ?>
<?php if ( ! empty( $step['step_description'] ) ) { ?>
<div <?php echo wp_kses_post( $this->get_render_attribute_string( 'step_description' . ( $key + 1 ) ) ); ?> >
<?php echo $this->parse_text_editor( $step['step_description'] ); //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</div>
<?php } ?>
<?php
if ( empty( $step['step_title'] ) ) {
echo wp_kses_post( $a_close );
}
?>
</div>
<?php if ( ! empty( $step_image['url'] ) ) { ?>
<?php
$link_key = 'pp-lightbox-' . ( $key + 1 );
if ( 'no' !== $settings['open_lightbox'] ) {
$this->add_render_attribute(
$link_key,
[
'href' => $step_image['url'],
'class' => 'elementor-clickable',
'data-elementor-open-lightbox' => $settings['open_lightbox'],
'data-elementor-lightbox-slideshow' => $this->get_id(),
]
);
}
?>
<div class="pp-how-to-step-image">
<?php
if ( 'no' !== $settings['open_lightbox'] ) {
echo '<a ' . wp_kses_post( $this->get_render_attribute_string( $link_key ) ) . '>';
}
printf( '<img %s />', wp_kses_post( $this->get_render_attribute_string( 'step_image' . ( $key + 1 ) ) ) );
if ( 'no' !== $settings['open_lightbox'] ) {
echo '</a>';
}
?>
</div>
<?php } ?>
</div>
<?php } ?>
<?php } ?>
</div>
<?php
}
protected function render() {
$settings = $this->get_settings_for_display();
$how_to_title = $settings['how_to_title'];
$title_tag = $settings['title_tag'];
$how_to_description = $settings['how_to_description'];
$how_to_image = $settings['how_to_image'];
$how_to_image_url = '';
$this->add_render_attribute( 'how_to_title', 'class', 'pp-how-to-title' );
$this->add_render_attribute( 'how_to_description', 'class', 'pp-how-to-description' );
if ( ! empty( $how_to_image['url'] ) ) {
$how_to_image_url = Group_Control_Image_Size::get_attachment_image_src( $how_to_image['id'], 'how_to_image_size', $settings );
$this->add_render_attribute( 'how_to_image', 'src', $how_to_image_url );
$this->add_render_attribute( 'how_to_image', 'alt', Control_Media::get_image_alt( $how_to_image ) );
$this->add_render_attribute( 'how_to_image', 'title', Control_Media::get_image_title( $how_to_image ) );
}
?>
<div class="pp-how-to-wrap pp-clearfix">
<?php
if ( 'yes' === $settings['enable_schema'] ) {
$this->get_how_to_json_ld();
}
?>
<div class="pp-how-to-container pp-clearfix">
<<?php echo wp_kses_post( $title_tag ); ?> <?php echo wp_kses_post( $this->get_render_attribute_string( 'how_to_title' ) ); ?>>
<?php echo wp_kses_post( $how_to_title ); ?>
</<?php echo wp_kses_post( $title_tag ); ?>>
<div <?php echo wp_kses_post( $this->get_render_attribute_string( 'how_to_description' ) ); ?>>
<?php echo $this->parse_text_editor( $how_to_description ); //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</div>
<?php if ( ! empty( $how_to_image['url'] ) ) { ?>
<div class="pp-how-to-image">
<?php printf( '<img %s />', wp_kses_post( $this->get_render_attribute_string( 'how_to_image' ) ) ); ?>
</div>
<?php
}
if ( 'yes' === $settings['show_advanced'] ) {
$this->get_how_to_slug();
$this->get_how_to_supply();
$this->get_how_to_tools();
}
$this->get_steps();
?>
</div>
</div>
<?php
}
}