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

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