Skip to content

Commit c8e8cae

Browse files
mageprincemageprince
committed
#45 Add collapse all, expand all faq feature, code improvement
1 parent 6e396e5 commit c8e8cae

File tree

8 files changed

+154
-79
lines changed

8 files changed

+154
-79
lines changed

‎Block/Index/Index.php‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -295,4 +295,24 @@ public function getPageTypeAction()
295295
}
296296
return $pageType;
297297
}
298+
299+
/**
300+
* Check is faqs collapse expand enabled
301+
*
302+
* @return bool
303+
*/
304+
public function isCollapseExpandEnabled()
305+
{
306+
return $this->getConfig(DefaultConfig::CONFIG_PATH_IS_ENABLED_COLLAPSE_EXPAND);
307+
}
308+
309+
/**
310+
* Get ajax url
311+
*
312+
* @return string
313+
*/
314+
public function getAjaxUrl()
315+
{
316+
return $this->getUrl('faq/index/ajax');
317+
}
298318
}

‎Model/Config/DefaultConfig.php‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,4 +38,9 @@ class DefaultConfig
3838
* Faq url config path
3939
*/
4040
const FAQ_URL_CONFIG_PATH = 'faqtab/seo/faq_url';
41+
42+
/**
43+
* Is faqs collapse expand enabled config path
44+
*/
45+
const CONFIG_PATH_IS_ENABLED_COLLAPSE_EXPAND = 'faqtab/design/is_collapse_expand';
4146
}

‎etc/adminhtml/system.xml‎

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -30,23 +30,7 @@
3030
<label>Page Title</label>
3131
</field>
3232
</group>
33-
<group id="seo" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
34-
<label>Search Engine Optimization </label>
35-
<field id="faq_url" translate="label" sortOrder="10" type="text" showInDefault="1">
36-
<label>FAQ Url</label>
37-
<validate>required-entry validate-identifier</validate>
38-
</field>
39-
<field id="meta_title" translate="label" sortOrder="20" type="text" showInDefault="1" showInWebsite="1" showInStore="1">
40-
<label>Meta Title</label>
41-
</field>
42-
<field id="meta_keywords" translate="label" sortOrder="30" type="textarea" showInDefault="1" showInWebsite="1" showInStore="1">
43-
<label>Meta Keywords</label>
44-
</field>
45-
<field id="meta_description" translate="label" sortOrder="40" type="textarea" showInDefault="1" showInWebsite="1" showInStore="1">
46-
<label>Meta Description</label>
47-
</field>
48-
</group>
49-
<group id="design" translate="label" type="text" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">
33+
<group id="design" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
5034
<label>Design</label>
5135
<field id="page_type" translate="label" sortOrder="10" type="select" showInDefault="1" showInWebsite="1" showInStore="1">
5236
<label>Page Style</label>
@@ -71,6 +55,26 @@
7155
<label>Show Header Link</label>
7256
<source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
7357
</field>
58+
<field id="is_collapse_expand" translate="label" type="select" sortOrder="60" showInDefault="1" showInWebsite="1" showInStore="1">
59+
<label>Enable Collapse All Expand All</label>
60+
<source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
61+
</field>
62+
</group>
63+
<group id="seo" translate="label" type="text" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">
64+
<label>Search Engine Optimization </label>
65+
<field id="faq_url" translate="label" sortOrder="10" type="text" showInDefault="1">
66+
<label>FAQ Url</label>
67+
<validate>required-entry validate-identifier</validate>
68+
</field>
69+
<field id="meta_title" translate="label" sortOrder="20" type="text" showInDefault="1" showInWebsite="1" showInStore="1">
70+
<label>Meta Title</label>
71+
</field>
72+
<field id="meta_keywords" translate="label" sortOrder="30" type="textarea" showInDefault="1" showInWebsite="1" showInStore="1">
73+
<label>Meta Keywords</label>
74+
</field>
75+
<field id="meta_description" translate="label" sortOrder="40" type="textarea" showInDefault="1" showInWebsite="1" showInStore="1">
76+
<label>Meta Description</label>
77+
</field>
7478
</group>
7579
<group id="faq_info" translate="label" type="text" sortOrder="40" showInDefault="1" showInWebsite="1" showInStore="1">
7680
<label>Code for CMS Page and Static block</label>

