betterdocs / includes / Editors / Elementor / Widget / Basic / FAQ.php

FAQ.php in BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot 4.9.2, at includes/Editors/Elementor/Widget/Basic/FAQ.php

1,092 lines 38.0 KB

Raw Download Zip

1	<?php
2
3	namespace WPDeveloper\BetterDocs\Editors\Elementor\Widget\Basic;
4
5	use Elementor\Widget_Base;
6
7	// If this file is called directly, abort.
8	if ( ! defined( 'ABSPATH' ) ) {
9	exit;
10	}
11
12	use Elementor\Group_Control_Background;
13	use Elementor\Plugin as ElementorPlugin;
14	use Elementor\Controls_Manager;
15	use WPDeveloper\BetterDocs\Editors\Elementor\Helper;
16	use Elementor\Group_Control_Border;
17	use Elementor\Group_Control_Typography;
18	use WPDeveloper\BetterDocs\Editors\Elementor\BaseWidget;
19	use WPDeveloper\BetterDocs\FrontEnd\WooProductFAQ as WooFAQRenderer;
20
21	class FAQ extends BaseWidget {
22
23	public function get_name() {
24	return 'betterdocs-faq';
25	}
26
27	public function get_title() {
28	return __( 'BetterDocs FAQ', 'betterdocs' );
29	}
30
31	public function get_custom_help_url() {
32	return 'http://betterdocs.co/docs/betterdocs-faq-builder-in-elementor/';
33	}
34
35	public function get_icon() {
36	return 'betterdocs-icon-faq';
37	}
38
39	public function get_categories() {
40	return [ 'betterdocs-elements' ];
41	}
42
43	public function get_keywords() {
44	return [ 'betterdocs-elements', 'betterdocs', 'docs', 'faq', 'FAQ', 'betterdocs-faq' ];
45	}
46
47	public function get_style_depends() {
48	return [ 'betterdocs-faq' ];
49	}
50
51	protected function register_controls() {
52	$this->start_controls_section(
53	'faq_section_controls',
54	[
55	'label' => __( 'Layout Options', 'betterdocs' )
56	]
57	);
58
59	$this->add_control(
60	'faq_layout_selection',
61	[
62	'label' => __( 'Select Layout', 'betterdocs' ),
63	'type' => Controls_Manager::SELECT2,
64	'options' => [
65	'layout-3' => __( 'Abstract Layout', 'betterdocs' ),
66	'layout-1' => __( 'Modern Layout', 'betterdocs' ),
67	'layout-2' => __( 'Classic Layout', 'betterdocs' ),
68	'layout-4' => __( 'Tab Layout', 'betterdocs' )
69	],
70	'default' => 'layout-1',
71	'label_block' => true
72	]
73	);
74
75	if ( class_exists( 'WooCommerce' ) ) {
76	$this->add_control(
77	'faq_taxonomy',
78	[
79	'label' => __( 'FAQ Type', 'betterdocs' ),
80	'type' => Controls_Manager::SELECT,
81	'options' => [
82	'betterdocs_faq_category' => __( 'General FAQ', 'betterdocs' ),
83	'betterdocs_product_faq_category' => __( 'Product FAQ', 'betterdocs' ),
84	'product_assignments' => __( 'Product Assignments', 'betterdocs' ),
85	],
86	'default' => 'betterdocs_faq_category',
87	]
88	);
89
90	$this->add_control(
91	'faq_product_assignments_note',
92	[
93	'type' => Controls_Manager::RAW_HTML,
94	'raw' => __( 'Groups are resolved automatically per product: a per-product assignment is shown if set, otherwise the groups assigned to the product’s categories. Manage assignments on each group in FAQ Builder → WooCommerce → Product FAQ Groups.', 'betterdocs' ),
95	'content_classes' => 'elementor-control-field-description',
96	'condition' => [ 'faq_taxonomy' => 'product_assignments' ],
97	]
98	);
99	}
100
101	$this->add_control(
102	'faq_layout_section',
103	[
104	'label' => __( 'FAQ Section', 'betterdocs' ),
105	'type' => Controls_Manager::TEXT,
106	'dynamic' => [
107	'active' => true
108	],
109	'default' => __( 'Frequently Asked Questions', 'betterdocs' )
110	]
111	);
112
113	$this->add_control(
114	'faq_section_title_tag',
115	[
116	'label' => __( 'Section Title Tag', 'betterdocs' ),
117	'type' => Controls_Manager::SELECT,
118	'default' => 'h2',
119	'options' => [
120	'h1' => __( 'H1', 'betterdocs' ),
121	'h2' => __( 'H2', 'betterdocs' ),
122	'h3' => __( 'H3', 'betterdocs' ),
123	'h4' => __( 'H4', 'betterdocs' ),
124	'h5' => __( 'H5', 'betterdocs' ),
125	'h6' => __( 'H6', 'betterdocs' )
126	]
127	]
128	);
129
130	$this->add_control(
131	'faq_group_title_tag',
132	[
133	'label' => __( 'Group Title Tag', 'betterdocs' ),
134	'type' => Controls_Manager::SELECT,
135	'default' => 'h3',
136	'options' => [
137	'h1' => __( 'H1', 'betterdocs' ),
138	'h2' => __( 'H2', 'betterdocs' ),
139	'h3' => __( 'H3', 'betterdocs' ),
140	'h4' => __( 'H4', 'betterdocs' ),
141	'h5' => __( 'H5', 'betterdocs' ),
142	'h6' => __( 'H6', 'betterdocs' )
143	],
144	'condition' => [
145	'faq_layout_selection' => [ 'layout-1', 'layout-2', 'layout-3' ]
146	]
147	]
148	);
149
150	$terms = betterdocs()->container->get( Helper::class )->get_faq_terms();
151
152	// General FAQ include/exclude — shown always when WooCommerce is off,
153	// or conditioned on FAQ Type = General FAQ when WooCommerce is on.
154	$general_include_args = [
155	'label' => __( 'Include FAQ Groups', 'betterdocs' ),
156	'label_block' => true,
157	'type' => Controls_Manager::SELECT2,
158	'options' => $terms,
159	'multiple' => true,
160	'default' => '',
161	'select2options' => [
162	'placeholder' => __( 'Include FAQ Groups', 'betterdocs' ),
163	'allowClear' => true
164	]
165	];
166	$general_exclude_args = [
167	'label' => __( 'Exclude FAQ Groups', 'betterdocs' ),
168	'label_block' => true,
169	'type' => Controls_Manager::SELECT2,
170	'options' => $terms,
171	'multiple' => true,
172	'default' => '',
173	'select2options' => [
174	'placeholder' => __( 'Exclude FAQ Groups', 'betterdocs' ),
175	'allowClear' => true
176	]
177	];
178
179	if ( class_exists( 'WooCommerce' ) ) {
180	$general_include_args['condition'] = [ 'faq_taxonomy' => 'betterdocs_faq_category' ];
181	$general_exclude_args['condition'] = [ 'faq_taxonomy' => 'betterdocs_faq_category' ];
182	}
183
184	$this->add_control( 'select_specific_faq', $general_include_args );
185	$this->add_control( 'exclude_specific_faq', $general_exclude_args );
186
187	if ( class_exists( 'WooCommerce' ) ) {
188	$product_terms = betterdocs()->query->get_faq_terms( [], 'betterdocs_product_faq_category' );
189
190	$this->add_control(
191	'select_specific_product_faq',
192	[
193	'label' => __( 'Include Product FAQ Groups', 'betterdocs' ),
194	'label_block' => true,
195	'type' => Controls_Manager::SELECT2,
196	'options' => $product_terms,
197	'multiple' => true,
198	'default' => '',
199	'condition' => [ 'faq_taxonomy' => 'betterdocs_product_faq_category' ],
200	'select2options' => [
201	'placeholder' => __( 'Include Product FAQ Groups', 'betterdocs' ),
202	'allowClear' => true
203	]
204	]
205	);
206
207	$this->add_control(
208	'exclude_specific_product_faq',
209	[
210	'label' => __( 'Exclude Product FAQ Groups', 'betterdocs' ),
211	'label_block' => true,
212	'type' => Controls_Manager::SELECT2,
213	'options' => $product_terms,
214	'multiple' => true,
215	'default' => '',
216	'condition' => [ 'faq_taxonomy' => 'betterdocs_product_faq_category' ],
217	'select2options' => [
218	'placeholder' => __( 'Exclude Product FAQ Groups', 'betterdocs' ),
219	'allowClear' => true
220	]
221	]
222	);
223	}
224
225	$this->end_controls_section();
226
227	/**
228	* ----------------------------------------------------------
229	* Section: Container Section Settings
230	* ----------------------------------------------------------
231	*/
232	$this->start_controls_section(
233	'section_faq_container_section',
234	[
235	'label' => __( 'Container Section', 'betterdocs' ),
236	'tab' => Controls_Manager::TAB_STYLE,
237	]
238	);
239
240	$this->add_responsive_control(
241	'section_faq_container_section_padding',
242	[
243	'label' => __( 'Padding', 'betterdocs' ),
244	'type' => Controls_Manager::DIMENSIONS,
245	'size_units' => [ 'px', 'em', '%' ],
246	'selectors' => [
247	'{{WRAPPER}} .betterdocs-faq-wrapper' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
248	]
249	]
250	);
251
252	$this->add_responsive_control(
253	'section_faq_container_section_margin', // Legacy control id but new control
254	[
255	'label' => __( 'Margin', 'betterdocs' ),
256	'type' => Controls_Manager::DIMENSIONS,
257	'size_units' => [ 'px', '%', 'em' ],
258	'selectors' => [
259	'{{WRAPPER}} .betterdocs-faq-wrapper' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
260	]
261	]
262	);
263
264	$this->add_group_control(
265	Group_Control_Background::get_type(),
266	[
267	'name' => 'section_faq_container_section_background',
268	'types' => [ 'classic', 'gradient' ],
269	'selector' => '{{WRAPPER}} .betterdocs-faq-wrapper'
270	]
271	);
272
273	$this->end_controls_section();
274
275	/***** Common Section Style For Both Layouts *****/
276
277	$this->start_controls_section(
278	'faq_section_style',
279	[
280	'label' => __( 'FAQ Section Title', 'betterdocs' ),
281	'tab' => Controls_Manager::TAB_STYLE
282	]
283	);
284
285	$this->add_control(
286	'faq_layout_section_title_color',
287	[
288	'label' => esc_html__( 'Text Color', 'betterdocs' ),
289	'type' => Controls_Manager::COLOR,
290	'selectors' => [
291	'{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-section-title' => 'color:{{VALUE}};'
292	]
293	]
294	);
295
296	$this->add_group_control(
297	Group_Control_Typography::get_type(),
298	[
299	'name' => 'faq_layout_section_title_typography',
300	'selector' => '{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-section-title'
301	]
302	);
303
304	$this->end_controls_section();
305
306	$this->start_controls_section(
307	'faq_box_title_section',
308	[
309	'label' => __( 'FAQ Group Title', 'betterdocs' ),
310	'tab' => Controls_Manager::TAB_STYLE,
311	'condition' => [
312	'faq_layout_selection' => ['layout-1', 'layout-2', 'layout-3']
313	]
314	]
315	);
316
317	$this->add_control(
318	'faq_box_title_color',
319	[
320	'label' => esc_html__( 'Title Color', 'betterdocs' ),
321	'type' => Controls_Manager::COLOR,
322	'selectors' => [
323	'{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-title .betterdocs-faq-title-tag' => 'color:{{VALUE}};'
324	]
325	]
326	);
327
328	$this->add_control(
329	'faq_box_title_color_hover',
330	[
331	'label' => esc_html__( 'Title Hover Color', 'betterdocs' ),
332	'type' => Controls_Manager::COLOR,
333	'selectors' => [
334	'{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-title .betterdocs-faq-title-tag:hover' => 'color:{{VALUE}};'
335	]
336	]
337	);
338
339	$this->add_control(
340	'faq_box_title_background_color',
341	[
342	'label' => esc_html__( 'Background Color', 'betterdocs' ),
343	'type' => Controls_Manager::COLOR,
344	'selectors' => [
345	'{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-title' => 'background-color:{{VALUE}};'
346	]
347	]
348	);
349
350	$this->add_control(
351	'faq_box_title_background_color_hover',
352	[
353	'label' => esc_html__( 'Background Hover Color', 'betterdocs' ),
354	'type' => Controls_Manager::COLOR,
355	'selectors' => [
356	'{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-title:hover' => 'background-color:{{VALUE}};'
357	]
358	]
359	);
360
361	$this->add_group_control(
362	Group_Control_Typography::get_type(),
363	[
364	'name' => 'faq_box_title_typography',
365	'selector' => '{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-title .betterdocs-faq-title-tag'
366	]
367	);
368
369	$this->end_controls_section();
370
371	$this->start_controls_section(
372	'faq_box_title_section_layout_4',
373	[
374	'label' => __( 'FAQ Group Title', 'betterdocs' ),
375	'tab' => Controls_Manager::TAB_STYLE,
376	'condition' => [
377	'faq_layout_selection' => ['layout-4']
378	]
379	]
380	);
381
382	$this->add_control(
383	'faq_box_title_color_layout_4',
384	[
385	'label' => esc_html__( 'Title Color', 'betterdocs' ),
386	'type' => Controls_Manager::COLOR,
387	'selectors' => [
388	'{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-tab-wrapper .betterdocs-faq-tab .faq-tab-title, .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-list-wrapper .betterdocs-faq-tab .faq-tab-title' => 'color:{{VALUE}};'
389	]
390	]
391	);
392
393	$this->add_control(
394	'faq_box_title_color_hover_layout_4',
395	[
396	'label' => esc_html__( 'Title Hover Color', 'betterdocs' ),
397	'type' => Controls_Manager::COLOR,
398	'selectors' => [
399	'{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-tab-wrapper .betterdocs-faq-tab .faq-tab-title:hover' => 'color:{{VALUE}};',
400	'{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-list-wrapper .betterdocs-faq-tab .faq-tab-title:hover' => 'color:{{VALUE}};'
401	]
402	]
403	);
404
405	$this->add_control(
406	'faq_box_title_background_color_layout_4',
407	[
408	'label' => esc_html__( 'Background Color', 'betterdocs' ),
409	'type' => Controls_Manager::COLOR,
410	'selectors' => [
411	'{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-tab-wrapper .betterdocs-faq-tab' => 'background-color:{{VALUE}};',
412	'{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-list-wrapper .betterdocs-faq-tab' => 'background-color:{{VALUE}};'
413	]
414	]
415	);
416
417	$this->add_control(
418	'faq_box_title_background_color_hover_layout_4',
419	[
420	'label' => esc_html__( 'Background Hover Color', 'betterdocs' ),
421	'type' => Controls_Manager::COLOR,
422	'selectors' => [
423	'{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-tab-wrapper .betterdocs-faq-tab:hover' => 'background-color:{{VALUE}};',
424	'{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-list-wrapper .betterdocs-faq-tab:hover' => 'background-color:{{VALUE}};'
425	]
426	]
427	);
428
429	$this->add_control(
430	'faq_box_title_background_color_active_layout_4',
431	[
432	'label' => esc_html__( 'Active Background Color', 'betterdocs' ),
433	'type' => Controls_Manager::COLOR,
434	'selectors' => [
435	'{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-tab-wrapper .betterdocs-faq-tab.active' => 'background-color:{{VALUE}};',
436	'{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-list-wrapper .betterdocs-faq-tab.active' => 'background-color:{{VALUE}};'
437	]
438	]
439	);
440
441	$this->add_group_control(
442	Group_Control_Typography::get_type(),
443	[
444	'name' => 'faq_box_title_typography_layout_4',
445	'selector' => '{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-tab-wrapper .betterdocs-faq-tab .faq-tab-title, .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-list-wrapper .betterdocs-faq-tab .faq-tab-title'
446	]
447	);
448
449	$this->end_controls_section();
450
451	$this->start_controls_section(
452	'faq_box_style_section',
453	[
454	'label' => __( 'FAQ List', 'betterdocs' ),
455	'tab' => Controls_Manager::TAB_STYLE,
456	'condition' => [
457	'faq_layout_selection' => ['layout-1', 'layout-2', 'layout-3']
458	]
459	]
460	);
461
462	$this->add_responsive_control(
463	'faq_box_padding',
464	[
465	'label' => __( 'Padding', 'betterdocs' ),
466	'type' => Controls_Manager::DIMENSIONS,
467	'size_units' => [ 'px', '%', 'em' ],
468	'selectors' => [
469	'{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-post' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
470	]
471	]
472	);
473
474	$this->add_responsive_control(
475	'faq_box_margin',
476	[
477	'label' => __( 'Margin', 'betterdocs' ),
478	'type' => Controls_Manager::DIMENSIONS,
479	'size_units' => [ 'px', '%', 'em' ],
480	'selectors' => [
481	'{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
482	]
483	]
484	);
485
486	$this->add_group_control(
487	Group_Control_Typography::get_type(),
488	[
489	'name' => 'faq_box_typography',
490	'selector' => '{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-post .betterdocs-faq-post-name'
491	]
492	);
493
494	$this->add_control(
495	'faq_box_term_title_color',
496	[
497	'label' => esc_html__( 'Color', 'betterdocs' ),
498	'type' => Controls_Manager::COLOR,
499	'selectors' => [
500	'{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-post .betterdocs-faq-post-name' => 'color:{{VALUE}};'
501	]
502	]
503	);
504
505	$this->start_controls_tabs( 'faq_tabs' );
506
507	// Normal State Tab
508	$this->start_controls_tab(
509	'faq_box_normal',
510	[ 'label' => esc_html__( 'Normal', 'betterdocs' ) ]
511	);
512
513	$this->add_group_control(
514	Group_Control_Border::get_type(),
515	[
516	'name' => 'faq_box_border_normal',
517	'label' => esc_html__( 'Border', 'betterdocs' ),
518	'selector' => '{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-post'
519	]
520	);
521
522	$this->add_group_control(
523	Group_Control_Background::get_type(),
524	[
525	'name' => 'faq_box_background_normal',
526	'label' => esc_html__( 'Background', 'betterdocs' ),
527	'selector' => '{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-post'
528	]
529	);
530
531	$this->end_controls_tab();
532
533	// Hover State Tab
534	$this->start_controls_tab(
535	'faq_box_hover',
536	[ 'label' => esc_html__( 'Hover', 'betterdocs' ) ]
537	);
538
539	$this->add_group_control(
540	Group_Control_Border::get_type(),
541	[
542	'name' => 'faq_box_border_hover',
543	'label' => esc_html__( 'Border', 'betterdocs' ),
544	'selector' => '{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-post:hover'
545	]
546	);
547
548	$this->add_group_control(
549	Group_Control_Background::get_type(),
550	[
551	'name' => 'faq_box_background_hover',
552	'label' => esc_html__( 'Background', 'betterdocs' ),
553	'selector' => '{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-post:hover'
554	]
555	);
556
557	$this->end_controls_tab();
558
559	$this->end_controls_tabs();
560
561	$this->end_controls_section();
562
563	$this->start_controls_section(
564	'faq_box_style_section_layout_4',
565	[
566	'label' => __( 'FAQ List', 'betterdocs' ),
567	'tab' => Controls_Manager::TAB_STYLE,
568	'condition' => [
569	'faq_layout_selection' => ['layout-4']
570	]
571	]
572	);
573
574	$this->add_responsive_control(
575	'faq_box_padding_layout_4',
576	[
577	'label' => __( 'Padding', 'betterdocs' ),
578	'type' => Controls_Manager::DIMENSIONS,
579	'size_units' => [ 'px', '%', 'em' ],
580	'selectors' => [
581	'{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-list-wrapper .betterdocs-faq-list-content .betterdocs-faq-list li .betterdocs-faq-group' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
582	]
583	]
584	);
585
586	$this->add_responsive_control(
587	'faq_box_margin_layout_4',
588	[
589	'label' => __( 'Margin', 'betterdocs' ),
590	'type' => Controls_Manager::DIMENSIONS,
591	'size_units' => [ 'px', '%', 'em' ],
592	'selectors' => [
593	'{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-list-wrapper .betterdocs-faq-list-content .betterdocs-faq-list li .betterdocs-faq-group' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
594	]
595	]
596	);
597
598	$this->add_group_control(
599	Group_Control_Typography::get_type(),
600	[
601	'name' => 'faq_box_typography_layout_4',
602	'selector' => '{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-list-wrapper .betterdocs-faq-list-content .betterdocs-faq-list li .betterdocs-faq-group .betterdocs-faq-post .betterdocs-faq-post-name'
603	]
604	);
605
606	$this->add_control(
607	'faq_box_term_title_color_layout_4',
608	[
609	'label' => esc_html__( 'Color', 'betterdocs' ),
610	'type' => Controls_Manager::COLOR,
611	'selectors' => [
612	'{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-list-wrapper .betterdocs-faq-list-content .betterdocs-faq-list li .betterdocs-faq-group .betterdocs-faq-post .betterdocs-faq-post-name' => 'color:{{VALUE}};'
613	]
614	]
615	);
616
617	$this->start_controls_tabs( 'faq_tabs_layout_4' );
618
619	// Normal State Tab
620	$this->start_controls_tab(
621	'faq_box_normal_layout_4',
622	[ 'label' => esc_html__( 'Normal', 'betterdocs' ) ]
623	);
624
625	$this->add_group_control(
626	Group_Control_Border::get_type(),
627	[
628	'name' => 'faq_box_border_normal_layout_4',
629	'label' => esc_html__( 'Border', 'betterdocs' ),
630	'selector' => '{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-list-wrapper .betterdocs-faq-list-content .betterdocs-faq-list li .betterdocs-faq-group'
631	]
632	);
633
634	$this->add_group_control(
635	Group_Control_Background::get_type(),
636	[
637	'name' => 'faq_box_background_normal_layout_4',
638	'label' => esc_html__( 'Background', 'betterdocs' ),
639	'selector' => '{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-list-wrapper .betterdocs-faq-list-content .betterdocs-faq-list li .betterdocs-faq-group'
640	]
641	);
642
643	$this->end_controls_tab();
644
645	// Hover State Tab
646	$this->start_controls_tab(
647	'faq_box_hover_layout_4',
648	[ 'label' => esc_html__( 'Hover', 'betterdocs' ) ]
649	);
650
651	$this->add_group_control(
652	Group_Control_Border::get_type(),
653	[
654	'name' => 'faq_box_border_hover_layout_4',
655	'label' => esc_html__( 'Border', 'betterdocs' ),
656	'selector' => '{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-list-wrapper .betterdocs-faq-list-content .betterdocs-faq-list li .betterdocs-faq-group:hover'
657	]
658	);
659
660	$this->add_group_control(
661	Group_Control_Background::get_type(),
662	[
663	'name' => 'faq_box_background_hover_layout_4',
664	'label' => esc_html__( 'Background', 'betterdocs' ),
665	'selector' => '{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-list-wrapper .betterdocs-faq-list-content .betterdocs-faq-list li .betterdocs-faq-group:hover'
666	]
667	);
668
669	$this->end_controls_tab();
670
671	$this->end_controls_tabs();
672
673	$this->end_controls_section();
674
675	$this->start_controls_section(
676	'faq_box_content_section',
677	[
678	'label' => __( 'FAQ Content', 'betterdocs' ),
679	'tab' => Controls_Manager::TAB_STYLE,
680	'condition' => [
681	'faq_layout_selection' => ['layout-1', 'layout-2', 'layout-3']
682	]
683	]
684	);
685
686	$this->add_responsive_control(
687	'faq_box_content_section_padding',
688	[
689	'label' => __( 'Padding', 'betterdocs' ),
690	'type' => Controls_Manager::DIMENSIONS,
691	'size_units' => [ 'px', '%', 'em' ],
692	'selectors' => [
693	'{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-main-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
694	]
695	]
696	);
697
698	$this->add_responsive_control(
699	'faq_box_content_section_margin',
700	[
701	'label' => __( 'Margin', 'betterdocs' ),
702	'type' => Controls_Manager::DIMENSIONS,
703	'size_units' => [ 'px', '%', 'em' ],
704	'selectors' => [
705	'{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-main-content' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
706	]
707	]
708	);
709
710	$this->add_group_control(
711	Group_Control_Background::get_type(),
712	[
713	'name' => 'faq_box_content_section_background',
714	'label' => esc_html__( 'Background', 'betterdocs' ),
715	'selector' => '{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-main-content'
716	]
717	);
718
719	$this->add_group_control(
720	Group_Control_Typography::get_type(),
721	[
722	'name' => 'faq_box_content_section_typography',
723	'selector' => '{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-main-content'
724	]
725	);
726
727	$this->add_control(
728	'faq_box_content_section_color',
729	[
730	'label' => esc_html__( 'Color', 'betterdocs' ),
731	'type' => Controls_Manager::COLOR,
732	'selectors' => [
733	'{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-main-content' => 'color:{{VALUE}};'
734	]
735	]
736	);
737
738	$this->end_controls_section();
739
740	$this->start_controls_section(
741	'faq_box_content_section_layout_4',
742	[
743	'label' => __( 'FAQ Content', 'betterdocs' ),
744	'tab' => Controls_Manager::TAB_STYLE,
745	'condition' => [
746	'faq_layout_selection' => ['layout-4']
747	]
748	]
749	);
750
751	$this->add_responsive_control(
752	'faq_box_content_section_padding_layout_4',
753	[
754	'label' => __( 'Padding', 'betterdocs' ),
755	'type' => Controls_Manager::DIMENSIONS,
756	'size_units' => [ 'px', '%', 'em' ],
757	'selectors' => [
758	'{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-list-wrapper .betterdocs-faq-list-content .betterdocs-faq-list li .betterdocs-faq-group .betterdocs-faq-main-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
759	]
760	]
761	);
762
763	$this->add_responsive_control(
764	'faq_box_content_section_margin_layout_4',
765	[
766	'label' => __( 'Margin', 'betterdocs' ),
767	'type' => Controls_Manager::DIMENSIONS,
768	'size_units' => [ 'px', '%', 'em' ],
769	'selectors' => [
770	'{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-list-wrapper .betterdocs-faq-list-content .betterdocs-faq-list li .betterdocs-faq-group .betterdocs-faq-main-content' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
771	]
772	]
773	);
774
775	$this->add_group_control(
776	Group_Control_Background::get_type(),
777	[
778	'name' => 'faq_box_content_section_background_layout_4',
779	'label' => esc_html__( 'Background', 'betterdocs' ),
780	'selector' => '{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-list-wrapper .betterdocs-faq-list-content .betterdocs-faq-list li .betterdocs-faq-group.active'
781	]
782	);
783
784	$this->add_group_control(
785	Group_Control_Typography::get_type(),
786	[
787	'name' => 'faq_box_content_section_typography_layout_4',
788	'selector' => '{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-list-wrapper .betterdocs-faq-list-content .betterdocs-faq-list li .betterdocs-faq-group .betterdocs-faq-main-content'
789	]
790	);
791
792	$this->add_control(
793	'faq_box_content_section_color_layout_4',
794	[
795	'label' => esc_html__( 'Color', 'betterdocs' ),
796	'type' => Controls_Manager::COLOR,
797	'selectors' => [
798	'{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-list-wrapper .betterdocs-faq-list-content .betterdocs-faq-list li .betterdocs-faq-group .betterdocs-faq-main-content' => 'color:{{VALUE}};'
799	]
800	]
801	);
802
803	$this->end_controls_section();
804
805	$this->start_controls_section(
806	'faq_box_content_icon',
807	[
808	'label' => __( 'FAQ List Icon', 'betterdocs' ),
809	'tab' => Controls_Manager::TAB_STYLE,
810	'condition' => [
811	'faq_layout_selection' => ['layout-1', 'layout-2', 'layout-3']
812	]
813	]
814	);
815
816	$this->add_responsive_control(
817	'faq_box_content_icon_height',
818	[
819	'label' => esc_html__( 'Icon Height', 'betterdocs' ),
820	'type' => Controls_Manager::SLIDER,
821	'size_units' => [ 'px', '%', 'em' ],
822	'range' => [
823	'px' => [
824	'max' => 500
825	]
826	],
827	'selectors' => [
828	'{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-post .betterdocs-faq-iconplus' => 'height:{{SIZE}}{{UNIT}}; max-height: {{SIZE}}{{UNIT}};',
829	'{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-post .betterdocs-faq-iconminus' => 'height:{{SIZE}}{{UNIT}}; max-height: {{SIZE}}{{UNIT}};'
830	]
831	]
832	);
833
834	$this->add_responsive_control(
835	'faq_box_content_icon_width',
836	[
837	'label' => esc_html__( 'Icon Width', 'betterdocs' ),
838	'type' => Controls_Manager::SLIDER,
839	'size_units' => [ 'px', '%', 'em' ],
840	'range' => [
841	'px' => [
842	'max' => 500
843	]
844	],
845	'selectors' => [
846	'{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-post .betterdocs-faq-iconplus' => 'width:{{SIZE}}{{UNIT}}; max-width: {{SIZE}}{{UNIT}};',
847	'{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-post .betterdocs-faq-iconminus' => 'width:{{SIZE}}{{UNIT}}; max-width: {{SIZE}}{{UNIT}};'
848	]
849	]
850	);
851
852	$this->add_control(
853	'faq_box_content_icon_color',
854	[
855	'label' => esc_html__( 'Icon Color', 'betterdocs' ),
856	'type' => Controls_Manager::COLOR,
857	'selectors' => [
858	'{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-post .betterdocs-faq-iconplus path' => 'fill:{{VALUE}} ! important;',
859	'{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-post .betterdocs-faq-iconminus path' => 'fill:{{VALUE}} ! important;',
860	'{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-post .betterdocs-faq-iconplus g' => 'stroke:{{VALUE}} ! important;',
861	'{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-post .betterdocs-faq-iconminus g' => 'stroke:{{VALUE}} ! important;'
862	]
863	]
864	);
865
866	$this->end_controls_section();
867
868	$this->start_controls_section(
869	'faq_group_icon_layout_4',
870	[
871	'label' => __( 'FAQ Group Icon', 'betterdocs' ),
872	'tab' => Controls_Manager::TAB_STYLE,
873	'condition' => [
874	'faq_layout_selection' => ['layout-4']
875	]
876	]
877	);
878
879	$this->add_responsive_control(
880	'faq_box_content_icon_height_layout_4',
881	[
882	'label' => esc_html__( 'Icon Height', 'betterdocs' ),
883	'type' => Controls_Manager::SLIDER,
884	'size_units' => [ 'px', '%', 'em' ],
885	'range' => [
886	'px' => [
887	'max' => 500
888	]
889	],
890	'selectors' => [
891	'{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-tab-wrapper .betterdocs-faq-tab .faq-tab-icon svg' => 'height:{{SIZE}}{{UNIT}}; max-height: {{SIZE}}{{UNIT}};',
892	'{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-tab-wrapper .betterdocs-faq-tab img' => 'height:{{SIZE}}{{UNIT}}; max-height: {{SIZE}}{{UNIT}};',
893	]
894	]
895	);
896
897	$this->add_responsive_control(
898	'faq_box_content_icon_width_layout_4',
899	[
900	'label' => esc_html__( 'Icon Width', 'betterdocs' ),
901	'type' => Controls_Manager::SLIDER,
902	'size_units' => [ 'px', '%', 'em' ],
903	'range' => [
904	'px' => [
905	'max' => 500
906	]
907	],
908	'selectors' => [
909	'{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-tab-wrapper .betterdocs-faq-tab .faq-tab-icon svg' => 'width:{{SIZE}}{{UNIT}}; max-width: {{SIZE}}{{UNIT}};',
910	'{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-tab-wrapper .betterdocs-faq-tab img' => 'width:{{SIZE}}{{UNIT}}; max-width: {{SIZE}}{{UNIT}};'
911	]
912	]
913	);
914
915	$this->add_control(
916	'faq_box_content_icon_color_layout_4',
917	[
918	'label' => esc_html__( 'Icon Color', 'betterdocs' ),
919	'type' => Controls_Manager::COLOR,
920	'selectors' => [
921	'{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-tab-wrapper .betterdocs-faq-tab .faq-tab-icon svg g path' => 'fill:{{VALUE}} ! important;'
922	]
923	]
924	);
925
926	$this->end_controls_section();
927	}
928
929	protected function render_callback() {
930	$control_values = $this->get_settings_for_display();
931
932	$taxonomy = sanitize_key( $control_values['faq_taxonomy'] ?? 'betterdocs_faq_category' );
933
934	if ( $taxonomy === 'product_assignments' ) {
935	if ( ElementorPlugin::instance()->editor->is_edit_mode() ) {
936	// Editor preview: show all product FAQ terms so the layout can be styled.
937	betterdocs()->views->get(
938	'layouts/faq',
939	[
940	'enable' => true,
941	'have_posts' => true,
942	'layout' => $control_values['faq_layout_selection'],
943	'shortcode_attr' => [
944	'group_exclude' => '',
945	'groups' => '',
946	'class' => 'betterdocs-faq-' . $control_values['faq_layout_selection'],
947	'faq_heading' => $control_values['faq_layout_section'],
948	'faq_section_title_tag' => $control_values['faq_section_title_tag'],
949	'faq_group_title_tag' => $control_values['faq_group_title_tag'],
950	'faq_taxonomy' => 'betterdocs_product_faq_category',
951	]
952	]
953	);
954	$this->render_editor_script();
955	} else {
956	$this->render_product_assignments( $control_values['faq_layout_selection'] );
957	}
958
959	return;
960	}
961
962	if ( $taxonomy === 'betterdocs_product_faq_category' ) {
963	$specific_faqs = ! empty( $control_values['select_specific_product_faq'] ) ? implode( ',', $control_values['select_specific_product_faq'] ) : '';
964	$faqs_exclude = ! empty( $control_values['exclude_specific_product_faq'] ) ? implode( ',', $control_values['exclude_specific_product_faq'] ) : '';
965	} else {
966	$specific_faqs = ! empty( $control_values['select_specific_faq'] ) ? implode( ',', $control_values['select_specific_faq'] ) : '';
967	$faqs_exclude = ! empty( $control_values['exclude_specific_faq'] ) ? implode( ',', $control_values['exclude_specific_faq'] ) : '';
968	}
969
970	betterdocs()->views->get(
971	'layouts/faq',
972	[
973	'enable' => true,
974	'have_posts' => true,
975	'layout' => $control_values['faq_layout_selection'],
976	'shortcode_attr' => [
977	'group_exclude' => $faqs_exclude,
978	'class' => 'betterdocs-faq-' . $control_values['faq_layout_selection'],
979	'groups' => $specific_faqs,
980	'faq_heading' => $control_values['faq_layout_section'],
981	'faq_section_title_tag' => $control_values['faq_section_title_tag'],
982	'faq_group_title_tag' => $control_values['faq_group_title_tag'],
983	'faq_taxonomy' => $taxonomy
984	]
985	]
986	);
987
988	if ( ElementorPlugin::instance()->editor->is_edit_mode() ) {
989	$this->render_editor_script();
990	}
991	}
992
993	private function render_product_assignments( $layout ) {
994	if ( ! class_exists( 'WooCommerce' ) \|\| ! is_product() ) {
995	return;
996	}
997
998	// In theme-builder templates, the widget can render outside the loop,
999	// so get_the_ID() can be 0 — fall back to the queried product.
1000	$product_id = get_the_ID();
1001	if ( ! $product_id ) {
1002	$product_id = get_queried_object_id();
1003	}
1004	if ( ! $product_id ) {
1005	return;
1006	}
1007
1008	/** @var WooFAQRenderer $renderer */
1009	$renderer = betterdocs()->container->get( WooFAQRenderer::class );
1010
1011	// This widget is the explicit placement; don't also inject into the tab/summary.
1012	$renderer->suppress_auto_placement();
1013	$renderer->render_for_product( $product_id, $layout );
1014	}
1015
1016	protected function render_editor_script() {
1017	?>
1018	<script>
1019	jQuery(document).ready(function($) {
1020	const $tabs = $(".betterdocs-faq-tab");
1021	const $mobileTabs = $(".betterdocs-faq-list-wrapper .betterdocs-faq-tab");
1022	const $contents = $(".betterdocs-faq-list-content");
1023
1024	$tabs.on("click", function () {
1025	const termId = $(this).data("term-id");
1026
1027	// Remove active class from all tabs and hide all contents
1028	$tabs.removeClass("active");
1029	$contents.hide().removeClass("active");
1030
1031	// Reset all icons to default state
1032	$(".betterdocs-faq-iconplus").show();
1033	$(".betterdocs-faq-iconminus").hide();
1034
1035	// Add active class to the clicked tab and show the corresponding content
1036	$(this).addClass("active");
1037	$contents.filter(`[data-term-id="${termId}"]`).show().addClass("active");
1038
1039	// Toggle icons for the active tab
1040	$(this).find(".betterdocs-faq-iconplus").hide();
1041	$(this).find(".betterdocs-faq-iconminus").show();
1042	});
1043
1044	// Trigger click on the first tab to show the first content by default
1045	if ($tabs.length > 0) {
1046	$tabs.first().trigger("click").addClass("active");
1047
1048	const $mobileFirstTab = $mobileTabs.first();
1049	$mobileFirstTab.addClass("active");
1050	$mobileFirstTab.find(".betterdocs-faq-iconplus").hide();
1051	$mobileFirstTab.find(".betterdocs-faq-iconminus").show();
1052	}
1053
1054	$('.betterdocs-faq-post').on('click', function(e) {
1055	var current_node = $(this);
1056	var active_list = $('.betterdocs-faq-group.active');
1057
1058	if( ! current_node.parent().hasClass('active') ) {
1059	current_node.parent().addClass('active');
1060	current_node.children('svg').toggle();
1061	current_node.next().slideDown();
1062	}
1063
1064	for( let node of active_list ) {
1065	if( $(node).hasClass('active') ) {
1066	$(node).removeClass('active');
1067	$(node).children('.betterdocs-faq-post').children('svg').toggle();
1068	$(node).children('.betterdocs-faq-main-content').slideUp();
1069	}
1070	}
1071	});
1072
1073	$('.betterdocs-faq-post-layout-2').on('click', function(e) {
1074	var current_node = $(this);
1075
1076	if( ! current_node.parent().hasClass('active') ) {
1077	current_node.parent().addClass('active');
1078	current_node.children('.betterdocs-faq-post-layout-2-icon-group').children('svg').toggle();
1079	current_node.next().slideDown();
1080	} else {
1081	current_node.parent().removeClass('active');
1082	current_node.children('.betterdocs-faq-post-layout-2-icon-group').children('svg').toggle();
1083	current_node.next().slideUp();
1084	}
1085
1086	});
1087	});
1088	</script>
1089	<?php
1090	}
1091	}
1092