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 3.1.4, at modules/brand-carousel/widgets/brand-carousel.php

592 lines 14.7 KB

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