‎etc/config.xml‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,16 @@
1919
</general>
2020
<seo>
2121
<faq_url>faq</faq_url>
22+
<meta_title>FAQ</meta_title>
2223
</seo>
2324
<design>
2425
<page_type>scroll</page_type>
2526
<showgroup>1</showgroup>
2627
<showgrouptitle>1</showgrouptitle>
2728
<footerlink>1</footerlink>
2829
<headerlink>1</headerlink>
30+
<is_collapse_expand>1</is_collapse_expand>
2931
</design>
3032
</faqtab>
3133
</default>
32-
</config>
34+
</config>

‎view/frontend/requirejs-config.js‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎view/frontend/templates/faq_main.phtml‎

Lines changed: 28 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -23,14 +23,14 @@
2323
<?php if ($block->isShowGroupTitle()): ?>
2424
<?php $groupData = $block->getGroupById($block->getGroupId()); ?>
2525
<div class="group-title">
26-
<?= /* @noEscape */ __($groupData->getGroupName()) ?>
26+
<?= $block->escapeHtml(__($groupData->getGroupName())) ?>
2727
</div>
2828
<?php endif; ?>
2929
<div class="faq-accordion">
3030
<?php $faqCollection = $block->getFaqCollection($block->getGroupId()); ?>
3131
<?php if ($faqCollection->getSize()): ?>
3232
<?php foreach ($faqCollection as $faq): ?>
33-
<h3><?= /* @noEscape */ __($faq->getTitle()) ?></h3>
33+
<h3><?= $block->escapeHtml(__($faq->getTitle())) ?></h3>
3434
<div>
3535
<p><?= /* @noEscape */ $block->filterOutputHtml($faq->getContent()); ?></p>
3636
</div>
@@ -45,46 +45,56 @@
4545
<div class="faq-group">
4646
<?php if ($block->isShowGroup() || $pageType == 'ajax'): ?>
4747
<div id="faq-group-image" class="faq-group-image">
48-
<a href="#group<?= /* @noEscape */ $group->getFaqGroupId(); ?>"
48+
<a href="#group<?= $block->escapeHtmlAttr($group->getFaqGroupId()); ?>"
4949
class="group-link"
50-
groupId="<?= /* @noEscape */ $group->getFaqGroupId(); ?>">
50+
groupId="<?= $block->escapeHtmlAttr($group->getFaqGroupId()); ?>">
5151
<?php if ($group->getIcon()): ?>
5252
<img class="group-image" alt="group-image"
53-
src="<?= /* @noEscape */ $block->getImageUrl($group->getIcon()); ?>" />
53+
src="<?= $block->escapeUrl($block->getImageUrl($group->getIcon())); ?>" />
5454
<?php else: ?>
5555
<img class="group-image" alt="group-image"
56-
src="<?= /* @noEscape */ $block->getViewFileUrl('Mageprince_Faq::images/faq.png'); ?>" />
56+
src="<?= $block->escapeUrl($block->getViewFileUrl('Mageprince_Faq::images/faq.png')); ?>" />
5757
<?php endif; ?>
5858
</a>
5959
</div>
6060
<?php endif; ?>
6161
<?php if ($block->isShowGroupTitle()): ?>
6262
<div class="faq-groupname">
63-
<a href="#group<?= /* @noEscape */ $group->getFaqGroupId(); ?>"
63+
<a href="#group<?= $block->escapeHtmlAttr($group->getFaqGroupId()); ?>"
6464
class="group-link"
65-
groupId="<?= /* @noEscape */ $group->getFaqGroupId(); ?>">
66-
<?= /* @noEscape */ $group->getGroupName(); ?>
65+
groupId="<?= $block->escapeHtmlAttr($group->getFaqGroupId()); ?>">
66+
<?= $block->escapeHtml($group->getGroupName()); ?>
6767
</a>
6868
</div>
6969
<?php endif; ?>
7070
</div>
7171
<?php endforeach; ?>
7272
</div>
7373
<?php endif; ?>
74+
<?php if ($block->isCollapseExpandEnabled()): ?>
75+
<div class="collspan-expand-block">
76+
<a href="#" id="collapse-faqs">
77+
<?= $block->escapeHtml(__('Collapse All')) ?>
78+
</a> |
79+
<a href="#" id="expand-faqs">
80+
<?= $block->escapeHtmlAttr(__('Expand All')) ?>
81+
</a>
82+
</div>
83+
<?php endif; ?>
7484
<div id="faq-content" class="faq-content">
7585
<?php if ($pageType == 'scroll'): ?>
7686
<?php foreach ($faqGroupCollection as $group): ?>
77-
<div id="group<?= /* @noEscape */ $group->getFaqGroupId(); ?>">
87+
<div id="group<?= $block->escapeHtmlAttr($group->getFaqGroupId()); ?>">
7888
<?php if ($block->isShowGroupTitle()): ?>
7989
<div class="group-title">
80-
<?= /* @noEscape */ $group->getGroupName(); ?>
90+
<?= $block->escapeHtml($group->getGroupName()); ?>
8191
</div>
8292
<?php endif; ?>
8393
<div class="faq-accordion">
8494
<?php $faqCollection = $block->getFaqCollection($group->getId()); ?>
8595
<?php if ($faqCollection->getSize()): ?>
8696
<?php foreach ($faqCollection as $faq): ?>
87-
<h3><?= /* @noEscape */ __($faq->getTitle()) ?></h3>
97+
<h3><?= $block->escapeHtml(__($faq->getTitle())) ?></h3>
8898
<div>
8999
<p>
90100
<?= /* @noEscape */ $block->filterOutputHtml($faq->getContent()); ?>
@@ -99,14 +109,14 @@
99109
<?php $group = $faqGroupCollection->getFirstItem(); ?>
100110
<?php if ($block->isShowGroupTitle()): ?>
101111
<div class="group-title" id="group<?= /* @noEscape */ $group->getFaqGroupId(); ?>">
102-
<?= /* @noEscape */ $group->getGroupName(); ?>
112+
<?= $block->escapeHtml($group->getGroupName()); ?>
103113
</div>
104114
<?php endif; ?>
105115
<div class="faq-accordion">
106116
<?php $faqCollection = $block->getFaqCollection($group->getId()); ?>
107117
<?php if ($faqCollection->getSize()): ?>
108118
<?php foreach ($faqCollection as $faq): ?>
109-
<h3><?= /* @noEscape */ __($faq->getTitle()) ?></h3>
119+
<h3><?= $block->escapeHtml(__($faq->getTitle())) ?></h3>
110120
<div>
111121
<p><?= /* @noEscape */ $block->filterOutputHtml($faq->getContent()); ?></p>
112122
</div>
@@ -120,16 +130,16 @@
120130
<script type="text/x-magento-init">
121131
{
122132
"*": {
123-
"faq": {
124-
"pageType" : "<?= /* @noEscape */ $pageType ?>",
125-
"ajax_url" : "<?= $block->escapeUrl($block->getBaseUrl()) ?>"
133+
"Mageprince_Faq/js/faq": {
134+
"page_type" : "<?= $block->escapeHtml($pageType) ?>",
135+
"ajax_url" : "<?= $block->escapeUrl($block->getAjaxUrl()) ?>"
126136
}
127137
}
128138
}
129139
</script>
130140
<?php else: ?>
131141
<div>
132-
<h1><?= /* @noEscape */ __('No FAQ Group available') ?></h1>
142+
<h1><?= $block->escapeHtml(__('No FAQ Group available')) ?></h1>
133143
</div>
134144
<?php endif; ?>
135145
<?php endif; ?>

‎view/frontend/web/css/source/_module.less‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -175,10 +175,17 @@
175175
content: '\f078';
176176
font-family: 'FontAwesome';
177177
}
178+
179+
.collspan-expand-block {
180+
float: right;
181+
}
178182
}
179-
#faq-loader {
180-
display: block;
181-
position: fixed;
183+
184+
.mageprince-faq-loader {
182185
left: 50%;
183186
top: 50%;
187+
position: fixed;
188+
width: 100%;
189+
height: 100%;
190+
z-index: 9999;
184191
}

