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

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