Skip to content

Commit

Permalink
#45 Add collapse all, expand all faq feature, code improvement
Browse files Browse the repository at this point in the history
  • Loading branch information
@mageprince
mageprince committed Jan 16, 2021
1 parent 6e396e5 commit c8e8cae
Show file tree
Hide file tree
Showing 8 changed files with 154 additions and 79 deletions.
20 changes: 20 additions & 0 deletions Block/Index/Index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -295,4 +295,24 @@ public function getPageTypeAction()
}
return $pageType;
}

/**
* Check is faqs collapse expand enabled
*
* @return bool
*/
public function isCollapseExpandEnabled()
{
return $this->getConfig(DefaultConfig::CONFIG_PATH_IS_ENABLED_COLLAPSE_EXPAND);
}

/**
* Get ajax url
*
* @return string
*/
public function getAjaxUrl()
{
return $this->getUrl('faq/index/ajax');
}
}
5 changes: 5 additions & 0 deletions Model/Config/DefaultConfig.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,4 +38,9 @@ class DefaultConfig
* Faq url config path
*/
const FAQ_URL_CONFIG_PATH = 'faqtab/seo/faq_url';

/**
* Is faqs collapse expand enabled config path
*/
const CONFIG_PATH_IS_ENABLED_COLLAPSE_EXPAND = 'faqtab/design/is_collapse_expand';
}
38 changes: 21 additions & 17 deletions etc/adminhtml/system.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,23 +30,7 @@
<label>Page Title</label>
</field>
</group>
<group id="seo" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Search Engine Optimization </label>
<field id="faq_url" translate="label" sortOrder="10" type="text" showInDefault="1">
<label>FAQ Url</label>
<validate>required-entry validate-identifier</validate>
</field>
<field id="meta_title" translate="label" sortOrder="20" type="text" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Meta Title</label>
</field>
<field id="meta_keywords" translate="label" sortOrder="30" type="textarea" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Meta Keywords</label>
</field>
<field id="meta_description" translate="label" sortOrder="40" type="textarea" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Meta Description</label>
</field>
</group>
<group id="design" translate="label" type="text" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">
<group id="design" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Design</label>
<field id="page_type" translate="label" sortOrder="10" type="select" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Page Style</label>
Expand All @@ -71,6 +55,26 @@
<label>Show Header Link</label>
<source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
</field>
<field id="is_collapse_expand" translate="label" type="select" sortOrder="60" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Enable Collapse All Expand All</label>
<source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
</field>
</group>
<group id="seo" translate="label" type="text" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Search Engine Optimization </label>
<field id="faq_url" translate="label" sortOrder="10" type="text" showInDefault="1">
<label>FAQ Url</label>
<validate>required-entry validate-identifier</validate>
</field>
<field id="meta_title" translate="label" sortOrder="20" type="text" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Meta Title</label>
</field>
<field id="meta_keywords" translate="label" sortOrder="30" type="textarea" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Meta Keywords</label>
</field>
<field id="meta_description" translate="label" sortOrder="40" type="textarea" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Meta Description</label>
</field>
</group>
<group id="faq_info" translate="label" type="text" sortOrder="40" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Code for CMS Page and Static block</label>
Expand Down
4 changes: 3 additions & 1 deletion etc/config.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,16 @@
</general>
<seo>
<faq_url>faq</faq_url>
<meta_title>FAQ</meta_title>
</seo>
<design>
<page_type>scroll</page_type>
<showgroup>1</showgroup>
<showgrouptitle>1</showgrouptitle>
<footerlink>1</footerlink>
<headerlink>1</headerlink>
<is_collapse_expand>1</is_collapse_expand>
</design>
</faqtab>
</default>
</config>
</config>
7 changes: 0 additions & 7 deletions view/frontend/requirejs-config.js
View file

This file was deleted.

