%PDF-
%PDF-
Mini Shell
Mini Shell
<?php
namespace ElementorPro\Modules\Pricing\Widgets;
use Elementor\Controls_Manager;
use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
use Elementor\Group_Control_Background;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Typography;
use Elementor\Icons_Manager;
use Elementor\Repeater;
use Elementor\Utils;
use ElementorPro\Base\Base_Widget;
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
class Price_Table extends Base_Widget {
public function get_name() {
return 'price-table';
}
public function get_title() {
return esc_html__( 'Price Table', 'elementor-pro' );
}
public function get_icon() {
return 'eicon-price-table';
}
public function get_keywords() {
return [ 'pricing', 'table', 'product', 'image', 'plan', 'button' ];
}
protected function is_dynamic_content(): bool {
return false;
}
/**
* Get style dependencies.
*
* Retrieve the list of style dependencies the widget requires.
*
* @since 3.24.0
* @access public
*
* @return array Widget style dependencies.
*/
public function get_style_depends(): array {
return [ 'widget-price-table' ];
}
protected function register_controls() {
$this->start_controls_section(
'section_header',
[
'label' => esc_html__( 'Header', 'elementor-pro' ),
]
);
$this->add_control(
'heading',
[
'label' => esc_html__( 'Title', 'elementor-pro' ),
'type' => Controls_Manager::TEXT,
'default' => esc_html__( 'Enter your title', 'elementor-pro' ),
'dynamic' => [
'active' => true,
],
]
);
$this->add_control(
'sub_heading',
[
'label' => esc_html__( 'Description', 'elementor-pro' ),
'type' => Controls_Manager::TEXT,
'default' => esc_html__( 'Enter your description', 'elementor-pro' ),
'dynamic' => [
'active' => true,
],
]
);
$this->add_control(
'heading_tag',
[
'label' => esc_html__( 'Title HTML Tag', 'elementor-pro' ),
'type' => Controls_Manager::SELECT,
'options' => [
'h2' => 'H2',
'h3' => 'H3',
'h4' => 'H4',
'h5' => 'H5',
'h6' => 'H6',
],
'default' => 'h3',
]
);
$this->end_controls_section();
$this->start_controls_section(
'section_pricing',
[
'label' => esc_html__( 'Pricing', 'elementor-pro' ),
]
);
$this->add_control(
'currency_symbol',
[
'label' => esc_html__( 'Currency Symbol', 'elementor-pro' ),
'type' => Controls_Manager::SELECT,
'options' => [
'' => esc_html__( 'None', 'elementor-pro' ),
'dollar' => '$ ' . _x( 'Dollar', 'Currency', 'elementor-pro' ),
'euro' => '€ ' . _x( 'Euro', 'Currency', 'elementor-pro' ),
'baht' => '฿ ' . _x( 'Baht', 'Currency', 'elementor-pro' ),
'franc' => '₣ ' . _x( 'Franc', 'Currency', 'elementor-pro' ),
'guilder' => 'ƒ ' . _x( 'Guilder', 'Currency', 'elementor-pro' ),
'krona' => 'kr ' . _x( 'Krona', 'Currency', 'elementor-pro' ),
'lira' => '₤ ' . _x( 'Lira', 'Currency', 'elementor-pro' ),
'peseta' => '₧ ' . _x( 'Peseta', 'Currency', 'elementor-pro' ),
'peso' => '₱ ' . _x( 'Peso', 'Currency', 'elementor-pro' ),
'pound' => '£ ' . _x( 'Pound Sterling', 'Currency', 'elementor-pro' ),
'real' => 'R$ ' . _x( 'Real', 'Currency', 'elementor-pro' ),
'ruble' => '₽ ' . _x( 'Ruble', 'Currency', 'elementor-pro' ),
'rupee' => '₨ ' . _x( 'Rupee', 'Currency', 'elementor-pro' ),
'indian_rupee' => '₹ ' . _x( 'Rupee (Indian)', 'Currency', 'elementor-pro' ),
'shekel' => '₪ ' . _x( 'Shekel', 'Currency', 'elementor-pro' ),
'yen' => '¥ ' . _x( 'Yen/Yuan', 'Currency', 'elementor-pro' ),
'won' => '₩ ' . _x( 'Won', 'Currency', 'elementor-pro' ),
'custom' => esc_html__( 'Custom', 'elementor-pro' ),
],
'default' => 'dollar',
]
);
$this->add_control(
'currency_symbol_custom',
[
'label' => esc_html__( 'Custom Symbol', 'elementor-pro' ),
'type' => Controls_Manager::TEXT,
'ai' => [
'active' => false,
],
'condition' => [
'currency_symbol' => 'custom',
],
]
);
$this->add_control(
'price',
[
'label' => esc_html__( 'Price', 'elementor-pro' ),
'type' => Controls_Manager::TEXT,
'default' => '39.99',
'dynamic' => [
'active' => true,
],
'ai' => [
'active' => false,
],
]
);
$this->add_control(
'currency_format',
[
'label' => esc_html__( 'Currency Format', 'elementor-pro' ),
'type' => Controls_Manager::SELECT,
'options' => [
'' => '1,234.56 (Default)',
',' => '1.234,56',
],
]
);
$this->add_control(
'sale',
[
'label' => esc_html__( 'Sale', 'elementor-pro' ),
'type' => Controls_Manager::SWITCHER,
'label_on' => esc_html__( 'On', 'elementor-pro' ),
'label_off' => esc_html__( 'Off', 'elementor-pro' ),
'default' => '',
]
);
$this->add_control(
'original_price',
[
'label' => esc_html__( 'Original Price', 'elementor-pro' ),
'type' => Controls_Manager::NUMBER,
'default' => '59',
'condition' => [
'sale' => 'yes',
],
'dynamic' => [
'active' => true,
],
]
);
$this->add_control(
'period',
[
'label' => esc_html__( 'Period', 'elementor-pro' ),
'type' => Controls_Manager::TEXT,
'dynamic' => [
'active' => true,
],
'ai' => [
'active' => false,
],
'default' => esc_html__( 'Monthly', 'elementor-pro' ),
]
);
$this->end_controls_section();
$this->start_controls_section(
'section_features',
[
'label' => esc_html__( 'Features', 'elementor-pro' ),
]
);
$repeater = new Repeater();
$repeater->add_control(
'item_text',
[
'label' => esc_html__( 'Text', 'elementor-pro' ),
'type' => Controls_Manager::TEXT,
'dynamic' => [
'active' => true,
],
'default' => esc_html__( 'List Item', 'elementor-pro' ),
]
);
$default_icon = [
'value' => 'far fa-check-circle',
'library' => 'fa-regular',
];
$repeater->add_control(
'selected_item_icon',
[
'label' => esc_html__( 'Icon', 'elementor-pro' ),
'type' => Controls_Manager::ICONS,
'fa4compatibility' => 'item_icon',
'default' => $default_icon,
]
);
$repeater->add_control(
'item_icon_color',
[
'label' => esc_html__( 'Icon Color', 'elementor-pro' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} {{CURRENT_ITEM}} i' => 'color: {{VALUE}}',
'{{WRAPPER}} {{CURRENT_ITEM}} svg' => 'fill: {{VALUE}}',
],
]
);
$this->add_control(
'features_list',
[
'type' => Controls_Manager::REPEATER,
'fields' => $repeater->get_controls(),
'default' => [
[
'item_text' => esc_html__( 'List Item #1', 'elementor-pro' ),
'selected_item_icon' => $default_icon,
],
[
'item_text' => esc_html__( 'List Item #2', 'elementor-pro' ),
'selected_item_icon' => $default_icon,
],
[
'item_text' => esc_html__( 'List Item #3', 'elementor-pro' ),
'selected_item_icon' => $default_icon,
],
],
'title_field' => '{{{ item_text }}}',
]
);
$this->end_controls_section();
$this->start_controls_section(
'section_footer',
[
'label' => esc_html__( 'Footer', 'elementor-pro' ),
]
);
$this->add_control(
'button_text',
[
'label' => esc_html__( 'Button Text', 'elementor-pro' ),
'type' => Controls_Manager::TEXT,
'default' => esc_html__( 'Click Here', 'elementor-pro' ),
'dynamic' => [
'active' => true,
],
]
);
$this->add_control(
'link',
[
'label' => esc_html__( 'Link', 'elementor-pro' ),
'type' => Controls_Manager::URL,
'default' => [
'url' => '#',
],
'dynamic' => [
'active' => true,
],
]
);
$this->add_control(
'footer_additional_info',
[
'label' => esc_html__( 'Additional Info', 'elementor-pro' ),
'type' => Controls_Manager::TEXTAREA,
'default' => esc_html__( 'This is text element', 'elementor-pro' ),
'rows' => 3,
'dynamic' => [
'active' => true,
],
]
);
$this->end_controls_section();
$this->start_controls_section(
'section_ribbon',
[
'label' => esc_html__( 'Ribbon', 'elementor-pro' ),
]
);
$this->add_control(
'show_ribbon',
[
'label' => esc_html__( 'Show', 'elementor-pro' ),
'type' => Controls_Manager::SWITCHER,
'default' => 'yes',
'separator' => 'before',
]
);
$this->add_control(
'ribbon_title',
[
'label' => esc_html__( 'Title', 'elementor-pro' ),
'type' => Controls_Manager::TEXT,
'default' => esc_html__( 'Popular', 'elementor-pro' ),
'condition' => [
'show_ribbon' => 'yes',
],
'dynamic' => [
'active' => true,
],
]
);
$this->add_control(
'ribbon_horizontal_position',
[
'label' => esc_html__( 'Position', 'elementor-pro' ),
'type' => Controls_Manager::CHOOSE,
'options' => [
'left' => [
'title' => esc_html__( 'Left', 'elementor-pro' ),
'icon' => 'eicon-h-align-left',
],
'right' => [
'title' => esc_html__( 'Right', 'elementor-pro' ),
'icon' => 'eicon-h-align-right',
],
],
'condition' => [
'show_ribbon' => 'yes',
],
]
);
$this->end_controls_section();
$this->start_controls_section(
'section_header_style',
[
'label' => esc_html__( 'Header', 'elementor-pro' ),
'tab' => Controls_Manager::TAB_STYLE,
'show_label' => false,
]
);
$this->add_control(
'header_bg_color',
[
'label' => esc_html__( 'Background Color', 'elementor-pro' ),
'type' => Controls_Manager::COLOR,
'global' => [
'default' => Global_Colors::COLOR_SECONDARY,
],
'selectors' => [
'{{WRAPPER}}' => '--e-price-table-header-background-color: {{VALUE}}',
],
]
);
$this->add_responsive_control(
'header_padding',
[
'label' => esc_html__( 'Padding', 'elementor-pro' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
'selectors' => [
'{{WRAPPER}} .elementor-price-table__header' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_control(
'heading_heading_style',
[
'label' => esc_html__( 'Title', 'elementor-pro' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
]
);
$this->add_control(
'heading_color',
[
'label' => esc_html__( 'Color', 'elementor-pro' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .elementor-price-table__heading' => 'color: {{VALUE}}',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'heading_typography',
'selector' => '{{WRAPPER}} .elementor-price-table__heading',
'global' => [
'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
],
]
);
$this->add_control(
'heading_sub_heading_style',
[
'label' => esc_html__( 'Sub Title', 'elementor-pro' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
]
);
$this->add_control(
'sub_heading_color',
[
'label' => esc_html__( 'Color', 'elementor-pro' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .elementor-price-table__subheading' => 'color: {{VALUE}}',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'sub_heading_typography',
'selector' => '{{WRAPPER}} .elementor-price-table__subheading',
'global' => [
'default' => Global_Typography::TYPOGRAPHY_SECONDARY,
],
]
);
$this->end_controls_section();
$this->start_controls_section(
'section_pricing_element_style',
[
'label' => esc_html__( 'Pricing', 'elementor-pro' ),
'tab' => Controls_Manager::TAB_STYLE,
'show_label' => false,
]
);
$this->add_control(
'pricing_element_bg_color',
[
'label' => esc_html__( 'Background Color', 'elementor-pro' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .elementor-price-table__price' => 'background-color: {{VALUE}}',
],
]
);
$this->add_responsive_control(
'pricing_element_padding',
[
'label' => esc_html__( 'Padding', 'elementor-pro' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
'selectors' => [
'{{WRAPPER}} .elementor-price-table__price' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_control(
'price_color',
[
'label' => esc_html__( 'Color', 'elementor-pro' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .elementor-price-table__currency, {{WRAPPER}} .elementor-price-table__integer-part, {{WRAPPER}} .elementor-price-table__fractional-part' => 'color: {{VALUE}}',
],
'separator' => 'before',
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'price_typography',
// Targeting also the .elementor-price-table class in order to get a higher specificity from the inline CSS.
'selector' => '{{WRAPPER}} .elementor-price-table .elementor-price-table__price',
'global' => [
'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
],
]
);
$this->add_control(
'heading_currency_style',
[
'label' => esc_html__( 'Currency Symbol', 'elementor-pro' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
'condition' => [
'currency_symbol!' => '',
],
]
);
$this->add_control(
'currency_size',
[
'label' => esc_html__( 'Size', 'elementor-pro' ),
'type' => Controls_Manager::SLIDER,
'range' => [
'px' => [
'max' => 100,
],
],
'selectors' => [
'{{WRAPPER}} .elementor-price-table__price > .elementor-price-table__currency' => 'font-size: calc({{SIZE}}em/100)',
],
'condition' => [
'currency_symbol!' => '',
],
]
);
$this->add_control(
'currency_position',
[
'label' => esc_html__( 'Position', 'elementor-pro' ),
'type' => Controls_Manager::CHOOSE,
'default' => 'before',
'options' => [
'before' => [
'title' => esc_html__( 'Before', 'elementor-pro' ),
'icon' => 'eicon-h-align-left',
],
'after' => [
'title' => esc_html__( 'After', 'elementor-pro' ),
'icon' => 'eicon-h-align-right',
],
],
]
);
$this->add_control(
'currency_vertical_position',
[
'label' => esc_html__( 'Vertical Position', 'elementor-pro' ),
'type' => Controls_Manager::CHOOSE,
'options' => [
'top' => [
'title' => esc_html__( 'Top', 'elementor-pro' ),
'icon' => 'eicon-v-align-top',
],
'middle' => [
'title' => esc_html__( 'Middle', 'elementor-pro' ),
'icon' => 'eicon-v-align-middle',
],
'bottom' => [
'title' => esc_html__( 'Bottom', 'elementor-pro' ),
'icon' => 'eicon-v-align-bottom',
],
],
'default' => 'top',
'selectors_dictionary' => [
'top' => 'flex-start',
'middle' => 'center',
'bottom' => 'flex-end',
],
'selectors' => [
'{{WRAPPER}} .elementor-price-table__currency' => 'align-self: {{VALUE}}',
],
'condition' => [
'currency_symbol!' => '',
],
]
);
$this->add_control(
'fractional_part_style',
[
'label' => esc_html__( 'Fractional Part', 'elementor-pro' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
]
);
$this->add_control(
'fractional-part_size',
[
'label' => esc_html__( 'Size', 'elementor-pro' ),
'type' => Controls_Manager::SLIDER,
'range' => [
'px' => [
'max' => 100,
],
],
'selectors' => [
'{{WRAPPER}} .elementor-price-table__fractional-part' => 'font-size: calc({{SIZE}}em/100)',
],
]
);
$this->add_control(
'fractional_part_vertical_position',
[
'label' => esc_html__( 'Vertical Position', 'elementor-pro' ),
'type' => Controls_Manager::CHOOSE,
'options' => [
'top' => [
'title' => esc_html__( 'Top', 'elementor-pro' ),
'icon' => 'eicon-v-align-top',
],
'middle' => [
'title' => esc_html__( 'Middle', 'elementor-pro' ),
'icon' => 'eicon-v-align-middle',
],
'bottom' => [
'title' => esc_html__( 'Bottom', 'elementor-pro' ),
'icon' => 'eicon-v-align-bottom',
],
],
'default' => 'top',
'selectors_dictionary' => [
'top' => 'flex-start',
'middle' => 'center',
'bottom' => 'flex-end',
],
'selectors' => [
'{{WRAPPER}} .elementor-price-table__after-price' => 'justify-content: {{VALUE}}',
],
]
);
$this->add_control(
'heading_original_price_style',
[
'label' => esc_html__( 'Original Price', 'elementor-pro' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
'condition' => [
'sale' => 'yes',
'original_price!' => '',
],
]
);
$this->add_control(
'original_price_color',
[
'label' => esc_html__( 'Color', 'elementor-pro' ),
'type' => Controls_Manager::COLOR,
'global' => [
'default' => Global_Colors::COLOR_SECONDARY,
],
'selectors' => [
'{{WRAPPER}} .elementor-price-table__original-price' => 'color: {{VALUE}}',
],
'condition' => [
'sale' => 'yes',
'original_price!' => '',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'original_price_typography',
'selector' => '{{WRAPPER}} .elementor-price-table__original-price',
'global' => [
'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
],
'condition' => [
'sale' => 'yes',
'original_price!' => '',
],
]
);
$this->add_control(
'original_price_vertical_position',
[
'label' => esc_html__( 'Vertical Position', 'elementor-pro' ),
'type' => Controls_Manager::CHOOSE,
'options' => [
'top' => [
'title' => esc_html__( 'Top', 'elementor-pro' ),
'icon' => 'eicon-v-align-top',
],
'middle' => [
'title' => esc_html__( 'Middle', 'elementor-pro' ),
'icon' => 'eicon-v-align-middle',
],
'bottom' => [
'title' => esc_html__( 'Bottom', 'elementor-pro' ),
'icon' => 'eicon-v-align-bottom',
],
],
'selectors_dictionary' => [
'top' => 'flex-start',
'middle' => 'center',
'bottom' => 'flex-end',
],
'default' => 'bottom',
'selectors' => [
'{{WRAPPER}} .elementor-price-table__original-price' => 'align-self: {{VALUE}}',
],
'condition' => [
'sale' => 'yes',
'original_price!' => '',
],
]
);
$this->add_control(
'heading_period_style',
[
'label' => esc_html__( 'Period', 'elementor-pro' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
'condition' => [
'period!' => '',
],
]
);
$this->add_control(
'period_color',
[
'label' => esc_html__( 'Color', 'elementor-pro' ),
'type' => Controls_Manager::COLOR,
'global' => [
'default' => Global_Colors::COLOR_SECONDARY,
],
'selectors' => [
'{{WRAPPER}} .elementor-price-table__period' => 'color: {{VALUE}}',
],
'condition' => [
'period!' => '',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'period_typography',
'selector' => '{{WRAPPER}} .elementor-price-table__period',
'global' => [
'default' => Global_Typography::TYPOGRAPHY_SECONDARY,
],
'condition' => [
'period!' => '',
],
]
);
$this->add_control(
'period_position',
[
'label' => esc_html__( 'Position', 'elementor-pro' ),
'type' => Controls_Manager::SELECT,
'label_block' => false,
'options' => [
'below' => esc_html__( 'Below', 'elementor-pro' ),
'beside' => esc_html__( 'Beside', 'elementor-pro' ),
],
'default' => 'below',
'condition' => [
'period!' => '',
],
]
);
$this->end_controls_section();
$this->start_controls_section(
'section_features_list_style',
[
'label' => esc_html__( 'Features', 'elementor-pro' ),
'tab' => Controls_Manager::TAB_STYLE,
'show_label' => false,
]
);
$this->add_control(
'features_list_bg_color',
[
'label' => esc_html__( 'Background Color', 'elementor-pro' ),
'type' => Controls_Manager::COLOR,
'separator' => 'before',
'selectors' => [
'{{WRAPPER}} .elementor-price-table__features-list' => 'background-color: {{VALUE}}',
],
]
);
$this->add_responsive_control(
'features_list_padding',
[
'label' => esc_html__( 'Padding', 'elementor-pro' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
'selectors' => [
'{{WRAPPER}} .elementor-price-table__features-list' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_control(
'features_list_color',
[
'label' => esc_html__( 'Color', 'elementor-pro' ),
'type' => Controls_Manager::COLOR,
'global' => [
'default' => Global_Colors::COLOR_TEXT,
],
'separator' => 'before',
'selectors' => [
'{{WRAPPER}} .elementor-price-table__features-list' => '--e-price-table-features-list-color: {{VALUE}}',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'features_list_typography',
'selector' => '{{WRAPPER}} .elementor-price-table__features-list li',
'global' => [
'default' => Global_Typography::TYPOGRAPHY_TEXT,
],
]
);
$this->add_control(
'features_list_alignment',
[
'label' => esc_html__( 'Alignment', 'elementor-pro' ),
'type' => Controls_Manager::CHOOSE,
'options' => [
'left' => [
'title' => esc_html__( 'Left', 'elementor-pro' ),
'icon' => 'eicon-text-align-left',
],
'center' => [
'title' => esc_html__( 'Center', 'elementor-pro' ),
'icon' => 'eicon-text-align-center',
],
'right' => [
'title' => esc_html__( 'Right', 'elementor-pro' ),
'icon' => 'eicon-text-align-right',
],
],
'selectors' => [
'{{WRAPPER}} .elementor-price-table__features-list' => 'text-align: {{VALUE}}',
],
]
);
$this->add_responsive_control(
'item_width',
[
'label' => esc_html__( 'Width', 'elementor-pro' ),
'type' => Controls_Manager::SLIDER,
'range' => [
'%' => [
'min' => 25,
'max' => 100,
],
],
'selectors' => [
'{{WRAPPER}} .elementor-price-table__feature-inner' => 'margin-left: calc((100% - {{SIZE}}%)/2); margin-right: calc((100% - {{SIZE}}%)/2)',
],
]
);
$this->add_control(
'list_divider',
[
'label' => esc_html__( 'Divider', 'elementor-pro' ),
'type' => Controls_Manager::SWITCHER,
'default' => 'yes',
'separator' => 'before',
]
);
$this->add_control(
'divider_style',
[
'label' => esc_html__( 'Style', 'elementor-pro' ),
'type' => Controls_Manager::SELECT,
'options' => [
'solid' => esc_html__( 'Solid', 'elementor-pro' ),
'double' => esc_html__( 'Double', 'elementor-pro' ),
'dotted' => esc_html__( 'Dotted', 'elementor-pro' ),
'dashed' => esc_html__( 'Dashed', 'elementor-pro' ),
],
'default' => 'solid',
'condition' => [
'list_divider' => 'yes',
],
'selectors' => [
'{{WRAPPER}} .elementor-price-table__features-list li:before' => 'border-top-style: {{VALUE}};',
],
]
);
$this->add_control(
'divider_color',
[
'label' => esc_html__( 'Color', 'elementor-pro' ),
'type' => Controls_Manager::COLOR,
'default' => '#ddd',
'global' => [
'default' => Global_Colors::COLOR_TEXT,
],
'condition' => [
'list_divider' => 'yes',
],
'selectors' => [
'{{WRAPPER}} .elementor-price-table__features-list li:before' => 'border-top-color: {{VALUE}};',
],
]
);
$this->add_control(
'divider_weight',
[
'label' => esc_html__( 'Weight', 'elementor-pro' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', 'em', 'rem', 'custom' ],
'default' => [
'size' => 2,
],
'range' => [
'px' => [
'min' => 1,
'max' => 10,
],
'em' => [
'max' => 1,
],
'rem' => [
'max' => 1,
],
],
'condition' => [
'list_divider' => 'yes',
],
'selectors' => [
'{{WRAPPER}} .elementor-price-table__features-list li:before' => 'border-top-width: {{SIZE}}{{UNIT}};',
],
]
);
$this->add_control(
'divider_width',
[
'label' => esc_html__( 'Width', 'elementor-pro' ),
'type' => Controls_Manager::SLIDER,
'condition' => [
'list_divider' => 'yes',
],
'selectors' => [
'{{WRAPPER}} .elementor-price-table__features-list li:before' => 'margin-left: calc((100% - {{SIZE}}%)/2); margin-right: calc((100% - {{SIZE}}%)/2)',
],
]
);
$this->add_control(
'divider_gap',
[
'label' => esc_html__( 'Gap', 'elementor-pro' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', 'em', 'rem', 'custom' ],
'default' => [
'size' => 15,
],
'range' => [
'px' => [
'min' => 1,
'max' => 50,
],
'em' => [
'max' => 5,
],
'rem' => [
'max' => 5,
],
],
'condition' => [
'list_divider' => 'yes',
],
'selectors' => [
'{{WRAPPER}} .elementor-price-table__features-list li:before' => 'margin-top: {{SIZE}}{{UNIT}}; margin-bottom: {{SIZE}}{{UNIT}}',
],
]
);
$this->end_controls_section();
$this->start_controls_section(
'section_footer_style',
[
'label' => esc_html__( 'Footer', 'elementor-pro' ),
'tab' => Controls_Manager::TAB_STYLE,
'show_label' => false,
]
);
$this->add_control(
'footer_bg_color',
[
'label' => esc_html__( 'Background Color', 'elementor-pro' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .elementor-price-table__footer' => 'background-color: {{VALUE}}',
],
]
);
$this->add_responsive_control(
'footer_padding',
[
'label' => esc_html__( 'Padding', 'elementor-pro' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
'selectors' => [
'{{WRAPPER}} .elementor-price-table__footer' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_control(
'heading_footer_button',
[
'label' => esc_html__( 'Button', 'elementor-pro' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
'condition' => [
'button_text!' => '',
],
]
);
$this->add_control(
'button_size',
[
'label' => esc_html__( 'Size', 'elementor-pro' ),
'type' => Controls_Manager::SELECT,
'default' => 'md',
'options' => [
'xs' => esc_html__( 'Extra Small', 'elementor-pro' ),
'sm' => esc_html__( 'Small', 'elementor-pro' ),
'md' => esc_html__( 'Medium', 'elementor-pro' ),
'lg' => esc_html__( 'Large', 'elementor-pro' ),
'xl' => esc_html__( 'Extra Large', 'elementor-pro' ),
],
'condition' => [
'button_text!' => '',
],
]
);
$this->start_controls_tabs( 'tabs_button_style' );
$this->start_controls_tab(
'tab_button_normal',
[
'label' => esc_html__( 'Normal', 'elementor-pro' ),
'condition' => [
'button_text!' => '',
],
]
);
$this->add_control(
'button_text_color',
[
'label' => esc_html__( 'Text Color', 'elementor-pro' ),
'type' => Controls_Manager::COLOR,
'default' => '',
'selectors' => [
'{{WRAPPER}} .elementor-price-table__button' => 'color: {{VALUE}};',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'button_typography',
'global' => [
'default' => Global_Typography::TYPOGRAPHY_ACCENT,
],
'selector' => '{{WRAPPER}} .elementor-price-table__button',
]
);
$this->add_group_control(
Group_Control_Background::get_type(),
[
'name' => 'button_background',
'types' => [ 'classic', 'gradient' ],
'exclude' => [ 'image' ],
'selector' => '{{WRAPPER}} .elementor-price-table__button',
'fields_options' => [
'background' => [
'default' => 'classic',
],
'color' => [
'global' => [
'default' => Global_Colors::COLOR_ACCENT,
],
],
],
]
);
$this->add_group_control(
Group_Control_Border::get_type(), [
'name' => 'button_border',
'selector' => '{{WRAPPER}} .elementor-price-table__button',
'separator' => 'before',
]
);
$this->add_control(
'button_border_radius',
[
'label' => esc_html__( 'Border Radius', 'elementor-pro' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
'selectors' => [
'{{WRAPPER}} .elementor-price-table__button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_control(
'button_text_padding',
[
'label' => esc_html__( 'Text Padding', 'elementor-pro' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
'selectors' => [
'{{WRAPPER}} .elementor-price-table__button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->end_controls_tab();
$this->start_controls_tab(
'tab_button_hover',
[
'label' => esc_html__( 'Hover', 'elementor-pro' ),
'condition' => [
'button_text!' => '',
],
]
);
$this->add_control(
'button_hover_color',
[
'label' => esc_html__( 'Text Color', 'elementor-pro' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .elementor-price-table__button:hover' => 'color: {{VALUE}};',
],
]
);
$this->add_group_control(
Group_Control_Background::get_type(),
[
'name' => 'button_background_hover',
'types' => [ 'classic', 'gradient' ],
'exclude' => [ 'image' ],
'selector' => '{{WRAPPER}} .elementor-price-table__button:hover',
'fields_options' => [
'background' => [
'default' => 'classic',
],
],
]
);
$this->add_control(
'button_hover_border_color',
[
'label' => esc_html__( 'Border Color', 'elementor-pro' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .elementor-price-table__button:hover' => 'border-color: {{VALUE}};',
],
]
);
$this->add_control(
'button_hover_animation',
[
'label' => esc_html__( 'Animation', 'elementor-pro' ),
'type' => Controls_Manager::HOVER_ANIMATION,
]
);
$this->end_controls_tab();
$this->end_controls_tabs();
$this->add_control(
'heading_additional_info',
[
'label' => esc_html__( 'Additional Info', 'elementor-pro' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
'condition' => [
'footer_additional_info!' => '',
],
]
);
$this->add_control(
'additional_info_color',
[
'label' => esc_html__( 'Color', 'elementor-pro' ),
'type' => Controls_Manager::COLOR,
'global' => [
'default' => Global_Colors::COLOR_TEXT,
],
'selectors' => [
'{{WRAPPER}} .elementor-price-table__additional_info' => 'color: {{VALUE}}',
],
'condition' => [
'footer_additional_info!' => '',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'additional_info_typography',
'selector' => '{{WRAPPER}} .elementor-price-table__additional_info',
'global' => [
'default' => Global_Typography::TYPOGRAPHY_TEXT,
],
'condition' => [
'footer_additional_info!' => '',
],
]
);
$this->add_control(
'additional_info_margin',
[
'label' => esc_html__( 'Margin', 'elementor-pro' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
'default' => [
'top' => 15,
'right' => 30,
'bottom' => 0,
'left' => 30,
'unit' => 'px',
],
'selectors' => [
'{{WRAPPER}} .elementor-price-table__additional_info' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}',
],
'condition' => [
'footer_additional_info!' => '',
],
]
);
$this->end_controls_section();
$this->start_controls_section(
'section_ribbon_style',
[
'label' => esc_html__( 'Ribbon', 'elementor-pro' ),
'tab' => Controls_Manager::TAB_STYLE,
'show_label' => false,
'condition' => [
'show_ribbon' => 'yes',
],
]
);
$this->add_control(
'ribbon_bg_color',
[
'label' => esc_html__( 'Background Color', 'elementor-pro' ),
'type' => Controls_Manager::COLOR,
'global' => [
'default' => Global_Colors::COLOR_ACCENT,
],
'selectors' => [
'{{WRAPPER}} .elementor-price-table__ribbon-inner' => 'background-color: {{VALUE}}',
],
]
);
$ribbon_distance_transform = is_rtl() ? 'translateY(-50%) translateX({{SIZE}}{{UNIT}}) rotate(-45deg)' : 'translateY(-50%) translateX(-50%) translateX({{SIZE}}{{UNIT}}) rotate(-45deg)';
$this->add_responsive_control(
'ribbon_distance',
[
'label' => esc_html__( 'Distance', 'elementor-pro' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', 'em', 'rem', 'custom' ],
'range' => [
'px' => [
'max' => 50,
],
'em' => [
'max' => 5,
],
'rem' => [
'max' => 5,
],
],
'selectors' => [
'{{WRAPPER}} .elementor-price-table__ribbon-inner' => 'margin-top: {{SIZE}}{{UNIT}}; transform: ' . $ribbon_distance_transform,
],
]
);
$this->add_control(
'ribbon_text_color',
[
'label' => esc_html__( 'Text Color', 'elementor-pro' ),
'type' => Controls_Manager::COLOR,
'default' => '#ffffff',
'separator' => 'before',
'selectors' => [
'{{WRAPPER}} .elementor-price-table__ribbon-inner' => 'color: {{VALUE}}',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'ribbon_typography',
'selector' => '{{WRAPPER}} .elementor-price-table__ribbon-inner',
'global' => [
'default' => Global_Typography::TYPOGRAPHY_ACCENT,
],
]
);
$this->add_group_control(
Group_Control_Box_Shadow::get_type(),
[
'name' => 'box_shadow',
'selector' => '{{WRAPPER}} .elementor-price-table__ribbon-inner',
]
);
$this->end_controls_section();
}
private function render_currency_symbol( $symbol, $location ) {
$currency_position = $this->get_settings( 'currency_position' );
$location_setting = ! empty( $currency_position ) ? $currency_position : 'before';
if ( ! empty( $symbol ) && $location === $location_setting ) {
echo '<span class="elementor-price-table__currency">' . esc_html( $symbol ) . '</span>';
}
}
private function get_currency_symbol( $symbol_name ) {
$symbols = [
'dollar' => '$',
'euro' => '€',
'franc' => '₣',
'pound' => '£',
'ruble' => '₽',
'shekel' => '₪',
'baht' => '฿',
'yen' => '¥',
'won' => '₩',
'guilder' => 'ƒ',
'peso' => '₱',
'peseta' => '₧',
'lira' => '₤',
'rupee' => '₨',
'indian_rupee' => '₹',
'real' => 'R$',
'krona' => 'kr',
];
return isset( $symbols[ $symbol_name ] ) ? $symbols[ $symbol_name ] : '';
}
protected function render() {
$settings = $this->get_settings_for_display();
$symbol = '';
if ( ! empty( $settings['currency_symbol'] ) ) {
if ( 'custom' !== $settings['currency_symbol'] ) {
$symbol = $this->get_currency_symbol( $settings['currency_symbol'] );
} else {
$symbol = $settings['currency_symbol_custom'];
}
}
$currency_format = empty( $settings['currency_format'] ) ? '.' : $settings['currency_format'];
$price = explode( $currency_format, $settings['price'] );
$intpart = $price[0];
$fraction = '';
if ( 2 === count( $price ) ) {
$fraction = $price[1];
}
$this->add_render_attribute( 'button_text', 'class', [
'elementor-price-table__button',
'elementor-button',
'elementor-size-' . $settings['button_size'],
] );
if ( ! empty( $settings['link']['url'] ) ) {
$this->add_link_attributes( 'button_text', $settings['link'] );
}
if ( ! empty( $settings['button_hover_animation'] ) ) {
$this->add_render_attribute( 'button_text', 'class', 'elementor-animation-' . $settings['button_hover_animation'] );
}
$this->add_render_attribute( 'heading', 'class', 'elementor-price-table__heading' );
$this->add_render_attribute( 'sub_heading', 'class', 'elementor-price-table__subheading' );
$this->add_render_attribute( 'period', 'class', [ 'elementor-price-table__period', 'elementor-typo-excluded' ] );
$this->add_render_attribute( 'footer_additional_info', 'class', 'elementor-price-table__additional_info' );
$this->add_render_attribute( 'ribbon_title', 'class', 'elementor-price-table__ribbon-inner' );
$this->add_inline_editing_attributes( 'heading', 'none' );
$this->add_inline_editing_attributes( 'sub_heading', 'none' );
$this->add_inline_editing_attributes( 'period', 'none' );
$this->add_inline_editing_attributes( 'footer_additional_info' );
$this->add_inline_editing_attributes( 'button_text' );
$this->add_inline_editing_attributes( 'ribbon_title' );
$period_position = $settings['period_position'];
$period_element = '<span ' . $this->get_render_attribute_string( 'period' ) . '>' . $settings['period'] . '</span>';
$heading_tag = Utils::validate_html_tag( $settings['heading_tag'] );
$migration_allowed = Icons_Manager::is_migration_allowed();
?>
<div class="elementor-price-table">
<?php if ( $settings['heading'] || $settings['sub_heading'] ) : ?>
<div class="elementor-price-table__header">
<?php if ( ! empty( $settings['heading'] ) ) : ?>
<<?php Utils::print_validated_html_tag( $heading_tag ); ?> <?php $this->print_render_attribute_string( 'heading' ); ?>>
<?php $this->print_unescaped_setting( 'heading' ); ?>
</<?php Utils::print_validated_html_tag( $heading_tag ); ?>>
<?php endif; ?>
<?php if ( ! empty( $settings['sub_heading'] ) ) : ?>
<span <?php $this->print_render_attribute_string( 'sub_heading' ); ?>>
<?php $this->print_unescaped_setting( 'sub_heading' ); ?>
</span>
<?php endif; ?>
</div>
<?php endif; ?>
<div class="elementor-price-table__price">
<?php if ( 'yes' === $settings['sale'] && ! empty( $settings['original_price'] ) ) : ?>
<div class="elementor-price-table__original-price elementor-typo-excluded">
<?php
$this->render_currency_symbol( $symbol, 'before' );
$this->print_unescaped_setting( 'original_price' );
$this->render_currency_symbol( $symbol, 'after' );
?>
</div>
<?php endif; ?>
<?php $this->render_currency_symbol( $symbol, 'before' ); ?>
<?php if ( ! empty( $intpart ) || 0 <= $intpart ) : ?>
<span class="elementor-price-table__integer-part">
<?php
// PHPCS - the main text of a widget should not be escaped.
echo $intpart; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
?>
</span>
<?php endif; ?>
<?php if ( '' !== $fraction || ( ! empty( $settings['period'] ) && 'beside' === $period_position ) ) : ?>
<div class="elementor-price-table__after-price">
<span class="elementor-price-table__fractional-part">
<?php
// PHPCS - the main text of a widget should not be escaped.
echo $fraction; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
?>
</span>
<?php if ( ! empty( $settings['period'] ) && 'beside' === $period_position ) : ?>
<?php
// PHPCS - already escaped before
echo $period_element; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
?>
<?php endif; ?>
</div>
<?php endif; ?>
<?php $this->render_currency_symbol( $symbol, 'after' ); ?>
<?php if ( ! empty( $settings['period'] ) && 'below' === $period_position ) : ?>
<?php
// PHPCS - already escaped before
echo $period_element; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
?>
<?php endif; ?>
</div>
<?php if ( ! empty( $settings['features_list'] ) ) : ?>
<ul class="elementor-price-table__features-list">
<?php
foreach ( $settings['features_list'] as $index => $item ) :
$repeater_setting_key = $this->get_repeater_setting_key( 'item_text', 'features_list', $index );
$this->add_inline_editing_attributes( $repeater_setting_key );
$migrated = isset( $item['__fa4_migrated']['selected_item_icon'] );
// add old default
if ( ! isset( $item['item_icon'] ) && ! $migration_allowed ) {
$item['item_icon'] = 'fa fa-check-circle';
}
$is_new = ! isset( $item['item_icon'] ) && $migration_allowed;
?>
<li class="elementor-repeater-item-<?php echo esc_attr( $item['_id'] ); ?>">
<div class="elementor-price-table__feature-inner">
<?php if ( ! empty( $item['item_icon'] ) || ! empty( $item['selected_item_icon'] ) ) :
if ( $is_new || $migrated ) :
Icons_Manager::render_icon( $item['selected_item_icon'], [ 'aria-hidden' => 'true' ] );
else : ?>
<i class="<?php echo esc_attr( $item['item_icon'] ); ?>" aria-hidden="true"></i>
<?php
endif;
endif; ?>
<?php if ( ! empty( $item['item_text'] ) ) : ?>
<span <?php $this->print_render_attribute_string( $repeater_setting_key ); ?>>
<?php $this->print_unescaped_setting( 'item_text', 'features_list', $index ); ?>
</span>
<?php
else :
echo ' ';
endif;
?>
</div>
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
<?php if ( ! empty( $settings['button_text'] ) || ! empty( $settings['footer_additional_info'] ) ) : ?>
<div class="elementor-price-table__footer">
<?php if ( ! empty( $settings['button_text'] ) ) : ?>
<a <?php $this->print_render_attribute_string( 'button_text' ); ?>>
<?php $this->print_unescaped_setting( 'button_text' ); ?>
</a>
<?php endif; ?>
<?php if ( ! empty( $settings['footer_additional_info'] ) ) : ?>
<div <?php $this->print_render_attribute_string( 'footer_additional_info' ); ?>>
<?php $this->print_unescaped_setting( 'footer_additional_info' ); ?>
</div>
<?php endif; ?>
</div>
<?php endif; ?>
</div>
<?php
if ( 'yes' === $settings['show_ribbon'] && ! empty( $settings['ribbon_title'] ) ) :
$this->add_render_attribute( 'ribbon-wrapper', 'class', 'elementor-price-table__ribbon' );
if ( ! empty( $settings['ribbon_horizontal_position'] ) ) :
$this->add_render_attribute( 'ribbon-wrapper', 'class', 'elementor-ribbon-' . $settings['ribbon_horizontal_position'] );
endif;
?>
<div <?php $this->print_render_attribute_string( 'ribbon-wrapper' ); ?>>
<div <?php $this->print_render_attribute_string( 'ribbon_title' ); ?>>
<?php $this->print_unescaped_setting( 'ribbon_title' ); ?>
</div>
</div>
<?php
endif;
}
/**
* Render Price Table widget output in the editor.
*
* Written as a Backbone JavaScript template and used to generate the live preview.
*
* @since 2.9.0
* @access protected
*/
protected function content_template() {
?>
<#
var symbols = {
dollar: '$',
euro: '€',
franc: '₣',
pound: '£',
ruble: '₽',
shekel: '₪',
baht: '฿',
yen: '¥',
won: '₩',
guilder: 'ƒ',
peso: '₱',
peseta: '₧',
lira: '₤',
rupee: '₨',
indian_rupee: '₹',
real: 'R$',
krona: 'kr'
};
var symbol = '',
iconsHTML = {};
if ( settings.currency_symbol ) {
if ( 'custom' !== settings.currency_symbol ) {
symbol = symbols[ settings.currency_symbol ] || '';
} else {
symbol = settings.currency_symbol_custom;
}
}
var buttonClasses = 'elementor-price-table__button elementor-button elementor-size-' + settings.button_size;
if ( settings.button_hover_animation ) {
buttonClasses += ' elementor-animation-' + settings.button_hover_animation;
}
view.addRenderAttribute( 'heading', 'class', 'elementor-price-table__heading' );
view.addRenderAttribute( 'sub_heading', 'class', 'elementor-price-table__subheading' );
view.addRenderAttribute( 'period', 'class', ['elementor-price-table__period', 'elementor-typo-excluded'] );
view.addRenderAttribute( 'footer_additional_info', 'class', 'elementor-price-table__additional_info' );
view.addRenderAttribute( 'button_text', 'class', buttonClasses );
view.addRenderAttribute( 'ribbon_title', 'class', 'elementor-price-table__ribbon-inner' );
view.addInlineEditingAttributes( 'heading', 'none' );
view.addInlineEditingAttributes( 'sub_heading', 'none' );
view.addInlineEditingAttributes( 'period', 'none' );
view.addInlineEditingAttributes( 'footer_additional_info' );
view.addInlineEditingAttributes( 'button_text' );
view.addInlineEditingAttributes( 'ribbon_title' );
var currencyFormat = settings.currency_format || '.',
price = settings.price.split( currencyFormat ),
intpart = price[0],
fraction = price[1],
periodElement = '<span ' + view.getRenderAttributeString( "period" ) + '>' + settings.period + '</span>';
#>
<div class="elementor-price-table">
<# if ( settings.heading || settings.sub_heading ) { #>
<div class="elementor-price-table__header">
<# if ( settings.heading ) { #>
<# var headingTag = elementor.helpers.validateHTMLTag( settings.heading_tag ) #>
<{{ headingTag }} {{{ view.getRenderAttributeString( 'heading' ) }}}>{{{ settings.heading }}}</{{ headingTag }}>
<# } #>
<# if ( settings.sub_heading ) { #>
<span {{{ view.getRenderAttributeString( 'sub_heading' ) }}}>{{{ settings.sub_heading }}}</span>
<# } #>
</div>
<# } #>
<div class="elementor-price-table__price">
<# if ( settings.sale && settings.original_price ) { #>
<div class="elementor-price-table__original-price elementor-typo-excluded">
<# if ( ! _.isEmpty( symbol ) && ( 'before' == settings.currency_position || _.isEmpty( settings.currency_position ) ) ) { #>
<span class="elementor-price-table__currency">{{{ symbol }}}</span>{{{ settings.original_price }}}
<# } #>
<#
/* The duplicate usage of the original price setting in the "if blocks" is to avoid whitespace between the number and the symbol. */
if ( _.isEmpty( symbol ) ) {
#>
{{{ settings.original_price }}}
<# } #>
<# if ( ! _.isEmpty( symbol ) && 'after' == settings.currency_position ) { #>
{{{ settings.original_price }}}<span class="elementor-price-table__currency">{{{ symbol }}}</span>
<# } #>
</div>
<# } #>
<# if ( ! _.isEmpty( symbol ) && ( 'before' == settings.currency_position || _.isEmpty( settings.currency_position ) ) ) { #>
<span class="elementor-price-table__currency elementor-currency--before">{{{ symbol }}}</span>
<# } #>
<# if ( intpart ) { #>
<span class="elementor-price-table__integer-part">{{{ intpart }}}</span>
<# } #>
<div class="elementor-price-table__after-price">
<# if ( fraction ) { #>
<span class="elementor-price-table__fractional-part">{{{ fraction }}}</span>
<# } #>
<# if ( settings.period && 'beside' === settings.period_position ) { #>
{{{ periodElement }}}
<# } #>
</div>
<# if ( ! _.isEmpty( symbol ) && 'after' == settings.currency_position ) { #>
<span class="elementor-price-table__currency elementor-currency--after">{{{ symbol }}}</span>
<# } #>
<# if ( settings.period && 'below' === settings.period_position ) { #>
{{{ periodElement }}}
<# } #>
</div>
<# if ( settings.features_list ) { #>
<ul class="elementor-price-table__features-list">
<# _.each( settings.features_list, function( item, index ) {
var featureKey = view.getRepeaterSettingKey( 'item_text', 'features_list', index ),
migrated = elementor.helpers.isIconMigrated( item, 'selected_item_icon' );
view.addInlineEditingAttributes( featureKey ); #>
<li class="elementor-repeater-item-{{ item._id }}">
<div class="elementor-price-table__feature-inner">
<# if ( item.item_icon || item.selected_item_icon ) {
iconsHTML[ index ] = elementor.helpers.renderIcon( view, item.selected_item_icon, { 'aria-hidden': 'true' }, 'i', 'object' );
if ( ( ! item.item_icon || migrated ) && iconsHTML[ index ] && iconsHTML[ index ].rendered ) { #>
{{{ iconsHTML[ index ].value }}}
<# } else { #>
<i class="{{ item.item_icon }}" aria-hidden="true"></i>
<# }
} #>
<# if ( ! _.isEmpty( item.item_text.trim() ) ) { #>
<span {{{ view.getRenderAttributeString( featureKey ) }}}>{{{ item.item_text }}}</span>
<# } else { #>
<# } #>
</div>
</li>
<# } ); #>
</ul>
<# } #>
<# if ( settings.button_text || settings.footer_additional_info ) { #>
<div class="elementor-price-table__footer">
<# if ( settings.button_text ) { #>
<a href="#" {{{ view.getRenderAttributeString( 'button_text' ) }}}>{{{ settings.button_text }}}</a>
<# } #>
<# if ( settings.footer_additional_info ) { #>
<p {{{ view.getRenderAttributeString( 'footer_additional_info' ) }}}>{{{ settings.footer_additional_info }}}</p>
<# } #>
</div>
<# } #>
</div>
<# if ( 'yes' === settings.show_ribbon && settings.ribbon_title ) {
var ribbonClasses = 'elementor-price-table__ribbon';
if ( settings.ribbon_horizontal_position ) {
ribbonClasses += ' elementor-ribbon-' + settings.ribbon_horizontal_position;
} #>
<div class="{{ ribbonClasses }}">
<div {{{ view.getRenderAttributeString( 'ribbon_title' ) }}}>{{{ settings.ribbon_title }}}</div>
</div>
<# } #>
<?php
}
public function get_group_name() {
return 'pricing';
}
}
Zerion Mini Shell 1.0