PluginProbe
Ultimate Store Kit – Store Builder Addons for Elementor, WooCommerce Store Builder, EDD Store Builder / 1.5.2
Ultimate Store Kit – Store Builder Addons for Elementor, WooCommerce Store Builder, EDD Store Builder v1.5.2
3.1.4 3.0.8 3.0.9 3.1.0 3.1.2 3.1.3 3.0.7 3.0.5 3.0.4 3.0.3 3.0.2 trunk 1.5.0 1.5.1 1.5.2 1.6.1 1.6.2 1.6.3 1.6.4 2.0.0 2.0.1 2.0.2 2.0.3 2.0.4 2.0.5 All 93 releases
ultimate-store-kit / modules / brand-carousel / widgets / brand-carousel.php

brand-carousel.php in Ultimate Store Kit – Store Builder Addons for Elementor, WooCommerce Store Builder, EDD Store Builder 1.5.2, at modules/brand-carousel/widgets/brand-carousel.php

568 lines 15.3 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <?php
2
3 namespace UltimateStoreKit\Modules\BrandCarousel\Widgets;
4
5 use UltimateStoreKit\Base\Module_Base;
6 use Elementor\Group_Control_Css_Filter;
7 use Elementor\Repeater;
8 use Elementor\Controls_Manager;
9 use Elementor\Group_Control_Box_Shadow;
10 use Elementor\Group_Control_Image_Size;
11 use Elementor\Group_Control_Typography;
12 use Elementor\Group_Control_Text_Shadow;
13 use Elementor\Group_Control_Background;
14 use Elementor\Group_Control_Border;
15 use Elementor\Utils;
16
17 use UltimateStoreKit\traits\Global_Widget_Controls;
18 use UltimateStoreKit\traits\Global_Widget_Template;
19
20 if ( ! defined( 'ABSPATH' ) ) {
21 exit;
22 } // Exit if accessed directly
23
24 class Brand_Carousel extends Module_Base {
25 use Global_Widget_Controls;
26 use Global_Widget_Template;
27
28 public function get_name() {
29 return 'usk-brand-carousel';
30 }
31
32 public function get_title() {
33 return esc_html__( 'Brand Carousel', 'ultimate-store-kit' );
34 }
35
36 public function get_icon() {
37 return 'usk-widget-icon usk-icon-brand-carousel';
38 }
39
40 public function get_categories() {
41 return ['ultimate-store-kit'];
42 }
43
44 public function get_keywords() {
45 return [ 'brand', 'carousel', 'client', 'logo', 'showcase' ];
46 }
47
48 public function get_style_depends() {
49 if ( $this->usk_is_edit_mode() ) {
50 return [ 'usk-styles' ];
51 } else {
52 return [ 'ultimate-store-kit-font', 'usk-brand-carousel' ];
53 }
54 }
55
56 // public function get_custom_help_url() {
57 // return 'https://youtu.be/a_wJL950Kz4';
58 // }
59
60 protected function register_controls() {
61
62 $this->start_controls_section(
63 'section_layout',
64 [
65 'label' => __( 'Layout', 'ultimate-store-kit' ),
66 'tab' => Controls_Manager::TAB_CONTENT,
67 ]
68 );
69
70 $this->add_responsive_control(
71 'columns',
72 [
73 'label' => esc_html__('Columns', 'ultimate-store-kit'),
74 'type' => Controls_Manager::SELECT,
75 'default' => 3,
76 'tablet_default' => 2,
77 'mobile_default' => 1,
78 'options' => [
79 1 => '1',
80 2 => '2',
81 3 => '3',
82 4 => '4',
83 5 => '5',
84 6 => '6',
85 ],
86 ]
87 );
88
89 $this->add_responsive_control(
90 'items_gap',
91 [
92 'label' => esc_html__('Item Gap', 'ultimate-store-kit'),
93 'type' => Controls_Manager::SLIDER,
94 'default' => [
95 'size' => 30,
96 ],
97 'range' => [
98 'px' => [
99 'min' => 0,
100 'max' => 100,
101 ],
102 ],
103 'tablet_default' => [
104 'size' => 20,
105 ],
106 'mobile_default' => [
107 'size' => 20,
108 ],
109 ]
110 );
111
112 $this->add_responsive_control(
113 'alignment',
114 [
115 'label' => esc_html__('Alignment', 'ultimate-store-kit'),
116 'type' => Controls_Manager::CHOOSE,
117 'options' => [
118 'left' => [
119 'title' => esc_html__('Left', 'ultimate-store-kit'),
120 'icon' => 'eicon-h-align-left',
121 ],
122 'center' => [
123 'title' => esc_html__('Center', 'ultimate-store-kit'),
124 'icon' => 'eicon-h-align-center',
125 ],
126 'right' => [
127 'title' => esc_html__('Right', 'ultimate-store-kit'),
128 'icon' => 'eicon-h-align-right',
129 ],
130 ],
131 'selectors' => [
132 '{{WRAPPER}} .' . $this->get_name() . ' .usk-item .usk-item-box .usk-content' => 'text-align: {{VALUE}}',
133 ],
134 'render_type' => 'template'
135 ]
136 );
137
138 $this->end_controls_section();
139
140 $this->start_controls_section(
141 'usk_section_brands',
142 [
143 'label' => __( 'Brand Items', 'ultimate-store-kit' ),
144 'tab' => Controls_Manager::TAB_CONTENT,
145 ]
146 );
147
148 $repeater = new Repeater();
149
150 $repeater->add_control(
151 'image',
152 [
153 'label' => __( 'Brand Image', 'ultimate-store-kit' ),
154 'type' => Controls_Manager::MEDIA,
155 'default' => [
156 'url' => Utils::get_placeholder_image_src(),
157 ],
158 ]
159 );
160
161 $repeater->add_control(
162 'brand_name',
163 [
164 'label' => __( 'Brand Name', 'ultimate-store-kit' ),
165 'type' => Controls_Manager::TEXT,
166 'default' => __( 'Brand Name', 'ultimate-store-kit' ),
167 'label_block' => true,
168 'dynamic' => [ 'active' =>true ],
169 ]
170 );
171
172 $repeater->add_control(
173 'link',
174 [
175 'label' => __( 'Url', 'ultimate-store-kit' ),
176 'type' => Controls_Manager::URL,
177 'placeholder' => __( 'https://your-link.com', 'plugin-domain' ),
178 'show_external' => true,
179 'default' => [
180 'url' => '#',
181 'is_external' => true,
182 'nofollow' => true,
183 ],
184 'label_block' => true,
185 'dynamic' => [ 'active' =>true ],
186 ]
187 );
188
189 $this->add_control(
190 'brand_items',
191 [
192 'show_label' => false,
193 'type' => Controls_Manager::REPEATER,
194 'fields' => $repeater->get_controls(),
195 'title_field' => '{{{ name }}}',
196 'default' => [
197 [ 'image' => [ 'url' => Utils::get_placeholder_image_src() ] ],
198 [ 'image' => [ 'url' => Utils::get_placeholder_image_src() ] ],
199 [ 'image' => [ 'url' => Utils::get_placeholder_image_src() ] ],
200 [ 'image' => [ 'url' => Utils::get_placeholder_image_src() ] ],
201 [ 'image' => [ 'url' => Utils::get_placeholder_image_src() ] ],
202 [ 'image' => [ 'url' => Utils::get_placeholder_image_src() ] ],
203 [ 'image' => [ 'url' => Utils::get_placeholder_image_src() ] ],
204 [ 'image' => [ 'url' => Utils::get_placeholder_image_src() ] ],
205 ]
206 ]
207 );
208
209 $this->add_group_control(
210 Group_Control_Image_Size::get_type(),
211 [
212 'name' => 'thumbnail',
213 'default' => 'medium',
214 'separator' => 'before',
215 'exclude' => ['custom']
216 ]
217 );
218
219 $this->end_controls_section();
220
221 $this->register_global_controls_carousel_navigation();
222 $this->register_global_controls_carousel_settings();
223
224 //Style
225 $this->start_controls_section(
226 'section_style_items',
227 [
228 'label' => __( 'Items', 'ultimate-store-kit' ),
229 'tab' => Controls_Manager::TAB_STYLE,
230 ]
231 );
232
233 $this->start_controls_tabs( 'tabs_item_style' );
234
235 $this->start_controls_tab(
236 'tab_item_normal',
237 [
238 'label' => esc_html__( 'Normal', 'ultimate-store-kit' ),
239 ]
240 );
241
242 $this->add_group_control(
243 Group_Control_Background::get_type(),
244 [
245 'name' => 'item_background',
246 'selector' => '{{WRAPPER}} .usk-brand-carousel-item',
247 ]
248 );
249
250 $this->add_group_control(
251 Group_Control_Border::get_type(),
252 [
253 'name' => 'item_border',
254 'label' => esc_html__( 'Border', 'ultimate-store-kit' ),
255 'fields_options' => [
256 'border' => [
257 'default' => 'solid',
258 ],
259 'width' => [
260 'default' => [
261 'top' => '1',
262 'right' => '1',
263 'bottom' => '1',
264 'left' => '1',
265 'isLinked' => false,
266 ],
267 ],
268 'color' => [
269 'default' => '#dbdbdb',
270 ],
271 ],
272 'selector' => '{{WRAPPER}} .usk-brand-carousel-item',
273 'separator' => 'before',
274 ]
275 );
276
277 $this->add_responsive_control(
278 'item_border_radius',
279 [
280 'label' => esc_html__( 'Border Radius', 'ultimate-store-kit' ),
281 'type' => Controls_Manager::DIMENSIONS,
282 'size_units' => [ 'px', 'em', '%' ],
283 'selectors' => [
284 '{{WRAPPER}} .usk-brand-carousel-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
285 ],
286 ]
287 );
288
289 $this->add_responsive_control(
290 'item_padding',
291 [
292 'label' => esc_html__( 'Padding', 'ultimate-store-kit' ),
293 'type' => Controls_Manager::DIMENSIONS,
294 'size_units' => [ 'px', 'em', '%' ],
295 'selectors' => [
296 '{{WRAPPER}} .usk-brand-carousel-item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
297 ],
298 ]
299 );
300
301 $this->add_group_control(
302 Group_Control_Box_Shadow::get_type(),
303 [
304 'name' => 'item_box_shadow',
305 'selector' => '{{WRAPPER}} .usk-brand-carousel-item',
306 ]
307 );
308
309 $this->add_control(
310 'carousel_shadow_mode',
311 [
312 'label' => esc_html__( 'Shadow Mode', 'ultimate-store-kit' ),
313 'type' => Controls_Manager::SWITCHER,
314 'prefix_class' => 'usk-shadow-mode-',
315 'render_type' => 'template',
316 'separator' => 'before'
317 ]
318 );
319
320 $this->add_control(
321 'carousel_shadow_color',
322 [
323 'label' => esc_html__( 'Shadow Color', 'ultimate-store-kit' ),
324 'type' => Controls_Manager::COLOR,
325 'condition' => [
326 'carousel_shadow_mode' => 'yes',
327 ],
328 'selectors' => [
329 '{{WRAPPER}} .elementor-widget-container:before' => is_rtl() ? 'background: linear-gradient(to left, {{VALUE}} 5%,rgba(255,255,255,0) 100%);' : 'background: linear-gradient(to right, {{VALUE}} 5%,rgba(255,255,255,0) 100%);',
330 '{{WRAPPER}} .elementor-widget-container:after' => is_rtl() ? 'background: linear-gradient(to left, rgba(255,255,255,0) 0%, {{VALUE}} 95%);' : 'background: linear-gradient(to right, rgba(255,255,255,0) 0%, {{VALUE}} 95%);',
331 ],
332 ]
333 );
334
335 $this->add_responsive_control(
336 'item_match_padding',
337 [
338 'label' => __( 'Match Padding', 'ultimate-store-kit' ),
339 'description' => __( 'You have to add padding for matching overlaping normal/hover box shadow when you used Box Shadow option.', 'ultimate-store-kit' ),
340 'type' => Controls_Manager::SLIDER,
341 'range' => [
342 'px' => [
343 'min' => 0,
344 'step' => 1,
345 'max' => 50,
346 ]
347 ],
348 'default' => [
349 'size' => 10
350 ],
351 'selectors' => [
352 '{{WRAPPER}} .swiper-carousel' => 'padding: {{SIZE}}{{UNIT}}; margin: 0 -{{SIZE}}{{UNIT}};'
353 ],
354 ]
355 );
356
357 $this->add_control(
358 'image_heading',
359 [
360 'label' => __('IMAGE', 'ultimate-store-kit'),
361 'type' => Controls_Manager::HEADING,
362 'separator' => 'before'
363 ]
364 );
365
366 $this->add_responsive_control(
367 'brand_image_height',
368 [
369 'label' => __('Height', 'ultimate-store-kit'),
370 'type' => Controls_Manager::SLIDER,
371 'range' => [
372 'px' => [
373 'min' => 10,
374 'max' => 500,
375 ],
376 ],
377 'selectors' => [
378 '{{WRAPPER}} .usk-brand-carousel-img' => 'height: {{SIZE}}{{UNIT}};',
379 ],
380 ]
381 );
382
383 $this->add_responsive_control(
384 'brand_image_width',
385 [
386 'label' => __('Width', 'ultimate-store-kit'),
387 'type' => Controls_Manager::SLIDER,
388 'range' => [
389 'px' => [
390 'min' => 10,
391 'max' => 500,
392 ],
393 ],
394 'selectors' => [
395 '{{WRAPPER}} .usk-brand-carousel-img' => 'width: {{SIZE}}{{UNIT}};',
396 ],
397 ]
398 );
399
400 $this->add_control(
401 'brand_image_opaciry',
402 [
403 'label' => __('Opaciry', 'ultimate-store-kit'),
404 'type' => Controls_Manager::SLIDER,
405 'default' => [
406 'size' => 0.3,
407 ],
408 'range' => [
409 'px' => [
410 'min' => 0,
411 'max' => 1,
412 'step' => 0.1,
413 ],
414 ],
415 'selectors' => [
416 '{{WRAPPER}} .usk-brand-carousel-img' => 'opacity: {{SIZE}};',
417 ],
418 ]
419 );
420
421 $this->add_group_control(
422 Group_Control_Css_Filter::get_type(),
423 [
424 'name' => 'css_filters',
425 'selector' => '{{WRAPPER}} .usk-brand-carousel-img',
426 ]
427 );
428
429 $this->end_controls_tab();
430
431 $this->start_controls_tab(
432 'tab_item_hover',
433 [
434 'label' => esc_html__( 'Hover', 'ultimate-store-kit' ),
435 ]
436 );
437
438 $this->add_group_control(
439 Group_Control_Background::get_type(),
440 [
441 'name' => 'item_hover_background',
442 'selector' => '{{WRAPPER}} .usk-brand-carousel-item:hover',
443 ]
444 );
445
446 $this->add_control(
447 'item_hover_border_color',
448 [
449 'label' => esc_html__( 'Border Color', 'ultimate-store-kit' ),
450 'type' => Controls_Manager::COLOR,
451 'default' => '#2B2D42',
452 'condition' => [
453 'item_border_border!' => '',
454 ],
455 'selectors' => [
456 '{{WRAPPER}} .usk-brand-carousel-item:hover' => 'border-color: {{VALUE}};',
457 ],
458 'separator' => 'before'
459 ]
460 );
461
462 $this->add_group_control(
463 Group_Control_Box_Shadow::get_type(),
464 [
465 'name' => 'item_hover_box_shadow',
466 'selector' => '{{WRAPPER}} .usk-brand-carousel-item:hover',
467 ]
468 );
469
470 $this->add_control(
471 'image_heading_hover',
472 [
473 'label' => __('I M A G E', 'ultimate-store-kit'),
474 'type' => Controls_Manager::HEADING,
475 'separator' => 'before'
476 ]
477 );
478
479 $this->add_control(
480 'brand_image_opaciry_hover',
481 [
482 'label' => __('Opaciry', 'ultimate-store-kit'),
483 'type' => Controls_Manager::SLIDER,
484 'default' => [
485 'size' => 1,
486 ],
487 'range' => [
488 'px' => [
489 'min' => 0,
490 'max' => 1,
491 'step' => 0.1,
492 ],
493 ],
494 'selectors' => [
495 '{{WRAPPER}} .usk-brand-carousel-item:hover .usk-brand-carousel-img' => 'opacity: {{SIZE}};',
496 ],
497 ]
498 );
499
500 $this->add_group_control(
501 Group_Control_Css_Filter::get_type(),
502 [
503 'name' => 'css_filters_hover',
504 'selector' => '{{WRAPPER}} .usk-brand-carousel-item:hover .usk-brand-carousel-img',
505 ]
506 );
507
508 $this->end_controls_tab();
509
510 $this->end_controls_tabs();
511
512 $this->end_controls_section();
513
514 $this->register_global_controls_navigation_style();
515
516 }
517
518 public function render_loop_item() {
519 $settings = $this->get_settings_for_display();
520
521 if ( empty( $settings['brand_items'] ) ) {
522 return;
523 }
524
525 // $this->add_render_attribute( 'brand-carousel', 'class', 'usk-brand-carousel' );
526
527 ?>
528 <!-- <div <?php //$this->print_render_attribute_string( 'brand-carousel' ); ?>> -->
529 <?php foreach ( $settings['brand_items'] as $item ) :
530
531 $thumb_url = Group_Control_Image_Size::get_attachment_image_src($item['image']['id'], 'thumbnail', $settings);
532 if ( !$thumb_url ) {
533 $thumb_url = $item['image']['url'];
534 }
535
536 $this->add_render_attribute(
537 [
538 'link' => [
539 'href' => isset($item['link']['url']) && !empty($item['link']['url']) ? esc_url($item['link']['url']) : 'javascript:void(0);',
540 'target' => $item['link']['is_external'] ? '_blank' : '_self'
541 ]
542 ], '', '', true
543 );
544
545 $this->add_render_attribute('item-wrap', 'class', 'usk-brand-carousel-item', true);
546
547 ?>
548 <div class="swiper-slide">
549 <div <?php echo $this->get_render_attribute_string('item-wrap'); ?> title="<?php echo esc_html($item['brand_name']); ?>">
550 <img class="usk-brand-carousel-img" src="<?php echo esc_url($thumb_url); ?>" alt="<?php echo esc_html($item['brand_name']); ?>">
551 <?php
552 if ( !empty($item['link']['url']) ){
553 printf('<a %1$s title="%2$s"></a>',$this->get_render_attribute_string( 'link' ), wp_kses_post($item['brand_name'])); }?>
554 </div>
555 </div>
556
557 <?php endforeach; ?>
558 <!-- </div> -->
559 <?php
560 }
561
562 public function render() {
563 $this->register_global_template_carousel_header();
564 $this->render_loop_item();
565 $this->usk_register_global_template_carousel_footer();
566 }
567 }
568