ultimate-store-kit / modules / brand-grid / widgets / brand-grid.php

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

542 lines 17.4 KB

Raw Download Zip

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