46 changes: 28 additions & 18 deletions view/frontend/templates/faq_main.phtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,14 +23,14 @@
<?php if ($block->isShowGroupTitle()): ?>
<?php $groupData = $block->getGroupById($block->getGroupId()); ?>
<div class="group-title">
<?= /* @noEscape */ __($groupData->getGroupName()) ?>
<?= $block->escapeHtml(__($groupData->getGroupName())) ?>
</div>
<?php endif; ?>
<div class="faq-accordion">
<?php $faqCollection = $block->getFaqCollection($block->getGroupId()); ?>
<?php if ($faqCollection->getSize()): ?>
<?php foreach ($faqCollection as $faq): ?>
<h3><?= /* @noEscape */ __($faq->getTitle()) ?></h3>
<h3><?= $block->escapeHtml(__($faq->getTitle())) ?></h3>
<div>
<p><?= /* @noEscape */ $block->filterOutputHtml($faq->getContent()); ?></p>
</div>
Expand All @@ -45,46 +45,56 @@
<div class="faq-group">
<?php if ($block->isShowGroup() || $pageType == 'ajax'): ?>
<div id="faq-group-image" class="faq-group-image">
<a href="#group<?= /* @noEscape */ $group->getFaqGroupId(); ?>"
<a href="#group<?= $block->escapeHtmlAttr($group->getFaqGroupId()); ?>"
class="group-link"
groupId="<?= /* @noEscape */ $group->getFaqGroupId(); ?>">
groupId="<?= $block->escapeHtmlAttr($group->getFaqGroupId()); ?>">
<?php if ($group->getIcon()): ?>
<img class="group-image" alt="group-image"
src="<?= /* @noEscape */ $block->getImageUrl($group->getIcon()); ?>" />
src="<?= $block->escapeUrl($block->getImageUrl($group->getIcon())); ?>" />
<?php else: ?>
<img class="group-image" alt="group-image"
src="<?= /* @noEscape */ $block->getViewFileUrl('Mageprince_Faq::images/faq.png'); ?>" />
src="<?= $block->escapeUrl($block->getViewFileUrl('Mageprince_Faq::images/faq.png')); ?>" />
<?php endif; ?>
</a>
</div>
<?php endif; ?>
<?php if ($block->isShowGroupTitle()): ?>
<div class="faq-groupname">
<a href="#group<?= /* @noEscape */ $group->getFaqGroupId(); ?>"
<a href="#group<?= $block->escapeHtmlAttr($group->getFaqGroupId()); ?>"
class="group-link"
groupId="<?= /* @noEscape */ $group->getFaqGroupId(); ?>">
<?= /* @noEscape */ $group->getGroupName(); ?>
groupId="<?= $block->escapeHtmlAttr($group->getFaqGroupId()); ?>">
<?= $block->escapeHtml($group->getGroupName()); ?>
</a>
</div>
<?php endif; ?>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
<?php if ($block->isCollapseExpandEnabled()): ?>
<div class="collspan-expand-block">
<a href="#" id="collapse-faqs">
<?= $block->escapeHtml(__('Collapse All')) ?>
</a> |
<a href="#" id="expand-faqs">
<?= $block->escapeHtmlAttr(__('Expand All')) ?>
</a>
</div>
<?php endif; ?>
<div id="faq-content" class="faq-content">
<?php if ($pageType == 'scroll'): ?>
<?php foreach ($faqGroupCollection as $group): ?>
<div id="group<?= /* @noEscape */ $group->getFaqGroupId(); ?>">
<div id="group<?= $block->escapeHtmlAttr($group->getFaqGroupId()); ?>">
<?php if ($block->isShowGroupTitle()): ?>
<div class="group-title">
<?= /* @noEscape */ $group->getGroupName(); ?>
<?= $block->escapeHtml($group->getGroupName()); ?>
</div>
<?php endif; ?>
<div class="faq-accordion">
<?php $faqCollection = $block->getFaqCollection($group->getId()); ?>
<?php if ($faqCollection->getSize()): ?>
<?php foreach ($faqCollection as $faq): ?>
<h3><?= /* @noEscape */ __($faq->getTitle()) ?></h3>
<h3><?= $block->escapeHtml(__($faq->getTitle())) ?></h3>
<div>
<p>
<?= /* @noEscape */ $block->filterOutputHtml($faq->getContent()); ?>
Expand All @@ -99,14 +109,14 @@
<?php $group = $faqGroupCollection->getFirstItem(); ?>
<?php if ($block->isShowGroupTitle()): ?>
<div class="group-title" id="group<?= /* @noEscape */ $group->getFaqGroupId(); ?>">
<?= /* @noEscape */ $group->getGroupName(); ?>
<?= $block->escapeHtml($group->getGroupName()); ?>
</div>
<?php endif; ?>
<div class="faq-accordion">
<?php $faqCollection = $block->getFaqCollection($group->getId()); ?>
<?php if ($faqCollection->getSize()): ?>
<?php foreach ($faqCollection as $faq): ?>
<h3><?= /* @noEscape */ __($faq->getTitle()) ?></h3>
<h3><?= $block->escapeHtml(__($faq->getTitle())) ?></h3>
<div>
<p><?= /* @noEscape */ $block->filterOutputHtml($faq->getContent()); ?></p>
</div>
Expand All @@ -120,16 +130,16 @@
<script type="text/x-magento-init">
{
"*": {
"faq": {
"pageType" : "<?= /* @noEscape */ $pageType ?>",
"ajax_url" : "<?= $block->escapeUrl($block->getBaseUrl()) ?>"
"Mageprince_Faq/js/faq": {
"page_type" : "<?= $block->escapeHtml($pageType) ?>",
"ajax_url" : "<?= $block->escapeUrl($block->getAjaxUrl()) ?>"
}
}
}
</script>
<?php else: ?>
<div>
<h1><?= /* @noEscape */ __('No FAQ Group available') ?></h1>
<h1><?= $block->escapeHtml(__('No FAQ Group available')) ?></h1>
</div>
<?php endif; ?>
<?php endif; ?>
Expand Down
13 changes: 10 additions & 3 deletions view/frontend/web/css/source/_module.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -175,10 +175,17 @@
content: '\f078';
font-family: 'FontAwesome';
}

