Gecko [ www.garmin.alinaous.com ]

Name	Size	Permission
Cache	[ DIR ]	drwx---r-x
Install	[ DIR ]	drwx---r-x
WidgetCache.php	446 B	-rw----r--
WidgetCategoryBase.php	2.39 KB	-rw----r--
WidgetHelper.php	3.94 KB	-rw----r--
WidgetProductBase.php	14.85 KB	-rw----r--
WidgetTemplate.php	1.76 KB	-rw----r--
WidgetViewBase.php	32.68 KB	-rw----r--

Code Editor : WidgetViewBase.php

<?php
/**
 * Magentech Widgets
 *
 * @package   Magentech
 * @version   1.0.0
 * @author    Magentech.Com
 * @copyright Copyright Ⓒ Since 2011 magentech.Com <@email:support@magentech.Com>
 * @license   You only can use the module, nothing more!
 */

namespace Magentech\Module\Spelements;

use Tools;
use Magentech\Module\Spelements\WidgetHelper;

abstract class WidgetViewBase extends \CE\WidgetBase
{
    public function addTitleControls($title = '')
    {
        $this->startControlsSection(
            'tabs_title',
            ['label' => WidgetHelper::getTrans()->trans('Widget Title', [], 'Modules.Spelements.Admin')]
        );

$this->addControl(
            'title',
            [
                'label'       => WidgetHelper::getTrans()->trans('Widget Title', [], 'Modules.Spelements.Admin'),
                'type'        => \CE\ControlsManager::TEXT,
                'dynamic'     => ['active' => true],
                'label_block' => true,
                'default'     => $title,
            ]
        );

$this->addControl(
            'section_title_color',
            [
                'label' => WidgetHelper::getTrans()->trans('Color', [], 'Modules.Spelements.Admin'),
                'type' => \CE\ControlsManager::COLOR,
                'default' => '#444444',
                'selectors' => [
                    '{{WRAPPER}} .module-title' => 'color: {{VALUE}};',
                    '{{WRAPPER}} .module-title span' => 'border-color: {{VALUE}};',
                ],
            ]
        );

$this->addGroupControl(
            \CE\GroupControlTypography::getType(),
            [
                'name'     => 'mod_title_typography',
                'label'    => WidgetHelper::getTrans()->trans('Title Typography', [], 'Modules.Spelements.Admin'),
                'selector' => '{{WRAPPER}} .module-title',
            ]
        );

$this->addControl(
            'title_padding',
            [
                'label' => WidgetHelper::getTrans()->trans('Title Padding', [], 'Modules.Spelements.Admin'),
                'type' => \CE\ControlsManager::DIMENSIONS,
                'size_units' => [ 'px', 'em', '%' ],
                'default' => [
                    'top' => 0,
                    'right' => 20,
                    'bottom' => 10,
                    'left' => 20,
                ],
                'selectors' => [
                    '{{WRAPPER}} .module-title span' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

$this->addControl(
            'title_margin_bottom',
            [
                'label' => WidgetHelper::getTrans()->trans('Titlte Margin', [], 'Modules.Spelements.Admin'),
                'type' => \CE\ControlsManager::DIMENSIONS,
                'default' => [
                    'top' => 0,
                    'right' => 0,
                    'bottom' => 20,
                    'left' => 0,
                ],
                'selectors' => [
                    '{{WRAPPER}} .module-title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

$this->addGroupControl(
            \CE\GroupControlBorder::getType(),
            [
                'name' => 'title_border',
                'label' => WidgetHelper::getTrans()->trans('Title Border', [], 'Modules.Spelements.Admin'),
                'selector' => '{{WRAPPER}} .module-title span',
            ]
        );

$this->addResponsiveControl(
            'title_align',
            [
                'label' => WidgetHelper::getTrans()->trans('Title Alignment', [], 'Modules.Spelements.Admin'),
                'type' => \CE\ControlsManager::CHOOSE,
                'options' => [
                    'left' => [
                        'title' => WidgetHelper::getTrans()->trans('Left', [], 'Modules.Spelements.Admin'),
                        'icon' => 'fa fa-align-left',
                    ],
                    'center' => [
                        'title' => WidgetHelper::getTrans()->trans('Center', [], 'Modules.Spelements.Admin'),
                        'icon' => 'fa fa-align-center',
                    ],
                    'right' => [
                        'title' => WidgetHelper::getTrans()->trans('Right', [], 'Modules.Spelements.Admin'),
                        'icon' => 'fa fa-align-right',
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .module-title' => 'text-align: {{VALUE}};',
                ],
            ]
        );

$this->endControlsSection();
    }

public function addCarouselControls($subtitle)
    {
        $this->startControlsSection(
            "section_title_$subtitle",
            ['label' => WidgetHelper::getTrans()->trans('Carousel Settings', [], 'Modules.Spelements.Admin')]
        );

$slides_to_show = range( 1, 10 );
        $slides_to_show = array_combine( $slides_to_show, $slides_to_show );

$this->addResponsiveControl(
            'slides_to_show',
            [
                'label'              => WidgetHelper::getTrans()->trans('Slides to Show', [], 'Modules.Spelements.Admin'),
                'type'               => \CE\ControlsManager::SELECT,
                'options'            => $slides_to_show,
                'default'            => 3,
                'frontend_available' => true,
            ]
        );

$this->addResponsiveControl(
            'slides_to_scroll',
            [
                'type'               => \CE\ControlsManager::SELECT,
                'label'              => WidgetHelper::getTrans()->trans('Slides to Scroll', [], 'Modules.Spelements.Admin'),
                'description'        => WidgetHelper::getTrans()->trans('Set how many slides are scrolled per swipe.', [], 'Modules.Spelements.Admin'),
                'options'            => $slides_to_show,
                'default'            => 1,
                'condition'          => ['slides_to_show!' => '1'],
                'frontend_available' => true,
            ]
        );

$this->addResponsiveControl(
            'slides_gap',
            [
                'label'              => WidgetHelper::getTrans()->trans('Slides Gap', [], 'Modules.Spelements.Admin'),
                'type'               => \CE\ControlsManager::NUMBER,
                'default'            => 30,
                'selectors' => [
                    '{{WRAPPER}} .slick-list' => 'margin-left:calc(-{{VALUE}}px / 2);margin-right:calc(-{{VALUE}}px / 2);',
                    '{{WRAPPER}} .slick-slide>*' => 'padding-left:calc({{VALUE}}px / 2);padding-right:calc({{VALUE}}px / 2);',
                ],
            ]
        );

$this->addControl(
            'navigation',
            [
                'label'              => WidgetHelper::getTrans()->trans('Navigation', [], 'Modules.Spelements.Admin'),
                'type'               => \CE\ControlsManager::SELECT,
                'default'            => 'arrows',
                'options'            => [
                    'both'   => WidgetHelper::getTrans()->trans('Arrows and Dots', [], 'Modules.Spelements.Admin'),
                    'arrows' => WidgetHelper::getTrans()->trans('Arrows', [], 'Modules.Spelements.Admin'),
                    'dots'   => WidgetHelper::getTrans()->trans('Dots', [], 'Modules.Spelements.Admin'),
                    'none'   => WidgetHelper::getTrans()->trans('None', [], 'Modules.Spelements.Admin'),
                ],
                'frontend_available' => true,
            ]
        );

$this->addControl(
            'pause_on_hover',
            [
                'label'              => WidgetHelper::getTrans()->trans('Pause on Hover', [], 'Modules.Spelements.Admin'),
                'type'               => \CE\ControlsManager::SELECT,
                'default'            => 'yes',
                'options'            => [
                    'yes' => WidgetHelper::getTrans()->trans('Yes', [], 'Modules.Spelements.Admin'),
                    'no'  => WidgetHelper::getTrans()->trans('No', [], 'Modules.Spelements.Admin'),
                ],
                'frontend_available' => true,
            ]
        );

$this->addControl(
            'autoplay',
            [
                'label'              => WidgetHelper::getTrans()->trans('Autoplay', [], 'Modules.Spelements.Admin'),
                'type'               => \CE\ControlsManager::SELECT,
                'default'            => 'yes',
                'options'            => [
                    'yes' => WidgetHelper::getTrans()->trans('Yes', [], 'Modules.Spelements.Admin'),
                    'no'  => WidgetHelper::getTrans()->trans('No', [], 'Modules.Spelements.Admin'),
                ],
                'frontend_available' => true,
            ]
        );

$this->addControl(
            'infinite',
            [
                'label'              => WidgetHelper::getTrans()->trans('Infinite Loop', [], 'Modules.Spelements.Admin'),
                'type'               => \CE\ControlsManager::SELECT,
                'default'            => 'yes',
                'options'            => [
                    'yes' => WidgetHelper::getTrans()->trans('Yes', [], 'Modules.Spelements.Admin'),
                    'no'  => WidgetHelper::getTrans()->trans('No', [], 'Modules.Spelements.Admin'),
                ],
                'frontend_available' => true,
            ]
        );

$this->addControl(
            'effect',
            [
                'label'              => WidgetHelper::getTrans()->trans('Effect', [], 'Modules.Spelements.Admin'),
                'type'               => \CE\ControlsManager::SELECT,
                'default'            => 'slide',
                'options'            => [
                    'slide' => WidgetHelper::getTrans()->trans('Slide', [], 'Modules.Spelements.Admin'),
                    'fade'  => WidgetHelper::getTrans()->trans('Fade', [], 'Modules.Spelements.Admin'),
                ],
                'condition'          => ['slides_to_show' => '1'],
                'frontend_available' => true,
            ]
        );

$this->addControl(
            'direction',
            [
                'label'              => WidgetHelper::getTrans()->trans('Direction', [], 'Modules.Spelements.Admin'),
                'type'               => \CE\ControlsManager::SELECT,
                'default'            => 'ltr',
                'options'            => [
                    'ltr' => WidgetHelper::getTrans()->trans('Left', [], 'Modules.Spelements.Admin'),
                    'rtl' => WidgetHelper::getTrans()->trans('Right', [], 'Modules.Spelements.Admin'),
                ],
                'frontend_available' => true,
            ]
        );

$this->addControl(
            'autoplay_speed',
            [
                'label'              => WidgetHelper::getTrans()->trans('Autoplay Speed', [], 'Modules.Spelements.Admin'),
                'type'               => \CE\ControlsManager::NUMBER,
                'default'            => 5000,
                'condition'          => ['autoplay' => 'yes'],
            ]
        );

$this->addControl(
            'speed1',
            [
                'label'              => WidgetHelper::getTrans()->trans('Animation Speed', [], 'Modules.Spelements.Admin'),
                'type'               => \CE\ControlsManager::NUMBER,
                'default'            => 500,
                'frontend_available' => true,
            ]
        );

$this->endControlsSection();

$this->startControlsSection(
            'section_style_navigation',
            [
                'label' => WidgetHelper::getTrans()->trans('Navigation', [], 'Modules.Spelements.Admin'),
                'tab' => \CE\ControlsManager::TAB_STYLE,
            ]
        );

$this->addControl(
            'heading_style_arrows',
            [
                'label' => WidgetHelper::getTrans()->trans('Arrows', [], 'Modules.Spelements.Admin'),
                'type' => \CE\ControlsManager::HEADING,
                'separator' => 'before',
            ]
        );

$this->addControl(
            'arrows_position',
            [
                'label' => WidgetHelper::getTrans()->trans('Arrows Position', [], 'Modules.Spelements.Admin'),
                'type' => \CE\ControlsManager::SELECT,
                'default' => 'inside',
                'options' => [
                    'inside' => WidgetHelper::getTrans()->trans('Inside', [], 'Modules.Spelements.Admin'),
                    'outside' => WidgetHelper::getTrans()->trans('Outside', [], 'Modules.Spelements.Admin'),
                ],
            ]
        );

$this->addControl(
            'arrows_size',
            [
                'label' => WidgetHelper::getTrans()->trans('Arrows Size', [], 'Modules.Spelements.Admin'),
                'type' => \CE\ControlsManager::SLIDER,
                'default' => [
                    'unit' => 'px',
                    'size' => 26,
                ],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 50,
                        'step' => 1,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .slick-slider .slick-prev:before, {{WRAPPER}} .slick-slider .slick-next:before, {{WRAPPER}} .sp-dailydeal-products-wrap .glide__arrow:before' => '-webkit-mask-size: {{SIZE}}px;mask-size: {{SIZE}}px;width:{{SIZE}}px;height:{{SIZE}}px;',
                    '{{WRAPPER}} .slick-slider .slick-prev, {{WRAPPER}} .slick-slider .slick-next, {{WRAPPER}} .sp-dailydeal-products-wrap .glide__arrow' => 'width:{{SIZE}}px;height:{{SIZE}}px;',
                ],
            ]
        );

$this->addControl(
            'arrows_padding',
            [
                'label' => WidgetHelper::getTrans()->trans('Arrows Padding', [], 'Modules.Spelements.Admin'),
                'type' => \CE\ControlsManager::DIMENSIONS,
                'size_units' => [ 'px', 'em', '%' ],
                'default' => [
                    'top' => 5,
                    'right' => 5,
                    'bottom' => 5,
                    'left' => 5,
                ],
                'selectors' => [
                    '{{WRAPPER}} .slick-slider .slick-arrow, {{WRAPPER}} .sp-dailydeal-products-wrap .glide__arrow' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

$this->addGroupControl(
            \CE\GroupControlBorder::getType(),
            [
                'name'     => 'arrows_border',
                'label'    => WidgetHelper::getTrans()->trans('Arrows Border', [], 'Modules.Spelements.Admin'),
                'selector' => '{{WRAPPER}} .slick-slider .slick-arrow, {{WRAPPER}} .sp-dailydeal-products-wrap .glide__arrow',
                'separator' => 'before',
            ]
        );

$this->addControl(
            'arrows_border_radius',
            [
                'label'      => WidgetHelper::getTrans()->trans('Arrows Border Radius', [], 'Modules.Spelements.Admin'),
                'type'       => \CE\ControlsManager::DIMENSIONS,
                'size_units' => ['px', '%', 'em'],
                'default' => [
                    'unit' => '%',
                    'top' => 50,
                    'right' => 50,
                    'bottom' => 50,
                    'left' => 50,
                ],
                'selectors'  => [
                    '{{WRAPPER}} .slick-slider .slick-arrow, {{WRAPPER}} .sp-dailydeal-products-wrap .glide__arrow' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

$this->addControl(
            'arrows_space',
            [
                'label' => WidgetHelper::getTrans()->trans('Arrows Horizontal Position', [], 'Modules.Spelements.Admin'),
                'type' => \CE\ControlsManager::SLIDER,
                'range' => [
                    'px' => [
                        'min' => -100,
                        'max' => 100,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 25,
                ],
                'selectors' => [
                    '{{WRAPPER}} .elementor-slick-slider .slick-slider .slick-prev, {{WRAPPER}} .sp-dailydeal-products-wrap .glide__arrow--left' => 'left:{{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .elementor-slick-slider .slick-slider .slick-next, {{WRAPPER}} .sp-dailydeal-products-wrap .glide__arrow--right' => 'right:{{SIZE}}{{UNIT}};',
                ],
            ]
        );

$this->addControl(
            'arrows_vertical_space',
            [
                'label' => WidgetHelper::getTrans()->trans('Arrows Vertical Position', [], 'Modules.Spelements.Admin'),
                'type' => \CE\ControlsManager::SLIDER,
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 100,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 50,
                ],
                'selectors' => [
                    '{{WRAPPER}} .elementor-slick-slider .slick-slider .slick-arrow, {{WRAPPER}} .sp-dailydeal-products-wrap .glide__arrow' => 'top:{{SIZE}}%;',
                ],
            ]
        );

$this->addControl(
            'arrows_color',
            [
                'label' => WidgetHelper::getTrans()->trans('Arrows Color', [], 'Modules.Spelements.Admin'),
                'type' => \CE\ControlsManager::COLOR,
                'default' => '#444444',
                'selectors' => [
                    '{{WRAPPER}} .slick-slider .slick-prev:before, {{WRAPPER}} .slick-slider .slick-next:before, {{WRAPPER}} .sp-dailydeal-products-wrap .glide__arrow:before' => 'background-color: {{VALUE}};',
                ],
            ]
        );

$this->addControl(
            'arrows_bg_color',
            [
                'label' => WidgetHelper::getTrans()->trans('Background Color', [], 'Modules.Spelements.Admin'),
                'type' => \CE\ControlsManager::COLOR,
                'default' => '#ffffff',
                'selectors' => [
                    '{{WRAPPER}} .slick-slider .slick-prev, {{WRAPPER}} .slick-slider .slick-next, {{WRAPPER}} .sp-dailydeal-products-wrap .glide__arrow' => 'background-color: {{VALUE}};',
                ],
            ]
        );

$this->addControl(
            'nav_style_dots',
            [
                'label' => WidgetHelper::getTrans()->trans('Dots', [], 'Modules.Spelements.Admin'),
                'type' => \CE\ControlsManager::HEADING,
                'separator' => 'before',
            ]
        );

$this->addControl(
            'nav_position',
            [
                'label' => WidgetHelper::getTrans()->trans('Dots Position', [], 'Modules.Spelements.Admin'),
                'type' => \CE\ControlsManager::SLIDER,
                'range' => [
                    'px' => [
                        'min' => -60,
                        'max' => 60,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 0,
                ],
                'selectors' => [
                    '{{WRAPPER}} .slick-slider ul.slick-dots' => 'bottom: {{SIZE}}{{UNIT}} !important;',
                ],
            ]
        );

$this->addControl(
            'nav_size',
            [
                'label' => WidgetHelper::getTrans()->trans('Dots Size', [], 'Modules.Spelements.Admin'),
                'type' => \CE\ControlsManager::SLIDER,
                'default' => [
                    'unit' => 'px',
                    'size' => 10,
                ],
                'range' => [
                    'px' => [
                        'min' => 5,
                        'max' => 30,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .slick-slider ul.slick-dots button' => 'width: {{SIZE}}{{UNIT}};height: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

$this->addControl(
            'nav_space',
            [
                'label' => WidgetHelper::getTrans()->trans('Dots Space', [], 'Modules.Spelements.Admin'),
                'type' => \CE\ControlsManager::SLIDER,
                'default' => [
                    'unit' => 'px',
                    'size' => 10,
                ],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 50,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .slick-slider ul.slick-dots li' => 'margin:0 {{SIZE}}{{UNIT}};',
                ],
            ]
        );

$this->addControl(
            'nav_color',
            [
                'label' => WidgetHelper::getTrans()->trans('Dots Color', [], 'Modules.Spelements.Admin'),
                'type' => \CE\ControlsManager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .slick-slider ul.slick-dots li button' => 'background-color: {{VALUE}};',
                ],
            ]
        );

$this->endControlsSection();
    }

public function addIsotopeControls($subtitle)
    {
        $this->startControlsSection(
            "isotope_title_$subtitle",
            ['label' => WidgetHelper::getTrans()->trans('Isotope Settings', [], 'Modules.Spelements.Admin')]
        );

$this->addControl(
            'isotope_number',
            [
                'type'    => \CE\ControlsManager::NUMBER,
                'label'   => WidgetHelper::getTrans()->trans('Products per Type/Category', [], 'Modules.Spelements.Admin'),
                'min'   => 1,
                'default' => 3,
            ]
        );

$this->addControl(
            'isotope_per_row',
            [
                'type'    => \CE\ControlsManager::NUMBER,
                'label'   => WidgetHelper::getTrans()->trans('Products per Row', [], 'Modules.Spelements.Admin'),
                'min'   => 1,
                'default' => 4,
                'selectors' => [
                    '{{WRAPPER}} .sp-ce-widget.sp-isotope .isotope > article' => 'width: calc(100% / {{VALUE}});',
                ],
            ]
        );

$this->addControl(
            'isotope_max_number',
            [
                'type'    => \CE\ControlsManager::NUMBER,
                'label'   => WidgetHelper::getTrans()->trans('Max Number of all Products', [], 'Modules.Spelements.Admin'),
                'min'   => 1,
                'default' => 8,
            ]
        );

$this->addControl(
            'isotope_column_gap',
            [
                'label' => WidgetHelper::getTrans()->trans('Isotope Column Gap', [], 'Modules.Spelements.Admin'),
                'type' => \CE\ControlsManager::NUMBER,
                'min' => 0,
                'default' => 25,
                'selectors' => [
                    '{{WRAPPER}} .sp-isotope .product-miniature .thumbnail-container' => 'margin-right: {{VALUE}}px;',
                ],
            ]
        );

$this->addControl(
            'isotope_row_gap',
            [
                'label' => WidgetHelper::getTrans()->trans('Isotope Row Gap', [], 'Modules.Spelements.Admin'),
                'type' => \CE\ControlsManager::NUMBER,
                'min' => 0,
                'default' => 50,
                'selectors' => [
                    '{{WRAPPER}} .sp-isotope .product-miniature' => 'margin-bottom: {{VALUE}}px;',
                ],
            ]
        );

$this->addControl(
            'isotope_unique',
            [
                'label' => WidgetHelper::getTrans()->trans('Remove Duplications', [], 'Modules.Spelements.Admin'),
                'type' => \CE\ControlsManager::SWITCHER,
                'default' => 'yes'
            ]
        );

$this->addControl(
            'isotope_shuffle',
            [
                'label' => WidgetHelper::getTrans()->trans('Shuffle Products', [], 'Modules.Spelements.Admin'),
                'type' => \CE\ControlsManager::SWITCHER,
                'default' => 'no'
            ]
        );

$this->endControlsSection();
    }

public function addGridControls($subtitle)
    {
        $this->startControlsSection(
            "grid_title_$subtitle",
            ['label' => WidgetHelper::getTrans()->trans('Grid Settings', [], 'Modules.Spelements.Admin')]
        );

$this->addResponsiveControl(
            'grid_per_row',
            [
                'type'    => \CE\ControlsManager::NUMBER,
                'label'   => WidgetHelper::getTrans()->trans('Items per Row', [], 'Modules.Spelements.Admin'),
                'min'   => 1,
                'default' => 4,
                'label_block' => true,
                'selectors' => [
                    '{{WRAPPER}} .sp-ce-widget.sp-grid' => 'grid-template-columns: repeat({{VALUE}}, 1fr);',
                ],
            ]
        );

$this->addResponsiveControl(
            'grid_column_gap',
            [
                'label' => WidgetHelper::getTrans()->trans('Items Column Gap', [], 'Modules.Spelements.Admin'),
                'type' => \CE\ControlsManager::NUMBER,
                'min' => 0,
                'label_block' => true,
                'default' => 20,
                'selectors' => [
                    '{{WRAPPER}} .sp-ce-widget.sp-grid' => 'grid-column-gap: {{VALUE}}px;',
                ],
            ]
        );

$this->addResponsiveControl(
            'grid_row_gap',
            [
                'label' => WidgetHelper::getTrans()->trans('Items Row Gap', [], 'Modules.Spelements.Admin'),
                'type' => \CE\ControlsManager::NUMBER,
                'min' => 0,
                'label_block' => true,
                'default' => 20,
                'selectors' => [
                    '{{WRAPPER}} .sp-ce-widget.sp-grid' => 'grid-row-gap: {{VALUE}}px;',
                ],
            ]
        );

$this->endControlsSection();
    }

public function addTabsControls($subtitle)
    {
        $this->startControlsSection(
            "tabs_title_$subtitle",
            ['label' => WidgetHelper::getTrans()->trans('Tabs Settings', [], 'Modules.Spelements.Admin')]
        );

$this->addControl(
            'tab_align',
            [
                'label' => WidgetHelper::getTrans()->trans('Tabs Alignment', [], 'Modules.Spelements.Admin'),
                'type' => \CE\ControlsManager::CHOOSE,
                'options' => [
                    'flex-start' => [
                        'title' => WidgetHelper::getTrans()->trans('Left', [], 'Modules.Spelements.Admin'),
                        'icon' => 'fa fa-align-left',
                    ],
                    'center' => [
                        'title' => WidgetHelper::getTrans()->trans('Center', [], 'Modules.Spelements.Admin'),
                        'icon' => 'fa fa-align-center',
                    ],
                    'flex-end' => [
                        'title' => WidgetHelper::getTrans()->trans('Right', [], 'Modules.Spelements.Admin'),
                        'icon' => 'fa fa-align-right',
                    ],
                ],
                'default' => 'center',
                'selectors' => [
                    '{{WRAPPER}} .sp-tabs .nav-tabs' => 'justify-content: {{VALUE}};',
                ],
            ]
        );

$this->addControl(
            'tabs_title_color',
            [
                'label' => WidgetHelper::getTrans()->trans('Color', [], 'Modules.Spelements.Admin'),
                'type' => \CE\ControlsManager::COLOR,
                'default' => '#999999',
                'selectors' => [
                    '{{WRAPPER}} .sp-tabs .nav-tabs a' => 'color: {{VALUE}};',
                ],
            ]
        );

$this->addControl(
            'tabs_title_color_hover',
            [
                'label' => WidgetHelper::getTrans()->trans('Hover/Active Color', [], 'Modules.Spelements.Admin'),
                'type' => \CE\ControlsManager::COLOR,
                'default' => '#444444',
                'selectors' => [
                    '{{WRAPPER}} .sp-products-tabs .sp-nav-tabs .nav-item:hover a, {{WRAPPER}} .sp-products-tabs .sp-nav-tabs .nav-item a.active' => 'color: {{VALUE}};',
                ],
            ]
        );

$this->addGroupControl(
            \CE\GroupControlTypography::getType(),
            [
                'name'     => 'tab_typography',
                'label'    => WidgetHelper::getTrans()->trans('Title Typography', [], 'Modules.Spelements.Admin'),
                'selector' => '{{WRAPPER}} .sp-tabs .nav-tabs',
            ]
        );

$this->addControl(
            'tabs_title_padding',
            [
                'label' => WidgetHelper::getTrans()->trans('Titles Padding', [], 'Modules.Spelements.Admin'),
                'type' => \CE\ControlsManager::DIMENSIONS,
                'size_units' => [ 'px', 'em', '%' ],
                'default' => [
                    'unit' => 'px',
                    'top' => 2,
                    'right' => 15,
                    'bottom' => 2,
                    'left' => 15,
                ],
                'selectors' => [
                    '{{WRAPPER}} .nav-item a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

$this->addControl(
            'tabs_title_margin',
            [
                'label' => WidgetHelper::getTrans()->trans('Titles Margin', [], 'Modules.Spelements.Admin'),
                'type' => \CE\ControlsManager::DIMENSIONS,
                'size_units' => [ 'px', 'em', '%' ],
                'default' => [
                    'unit' => 'px',
                    'top' => 0,
                    'right' => 10,
                    'bottom' => 0,
                    'left' => 0,
                ],
                'selectors' => [
                    '{{WRAPPER}} .nav-tabs' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    '{{WRAPPER}} .sp-products-tabs .sp-nav-tabs .nav-item' => 'padding: 0;',
                ],
            ]
        );

$this->addGroupControl(
            \CE\GroupControlBorder::getType(),
            [
                'name' => 'tabs_title_border',
                'label' => WidgetHelper::getTrans()->trans('Active Title Border', [], 'Modules.Spelements.Admin'),
                'selector' => '{{WRAPPER}} .sp-products-tabs .sp-nav-tabs .nav-link.active, {{WRAPPER}} .sp-products-tabs .sp-nav-tabs .nav-link:hover',
            ]
        );

$this->addControl(
            'tabs_number',
            [
                'type'    => \CE\ControlsManager::NUMBER,
                'label'   => WidgetHelper::getTrans()->trans('Products per Type/Category', [], 'Modules.Spelements.Admin'),
                'min'   => 1,
                'default' => 3,
                'separator' => 'before'
            ]
        );
		
		$tabs_per_row = range( 1, 10 );
        $tabs_per_row = array_combine( $tabs_per_row, $tabs_per_row );

$this->addResponsiveControl(
            'tabs_per_row',
            [
                'type'    => \CE\ControlsManager::SELECT,
                'label'   => WidgetHelper::getTrans()->trans('Products per Row', [], 'Modules.Spelements.Admin'),
                'options'            => $tabs_per_row,
                'default'            => 3,
                'frontend_available' => true,
                'selectors' => [
                    '{{WRAPPER}} .producttab-content .sp-grid' => 'grid-template-columns: repeat({{VALUE}}, 1fr);',
                ],
            ]
        );
		
        $this->addControl(
            'tabs_column_gap',
            [
                'label' => WidgetHelper::getTrans()->trans('Column Gap', [], 'Modules.Spelements.Admin'),
                'type' => \CE\ControlsManager::NUMBER,
                'min' => 0,
                'default' => 20,
                'selectors' => [
                    '{{WRAPPER}} .producttab-content.sp-grid' => 'grid-column-gap: {{VALUE}}px;',
                ],
            ]
        );

$this->addControl(
            'tabs_row_gap',
            [
                'label' => WidgetHelper::getTrans()->trans('Row Gap', [], 'Modules.Spelements.Admin'),
                'type' => \CE\ControlsManager::NUMBER,
                'min' => 0,
                'default' => 20,
                'selectors' => [
                    '{{WRAPPER}} .producttab-content.sp-grid' => 'grid-row-gap: {{VALUE}}px;',
                ],
            ]
        );

$this->endControlsSection();
    }
}

${this.title}

Code Editor : WidgetViewBase.php