‎view/frontend/web/js/faq.js‎

Lines changed: 67 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -4,54 +4,88 @@ define([
44
], function ($) {
55
'use strict';
66

7-
return function (config) {
7+
$.widget('mageprince.faq', {
8+
options: {
9+
faqCollectionSelector: '.mageprince-faq-collection',
10+
faqLoaderSelector: '.mageprince-faq-loader',
11+
groupLinkSelector: '.group-link',
12+
pageTypeScroll: 'scroll',
13+
uiAccordionContentSelector: '.ui-accordion-content',
14+
uiAccordionHeaderSelector: '.ui-accordion-header',
15+
faqAccordionSelector: '.faq-accordion',
16+
collapseFaqsSelector: '#collapse-faqs',
17+
expandFaqsSelector: '#expand-faqs'
18+
},
819

9-
setAccordian();
20+
_create: function() {
21+
this._bind();
22+
},
1023

11-
$('.mageprince-faq-collection').show();
12-
$('.mageprince-faq-loader').hide();
24+
_bind: function() {
25+
var self = this;
26+
self._setAccordian();
1327

14-
function setAccordian() {
15-
$(".faq-accordion").accordion({
28+
$(this.options.faqCollectionSelector).show();
29+
$(this.options.faqLoaderSelector).hide();
30+
31+
$(this.options.groupLinkSelector).on('click', function(event) {
32+
if (self.options.page_type == self.options.pageTypeScroll) {
33+
self._scrollToGroup(this);
34+
} else {
35+
event.preventDefault();
36+
var groupId = $(this).attr('groupid');
37+
var groupUrl = self.options.ajax_url;
38+
var currentElem = this;
39+
$.ajax({
40+
url: groupUrl,
41+
type: 'POST',
42+
dataType: 'json',
43+
showLoader: true,
44+
data: {
45+
groupId: groupId
46+
},
47+
complete: function(response) {
48+
$('#faq-content').html(response.responseJSON.faq);
49+
self._setAccordian();
50+
self._scrollToGroup(currentElem);
51+
}
52+
});
53+
}
54+
});
55+
56+
$(this.options.collapseFaqsSelector).on('click', function(e) {
57+
e.preventDefault();
58+
$(self.options.uiAccordionContentSelector).hide(100);
59+
$(self.options.uiAccordionHeaderSelector).removeClass('ui-state-active');
60+
$(self.options.uiAccordionHeaderSelector).removeClass('ui-accordion-header-active');
61+
});
62+
63+
$(this.options.expandFaqsSelector).on('click', function(e) {
64+
e.preventDefault();
65+
$(self.options.uiAccordionContentSelector).show(100);
66+
$(self.options.uiAccordionHeaderSelector).addClass('ui-state-active');
67+
$(self.options.uiAccordionHeaderSelector).addClass('ui-accordion-header-active');
68+
});
69+
},
70+
71+
_setAccordian: function() {
72+
$(this.options.faqAccordionSelector).accordion({
1673
collapsible: true,
1774
heightStyle: "content",
1875
active: '',
1976
animate: 500
2077
});
21-
}
78+
},
2279

23-
function scrollToGroup(data) {
80+
_scrollToGroup(data) {
2481
var target = $(data.getAttribute('href'));
2582
if(target.length) {
2683
$('html, body').stop().animate({
2784
scrollTop: target.offset().top
2885
}, 1000);
2986
}
3087
}
88+
});
3189

32-
$('.group-link').on('click', function(event) {
33-
if (config.pageType == 'scroll') {
34-
scrollToGroup(this);
35-
} else {
36-
var self = this;
37-
event.preventDefault();
38-
var groupId = $(this).attr('groupid');
39-
var groupUrl = config.ajax_url + 'faq/index/ajax';
40-
$.ajax({
41-
url: groupUrl,
42-
type: 'POST',
43-
dataType: 'json',
44-
showLoader: true,
45-
data: {
46-
groupId: groupId
47-
},
48-
complete: function(response) {
49-
$('#faq-content').html(response.responseJSON.faq);
50-
setAccordian();
51-
scrollToGroup(self);
52-
}
53-
});
54-
}
55-
});
56-
}
90+
return $.mageprince.faq;
5791
});

0 commit comments

Comments
 (0)