.collspan-expand-block {
float: right;
}
}
#faq-loader {
display: block;
position: fixed;

.mageprince-faq-loader {
left: 50%;
top: 50%;
position: fixed;
width: 100%;
height: 100%;
z-index: 9999;
}
100 changes: 67 additions & 33 deletions view/frontend/web/js/faq.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,54 +4,88 @@ define([
], function ($) {
'use strict';

return function (config) {
$.widget('mageprince.faq', {
options: {
faqCollectionSelector: '.mageprince-faq-collection',
faqLoaderSelector: '.mageprince-faq-loader',
groupLinkSelector: '.group-link',
pageTypeScroll: 'scroll',
uiAccordionContentSelector: '.ui-accordion-content',
uiAccordionHeaderSelector: '.ui-accordion-header',
faqAccordionSelector: '.faq-accordion',
collapseFaqsSelector: '#collapse-faqs',
expandFaqsSelector: '#expand-faqs'
},

setAccordian();
_create: function() {
this._bind();
},

$('.mageprince-faq-collection').show();
$('.mageprince-faq-loader').hide();
_bind: function() {
var self = this;
self._setAccordian();

function setAccordian() {
$(".faq-accordion").accordion({
$(this.options.faqCollectionSelector).show();
$(this.options.faqLoaderSelector).hide();

$(this.options.groupLinkSelector).on('click', function(event) {
if (self.options.page_type == self.options.pageTypeScroll) {
self._scrollToGroup(this);
} else {
event.preventDefault();
var groupId = $(this).attr('groupid');
var groupUrl = self.options.ajax_url;
var currentElem = this;
$.ajax({
url: groupUrl,
type: 'POST',
dataType: 'json',
showLoader: true,
data: {
groupId: groupId
},
complete: function(response) {
$('#faq-content').html(response.responseJSON.faq);
self._setAccordian();
self._scrollToGroup(currentElem);
}
});
}
});

$(this.options.collapseFaqsSelector).on('click', function(e) {
e.preventDefault();
$(self.options.uiAccordionContentSelector).hide(100);
$(self.options.uiAccordionHeaderSelector).removeClass('ui-state-active');
$(self.options.uiAccordionHeaderSelector).removeClass('ui-accordion-header-active');
});

$(this.options.expandFaqsSelector).on('click', function(e) {
e.preventDefault();
$(self.options.uiAccordionContentSelector).show(100);
$(self.options.uiAccordionHeaderSelector).addClass('ui-state-active');
$(self.options.uiAccordionHeaderSelector).addClass('ui-accordion-header-active');
});
},

_setAccordian: function() {
$(this.options.faqAccordionSelector).accordion({
collapsible: true,
heightStyle: "content",
active: '',
animate: 500
});
}
},

function scrollToGroup(data) {
_scrollToGroup(data) {
var target = $(data.getAttribute('href'));
if(target.length) {
$('html, body').stop().animate({
scrollTop: target.offset().top
}, 1000);
}
}
});

$('.group-link').on('click', function(event) {
if (config.pageType == 'scroll') {
scrollToGroup(this);
} else {
var self = this;
event.preventDefault();
var groupId = $(this).attr('groupid');
var groupUrl = config.ajax_url + 'faq/index/ajax';
$.ajax({
url: groupUrl,
type: 'POST',
dataType: 'json',
showLoader: true,
data: {
groupId: groupId
},
complete: function(response) {
$('#faq-content').html(response.responseJSON.faq);
setAccordian();
scrollToGroup(self);
}
});
}
});
}
return $.mageprince.faq;
});

0 comments on commit c8e8cae

Please sign in to comment.